/* ============================================================
   PULSIN DESIGN SYSTEM · SITE STYLES
   Shared across all pages: tokens, layout, type, header, footer
   ============================================================ */

:root {
  /* Core palette */
  --cocoa: #402020;
  --hazel: #814d3c;
  --rich: #de6b0a;
  --ivory: #faebc4;
  --pale: #f2eade;
  --oat: #e4d5c4;
  --almond: #edd6a3;

  /* Flavour accents (powders and bars) */
  --vanilla: #f4bd48;
  --cocoa-bean: #c9a793;
  --hazel-choc: #bea7d0;
  --peanut-choc: #be9372;
  --rice: #b375ad;
  --pea: #b5b335;
  --faba: #62a744;
  --soya: #f09920;
  --seaweed: #38471e;

  /* Keto accents */
  --keto-mint: #48c0b9;
  --keto-orange: #4479b6;
  --keto-rasp: #e82277;
  --keto-fudge: #f5a81c;
  --keto-almond: #efe3ce;

  /* Type */
  --display: 'Oswald', 'Gothic 821 Condensed', 'Bebas Neue', Impact, sans-serif;
  --body: 'Inter', 'Realist', -apple-system, BlinkMacSystemFont, sans-serif;
}

* , *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--pale);
  color: var(--cocoa);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

/* ============================================================
   LAYOUT
   ============================================================ */
.page-wrap { max-width: 1320px; margin: 0 auto; padding: 0 56px; }
.section { padding: 96px 0; border-top: 1px solid var(--oat); }
.section:first-of-type { border-top: 0; }

.intro { margin-bottom: 64px; max-width: 780px; }
.intro .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rich); margin-bottom: 16px;
}
.intro .eyebrow .leaf { width: 12px; height: 12px; }
.intro h1 {
  font-family: var(--display); font-size: 64px; font-weight: 700;
  text-transform: uppercase; line-height: 0.95;
  color: var(--cocoa); margin: 0; letter-spacing: 0.005em;
}
.intro h1 .dot { color: var(--rich); }
.intro p {
  font-family: var(--body); font-size: 18px; color: var(--hazel);
  line-height: 1.55; margin: 20px 0 0;
}

.subhead {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hazel); margin: 64px 0 24px;
}
.subhead:first-of-type { margin-top: 0; }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  background: var(--cocoa); color: var(--ivory);
  border-bottom: 1px solid var(--hazel);
  position: sticky; top: 0; z-index: 50;
}
.site-header-inner {
  max-width: 1320px; margin: 0 auto; padding: 18px 56px;
  display: flex; align-items: center; justify-content: space-between;
}
.site-header .brand {
  display: inline-flex; align-items: center; gap: 14px;
  text-decoration: none;
}
.site-header .brand .wm {
  width: 110px; aspect-ratio: 700/252;
  background: url('../img/logos/Ivory_Latte.png') center/contain no-repeat;
  text-indent: -9999px; overflow: hidden;
}
.site-header .brand .label {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--almond); padding-left: 14px; border-left: 1px solid var(--hazel);
}
.site-nav { display: flex; gap: 4px; }
.site-nav a {
  font-family: var(--display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--almond); text-decoration: none;
  padding: 10px 16px; border-radius: 999px;
  transition: background 0.18s, color 0.18s;
}
.site-nav a:hover { color: var(--ivory); }
.site-nav a.active { background: var(--rich); color: #fff; }

/* ============================================================
   SECTION NAV (in-page anchor list)
   ============================================================ */
.section-nav {
  position: sticky; top: 88px;
  background: var(--ivory); border-radius: 999px;
  padding: 8px 12px; margin: 32px 0 64px;
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  align-self: flex-start; z-index: 10;
  box-shadow: 0 4px 18px rgba(64,32,32,0.06);
}
.section-nav a {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--hazel); text-decoration: none;
  padding: 8px 14px; border-radius: 999px;
  transition: background 0.18s, color 0.18s;
}
.section-nav a:hover { color: var(--cocoa); }
.section-nav a.active { background: var(--cocoa); color: var(--ivory); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--cocoa); color: var(--ivory);
  padding: 64px 0 32px; margin-top: 96px;
}
.site-footer-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 56px;
}
.site-footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--hazel);
}
.site-footer .wm-mark {
  width: 160px; aspect-ratio: 728/364;
  background: url('../img/logos/Ivory_Latte_Full.png') center/contain no-repeat;
  text-indent: -9999px; overflow: hidden; margin-bottom: 18px;
}
.site-footer p.brand-line {
  font-family: var(--body); font-size: 14px; color: var(--almond);
  line-height: 1.6; max-width: 320px; margin: 0;
}
.site-footer .col-title {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rich); margin: 0 0 18px;
}
.site-footer .col-link {
  display: block; font-family: var(--body); font-size: 14px;
  color: var(--almond); padding: 4px 0; text-decoration: none;
}
.site-footer .col-link:hover { color: var(--ivory); }
.site-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px; font-family: var(--body); font-size: 12px;
  color: var(--almond); opacity: 0.7;
}

