/* ============================================================
   humaning.css — Shared design system
   humaning.ca · Todd Blattner MA, CCC · Integrationpoint
   ============================================================ */

/* ── Google Fonts ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,600;1,700&family=Inter:wght@300;400;500&display=swap');

/* ── Colour tokens ───────────────────────────────────────── */
:root {
  --soil:#1E1510;
  --earth:#2E2016;
  --bark:#4A3525;
  --walnut:#6B4E35;
  --clay:#9A7055;
  --umber:#7A5C3E;
  --umber-deep:#5E4830;
  --umber-warm:#7E6245;
  --sand:#C4A882;
  --linen:#DDD0BC;
  --parchment:#EDE3D0;
  --gold:#B8892E;
  --gold-mid:#D4AA55;
  --gold-light:#EDD080;
  --straw:#F5EDBA;
  --warm-cream:#F9F4EC;
  --sage-light:#C8D8B8;
  --forest:#2D4A2D;
  --deep-forest:#1B2E1B;
  --sage:#4A7A4A;
  --terra-light:#F0D2BF;
  --terra-mid:#D07A4B;
  --terra-deep:#9E4228;
  --terra-bg-deep:#6E2E1C;   /* anger.html hero/S1 background */
  --terra-bg-bark:#5C3A2A;   /* anger.html S2 background */
  --terra-bg-light:#8A4A30;  /* anger.html S3 background */
  --terra-eyebrow-light:#FCEBD9; /* light eyebrow on terra-bg-light */
  --terra-text-mid:#F1E5D2;      /* body text on terra-bg-light — halfway sand/linen */
  --terra-quote-mid:#D1BC9F;     /* pull-quote text on walnut — halfway sand/linen */
  --terra-ink:#4a2414;           /* dark caption/instruction text on cream cards */
  --taupe:#C7C2B9;
  --taupe-dark:#6E6A63;
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Inter',-apple-system,sans-serif;
}

/* ── Reset ───────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}

/* ── Nav ─────────────────────────────────────────────────── */
.nav{background:var(--soil);padding:1.1rem 2.5rem;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;left:0;right:0;z-index:100;}
.nav-brand{font-family:var(--font-serif);font-size:18px;color:var(--linen);font-weight:400;letter-spacing:0.03em;}
.nav-brand em{color:var(--gold-mid);font-style:normal;}
.nav-links{display:flex;gap:2rem;align-items:center;}
.nav-links a{font-size:12px;color:var(--sand);text-decoration:none;letter-spacing:0.1em;text-transform:uppercase;}
.nav-links a.active{color:var(--gold-mid);}
/* Dropdown */
.nav-dropdown{position:relative;}
.nav-dropdown > span{font-size:12px;color:var(--sand);letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;user-select:none;display:flex;align-items:center;gap:0.35em;}
.nav-dropdown > span::after{content:'▾';font-size:9px;opacity:0.7;}
.dropdown-menu{display:none;position:absolute;top:100%;left:0;background:var(--soil);min-width:180px;border:1px solid var(--bark);border-radius:3px;padding:0.8rem 0 0.6rem;z-index:300;}
.dropdown-menu a{display:block;padding:0.55rem 1.1rem;font-size:12px;color:var(--sand);text-decoration:none;letter-spacing:0.1em;text-transform:uppercase;white-space:nowrap;}
.dropdown-menu a:hover{color:var(--parchment);}
.nav-dropdown:hover .dropdown-menu{display:block;}
/* Book Me In button */
.nav-book{font-size:10px;color:var(--soil) !important;background:var(--sand);padding:0.4rem 0.9rem;border-radius:2px;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;}
.nav-book:hover{background:var(--parchment);}
/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;border:none;background:none;}
.hamburger span{display:block;width:24px;height:2px;background:var(--sand);border-radius:2px;transition:all 0.3s;}

/* ── Layout ──────────────────────────────────────────────── */
.inner{max-width:820px;margin:0 auto;padding:0 1.8rem;}

/* ── Eyebrows ────────────────────────────────────────────── */
/* All eyebrow variants share base sizing — override colour per variant */
.eyebrow,
.eyebrow-light,
.eyebrow-dark,
.eyebrow-terra,
.ew-light,
.ew-clay,
.ew-walnut,
.ew-bark {
  font-size:14px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  margin-bottom:1.2rem;
}
.eyebrow-light{color:rgba(196,168,130,0.6);}
.eyebrow-dark{color:var(--clay);}
.eyebrow-terra{color:var(--terra-mid);}
.eyebrow{color:var(--sand);}
.ew-light {color:rgba(196,168,130,0.55);}
.ew-clay  {color:var(--clay);}
.ew-walnut{color:var(--walnut);}
.ew-bark  {color:var(--bark);}

/* ── Utility bars ────────────────────────────────────────── */
.gold-bar{width:42px;height:2px;background:var(--gold);margin-bottom:1.8rem;}
.terra-bar{width:42px;height:2px;background:var(--terra-mid);margin-bottom:1.8rem;}

