/* ============================================================
   WE MAKE TREASURES — SHARED STYLES FOR SECONDARY PAGES
   Resources · Careers · News · Conference · White Label ·
   Policy · 404 · Password. Inherits all tokens + components.
   Weight cap: 600 — nothing heavier, anywhere.
   ============================================================ */

/* ---------- generic page hero (dark, blueprint grid) ---------- */
.page-hero { position: relative; background: var(--ink); color: var(--paper);
  overflow: hidden; border-bottom: 1px solid var(--line-d);
  padding: clamp(116px,15vh,176px) 0 clamp(40px,6vh,72px); }
.page-hero--coral { background: var(--coral); color: var(--ink); border-bottom-color: rgba(16,18,22,.2); }
.page-hero--mist { background: var(--mist); color: var(--ink); border-bottom-color: var(--line); }
.page-hero .grid-bg { position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: linear-gradient(180deg,#000,transparent 92%); }
.page-hero--mist .grid-bg { background-image: linear-gradient(rgba(16,18,22,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(16,18,22,.05) 1px, transparent 1px); }
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero .cs-crumb { padding-top: 0; padding-bottom: clamp(22px,3vw,38px); }
.page-hero--coral .cs-crumb, .page-hero--coral .cs-crumb a { color: rgba(16,18,22,.7); }
.page-hero--coral .cs-crumb .cur { color: var(--ink); }
.ph-eyebrow { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; color: var(--paper); }
.page-hero--mist .ph-eyebrow, .page-hero--coral .ph-eyebrow { color: var(--ink); }
.ph-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--coral); }
.page-hero--coral .ph-eyebrow::before { background: var(--ink); }
.ph-title { font-family: var(--sans); font-weight: 600; font-stretch: 80%;
  font-size: clamp(40px,7vw,104px); line-height: 0.92; letter-spacing: -0.025em;
  margin: clamp(16px,2vh,26px) 0 0; max-width: 18ch; text-wrap: balance; }
.ph-title--wide { font-stretch: 100%; font-size: clamp(34px,5.4vw,76px); letter-spacing: -0.02em; }
.ph-sub { font-size: clamp(17px,1.5vw,22px); line-height: 1.4; margin-top: var(--s5);
  max-width: 56ch; color: rgba(255,255,255,.82); text-wrap: pretty; }
.page-hero--mist .ph-sub, .page-hero--coral .ph-sub { color: rgba(16,18,22,.74); }
.ph-meta { display: flex; flex-wrap: wrap; gap: 8px var(--s6); margin-top: var(--s6);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--graphite-d); }
.page-hero--mist .ph-meta { color: var(--graphite); }
.ph-meta .coral { color: var(--coral); }

