/* ============================================================
   Once Upon a Line — Design System · Colors & Type
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600&display=swap');

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

:root {
  --brand-coral:       #FF6B5C;
  --brand-coral-dark:  #E8503F;
  --brand-teal:        #2FB5AC;
  --brand-teal-dark:   #1F8A82;
  --accent-sun:        #FFC94D;
  --accent-grape:      #9B7EDE;
  --accent-leaf:       #6FC56B;
  --accent-bubblegum:  #FF9EC4;
  --accent-sky:        #5FB8F5;
  --paper:    #FFFBF3;
  --surface:  #FFFFFF;
  --surface-2:#FFF6E9;
  --ink:      #2B2B2E;
  --ink-soft: #6B6B72;
  --ink-faint:#9A9AA1;
  --line:     #EFE7D8;
  --line-2:   #E4D9C5;
  --success: #6FC56B; --success-bg: #EEF8ED;
  --warning: #FFB02E; --warning-bg: #FFF4E0;
  --error:   #F0563E; --error-bg:   #FDECE8;
  --info:    #5FB8F5; --info-bg:    #E9F5FE;
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body:    "Nunito", system-ui, sans-serif;
  --text-hero:    3.5rem;
  --text-h1:      2.5rem;
  --text-h2:      1.875rem;
  --text-h3:      1.375rem;
  --text-body-lg: 1.125rem;
  --text-body:    1rem;
  --text-small:   0.875rem;
  --lh-display: 1.2;
  --lh-body:    1.6;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --shadow-soft:   0 4px 16px rgba(43,43,46,0.08);
  --shadow-lifted: 0 8px 28px rgba(43,43,46,0.12);
  --shadow-pop:    0 14px 40px rgba(43,43,46,0.16);
  --ease-soft: cubic-bezier(0.34,1.2,0.64,1);
  --ease-out:  cubic-bezier(0.22,0.61,0.36,1);
  --dur-fast: 140ms;
  --dur: 220ms;
}

/* ── Shared site nav ── */
.site-nav {
  position:sticky;top:0;z-index:100;
  background:rgba(255,251,243,0.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:0 40px;
  display:flex;align-items:center;gap:32px;height:60px;
}
.site-nav .brand {
  display:flex;flex-direction:column;line-height:1;gap:1px;text-decoration:none;flex:none;
}
.site-nav .brand-once {
  font-family:var(--font-display);font-weight:600;letter-spacing:.22em;font-size:9px;color:var(--ink-soft);text-transform:uppercase;
}
.site-nav .brand-line {
  position:relative;display:inline-block;font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink);padding-bottom:6px;
}
.site-nav .brand-line svg{position:absolute;left:1px;bottom:-1px;}
.site-nav .nav-links {display:flex;gap:6px;align-items:center;margin-left:auto;}
.site-nav .nav-links a {
  font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink-soft);
  text-decoration:none;padding:6px 14px;border-radius:var(--radius-pill);transition:all var(--dur-fast);
}
.site-nav .nav-links a:hover,.site-nav .nav-links a.active {
  color:var(--ink);background:var(--surface-2);
}
.site-nav .nav-cta {
  font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff;
  background:var(--brand-coral);border:none;border-radius:var(--radius-pill);
  padding:8px 20px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-fast);
}
.site-nav .nav-cta:hover{background:var(--brand-coral-dark);}

/* ── OUL logo inline SVG mark ── */
.oul-mark svg{display:block;}

/* ── Rule util ── */
.rule{height:1px;background:var(--line);margin:0 0 17px;}