/* ── Headings ────────────────────────────────────────────── */
.h2-light  {font-family:var(--font-serif);font-size:clamp(28px,5vw,36px);font-weight:400;color:var(--parchment);margin:0 0 1.4rem;line-height:1.28;}
.h2-dark   {font-family:var(--font-serif);font-size:clamp(28px,5vw,36px);font-weight:400;color:var(--soil);margin:0 0 1.4rem;line-height:1.28;}
.h2-mid    {font-family:var(--font-serif);font-size:clamp(28px,5vw,36px);font-weight:400;color:var(--bark);margin:0 0 1.4rem;line-height:1.28;}
.h2-bark   {font-family:var(--font-serif);font-size:clamp(28px,5vw,36px);font-weight:400;color:var(--bark);margin:0 0 1.4rem;line-height:1.28;}
.h2-earth  {font-family:var(--font-serif);font-size:clamp(28px,5vw,36px);font-weight:400;color:var(--earth);margin:0 0 1.4rem;line-height:1.28;}
.h2-walnut {font-family:var(--font-serif);font-size:clamp(28px,5vw,36px);font-weight:400;color:var(--walnut);margin:0 0 1.4rem;line-height:1.28;}

/* ── Body text ───────────────────────────────────────────── */
/* floor 17px mobile, ceiling 18px desktop */
.bd       {font-size:clamp(17px,4.5vw,18px);line-height:1.92;color:var(--sand);}
.bd-dark  {font-size:clamp(17px,4.5vw,18px);line-height:1.92;color:var(--bark);}
.bd-mid   {font-size:clamp(17px,4.5vw,18px);line-height:1.92;color:var(--walnut);}
.bd-earth {font-size:clamp(17px,4.5vw,18px);line-height:1.92;color:var(--earth);}
.bd-parch {font-size:clamp(17px,4.5vw,18px);line-height:1.92;color:var(--parchment);}
.bd p,.bd-dark p,.bd-mid p,.bd-earth p,.bd-parch p{margin:0 0 1.6rem;}
.bd p:last-child,.bd-dark p:last-child,.bd-mid p:last-child,.bd-earth p:last-child,.bd-parch p:last-child{margin-bottom:0;}

/* ── Pull quotes ─────────────────────────────────────────── */
.pq-gold{font-family:var(--font-serif);font-size:clamp(20px,3vw,24px);font-style:italic;color:var(--gold-light);line-height:1.6;border-left:2px solid var(--gold);padding:.4rem 0 .4rem 1.8rem;margin:2.5rem 0 3rem;max-width:560px;}

/* ── Bridge sentences ────────────────────────────────────── */
.bridge      {font-family:var(--font-serif);font-size:clamp(20px,2.5vw,21px);font-style:italic;line-height:1.75;margin:3rem 0 0;color:var(--gold-light);}
.bridge-dark {font-family:var(--font-serif);font-size:clamp(20px,2.5vw,21px);font-style:italic;line-height:1.75;margin:3rem 0 0;color:var(--walnut);}
.bridge-mid  {font-family:var(--font-serif);font-size:clamp(20px,2.5vw,21px);font-style:italic;line-height:1.75;margin:3rem 0 0;color:var(--clay);}

/* ── Poems ───────────────────────────────────────────────── */
/* floor 17px mobile, ceiling 19px desktop — clear emphasis over body */
.poem{font-family:var(--font-serif);font-size:clamp(17px,2.5vw,19px);font-style:italic;line-height:2.2;padding-left:2.5rem;border-left:1px solid rgba(196,168,130,0.22);margin:2.5rem 0;}
.p-light{color:var(--linen);}
.p-parch{color:var(--bark);}
.p-earth{color:var(--earth);}

/* Prose body (non-italic poem-style block) */
.prose-body{font-family:var(--font-serif);font-size:clamp(17px,2.5vw,19px);font-style:normal;line-height:2.2;color:var(--walnut);padding-left:2.5rem;border-left:1px solid rgba(75,53,37,0.22);margin:2.5rem 0;}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-gold{display:inline-block;padding:.9rem 2.2rem;background:var(--gold);color:var(--soil);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:2px;font-weight:500;transition:transform 0.2s ease,box-shadow 0.2s ease,background 0.2s ease;}
.btn-gold:hover,.btn-gold:active{transform:translateY(-2px);box-shadow:0 4px 14px rgba(184,137,46,0.35);background:var(--gold-mid);}
.btn-outline{display:inline-block;padding:.9rem 2.4rem;border:1px solid var(--gold-mid);color:var(--gold-mid);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:2px;background:transparent;transition:transform 0.2s ease,box-shadow 0.2s ease,color 0.2s ease,border-color 0.2s ease;cursor:pointer;}
.btn-outline:hover,.btn-outline:active{transform:translateY(-2px);box-shadow:0 4px 14px rgba(184,137,46,0.2);color:var(--gold-light);border-color:var(--gold-light);}
.read-more{display:inline-block;margin-top:1.5rem;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-mid);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;}
.back-link{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand);text-decoration:none;border-bottom:1px solid rgba(196,168,130,0.3);padding-bottom:2px;transition:transform 0.2s ease,border-color 0.2s ease,color 0.2s ease;}
.back-link:hover{transform:translateY(-1px);border-bottom-color:rgba(196,168,130,0.6);}