/* ---------- filter chips (visual) ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px,4vw,56px); }
.fpill { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 14px; border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer;
  transition: background .16s, color .16s, border-color .16s; background: transparent; }
.fpill:hover { border-color: var(--ink); }
.fpill.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.s--ink .fpill { border-color: var(--line-d-strong); color: var(--paper); }
.s--ink .fpill:hover { border-color: var(--paper); }
.s--ink .fpill.on { background: var(--coral); border-color: var(--coral); color: var(--ink); }

/* ---------- editorial card grid (Resources / News) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.s--ink .card-grid { background: var(--line-d); border-color: var(--line-d); }
.ecard { display: flex; flex-direction: column; background: var(--paper); padding: 0;
  text-decoration: none; color: inherit; transition: background .18s ease; }
.s--ink .ecard { background: var(--ink); }
.ecard:hover { background: var(--mist); }
.s--ink .ecard:hover { background: var(--ink-soft); }
.ecard .ec-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--mist-deep); }
.ecard .ec-media image-slot { display: block; width: 100%; height: 100%; }
.ecard .ec-media img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.16,.84,.3,1); }
.ecard:hover .ec-media img { transform: scale(1.05); }
.ecard .ec-body { padding: clamp(20px,2vw,30px); display: flex; flex-direction: column;
  gap: 12px; flex: 1; }
.ecard .ec-cat { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--coral); }
.ecard .ec-title { font-family: var(--sans); font-weight: 600; font-size: clamp(19px,1.6vw,24px);
  letter-spacing: -0.015em; line-height: 1.08; text-wrap: balance; transition: color .16s; }
.ecard:hover .ec-title { color: var(--coral); }
.ecard .ec-excerpt { font-size: 14.5px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.s--ink .ecard .ec-excerpt { color: var(--graphite-d); }
.ecard .ec-foot { margin-top: auto; padding-top: var(--s5);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--graphite); display: flex; justify-content: space-between; gap: 12px; }
.s--ink .ecard .ec-foot { color: var(--graphite-d); }
/* featured (first card spans two columns) */
.ecard--feat { grid-column: span 2; }
.ecard--feat .ec-media { aspect-ratio: 16/8; }
.ecard--feat .ec-title { font-size: clamp(24px,2.6vw,40px); }
@media (max-width: 920px){ .card-grid { grid-template-columns: repeat(2,1fr); } .ecard--feat { grid-column: span 2; } }
@media (max-width: 600px){ .card-grid { grid-template-columns: 1fr; } .ecard--feat { grid-column: span 1; } }

/* bare card grid — transparent fill, bordered cards, flush (collapsed borders, no gaps) */
.card-grid.card-grid--bare { background: transparent; border: 0; gap: 0;
  border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.card-grid--bare .ecard { background: transparent;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.card-grid--bare .ecard:hover { background: rgba(16,18,22,.03); }
.s--ink .card-grid--bare, .s--ink .card-grid--bare .ecard { border-color: var(--line-d); }
.s--ink .card-grid--bare .ecard:hover { background: rgba(255,255,255,.04); }

/* ---------- list rows (Careers roles / Conference events) ---------- */
.rows { border-top: 1px solid var(--line); }
.s--ink .rows { border-top-color: var(--line-d); }
.row { display: grid; align-items: center; gap: clamp(16px,2vw,40px);
  grid-template-columns: 1.6fr 1fr 1fr auto; padding: clamp(24px,2.6vw,40px) 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  transition: background .16s ease, padding-left .2s ease, padding-right .2s ease; }
.s--ink .row { border-bottom-color: var(--line-d); }
.row:hover { background: rgba(16,18,22,.03); padding-left: var(--s5); padding-right: var(--s5); }
.s--ink .row:hover { background: rgba(255,255,255,.04); }
.row .r-title { font-family: var(--sans); font-weight: 600; font-size: clamp(20px,2vw,30px);
  letter-spacing: -0.02em; line-height: 1.04; transition: color .16s; }
.row:hover .r-title { color: var(--coral); }
.row .r-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--coral); margin-top: 8px; }
.row .r-cell { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--graphite); }
.s--ink .row .r-cell { color: var(--graphite-d); }
.row .r-cell .r-label { display: block; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--graphite); margin-bottom: 5px; }
.s--ink .row .r-cell .r-label { color: var(--graphite-d); }
.row .r-arrow { font-family: var(--mono); font-size: 16px; color: var(--graphite); justify-self: end;
  transition: transform .2s, color .2s; }
.row:hover .r-arrow { transform: translateX(5px); color: var(--coral); }
@media (max-width: 820px){
  .row { grid-template-columns: 1fr auto; column-gap: var(--s5); row-gap: 10px; align-items: center; }
  .row > div:first-child { grid-column: 1; grid-row: 1; }
  .row .r-cell { grid-column: 1; grid-row: 2; }
  .row .r-cell--type { display: none; }
  .row .r-arrow { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; }
}

