/* Pagora Health -- shared site stylesheet (DRAFT).
   Brand: ink navy, warm gold, cream paper, muted grey.
   Headings in Playfair Display (serif). Small labels and kickers in DM Mono.
   Body copy in DM Sans. Loaded via Google Fonts link tags only, no other
   external scripts or stylesheets are used anywhere in this site.

   The single contact email address and the (placeholder) site address are
   defined in ONE place only: assets/js/contact.js. Do not hardcode the
   address anywhere else; mark elements with data-contact-email or
   data-contact-site and that script fills them in on every page. See the
   comment at the top of that file for the switch-over note. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --ink:#1B2433;      /* ink navy */
  --gold:#B8893A;     /* warm gold */
  --cream:#F7F2E8;    /* cream paper */
  --grey:#6B6459;     /* muted grey */
  --line:#DCD4C2;
  --max: 860px;
}

html { scroll-behavior: smooth; }

body{
  font-family:'DM Sans',Arial,sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}

a { color: var(--ink); text-decoration-color: var(--gold); }
a:hover { color: var(--gold); }

img, svg { max-width: 100%; display: block; }

.wrap{ max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* -- Header / nav ---------------------------------------------------- */
header.site{
  border-bottom: 2px solid var(--ink);
  padding: 26px 0;
  background: var(--cream);
}
header.site .wrap{ display:flex; justify-content:space-between; align-items:center; gap: 24px; flex-wrap: wrap; }

.brand{ display:flex; align-items:center; gap: 12px; text-decoration:none; }
.brand .mark{ width: 36px; height: 36px; flex: none; }
.brand-text{ display:flex; flex-direction:column; }
.wordmark{
  font-family:'Playfair Display',serif; font-weight:700; font-size: 26px;
  letter-spacing:.02em; color: var(--ink); line-height: 1;
}
.tagline{
  display:block; font-family:'DM Mono',monospace; font-weight:400;
  font-size: 11px; letter-spacing:.07em; color: var(--grey); margin-top: 6px;
}

nav.primary ul{ list-style:none; display:flex; gap: 26px; flex-wrap: wrap; }
nav.primary a{
  font-family:'DM Mono',monospace; font-size: 11px; letter-spacing:.09em; text-transform: uppercase;
  color: var(--ink); text-decoration:none; padding-bottom: 3px; border-bottom: 2px solid transparent;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{ color: var(--ink); border-bottom-color: var(--gold); }

/* -- Hero ------------------------------------------------------------- */
.hero{ padding: 60px 0 44px; background: var(--cream); border-bottom: 1px solid var(--line); }
.hero h1{
  font-family:'Playfair Display',serif; font-weight:700; font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.16; color: var(--ink); max-width: 760px;
}
.hero h1 em{ font-style: italic; color: var(--gold); }
.hero p.lede{ margin-top: 18px; font-size: 17px; line-height: 1.6; color: var(--grey); max-width: 700px; }
.hero .cta-row{ margin-top: 30px; display:flex; gap: 16px; flex-wrap: wrap; }

.kicker{
  font-family:'DM Mono',monospace; font-size: 11px; letter-spacing:.16em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px; display:block;
}

/* -- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-block; font-family:'DM Sans',sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing:.02em; padding: 13px 26px; border-radius: 3px; text-decoration:none;
  border: 1.5px solid var(--ink); cursor: pointer;
}
.btn-primary{ background: var(--ink); color: #fff; }
.btn-primary:hover{ background: #0E141F; color:#fff; }
.btn-outline{ background: transparent; color: var(--ink); }
.btn-outline:hover{ background: var(--ink); color: #fff; }

/* -- Sections ------------------------------------------------------------ */
main section{ padding: 60px 0; }
main section + section{ border-top: 1px solid var(--line); }

h2{
  font-family:'Playfair Display',serif; font-weight:700; font-size: clamp(24px, 3vw, 32px);
  color: var(--ink); margin-bottom: 16px;
}
h3{
  font-family:'Playfair Display',serif; font-weight:700; font-size: 19px;
  color: var(--ink); margin-bottom: 10px;
}
p{ color: var(--ink); }
p + p, ul + p, p + ul { margin-top: 12px; }
.lead{ font-size: 17px; color: var(--grey); max-width: 700px; }

ul.plain{ list-style: none; }
ul.checks{ list-style: none; }
ul.checks li{ padding-left: 22px; position:relative; margin-top: 10px; }
ul.checks li::before{ content:'.'; font-weight:900; position:absolute; left:2px; top:-6px; color: var(--gold); font-size: 22px; }

/* -- Stats strip ------------------------------------------------------- */
.stats{
  margin-top: 34px; background: var(--ink); color:#fff; border-radius: 4px;
  display:flex; flex-wrap: wrap; justify-content: space-between; padding: 22px 28px; gap: 18px;
}
.stat{ text-align:center; flex: 1 1 140px; }
.stat .v{ font-family:'Playfair Display',serif; font-weight:700; font-size: 28px; line-height:1; color:#fff; }
.stat .v span{ color: var(--gold); }
.stat .l{ font-size: 10.5px; letter-spacing:.1em; text-transform: uppercase; margin-top: 9px;
  color: rgba(255,255,255,.74); line-height: 1.4; }

/* -- Title / cover tiles ------------------------------------------------ */
.mini{
  width: 128px; height: 155px; background: var(--ink); color:#fff; border-radius: 3px;
  padding: 16px 12px 14px; display:flex; flex-direction:column; align-items:center; text-align:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.mini .wm{ font-family:'Playfair Display',serif; font-weight:700; font-size: 15px; letter-spacing:.08em; line-height:1; text-transform: lowercase; }
.mini .rule{ width:80%; border-top: 1px solid rgba(255,255,255,.5); margin: 9px 0; }
.mini .pc{ font-size: 8px; letter-spacing:.18em; color: rgba(255,255,255,.65); text-transform: uppercase; }
.mini .edition{ margin-top:auto; font-family:'Playfair Display',serif; font-weight:700; font-size: 14px; letter-spacing:.02em; line-height:1.2; }
.mini .sub{ font-size: 9px; font-style: italic; color: rgba(255,255,255,.75); margin-top: 6px; }

/* -- Cards / grid -------------------------------------------------------- */
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 26px; }
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 26px; }
@media (max-width: 760px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card{ border: 1px solid var(--line); border-radius: 4px; padding: 26px; background:#fff; }
.card.tint{ background: var(--cream); }

.reason{ border-left: 2.5px solid var(--gold); padding: 4px 0 4px 18px; }
.reason .n{ font-family:'DM Mono',monospace; font-size: 11px; color: var(--gold); letter-spacing:.1em; }

/* -- Title block -------------------------------------------------------- */
.pub-block{ display:flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.pub-block .mini{ flex: 0 0 auto; }
.pub-block .pub-copy{ flex: 1 1 340px; }
.pub-meta{ font-family:'DM Mono',monospace; font-size: 11px; letter-spacing:.06em; color: var(--grey);
  text-transform: uppercase; margin: 10px 0 14px; }
.tag{
  display:inline-block; font-family:'DM Mono',monospace; font-size: 10px; letter-spacing:.1em;
  text-transform: uppercase; color:#1B2433; background: var(--gold); padding: 3px 9px; border-radius: 3px;
  margin-left: 8px; vertical-align: middle;
}

/* -- Compliance / note boxes --------------------------------------------- */
.note-box{
  background: var(--cream); border-left: 3px solid var(--ink); border-radius: 3px;
  padding: 16px 20px; margin-top: 14px;
}
.note-box p{ font-size: 13.5px; line-height: 1.6; color: var(--grey); }

.placeholder{ color: var(--grey); font-style: italic; }

/* -- Footer ---------------------------------------------------------------- */
footer.site{ border-top: 2px solid var(--ink); padding: 34px 0; margin-top: 44px; }
footer.site .wrap{ display:flex; justify-content:space-between; flex-wrap: wrap; gap: 22px; }
footer.site .org{ font-family:'Playfair Display',serif; font-weight:700; font-size: 15px; color: var(--ink); }
footer.site .org small{ display:block; font-family:'DM Sans',sans-serif; font-weight:400; font-size: 12.5px;
  color: var(--grey); margin-top: 5px; text-transform: none; }
footer.site .foot-links{ display:flex; gap: 20px; flex-wrap: wrap; font-size: 13px; }
footer.site .foot-links a{ color: var(--grey); text-decoration:none; }
footer.site .foot-links a:hover{ color: var(--ink); }
.foot-note{ font-size: 11px; color: var(--grey); margin-top: 20px; letter-spacing:.01em; line-height:1.5; max-width: 900px; }

/* ======================================================================
   Home page, conversion layout (13 Nov 2026). Namespaced so nothing here
   fights the page styles above. The home page sets body.home so only it
   takes the cream ground the magazines use. */
:root{ --card:#FBF8F2; --deep:#121A26; --gold-text:#8A6526; }
body.home{ background: var(--cream); }
body.home header.site{ border-bottom: 1px solid var(--line); }

.btn-gold{ background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-gold:hover{ background: #A67A30; border-color:#A67A30; color: var(--ink); }
.btn:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }

/* the name reveal */
.reveal-hero{ padding: 64px 0 52px; background: var(--cream); border-bottom: 1px solid var(--line); }
.reveal-hero .kicker{ margin-bottom: 10px; }
.wm{ font-family:'Playfair Display',serif; font-weight: 900; font-size: clamp(50px, 9vw, 100px);
  line-height: .98; letter-spacing: -.015em; color: var(--ink); display:flex; flex-wrap: wrap;
  align-items: baseline; column-gap: .22em; text-transform: none; }
.wm .pagora{ display:inline-flex; }
.wm .half{ display:inline-block; will-change: transform; }
.wm .health{ font-weight: 700; color: var(--gold-text); }
.etym{ display:grid; grid-template-columns: auto auto; gap: 6px 28px; margin-top: 14px;
  font-family:'DM Mono',monospace; font-size: 13px; color: var(--grey); letter-spacing: .02em; }
.etym b{ color: var(--ink); font-weight: 500; }
.etym i{ font-style: normal; color: var(--gold-text); }
.meaning{ margin-top: 32px; font-family:'Playfair Display',serif; font-weight: 700;
  font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; color: var(--ink); max-width: none; }
.meaning em{ font-style: normal; color: var(--gold-text); }
.reveal-hero .tagline{ margin-top: 10px; font-size: 13px; letter-spacing: .06em; }
.reveal-hero .lede{ margin-top: 20px; font-size: 18px; color: var(--ink); max-width: 62ch; }
.cta-note{ font-size: 14px; color: var(--grey); align-self:center; }
.reveal-hero .cta-row, .sample .cta-row, .band .cta-row{ display:flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 28px; }
@media (prefers-reduced-motion: no-preference){
  .wm .half.l{ animation: partL 1.9s cubic-bezier(.2,.7,.2,1) .35s 1 both; }
  .wm .half.r{ animation: partR 1.9s cubic-bezier(.2,.7,.2,1) .35s 1 both; }
  .etym{ animation: etymIn 1.9s ease .35s 1 both; }
  @keyframes partL{ 0%{transform:translateX(0)} 28%{transform:translateX(-.16em)} 66%{transform:translateX(-.16em)} 100%{transform:translateX(0)} }
  @keyframes partR{ 0%{transform:translateX(0)} 28%{transform:translateX(.16em)} 66%{transform:translateX(.16em)} 100%{transform:translateX(0)} }
  @keyframes etymIn{ 0%{opacity:.55} 28%{opacity:1} 100%{opacity:1} }
}

/* two doors */
.doors{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; margin-top: 26px; }
@media (max-width: 760px){ .doors{ grid-template-columns: 1fr; } }
.door{ background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 26px;
  display:flex; flex-direction:column; gap: 12px; }
.door .kicker{ margin-bottom: 0; }
.door h3{ font-size: 23px; margin-bottom: 0; }
.door > p{ color: var(--grey); font-size: 15.5px; }
.door .btn{ align-self: flex-start; padding: 11px 16px; font-size: 14px; }
.sub{ display:grid; gap: 18px; margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line); }
.subitem{ display:flex; flex-direction:column; gap: 8px; }
.subitem h4{ font-family:'Playfair Display',serif; font-size: 18px; font-weight: 700; color: var(--ink); }
.subitem p{ color: var(--grey); font-size: 15px; }

/* scale strip */
.scale{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 760px){ .scale{ grid-template-columns: repeat(2, 1fr); } }
.scale .v{ font-family:'Playfair Display',serif; font-weight: 900; font-size: 40px; line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.scale .v small{ font-size: 22px; color: var(--gold-text); }
.scale .l{ margin-top: 8px; font-size: 14px; color: var(--grey); line-height: 1.4; }

/* why it works */
.why{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 26px; }
@media (max-width: 760px){ .why{ grid-template-columns: 1fr; } }
.why .rule{ width: 36px; height: 3px; background: var(--gold); margin-bottom: 14px; }
.why h3{ font-size: 22px; margin-bottom: 8px; }
.why p{ color: var(--grey); font-size: 15.5px; }

/* the sample cover, drawn in CSS */
.sample{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
@media (max-width: 760px){ .sample{ grid-template-columns: 1fr; } }
.sample-copy p{ color: var(--grey); font-size: 16px; }
.cover{ background:#F5F0E8; color:#1B2433; border: 1px solid #DDD6C9; border-radius: 4px;
  padding: 26px 24px 22px; aspect-ratio: 210/297; max-width: 360px; position: relative;
  box-shadow: 0 18px 40px rgba(18,26,38,.18); display:flex; flex-direction:column; }
.cover .mast{ font-family:'DM Mono',monospace; font-size: 10px; letter-spacing: .14em; color:#8A6526; }
.cover .title{ font-family:'Playfair Display',serif; font-weight: 900; font-size: 44px; line-height: .95; margin-top: 8px; color:#B5352A; }
.cover .sub{ font-family:'DM Mono',monospace; font-size: 9.5px; letter-spacing: .1em; margin-top: 6px; color:#6E675C; }
.cover .big{ font-family:'Playfair Display',serif; font-weight: 900; font-size: 40px; line-height: 1; margin-top: auto; color:#1B2433; }
.cover .sent{ font-size: 12.5px; line-height: 1.35; margin-top: 8px; color:#1B2433; max-width: 26ch; }
.cover .foot{ margin-top: 18px; padding-top: 10px; border-top: 1px solid #DDD6C9; font-size: 9.5px; color:#6E675C;
  display:flex; justify-content: space-between; gap: 8px; }
.cover .stamp{ position:absolute; top: 18px; right: 18px; font-family:'DM Mono',monospace; font-size: 9px;
  letter-spacing: .1em; color:#8A6526; border: 1px solid #DDD6C9; padding: 4px 7px; border-radius: 3px; background:#FBF8F2; }

/* closing band */
/* ======================================================================
   Dark palette, site-wide (Justin, 13 Nov 2026: "I like the darker version").
   Appended last so it wins at equal specificity. The sample cover (.cover)
   stays cream on purpose: it is the physical magazine. */
:root{ --bg:#121A26; --bg-card:#1B2433; --bg-deep:#0B1119; --text:#F1ECE2; --text-muted:#A39B8E;
  --line:#2A3444; --gold:#D4A24C; --gold-text:#D4A24C; --cream:#1B2433; --grey:#A39B8E; --card:#1B2433; }
body, body.home{ background: var(--bg); color: var(--text); }
header.site{ background: var(--bg); border-bottom: 1px solid var(--line); }
body.home header.site{ border-bottom-color: var(--line); }
.wordmark, h1, h2, h3, p, .lead, .brand .wordmark{ color: var(--text); }
.lead, .reason p, .card p, .door > p, .subitem p, .why p, .sample-copy p, .scale .l, .cta-note, .etym, .pub-meta, .foot-note, footer.site .foot-links a{ color: var(--text-muted); }
.etym b{ color: var(--text); }
a{ color: var(--text); } a:hover{ color: var(--gold); }
nav.primary a{ color: var(--text-muted); } nav.primary a:hover, nav.primary a[aria-current="page"]{ color: var(--text); border-bottom-color: var(--gold); }
.hero, .reveal-hero{ background: var(--bg); border-bottom: 1px solid var(--line); }
.hero h1, .wm, .meaning, .reveal-hero .lede, .scale .v, .reason h3, .card h3, .door h3, .subitem h4, .why h3{ color: var(--text); }
main section + section{ border-top-color: var(--line); }
.card, .door{ background: var(--bg-card); border-color: var(--line); }
.card.tint, .note-box{ background: var(--bg-card); }
.note-box{ border-left-color: var(--gold); }
.btn{ border-color: var(--text); }
.btn-primary{ background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-primary:hover{ background: #FFFFFF; color: var(--bg); }
.btn-outline{ color: var(--text); border-color: var(--line); }
.btn-outline:hover{ background: var(--text); color: var(--bg); border-color: var(--text); }
.btn-gold{ background: var(--gold); color: #1B2433; border-color: var(--gold); }
.btn-gold:hover{ background: #E0B468; border-color: #E0B468; color: #1B2433; }
.stats{ background: var(--bg-card); border: 1px solid var(--line); }
.mini{ border: 1px solid var(--line); }
.sub{ border-top-color: var(--line); }
.scale .v small{ color: var(--gold-text); }
footer.site{ border-top: 1px solid var(--line); }
footer.site .org, footer.site .foot-links a:hover{ color: var(--text); }
.placeholder{ color: var(--text-muted); }
main section.band{ background: var(--bg-deep); color: var(--text); padding: 64px 0; border-top: 1px solid var(--line); }
.band h2{ color:#F5F0E8; margin: 12px 0 14px; }
.band p{ color:#CFC6B6; font-size: 17px; max-width: 58ch; }
.band .kicker{ color: var(--gold); }
.band .email{ color:#F5F0E8; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--gold); }
.band .btn-gold{ border-color: var(--gold); }