/* social-media.html only. Tokens from style.css only: no raw font-size, spacing or colour. */

/* ---------- page head: mono crumb + service tabs + h1, first viewport ---------- */
.page-head{
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  position:relative; z-index:1;
  padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-8);
}
.crumb{display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-6)}
.svc-tabs{display:flex; flex-wrap:wrap; gap:var(--space-2)}
.svc-tabs a,
.svc-tabs span{
  display:inline-flex; align-items:center; min-height:var(--target);
  padding:0 var(--space-4);
  font-family:var(--font-mono); font-size:var(--step--1); letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--hair); border-radius:var(--radius-pill);
  color:var(--muted); text-decoration:none;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.svc-tabs a:hover{color:var(--paper); border-color:var(--blue-light)}
.svc-tabs span[aria-current="page"]{color:var(--paper); border-color:var(--blue-light); background:var(--panel-2)}

/* ---------- prose: plain reading blocks (problem, your part) ---------- */
.prose{display:flex; flex-direction:column; gap:var(--space-4); margin-top:var(--space-6)}
.prose h3{margin-top:var(--space-3)}
.prose p{margin:0}
.prose blockquote{
  margin:var(--space-2) 0; padding:var(--space-4) var(--space-5);
  border-left:2px solid var(--brass);
  font-size:var(--step-1); line-height:1.4; color:var(--paper); font-style:italic;
  max-width:var(--measure-lead);
}

/* ---------- cadence: calendar-like monthly rhythm list ---------- */
.cadence{margin-top:var(--space-6); border-top:1px solid var(--hair)}
.crow{
  display:grid; grid-template-columns:5.5rem 1fr; column-gap:var(--space-5);
  padding:var(--space-6) 0; border-bottom:1px solid var(--hair); align-items:start;
}
.cad-freq{
  font-family:var(--font-mono); font-size:var(--step--1); line-height:1.35;
  letter-spacing:.06em; text-transform:uppercase; color:var(--brass);
  padding-top:var(--space-1);
}
.cad-body h3{margin:0 0 var(--space-2)}
.cad-body p{margin:0; color:var(--muted); max-width:var(--measure)}
@media (max-width:599px){
  .crow{grid-template-columns:1fr; row-gap:var(--space-2)}
}

/* ---------- CTA panel ---------- */
.cta-panel{padding:var(--space-7); display:flex; flex-direction:column; gap:var(--space-5); align-items:flex-start}
.cta-panel h2{margin:0}
.cta-panel .lead{margin:0}