/* full-bleed rows (content padded to the page gutter) */
.rows--bleed .row { padding-left: var(--s6); padding-right: var(--s6); }
.rows--bleed .row:hover { padding-left: calc(var(--s6) + 12px); padding-right: calc(var(--s6) + 12px); }
/* rows on coral ground (black on red) */
.s--coral .rows, .s--coral .rows--bleed { border-top-color: rgba(16,18,22,.22); }
.s--coral .row { border-bottom-color: rgba(16,18,22,.22); }
.s--coral .row .r-sub { color: var(--ink); }
.s--coral .row .r-cell, .s--coral .row .r-cell .r-label { color: rgba(16,18,22,.66); }
.s--coral .row .r-arrow { color: rgba(16,18,22,.5); }
.s--coral .row:hover { background: rgba(16,18,22,.06); }
.s--coral .row:hover .r-title { color: var(--ink); }
.s--coral .row:hover .r-arrow { color: var(--ink); }

/* ---------- perks / value grid ---------- */
.perks { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); }
.s--ink .perks { background: var(--line-d); border-color: var(--line-d); }
.perk { background: var(--paper); padding: clamp(28px,3vw,44px); display: flex; flex-direction: column; gap: 12px; }
.s--ink .perk { background: var(--ink); }
.perk .pk-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--coral); }
.perk h4 { font-family: var(--sans); font-weight: 600; font-size: clamp(19px,1.7vw,25px);
  letter-spacing: -0.015em; line-height: 1.06; }
.perk p { font-size: 14.5px; line-height: 1.5; color: var(--graphite); text-wrap: pretty; }
.s--ink .perk p { color: var(--graphite-d); }
@media (max-width: 820px){ .perks { grid-template-columns: 1fr; } }
/* perks on coral ground (black on red) */
.s--coral .perks { background: rgba(16,18,22,.22); border-color: rgba(16,18,22,.22); }
.s--coral .perk { background: var(--coral); }
.s--coral .perk .pk-n { color: var(--ink); }
.s--coral .perk p { color: rgba(16,18,22,.78); }

/* ---------- numbered steps (White Label "how it works") ---------- */
.steps2 { border-top: 1px solid var(--line); }
.s--ink .steps2 { border-top-color: var(--line-d); }
.step2 { display: grid; grid-template-columns: 88px 1fr; gap: clamp(20px,3vw,56px);
  padding: clamp(28px,3vw,52px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.s--ink .step2 { border-bottom-color: var(--line-d); }
.step2 .s2-n { font-family: var(--sans); font-weight: 600; font-stretch: 80%; font-size: clamp(34px,4vw,64px);
  line-height: 0.9; letter-spacing: -0.02em; color: var(--coral); }
.step2 h4 { font-family: var(--sans); font-weight: 600; font-size: clamp(22px,2.2vw,32px);
  letter-spacing: -0.02em; line-height: 1.04; margin-bottom: 12px; }
.step2 p { font-size: clamp(15px,1.2vw,18px); line-height: 1.55; color: var(--graphite); max-width: 60ch; text-wrap: pretty; }
.s--ink .step2 p { color: rgba(255,255,255,.74); }
@media (max-width: 600px){ .step2 { grid-template-columns: 1fr; gap: 10px; } }
/* full-bleed steps + black-on-red ground */
.steps2--bleed .step2 { padding-left: var(--s6); padding-right: var(--s6); }
.s--coral .steps2 { border-top-color: rgba(16,18,22,.22); }
.s--coral .step2 { border-bottom-color: rgba(16,18,22,.22); }
.s--coral .step2 .s2-n { color: var(--ink); }
.s--coral .step2 p { color: rgba(16,18,22,.78); }

/* ---------- article / long-form body ---------- */
.article { max-width: 720px; margin: 0 auto; }
.article .a-lede { font-size: clamp(20px,2vw,28px); line-height: 1.32; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; margin-bottom: var(--s7); }
.article p { font-size: clamp(16px,1.15vw,18px); line-height: 1.65; color: var(--ink); text-wrap: pretty; }
.article p + p { margin-top: var(--s5); }
.article h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(24px,2.6vw,34px);
  letter-spacing: -0.02em; line-height: 1.06; margin: var(--s8) 0 var(--s4); }
.article h3 { font-family: var(--sans); font-weight: 600; font-size: clamp(19px,1.8vw,24px);
  letter-spacing: -0.015em; margin: var(--s7) 0 var(--s3); }
.article ul, .article ol { margin: var(--s5) 0 var(--s5) 0; padding-left: 1.3em; }
.article li { font-size: clamp(16px,1.15vw,18px); line-height: 1.6; color: var(--ink); margin-bottom: 10px; }
.article li::marker { color: var(--coral); }
.article blockquote { margin: var(--s7) 0; padding-left: var(--s5); border-left: 2px solid var(--coral);
  font-family: var(--sans); font-weight: 500; font-size: clamp(21px,2.4vw,32px); line-height: 1.18;
  letter-spacing: -0.015em; text-wrap: balance; }
.article figure.a-img { margin: var(--s7) 0; }
.article figure.a-img .ph, .article figure.a-img image-slot { display: block; width: 100%; aspect-ratio: 16/9; }
.article figcaption { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--graphite); margin-top: 12px; }
.a-share { display: flex; align-items: center; gap: 14px; margin-top: var(--s8);
  padding-top: var(--s6); border-top: 1px solid var(--line); }
