/* Reset + variables + typography */
*,
*::before,
*::after { box-sizing: border-box; }

/* === Shukrani typography === */
:root {
  /* Families */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif: "Source Serif 4", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Rhythm */
  --font-size-base: 16px;
  --lh-body: 1.6;

  /* Fine-tuning */
  --tracking-tight: -0.01em;
}

/* Base */
html { font-family: var(--font-sans); font-size: var(--font-size-base); }
body { line-height: var(--lh-body); text-rendering: optimizeLegibility; }

/* Headings + quotes get the bookish serif */
h1, h2, h3, h4, h5, h6,
blockquote {
  font-family: var(--font-serif);
  letter-spacing: var(--tracking-tight);
}

/* Optional: slightly larger, calmer headings */
h1 { font-size: clamp(2rem, 3.2vw, 2.25rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 2.4vw, 1.75rem); line-height: 1.25; }
h3 { font-size: 1.25rem; line-height: 1.3; }

/* UI polish: use tidy numerals in buttons/nav/badges if supported */
button, .btn, nav, .badge {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* Quotes look nicer with a bit of style */
blockquote {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-left: 4px solid var(--primary, #4f46e5);
  background: #fafafa;
  border-radius: 8px;
}

/* === Shukrani warm palette === */
:root{
  /* warm cream base + soft orange brand */
  --bg-cream-1: #fff8f1;        /* very light */
  --bg-cream-2: #fff2e6;        /* light */
  --bg-cream-3: #ffe9d6;        /* accent */
  --surface:    #ffffff;        /* card surface */
  --primary:    #e97a2b;        /* warm orange */
  --text:       #1f2937;        /* slate-800 */
  --muted:      #6b7280;        /* slate-500 */

  /* optional shadow */
  --shadow: 0 6px 18px rgba(17, 24, 39, .06);
}

/* soft, warm background with gentle corner glow */
body{
  background:
    radial-gradient(60% 40% at 0% 0%, var(--bg-cream-3) 0%, transparent 60%),
    radial-gradient(40% 30% at 100% 20%, var(--bg-cream-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-cream-1) 0%, var(--bg-cream-2) 100%);
  color: var(--text);
}


html, body{
  height: 100%;
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
}

img{ max-width:100%; display:block; }

h1,h2,h3{ line-height:1.2; margin:0 0 .5rem; }
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.5rem, 3vw, 2rem); }
h3{ font-size: 1.125rem; }

p{ margin: 0 0 1rem; }
.lead{ font-size: 1.125rem; color: var(--muted); }

.container{ width: min(100% - 2rem, var(--container)); margin: 0 auto; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; margin:-1px;
  padding:0; border:0; clip:rect(0 0 0 0); overflow:hidden;
}


/* =========================
   Fluid type + rhythm
   ========================= */
:root{
  /* fluid base size: 15px on small → 17px on large */
  --fs-base: clamp(15px, 1.4vw + 0.4rem, 17px);
  --lh: 1.6;

  /* headings scale */
  --fs-h1: clamp(1.9rem, 4.2vw + 0.6rem, 3rem);
  --fs-h2: clamp(1.4rem, 2.5vw + 0.4rem, 2rem);
  --fs-h3: clamp(1.15rem, 1.2vw + 0.7rem, 1.35rem);

  /* page gutters */
  --gutter: clamp(16px, 4vw, 40px);
  --container: min(1100px, calc(100% - var(--gutter)*2));
}

html { font-size: var(--fs-base); }
body { line-height: var(--lh); }

/* headings */
h1{ font-size: var(--fs-h1); line-height: 1.15; margin: .2em 0 .4em; }
h2{ font-size: var(--fs-h2); line-height: 1.2;  margin: 1.2em 0 .6em; }
h3{ font-size: var(--fs-h3); line-height: 1.3;  margin: 1em 0 .4em; }

/* readable measure for long text */
.lead, p, li { max-width: 70ch; }

/* make all .container auto-fit the new width */
.container{ width: var(--container); margin-inline: auto; padding-inline: 0; }

/* small paddings for sections */
.section{ padding: clamp(28px, 6vw, 72px) 0; }

/* === Shukrani warm background (final override) === */
:root{
  --bg-cream-1:#fff8f1;
  --bg-cream-2:#fff2e6;
  --bg-cream-3:#ffe9d6;
  --surface:#ffffff;
  --primary:#e97a2b;
  --text:#1f2937;
  --shadow:0 6px 18px rgba(17,24,39,.06);
}

/* Fallback color and layered glow */
html{ background: var(--bg-cream-1); }

body{
  background:
    radial-gradient(60% 40% at 0% 0%,   var(--bg-cream-3) 0%, transparent 60%),
    radial-gradient(40% 30% at 100% 18%,var(--bg-cream-2) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-cream-1) 0%, var(--bg-cream-2) 100%);
  color: var(--text);
}

/* temp test — remove after */
body { outline: 3px solid transparent; }


/* ---- Brand oranges (normal + darker) ---- */
:root{
  --primary:       #e97a2b;  /* base */
  --primary-600:   #d86411;  /* darker for buttons */
  --primary-700:   #bd520b;  /* hover/active */
  --link:          #1f3a8a;  /* readable link color on cream */
}

/* --- Fancy polish: color system & global tweaks --- */
:root{
  --primary-50:#FEF3EA;
  --primary-100:#FCE9D8;
  --primary-200:#F7D8BE;
  --primary-300:#F1C29A;
  --primary-500:#E08D3E;
  --primary-600:#D4762B;
  --primary-700:#B96221;

  --ink-900:#1E2328;
  --ink-700:#32363C;
  --ink-500:#50555B;

  --surface:#fff;
  --card:#ffffff;
  --shadow: 0 10px 30px rgba(22,23,24,.08), 0 3px 10px rgba(22,23,24,.05);
}

/* Hero: warm bokeh-style glow using layered radial gradients */
.hero{
  position: relative;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
    linear-gradient(180deg, var(--primary-50) 0%, #fff 60%);
  border-radius: 18px;
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

/* Headings: a touch bigger + tighter tracking for drama */
.hero h1{
  letter-spacing:-0.015em;
  line-height:1.15;
  font-size: clamp(2.2rem, 3.1vw + 1.6rem, 3.3rem);
  color: var(--ink-900);
}
.lead{ color: var(--ink-700); }

/* Better container width rhythm */
.container{ max-width: 1120px; }

/* Global buttons (primary + hover/active states) */
.btn-primary{
  background: var(--primary-600);
  border: 1px solid var(--primary-600);
  color:#fff;
  border-radius: 999px;
  padding: .8rem 1.1rem;
  font-weight: 600;
  box-shadow: 0 4px 10px rgba(211,118,43,.22);
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary:hover{
  background: var(--primary-700);
  border-color: var(--primary-700);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(211,118,43,.28);
}
.btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(211,118,43,.22);
}

/* Top-nav CTA in case it’s an <a> not a .btn element */
.nav a.btn-primary{
  display:inline-block;
  background: var(--primary-600);
  border:1px solid var(--primary-600);
  color:#fff;
  padding:.55rem 1rem;
  border-radius:999px;
}
.nav a.btn-primary:hover{ background:var(--primary-700); border-color:var(--primary-700); }

/* Footer links: ensure readable contrast */
.site-footer a{ color:#3b2a1c; text-decoration: underline; text-decoration-color: rgba(59,42,28,.3); }
.site-footer a:hover{ text-decoration-color: rgba(59,42,28,.65); }