/* ===========================================================================
   COCAM — Page header pattern
   Replaces hero--short on reference pages (Coffee, Contact).
   Optional smaller variant for story pages (About, Impact).
   Lives alongside style.css + mobile-fixes.css. Token-only; no new colors.
   =========================================================================== */

/* ---------- Base page header --------------------------------------------
   A compact replacement for hero--short. Paper background, no photograph,
   ~140 px on mobile and ~200 px on desktop. Gets the meaningful content
   above the fold. */

.page-header {
  background: var(--paper);
  border-bottom: 1px solid var(--paper-3);
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
  position: relative;
}

.page-header__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}

@media (min-width: 900px) {
  .page-header__inner { grid-template-columns: 1.6fr 1fr; gap: 4rem; }
}

.page-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.2rem;
}
.page-header__meta strong { color: var(--terracotta); font-weight: 500; letter-spacing: 0.22em; }

.page-header__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
  max-width: 18ch;
}
.page-header__title em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--terracotta);
}

.page-header__lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
  margin: 1.2rem 0 0;
  text-wrap: pretty;
}

/* Right-column "data anchor" — a small set of mono key/value rows
   for reference pages. Optional. */
.page-header__data {
  display: grid;
  gap: .8rem;
  margin-top: 0;
}
.page-header__data dl {
  margin: 0;
  display: grid;
  gap: .5rem;
}
.page-header__data div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--paper-3);
  align-items: baseline;
}
.page-header__data div:last-child { border-bottom: 0; padding-bottom: 0; }
.page-header__data dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
}
.page-header__data dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--ink);
}
.page-header__data dd em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--terracotta-dark);
}

@media (max-width: 600px) {
  .page-header__data div { grid-template-columns: 1fr; gap: .15rem; padding-bottom: .7rem; }
  .page-header__data dt { font-size: .65rem; }
}

/* ---------- "Pick a path" strip — used in the contact page-header band.
   Two equal tiles, side by side: a mailto chip and the primary CTA that
   anchor-jumps to the inquiry form. Same visual weight; the primary tile
   reverses to dark ink to signal commercial intent. -------------------- */

.v-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: 1.2rem;
  max-width: 36rem;
}
.v-path {
  display: grid;
  gap: .25rem;
  padding: .9rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--paper-3);
  border-radius: 4px;
  text-decoration: none;
  position: relative;
}
.v-path .k {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.v-path .v {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.v-path .arrow {
  position: absolute;
  top: .85rem;
  right: .9rem;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-size: .95rem;
}
.v-path--primary {
  background: var(--ink);
  border-color: var(--ink);
}
.v-path--primary .k { color: rgba(244, 237, 224, .55); }
.v-path--primary .v { color: var(--paper); }
.v-path--primary .arrow { color: var(--paper); }

.page-header__sla {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1rem 0 0;
  max-width: 36rem;
}
.page-header__sla strong {
  color: var(--moss-dark, var(--terracotta));
  font-weight: 500;
  letter-spacing: .16em;
}

/* ---------- Contact: form-first on mobile -----------------------------
   The editorial section keeps info-left/form-right on desktop (≥ 900 px).
   Below that breakpoint, the form moves above the info copy so a roaster
   on a phone sees the form as soon as they pass the page-header band. */

@media (max-width: 899px) {
  .editorial.contact-flow .contact-info-side { order: 2; }
  .editorial.contact-flow .contact-form-side { order: 1; }
}

/* ---------- "Half hero" — for story pages that still want a photograph
   (About) but at half the height of hero--short ---------------------- */

.hero--half {
  min-height: clamp(280px, 38vh, 420px) !important;
}
.hero--half .hero__title {
  font-size: clamp(2rem, 5vw, 3.6rem) !important;
}
.hero--half .hero__inner {
  padding-top: clamp(2rem, 5vw, 3rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* ---------- Anchor strip — a thin horizontal data bar that can sit
   immediately under a page-header to anchor reference pages ---------- */

.anchor-strip {
  background: var(--ink);
  color: var(--paper);
  padding: 1rem var(--gutter);
  border-bottom: 1px solid rgba(244,237,224,0.1);
}
.anchor-strip__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) {
  .anchor-strip__inner { grid-template-columns: repeat(4, 1fr); }
}
.anchor-strip dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,237,224,.6);
  margin: 0 0 .2rem;
}
.anchor-strip dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  letter-spacing: -.01em;
  color: var(--gold);
  line-height: 1;
}