.a-share span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite); }
.a-share a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink);
  border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; transition: color .15s, border-color .15s; }
.a-share a:hover { color: var(--coral); border-color: var(--coral); }

/* ---------- white-label proof logos ---------- */
.wl-proof { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--line-d);
  border: 1px solid var(--line-d); }
.wl-partner { background: var(--ink); padding: clamp(28px,3vw,48px); display: flex; flex-direction: column; gap: var(--s5); }
.wl-partner .wl-name { font-family: var(--sans); font-weight: 600; font-size: clamp(22px,2.2vw,30px); letter-spacing: -0.02em; }
.wl-partner .wl-quote { font-size: clamp(16px,1.3vw,19px); line-height: 1.5; color: rgba(255,255,255,.78); text-wrap: pretty; }
.wl-partner .wl-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); margin-top: auto; }
@media (max-width: 720px){ .wl-proof { grid-template-columns: 1fr; } }

/* ---------- policy ---------- */
.policy-layout { display: grid; grid-template-columns: 220px 1fr; gap: clamp(32px,5vw,90px); align-items: start; }
.policy-toc { position: sticky; top: clamp(92px,12vh,120px); align-self: start; }
.policy-toc ul { list-style: none; }
.policy-toc li { border-top: 1px solid var(--line); }
.policy-toc a { display: block; padding: 11px 0; font-size: 14px; color: var(--graphite); transition: color .15s; }
.policy-toc a:hover { color: var(--ink); }
.policy-body { max-width: 720px; }
.policy-body h2 { font-family: var(--sans); font-weight: 600; font-size: clamp(20px,2vw,27px);
  letter-spacing: -0.015em; margin: var(--s8) 0 var(--s4); padding-top: var(--s4); }
.policy-body h2:first-child { margin-top: 0; }
.policy-body p { font-size: clamp(15px,1.1vw,17px); line-height: 1.62; color: var(--graphite); text-wrap: pretty; }
.policy-body p + p { margin-top: var(--s4); }
.policy-body ul { margin: var(--s4) 0 var(--s4) 1.2em; }
.policy-body li { font-size: 15px; line-height: 1.55; color: var(--graphite); margin-bottom: 8px; }
@media (max-width: 760px){ .policy-layout { grid-template-columns: 1fr; } .policy-toc { position: static; display: none; } }
/* policy on ink ground (red on black) */
.s--ink .policy-toc li { border-top-color: var(--line-d); }
.s--ink .policy-toc a { color: var(--graphite-d); }
.s--ink .policy-toc a:hover { color: var(--paper); }
.s--ink .policy-body h2 { color: var(--paper); }
.s--ink .policy-body p, .s--ink .policy-body li { color: rgba(255,255,255,.74); }

