/* I Know My Skin — site base, emphasis themes, motion, responsive */

* { box-sizing: border-box; }
:root { --header-h: 71px; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 320ms var(--ease-soft);
}
a { color: inherit; }
img { max-width: 100%; }
body { overflow-x: hidden; }

/* ---- Colour-emphasis themes (controlled by Tweaks, persists across pages) ---- */
body[data-emphasis="blush"] {
  --bg: var(--blush-50);
  --bg-sunken: var(--blush-100);
  --bg-raised: #FFFFFF;
}
body[data-emphasis="teal"] {
  --bg: var(--teal-50);
  --bg-sunken: var(--teal-100);
  --bg-raised: #FFFFFF;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--teal-300); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- Reveal-on-scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 620ms var(--ease-soft), transform 620ms var(--ease-soft); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---- Section width helper ---- */
.wrap { max-width: 1140px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* ---- Responsive ---- */
/* Header: desktop nav vs. mobile hamburger menu */
.nav-desktop { display: flex; }
.nav-burger { display: none; }
.mobile-menu { display: none; }
@media (max-width: 880px) {
  .nav-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
  .mobile-menu[data-open="true"] { display: block; }
}

@media (max-width: 1080px) {
  .method-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 760px) {
  .method-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .method-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .wrap { padding-left: 22px; padding-right: 22px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }
  .teaser-row { grid-template-columns: 1fr !important; gap: 20px !important; }
  .founder-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .imp-row { grid-template-columns: 1fr !important; gap: 4px !important; }
  .book-grid { grid-template-columns: 1fr !important; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .nav-hide { display: none !important; }
}

/* Phones: tighten vertical rhythm. Stylesheet !important overrides inline top/bottom padding. */
@media (max-width: 600px) {
  .wrap:not(.hero-grid) { padding-top: 60px !important; padding-bottom: 60px !important; }
  .hero-grid { padding-top: 116px !important; padding-bottom: 60px !important; gap: 34px !important; }
}