/* ============================================================
   ZENTARIHQ.COM — site layer over the Zentari Network DS.
   Tokens come from css/ds/styles.css. Nothing here invents a
   colour, a size or a duration: every value below is a token.
   ============================================================ */

/* ---- Page frame ---------------------------------------------------------- */
.z-shell { min-height: 100vh; display: flex; flex-direction: column; }
.z-wrap  { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter-page); }
main     { flex: 1 0 auto; display: block; }

/* ---- Header: transparent over the premiere, glass once scrolled ---------- */
.z-header {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-3, 180ms) var(--ease-out, ease), border-color var(--dur-3, 180ms) var(--ease-out, ease);
}
.z-header[data-scrolled="true"] {
  background: var(--surface-glass-2);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom-color: var(--border-subtle);
}
.z-header-in { display: flex; align-items: center; gap: var(--sp-6); height: 68px; }
.z-brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--hit-min); }
.z-brand img { height: 30px; width: auto; display: block; }
.z-brand-word {
  font-family: var(--font-network); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-hi);
}
.z-nav { margin-left: auto; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.z-nav a {
  font-size: var(--fs-sm); color: var(--text-body); letter-spacing: var(--ls-normal);
  padding-block: var(--sp-2); min-height: var(--hit-min); display: inline-flex; align-items: center;
}
.z-nav a:hover { color: var(--text-link-hover); }
.z-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface-2); color: var(--text-hi); padding: var(--sp-3) var(--sp-4);
  border-radius: 8px; z-index: 100;
}
.z-skip:focus { left: var(--sp-4); top: var(--sp-4); }

/* ---- Premiere (the one bloom on the page, behind media) ------------------ */
.z-premiere-block { padding-block: clamp(56px, 9vw, 132px) var(--section-y); }
.z-kicker-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.z-seam { height: 2px; flex: 1; background: var(--grad-seam); max-width: 220px; }
.z-lede {
  font-family: var(--font-editorial); font-size: var(--fs-lead); line-height: var(--lh-reading);
  color: var(--text-body); max-width: var(--measure-lead); margin-top: var(--sp-6);
}
.z-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }

/* ---- Buttons: fill shifts, never scale. Actions are pills. -------------- */
.z-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--hit-min); padding: 0 var(--sp-6);
  border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-2, 120ms) var(--ease-out, ease), color var(--dur-2, 120ms) var(--ease-out, ease), border-color var(--dur-2, 120ms) var(--ease-out, ease);
}
.z-btn:hover { text-decoration: none; }
.z-btn-primary { background: var(--accent); color: var(--accent-ink); }
.z-btn-primary:hover { background: var(--z-cyan-bright); color: var(--accent-ink); }
.z-btn-ghost { background: transparent; color: var(--text-hi); border-color: var(--border-mid); }
.z-btn-ghost:hover { border-color: var(--border-cyan); color: var(--text-hi); }
.z-btn:active { transform: scale(0.975); }

/* ---- Shelf ---------------------------------------------------------------- */
.z-shelf-block { padding-block: 0 var(--shelf-y); }
.z-shelf-head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.z-shelf-head h2 { font-size: var(--fs-h3); }
.z-shelf-note { margin-left: auto; }

.z-grid { display: grid; gap: var(--sp-5); }
.z-grid-companies { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.z-grid-ways      { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }

/* ---- Company card: channel field + chromatic edge ----------------------- */
.z-company {
  position: relative; display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6); border-radius: 12px; overflow: hidden;
  background: var(--surface-1); border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: border-color var(--dur-3, 180ms) var(--ease-out, ease), background var(--dur-3, 180ms) var(--ease-out, ease);
}
.z-company::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grad-edge); opacity: 0.85;
}
.z-company:hover { border-color: var(--border-soft); background: var(--surface-2); text-decoration: none; }
.z-company[data-state="private"]::before { background: var(--st-private); opacity: 0.5; }
.z-company-name { font-family: var(--font-network); font-weight: 700; font-size: var(--fs-h4); color: var(--text-hi); letter-spacing: var(--ls-tight); }
.z-company-line { font-size: var(--fs-sm); color: var(--text-body); line-height: var(--lh-normal); }
.z-company-go { margin-top: auto; padding-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-link); }