/* ============================================================
   COVER (used on index)
   ============================================================ */
.cover {
  background: var(--cocoa); color: var(--ivory);
  padding: 120px 0; position: relative; overflow: hidden;
}
.cover-inner { max-width: 1320px; margin: 0 auto; padding: 0 56px; position: relative; z-index: 2; }
.cover .leaf-field { position: absolute; inset: 0; opacity: 0.45; pointer-events: none; }
.cover .big-leaf {
  position: absolute; right: -120px; bottom: -120px;
  width: 600px; height: 600px; opacity: 0.4; pointer-events: none;
}
.cover .big-leaf path { fill: var(--rich); }
.cover .top-row {
  display: flex; align-items: center; gap: 24px; margin-bottom: 56px;
}
.cover .top-row .wm {
  width: 150px; aspect-ratio: 700/252;
  background: url('../img/logos/Rich_Orange.png') center/contain no-repeat;
  text-indent: -9999px; overflow: hidden;
}
.cover .top-row .divider { width: 1px; height: 32px; background: var(--hazel); }
.cover .top-row .label {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--almond);
}
.cover h1 {
  font-family: var(--display); font-size: 144px; font-weight: 700;
  text-transform: uppercase; line-height: 0.86;
  margin: 0 0 32px; letter-spacing: -0.012em; color: var(--ivory);
}
.cover h1 .accent { color: var(--rich); }
.cover .lede {
  font-family: var(--body); font-size: 22px; line-height: 1.5;
  color: var(--almond); max-width: 640px; margin: 0 0 40px;
}
.cover .tags { display: flex; gap: 12px; flex-wrap: wrap; }
.cover .tag {
  font-family: var(--display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--almond); padding: 11px 18px;
  border: 1px solid var(--hazel); border-radius: 999px;
}

/* ============================================================
   TYPE SCALE (used on foundations page)
   ============================================================ */
.type-row {
  display: grid; grid-template-columns: 220px 1fr; gap: 36px;
  align-items: baseline; padding: 32px 0;
  border-bottom: 1px solid var(--oat);
}
.type-row .meta-label {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rich); margin-bottom: 6px;
}
.type-row .meta-spec {
  font-family: var(--body); font-size: 12px; color: var(--hazel); line-height: 1.5;
}
.t-display { font-family: var(--display); font-size: 96px; font-weight: 700; line-height: 0.92; text-transform: uppercase; letter-spacing: -0.005em; }
.t-h1 { font-family: var(--display); font-size: 60px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.t-h2 { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.t-eyebrow { font-family: var(--display); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--rich); }
.t-lede { font-family: var(--body); font-size: 22px; line-height: 1.5; color: var(--hazel); }
.t-body { font-family: var(--body); font-size: 16px; line-height: 1.65; }
.t-label { font-family: var(--body); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* ============================================================
   COLOUR SWATCHES
   ============================================================ */
.swatch-grid { display: grid; gap: 18px; }
.swatch-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.swatch-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.swatch-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.swatch { display: flex; flex-direction: column; }
.swatch .chip {
  height: 140px; border-radius: 6px; position: relative; overflow: hidden;
}
.swatch .chip.lg { height: 180px; }
.swatch .chip-hex {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--display); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.swatch .swatch-name {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cocoa); margin-top: 10px;
}
.swatch .swatch-pantone {
  font-family: var(--body); font-size: 11px; color: var(--hazel); margin-top: 2px;
}
.swatch.bordered .chip { border: 1px solid var(--oat); }

/* Application strip */
.application-strip {
  margin-top: 64px; background: var(--cocoa); border-radius: 10px;
  padding: 56px; position: relative; overflow: hidden;
}
.application-strip .leaf-field { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; }
.application-strip .label {
  position: relative;
  font-family: var(--display); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--almond);
  margin-bottom: 14px; font-weight: 600;
}
.application-strip h3 {
  position: relative;
  font-family: var(--display); font-size: 42px; color: var(--ivory);
  text-transform: uppercase; line-height: 1.05; margin: 0;
  max-width: 760px; font-weight: 700;
}
.application-strip h3 .em-1 { color: var(--almond); }
.application-strip h3 .em-2 { color: var(--rich); }