/* ---------- system pages (404 / password) ---------- */
.sys { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--ink); color: var(--paper); padding: var(--s7) var(--s6); position: relative; overflow: hidden; }
.sys .grid-bg { position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 45%, #000, transparent 78%); }
.sys-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s5); max-width: 880px; }
.sys-mark { width: clamp(48px,7vw,76px); height: auto; }
.sys-code { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--coral); }
.sys h1 { font-family: var(--sans); font-weight: 600; font-stretch: 80%; font-size: clamp(44px,8vw,116px);
  line-height: 0.92; letter-spacing: -0.03em; text-wrap: balance; }
.sys p { font-size: clamp(16px,1.4vw,20px); line-height: 1.5; color: rgba(255,255,255,.78); max-width: 46ch; text-wrap: pretty; }
.sys-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: var(--s5); }
.sys-home { position: absolute; top: clamp(20px,3vw,34px); left: 50%; transform: translateX(-50%); z-index: 3; }
.sys-home img { height: 20px; width: auto; filter: invert(1); }
/* password form */
.pw-form { display: flex; align-items: stretch; gap: 0; margin-top: var(--s5);
  border: 1px solid var(--line-d-strong); width: min(420px, 92vw); }
.pw-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--paper);
  font-family: var(--sans); font-size: 15px; padding: 0 16px; }
.pw-form input::placeholder { color: rgba(255,255,255,.45); }
.pw-form button { border: 0; background: var(--coral); color: var(--ink); font-family: var(--sans);
  font-weight: 600; font-size: 14px; padding: 14px 20px; cursor: pointer; transition: background .16s; }
.pw-form button:hover { background: var(--paper); }
.pw-error { color: var(--coral); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; margin-top: var(--s3); min-height: 1em; }

/* ---------- section foot CTA helper ---------- */
.idx-foot { margin-top: clamp(40px,5vw,72px); display: flex; justify-content: center; }

/* ---------- pagination (dark grids) ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(36px,4vw,60px); }
.pager button { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; min-width: 42px; height: 42px;
  padding: 0 12px; border: 1px solid var(--line-d-strong); background: transparent; color: var(--paper);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.pager button:hover:not(:disabled) { border-color: var(--paper); }
.pager button.on { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.pager button:disabled { opacity: .35; cursor: default; }
.news-empty { display: none; padding: clamp(40px,6vw,80px) 0; text-align: center; font-family: var(--mono);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--graphite-d); }

/* ============================================================
   CONTACT — info rail + form (ink ground)
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px,6vw,110px); align-items: start; }
.contact-info { position: sticky; top: clamp(92px,12vh,120px); display: flex; flex-direction: column; gap: clamp(28px,3vw,44px); }
.ci-block { display: flex; flex-direction: column; gap: 10px; }
.ci-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); }
.ci-email { font-family: var(--sans); font-weight: 600; font-size: clamp(19px,1.9vw,28px); letter-spacing: -0.02em;
  color: var(--paper); border-bottom: 1px solid var(--line-d-strong); padding-bottom: 6px; width: fit-content; transition: color .16s, border-color .16s; }
.ci-email:hover { color: var(--coral); border-color: var(--coral); }
.ci-value { font-size: clamp(15px,1.2vw,18px); line-height: 1.5; color: rgba(255,255,255,.78); }
.ci-social { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-social a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,.8); border: 1px solid var(--line-d-strong); padding: 9px 12px; transition: background .16s, color .16s, border-color .16s; }
.ci-social a:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ci-note { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em; line-height: 1.6; color: var(--graphite-d); }

.contact-form { display: flex; flex-direction: column; gap: clamp(18px,2vw,26px); }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2vw,26px); }
.cf-field { display: flex; flex-direction: column; gap: 9px; }
.cf-field label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--graphite-d); }
.cf-field input, .cf-field textarea, .cf-field select { width: 100%; background: transparent; border: 1px solid var(--line-d-strong);
  color: var(--paper); padding: 14px 16px; font-family: var(--sans); font-size: 15px; transition: border-color .16s; }
.cf-field textarea { resize: vertical; min-height: 130px; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: rgba(255,255,255,.4); }
.cf-field input:focus, .cf-field textarea:focus, .cf-field select:focus { outline: none; border-color: var(--coral); }
.cf-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px; }
.cf-field select option { color: #101216; }
.cf-foot { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; margin-top: var(--s3); }
.cf-status { font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--coral); }
@media (max-width: 820px){
  .contact-grid { grid-template-columns: 1fr; gap: clamp(40px,8vw,64px); }
  .contact-info { position: static; }
  .cf-row { grid-template-columns: 1fr; }
}

/* white-box wipe for dark / coral page heroes (mist keeps the default ink box) */
.page-hero:not(.page-hero--mist) .cs-wipe-line::after { background: var(--paper); }