/* ── Bottom nav ──────────────────────────────────────────── */
.bottom-nav{display:flex;justify-content:space-between;align-items:center;padding:1.4rem 2.4rem;background:var(--soil);border-top:1px solid var(--bark);gap:1.2rem;}

/* ── Footer ──────────────────────────────────────────────── */
.footer{background:var(--soil);padding:2.5rem 2.5rem 1.8rem;border-top:1px solid var(--bark);text-align:center;}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.4rem;justify-content:center;margin-bottom:1.8rem;margin-top:1.4rem;}
.footer-nav a{font-size:12px;color:var(--clay);text-decoration:none;letter-spacing:0.12em;text-transform:uppercase;}
.footer-nav a:hover{color:var(--sand);}
.footer-land-ack{font-family:var(--font-serif);font-size:clamp(20px,2.2vw,22px) !important;font-style:italic;color:var(--clay);line-height:1.9;width:100%;max-width:820px;margin:0 auto 2.4rem !important;text-align:center !important;padding-bottom:2rem;border-bottom:1px solid rgba(184,137,46,0.3);display:block;box-sizing:border-box;}
.footer-bottom{display:flex;justify-content:space-between;border-top:none;padding-top:0;margin-top:0;}
.footer p{font-size:12px;color:var(--clay);margin:0;}

/* ── Attribution line ────────────────────────────────────── */
.attribution{text-align:center;padding:1.2rem;font-family:var(--font-serif);font-size:13px;font-style:italic;color:var(--clay);background:var(--soil);border-top:1px solid rgba(75,53,37,0.45);}

/* ── Scroll reveal ───────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity 0.7s ease,transform 0.7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ── Split panels (shared) ───────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;}
.split-text{padding:3.5rem;display:flex;flex-direction:column;justify-content:center;}

/* ──────────────────────────────────────────────────────────
   MOBILE — max-width: 768px
   ────────────────────────────────────────────────────────── */
@media(max-width:768px){

  /* Nav */
  .nav{padding:1rem 1.2rem;}
  .nav-links{display:none;flex-direction:column;gap:1.4rem;position:absolute;top:100%;left:0;right:0;background:var(--soil);padding:1.6rem 1.5rem;z-index:200;border-top:1px solid var(--bark);}
  .nav-links.open{display:flex;}
  .nav-links a{font-size:13px;letter-spacing:0.08em;}
  .nav-dropdown > span{font-size:13px;letter-spacing:0.08em;}
  .nav-dropdown > span::after{display:inline;}
  .dropdown-menu{display:none;position:static;background:none;border:none;padding:0 0 0 1rem;}
  .dropdown-menu.open{display:block;}
  .dropdown-menu a{font-size:12px;padding:0.3rem 0;color:var(--clay);}
  .hamburger{display:flex;}

  /* Eyebrows — 1px bump on mobile */
  .eyebrow,
  .eyebrow-light,
  .eyebrow-dark,
  .eyebrow-terra,
  .ew-light,
  .ew-clay,
  .ew-walnut,
  .ew-bark{font-size:15px;}

  /* Layout */
  .inner{padding:0 1.8rem;}
  .split{grid-template-columns:1fr;}
  .split-text{padding:2.5rem 1.5rem;}

  /* Bottom nav — centred stack on mobile */
  .bottom-nav{flex-direction:column;align-items:center;padding:1.4rem 1.2rem;}

  /* Footer bottom — stack vertically, no two-column split */
  .footer-bottom{flex-direction:column;gap:.4rem;}
}

/* ── Small phones — max-width: 480px ────────────────────── */
@media(max-width:480px){
  .inner{padding:0 1.5rem;}
}

/* ── Door to Wellness link-back (shared standard, added 2026-07-21) ─────
   Standard closing element for every issue/service page, linking back
   to work-with-me.html. Use with: .door-strip > .inner > a > img.door-img
   + a.door-link. See wiki-techniques.md for the pattern reference. ────── */
.door-strip{
  background:#241a10;
  padding:2.2rem 2rem;
  text-align:center;
  border-top:1px solid rgba(184,137,46,0.25);
}
.door-strip .inner{max-width:300px;margin:0 auto;}
.door-img{
  width:70px;
  margin:0 auto 0.9rem;
  display:block;
  filter:drop-shadow(0 0 8px rgba(212,170,85,0.4)) drop-shadow(0 0 18px rgba(212,170,85,0.22));
  transition:transform 0.3s ease, filter 0.3s ease;
}
.door-strip a:hover .door-img{
  transform:scale(1.08);
  filter:drop-shadow(0 0 14px rgba(212,170,85,0.6)) drop-shadow(0 0 28px rgba(212,170,85,0.4));
}
.door-link{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:14px;
  letter-spacing:0.03em;
  color:var(--gold-mid);
  text-decoration:none;
  border-bottom:1px solid rgba(212,170,85,0.35);
  padding-bottom:2px;
  transition:transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.door-link:hover{transform:translateY(-1px);border-color:var(--gold-light);color:var(--gold-light);}