/* ---- Badge: every object declares a state ------------------------------- */
.z-badge {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 3px var(--sp-3); border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.z-badge[data-tone="published"] { color: var(--st-published); background: var(--st-published-bg); }
.z-badge[data-tone="private"]   { color: var(--st-private);   background: var(--st-private-bg); }
.z-badge[data-tone="concept"]   { color: var(--st-concept);   background: var(--st-concept-bg); }
.z-badge[data-tone="live"]      { color: var(--of-live);      background: var(--of-live-bg); }
.z-badge[data-tone="planned"]   { color: var(--of-planned);   background: var(--of-planned-bg); }

/* ---- Ways in: object shelf, offer state declared ------------------------ */
.z-way {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-5); border-radius: 12px;
  background: var(--surface-1); border: 1px solid var(--border-subtle);
  text-decoration: none;
  transition: border-color var(--dur-3, 180ms) var(--ease-out, ease);
}
.z-way:hover { border-color: var(--border-cyan); text-decoration: none; }
.z-way-name { font-family: var(--font-network); font-weight: 600; font-size: var(--fs-h4); color: var(--text-hi); letter-spacing: var(--ls-tight); }
.z-way-line { font-size: var(--fs-sm); color: var(--text-muted); line-height: var(--lh-normal); }
/* Reading face, not mono. Mono is reserved for values that are DATA (duration,
   episode, date, status) — running prose set in mono makes the network read like
   an internal tool, which is exactly what the DS forbids. */
.z-shelf-foot { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--text-muted); max-width: var(--measure-lead); line-height: var(--lh-normal); }

/* ---- Editorial punctuation: the single bone-paper surface --------------- */
.z-editorial { margin-block: var(--section-y); border-radius: 16px; padding: clamp(28px, 5vw, 64px); }
.z-editorial .z-eyebrow { color: var(--paper-muted); }
.z-editorial-quote {
  font-family: var(--font-editorial); font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: var(--lh-snug); color: var(--paper-ink); max-width: 34ch; margin-top: var(--sp-4);
}
.z-editorial-attrib { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: var(--ls-label); color: var(--paper-muted); margin-top: var(--sp-6); text-transform: uppercase; }

/* ---- Prose (legal, glossary, long-form) --------------------------------- */
.z-prose { padding-block: var(--section-y); max-width: var(--measure-reading); }
.z-prose h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-6); }
.z-prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-10); margin-bottom: var(--sp-4); }
.z-prose h3 { font-size: var(--fs-h4); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.z-prose p, .z-prose li { font-size: 1.0625rem; line-height: var(--lh-reading); color: var(--text-body); }
.z-prose p + p { margin-top: var(--sp-4); }
.z-prose ul, .z-prose ol { margin: var(--sp-4) 0; padding-left: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.z-prose a { text-decoration: underline; }

/* ---- Footer -------------------------------------------------------------- */
.z-footer { border-top: 1px solid var(--border-subtle); margin-top: var(--section-y); padding-block: var(--sp-10) var(--sp-12); }
.z-footer-in { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: flex-start; }
.z-footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.z-footer a { font-size: var(--fs-sm); color: var(--text-muted); }
.z-footer a:hover { color: var(--text-link-hover); }
.z-footer-legal { margin-left: auto; text-align: right; }

/* ---- Consent: chrome floating over the page, so glass is correct here ---
   Analytics load only after explicit opt-in (DS §Accessibility and truth
   constraints). No capture before consent, and the bar is never a popup over
   the content — it sits at the bottom edge and does not trap focus. */
.z-consent {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: var(--surface-glass-2);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-top: 1px solid var(--border-soft);
}
.z-consent[hidden] { display: none; }
.z-consent-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); padding-block: var(--sp-5); }
.z-consent-copy { font-size: var(--fs-sm); color: var(--text-body); max-width: 62ch; }
.z-consent-actions { margin-left: auto; display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- Reduced motion: everything collapses ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .z-btn:active { transform: none; }
}