/* red-on-black hero variant (ink ground, coral title) */
.page-hero--redblack { background: var(--ink); color: var(--paper); border-bottom-color: var(--line-d); }
.page-hero--redblack .ph-eyebrow, .page-hero--redblack .ph-title { color: var(--coral); }

/* full-bleed 16:9 featured image band */
.feat-img { display: block; background: var(--ink); border-bottom: 1px solid var(--line-d); }
.feat-img image-slot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }

/* ---------- resource: sticky subscribe/share rail + body ---------- */
.res-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(32px,5vw,84px); align-items: start; }
.res-layout .article { margin: 0; max-width: none; }
.res-aside { position: sticky; top: clamp(92px,12vh,120px); align-self: start; }
.res-aside-sticky { display: flex; flex-direction: column; gap: var(--s6); }
.ra-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }
.res-sub p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.7); margin-bottom: var(--s4); text-wrap: pretty; }
.ra-form { display: flex; flex-direction: column; gap: 8px; }
.ra-form input { border: 1px solid var(--line-d-strong); background: transparent; color: var(--paper);
  padding: 12px 14px; font-family: var(--sans); font-size: 14px; }
.ra-form input::placeholder { color: rgba(255,255,255,.45); }
.ra-form button { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--coral); color: var(--ink); border: 0; padding: 12px 14px; font-family: var(--sans);
  font-weight: 600; font-size: 14px; cursor: pointer; transition: background .16s; }
.ra-form button:hover { background: var(--paper); }
.ra-form button .arr { font-family: var(--mono); }
.res-share { border-top: 1px solid var(--line-d); padding-top: var(--s6); }
.ra-social { display: flex; flex-wrap: wrap; gap: 8px; }
.ra-soc { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,.8); border: 1px solid var(--line-d-strong); padding: 9px 12px;
  transition: background .16s, color .16s, border-color .16s; }
.ra-soc:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
@media (max-width: 860px){
  .res-layout { grid-template-columns: 1fr; gap: var(--s7); }
  .res-aside { position: static; }
  .res-aside-sticky { flex-direction: row; flex-wrap: wrap; gap: var(--s7); }
  .res-layout .article { max-width: none; }
  .res-share { border-top: 0; padding-top: 0; }
}

/* article on ink ground (red on black) */
.s--ink .article .a-lede, .s--ink .article h2, .s--ink .article h3,
.s--ink .article blockquote { color: var(--paper); }
.s--ink .article p, .s--ink .article li { color: rgba(255,255,255,.8); }
.s--ink .article figcaption { color: var(--graphite-d); }
.s--ink .article .a-share { border-top-color: var(--line-d); }
.s--ink .article .a-share a { color: var(--paper); border-bottom-color: var(--line-d-strong); }
.s--ink .article .a-share span { color: var(--graphite-d); }