/* =============================================================
   YOUTOPIA Atelier — Brand Book v1.8 tokens
   Mobile-first. Used by index.html, within.html, flow.html.
   ============================================================= */

:root {
  /* ─ Atelier (parent · golden hour + wine) ─ */
  --a-sun:       #F8A900;
  --a-saffron:   #D4A24A;
  --a-ochre:     #9C7424;
  --a-honey:     #F5E2B0;
  --a-burgundy:  #7E2D3A;

  /* ─ within (inner practice · sage→teal) ─ */
  --w-sage:        #89C4A8;
  --w-teal:        #4A9A88;
  --w-sage-action: #6B9E8F;
  --w-rose:        #C47870;

  /* ─ Flow (outer practice · vintage teal trio) ─ */
  --f-sun:       #2D7A8C;
  --f-ink:       #2A3F5C;   /* ink-navy YOU on Flow */
  --f-turquoise: #4FA8A8;
  --f-aqua:      #C8DDE0;
  --f-graphite:  #2E2B36;

  /* ─ Shared neutrals ─ */
  --bronze:      #8B6914;   /* YOU on cream, Atelier */
  --rose:        #C47870;   /* within accent */
  --wheat:       #F2EAD8;
  --linen:       #E8DCC8;
  --cream-paper: #FDFAF6;
  --deep-brown:  #3D2E1E;
  --warm-tan:    #9A7B5A;
  --muted-gold:  #A08060;

  /* ─ Motion ─ */
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream-paper);
  color: var(--deep-brown);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   LOCKUP — the wordmark composition
   Three flavours: composite (parent + Flow) and within
   Uses flex (not baseline-tricks) so it survives any container.
   --mark-h drives every other size.
   ============================================================ */

.lockup {
  --mark-h: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mark-h) * 0.18);
  line-height: 1;
}

.lockup-row {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--mark-h) * 0.18);
  flex-wrap: nowrap;
  max-width: 100%;
}

.lockup-row .sun-mark {
  height: var(--mark-h);
  width: auto;
  flex-shrink: 0;
}

.lockup-row .youtopia-text,
.lockup-row .full-wordmark {
  height: calc(var(--mark-h) * 0.62);
  width: auto;
  flex-shrink: 1;
  min-width: 0;
}
/* full-wordmark already contains the gradient sun + YOUTOPIA */
.lockup-row .full-wordmark { height: var(--mark-h); }

.lockup-row .trailing {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--mark-h) * 0.68);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.005em;
}

.lockup-row .trailing.atelier  { color: var(--a-burgundy); }
.lockup-row .trailing.within   { color: var(--w-rose); }
.lockup-row .trailing.flow     { color: var(--f-turquoise); }

.lockup .tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--mark-h) * 0.26);
  letter-spacing: 0.12em;
  text-align: center;
  white-space: normal;
  text-wrap: balance;
  margin: 0;
}
.lockup .tagline.atelier { color: var(--a-burgundy); }
.lockup .tagline.within  { color: var(--w-rose); }
.lockup .tagline.flow    { color: var(--f-turquoise); }

/* ============================================================
   Utility — eyebrow label
   ============================================================ */

.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}