/* ============================================================
   Aurora marketing — shared design system.
   Linked by /index.html and /professionals/index.html so the
   tokens, chrome, hero-card, footer, and shared responsive rules
   live in ONE place. Page-specific layout stays inline in each
   page's <style>; those inline rules can rely on the variables
   and components defined here (this file is linked first).
   ============================================================ */

/* Self-hosted IBM Plex (WOFF2). Iowan Old Style stays system-resolved.
   Absolute /fonts paths so they resolve from any page depth. */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/plex-sans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/plex-sans-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/plex-sans-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/plex-mono-400.woff2') format('woff2'); }

:root {
  --paper:      #f6f1e7;
  --paper-3:    #fbf6ec;
  --band-tint:  #efe7d3;
  --ink:        #1a1814;
  --ink-soft:   #4a4540;
  --ink-mute:   #6a655c;
  --rule:       #c9bfa8;
  --rule-soft:  #ddd2b8;
  --accent:     #6b1d1d;
  --accent-2:   #8a4b1a;
  --highlight:  #f5e7a8;
  --serif: 'Iowan Old Style', 'Iowan', Georgia, 'Times New Roman', serif;
  --sans:  'IBM Plex Sans', 'Inter', 'Segoe UI', Arial, sans-serif;
  --mono:  'IBM Plex Mono', Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-weight: 400;
  font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,.025) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(0,0,0,.02)  50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, rgba(0,0,0,.025) 50%, transparent 51%);
  background-size: 7px 9px, 11px 13px, 5px 6px;
  z-index: 0; opacity: .6;
}
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(107,29,29,.35); }
a:hover { border-bottom-color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* === FULL-BLEED BANDS — each section spans edge-to-edge; content centers === */
.band { width: 100%; position: relative; z-index: 1; }
.band-inner { max-width: 1100px; margin: 0 auto; padding: 84px 48px; }
.band--cream { background: transparent; }                    /* body cream + paper texture shows through */
.band--tint  { background: var(--band-tint); box-shadow: inset 0 1px 0 rgba(120,90,40,.12); }
.band--dark  { background: var(--accent); color: var(--paper); box-shadow: inset 0 1px 0 rgba(0,0,0,.15); }

/* === MAST === */
.band--mast { border-bottom: 1px solid var(--rule); box-shadow: inset 0 -1px 0 0 var(--rule); }
.band--mast .band-inner { padding-top: 22px; padding-bottom: 18px; }
.mast { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; border-bottom: 0; color: var(--ink); }
.brand .logo { width: 64px; height: 64px; display: block; }
.brand .wordmark { font-family: var(--serif); font-size: 28px; letter-spacing: .01em; font-weight: 400; line-height: 1; }
.brand .wordmark small {
  display: block; font-family: var(--sans); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; font-weight: 500;
}
.mast-right { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mast-nav {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--sans); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
}
.mast-nav a { color: var(--ink-mute); border-bottom: 0; padding-bottom: 2px; transition: color .15s ease, background-color .15s ease; }
.mast-nav a:hover { color: var(--accent); }
.mast-nav a.active { color: var(--ink); border-bottom: 1px solid var(--accent); }
.mast-nav a.cta { background: var(--accent); color: var(--paper); padding: 5px 12px; border-bottom: 0; }
.mast-nav a.cta:hover { background: #561818; color: var(--paper); }
.mast-status { font-family: var(--mono); font-size: 11px; color: var(--ink-mute); letter-spacing: .06em; }
.mast-status .dot { display: inline-block; width: 6px; height: 6px; background: var(--accent-2); border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* === Hero message-card mockup (co-parenting-app feel) — shared hero art ===
   The .convo frame, the party message log, and the pattern-register overlay. */
.convo {
  background: rgba(251, 246, 236, 0.55);
  border: 1px solid rgba(201, 191, 168, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  padding: 18px 20px 30px;
  font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  -webkit-mask-image: linear-gradient(to bottom right, rgba(0,0,0,1) 8%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.2) 75%, transparent 95%);
          mask-image: linear-gradient(to bottom right, rgba(0,0,0,1) 8%, rgba(0,0,0,0.6) 45%, rgba(0,0,0,0.2) 75%, transparent 95%);
  transform: rotate(-0.6deg);
}
.cc-app-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule-soft); padding-bottom: 12px; margin-bottom: 4px; }
.cc-app-parties { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cc-app-meta { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.cc-avatar { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 11px; font-weight: 600; color: #fff; flex: none; }
.cc-avatar.r { background: #4f7d6e; }   /* Rachel — muted teal-green */
.cc-avatar.n { background: #a05a36; }   /* Nathaniel — warm terracotta */
.cc-day { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin: 15px 0 11px; }
.cc-day::before, .cc-day::after { content: ''; flex: 1; height: 1px; background: var(--rule-soft); }
.cc-msg { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; margin-bottom: 12px; }
.cc-msg-meta { font-family: var(--sans); font-size: 11px; color: var(--ink-mute); margin-bottom: 3px; }
.cc-msg-meta strong { color: var(--ink-soft); font-weight: 600; }
.cc-msg-text { font-family: var(--sans); font-size: 13px; line-height: 1.45; color: var(--ink); }
.cc-msg.flagged .cc-msg-text { background: var(--highlight); box-shadow: inset 0 0 0 1px rgba(180,150,40,.25); padding: 4px 8px; margin: 0 -8px; border-radius: 3px; }
.pattern-register {
  position: absolute; bottom: -4px; right: -16px; width: 360px;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 1px 0 0 rgba(0,0,0,.04), 0 16px 36px -18px rgba(60,40,20,.45);
  padding: 16px 18px 14px; transform: rotate(0.7deg);
}
.pr-header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 8px; }
.pr-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; }
.pr-count { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--ink-mute); }
.pr-list { list-style: none; padding: 0; margin: 0; }
.pr-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dotted var(--rule-soft); }
.pr-list li:last-child { border-bottom: 0; }
.pr-code { font-family: var(--mono); font-size: 10px; color: var(--ink-mute); letter-spacing: .04em; }
.pr-name { font-family: var(--serif); font-size: 13.5px; color: var(--ink); font-weight: 400; line-height: 1.3; }
.pr-count-pill { font-family: var(--mono); font-size: 10.5px; color: var(--accent); font-weight: 600; text-align: right; }

/* === FOOTER === */
.band--foot { border-top: 1px solid var(--rule); }
.band--foot .band-inner { padding-top: 36px; padding-bottom: 36px; }
.foot {
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 0.6fr);
  align-items: start; gap: 40px;
  font-family: var(--sans); font-size: 11px; letter-spacing: .04em; color: var(--ink-mute);
}
.foot-brand { font-family: var(--serif); font-size: 18px; letter-spacing: 0; color: var(--ink); font-weight: 400; margin-bottom: 4px; }
.foot-tag { font-size: 11px; letter-spacing: .04em; color: var(--ink-mute); line-height: 1.5; }
.foot-nav { display: flex; gap: 22px; justify-self: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; align-self: start; padding-top: 4px; }
.foot-nav a { color: var(--ink-mute); border-bottom: 0; }
.foot-nav a:hover { color: var(--accent); }
.foot-right { text-align: right; align-self: start; padding-top: 4px; }
.jta-badge { display: inline-block; margin-top: 14px; border-bottom: 0; }
.jta-badge img { display: block; height: 48px; width: auto; opacity: .85; }
.jta-badge:hover img { opacity: 1; }

/* === RESPONSIVE — shared chrome only (band width, mast, footer).
   Each page's own grid collapses + element hiding stay in its inline <style>. === */
@media (max-width: 1000px) {
  body { overflow-x: clip; }
  .band-inner { max-width: 680px; padding: 64px 32px; }
  .band--mast .band-inner { max-width: 1100px; }
}
@media (max-width: 640px) {
  .band-inner { padding: 46px 18px; }
  .band--mast .band-inner { padding-top: 16px; padding-bottom: 14px; }
  .mast { grid-template-columns: 1fr; gap: 10px; }
  .brand .logo { width: 48px; height: 48px; }
  .brand .wordmark { font-size: 22px; }
  .brand .wordmark small { font-size: 9.5px; letter-spacing: .18em; }
  .mast-right { justify-self: start; align-items: flex-start; gap: 8px; width: 100%; }
  .mast-nav { flex-wrap: wrap; gap: 10px 12px; width: 100%; font-size: 10px; letter-spacing: .08em; }
  .mast-nav a.cta { padding: 5px 10px; }
  .foot { grid-template-columns: 1fr; gap: 18px; }
  .foot-right { text-align: left; }
}

/* === SCROLL-IN REVEAL — content bands gently fade + rise as they scroll into
   view. Gated on html.js (set inline before paint) so a no-JS visitor sees
   everything; reduced-motion shows everything instantly. Mast + footer never
   animate. The .band-inner (content) moves, not the full-bleed band background. */
html.js .band:not(.band--mast):not(.band--foot) > .band-inner {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
html.js .band:not(.band--mast):not(.band--foot) > .band-inner.is-revealed {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .band > .band-inner {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}