/* ============================================================
   LOGO GRID (foundations page)
   ============================================================ */
.logo-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 32px;
}
.logo-card {
  padding: 56px 48px; border-radius: 10px; min-height: 240px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.logo-card.bg-cocoa { background: var(--cocoa); }
.logo-card.bg-white { background: #ffffff; border: 1px solid var(--oat); }
.logo-card.bg-pale  { background: var(--pale); }
.logo-card.bg-ivory { background: var(--ivory); }
.logo-card .wm {
  width: 280px; aspect-ratio: 700/252;
  background-position: center; background-repeat: no-repeat; background-size: contain;
  text-indent: -9999px; overflow: hidden;
}
.logo-card .wm.full { aspect-ratio: 728/364; width: 320px; }
.logo-card .meta {
  position: absolute; bottom: 16px; left: 24px;
  font-family: var(--display); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  display: flex; gap: 14px;
}
.logo-card .meta span + span::before { content: "·"; margin-right: 14px; opacity: 0.5; }
.logo-card.bg-cocoa .meta { color: var(--almond); }
.logo-card.bg-white .meta,
.logo-card.bg-pale .meta,
.logo-card.bg-ivory .meta { color: var(--hazel); }

/* Wordmark image classes */
.wm-rich          { background-image: url('../img/logos/Rich_Orange.png'); }
.wm-rich.full     { background-image: url('../img/logos/Rich_Orange_Full.png'); }
.wm-cocoa         { background-image: url('../img/logos/Cocoa_Dusk.png'); }
.wm-cocoa.full    { background-image: url('../img/logos/Cocoa_Dusk_Full.png'); }
.wm-hazel         { background-image: url('../img/logos/Hazelnut_Shadow.png'); }
.wm-hazel.full    { background-image: url('../img/logos/Hazelnut_Shadow_Full.png'); }
.wm-ivory         { background-image: url('../img/logos/Ivory_Latte.png'); }
.wm-ivory.full    { background-image: url('../img/logos/Ivory_Latte_Full.png'); }

/* Usage do/don't grid */
.usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.usage-card {
  background: var(--pale); border-radius: 10px; padding: 32px;
  border-left: 4px solid var(--rich);
}
.usage-card.bad { border-left-color: var(--hazel); opacity: 0.85; }
.usage-card .usage-label {
  font-family: var(--display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px;
}
.usage-card.good .usage-label { color: var(--faba); }
.usage-card.bad .usage-label { color: var(--hazel); }
.usage-card h5 {
  font-family: var(--display); font-size: 18px; font-weight: 700;
  text-transform: uppercase; color: var(--cocoa); margin: 0 0 8px; line-height: 1.1;
}
.usage-card p {
  font-family: var(--body); font-size: 13px; color: var(--hazel);
  margin: 0; line-height: 1.5;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 900px) {
  .page-wrap, .site-header-inner, .cover-inner, .site-footer-inner { padding-left: 24px; padding-right: 24px; }
  .site-header-inner { flex-direction: column; gap: 16px; }
  .site-nav { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .cover { padding: 64px 0; }
  .cover h1 { font-size: 64px; }
  .cover .lede { font-size: 18px; }
  .intro h1 { font-size: 40px; }
  .swatch-grid.cols-4, .swatch-grid.cols-5, .swatch-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
  .logo-grid { grid-template-columns: 1fr; }
  .logo-card { padding: 36px 24px; min-height: auto; }
  .logo-card .wm { width: 200px; }
  .logo-card .wm.full { width: 220px; }
  .usage-grid { grid-template-columns: 1fr; }
  .type-row { grid-template-columns: 1fr; gap: 8px; }
  .t-display { font-size: 48px; }
  .t-h1 { font-size: 36px; }
  .t-h2 { font-size: 24px; }
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .site-footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
  .application-strip { padding: 36px; }
  .application-strip h3 { font-size: 28px; }
}