/* =========================
   Reset
   ========================= */
*,
*::before,
*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0}
img,video{max-width:100%;height:auto;border-radius:calc(var(--radius) - 8px)}

/* =========================
   Theme variables
   ========================= */
:root{
  /* Palette (ONLY these colors) */
  --charcoal:#605b56ff;
  --atomic-tangerine:#ff7733ff;
  --muted-olive:#acc18aff;
  --wisteria-blue:#ADA8B6;
  --tea-green:#dafeb7ff;

  /* Layout */
  --max:960px;
  --space:clamp(.85rem,1.2vw,1.1rem);
  --radius:18px;

  /* Typography */
  --big-text:clamp(1.15rem,1rem + .8vw,1.55rem);
  --title-text:clamp(1.05rem,.95rem + .6vw,1.3rem);
  --body-text:clamp(1rem,.95rem + .35vw,1.1rem);
  --small-text:.95rem;

  /* Derived */
  --text:var(--charcoal);
  --muted:color-mix(in oklab, var(--charcoal) 65%, white 35%);
  --bd:color-mix(in oklab, var(--charcoal) 25%, white 75%);
  --surface:color-mix(in oklab, white 78%, var(--tea-green) 22%);
  --surface-2:color-mix(in oklab, white 72%, var(--wisteria-blue) 28%);
  --shadow:0 14px 34px color-mix(in oklab, var(--charcoal) 22%, transparent);
}

/* =========================
   Page base
   ========================= */
body{
  color:var(--text);
  font:400 var(--body-text)/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(1100px 650px at 12% 8%, color-mix(in oklab, var(--atomic-tangerine) 62%, transparent), transparent 60%),
    radial-gradient(900px 560px at 85% 18%, color-mix(in oklab, var(--muted-olive) 55%, transparent), transparent 62%),
    radial-gradient(1200px 720px at 45% 95%, color-mix(in oklab, var(--wisteria-blue) 58%, transparent), transparent 64%),
    linear-gradient(180deg, var(--tea-green) 0%, var(--muted-olive) 55%, var(--wisteria-blue) 100%);
  overflow-x:hidden;
}

a{color:color-mix(in oklab, var(--charcoal) 25%, var(--atomic-tangerine) 75%);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{
  outline:3px solid color-mix(in oklab, var(--atomic-tangerine) 70%, white 30%);
  outline-offset:2px;
  border-radius:.35rem;
}

/* =========================
   Layout
   ========================= */
header,main{margin:0 auto;padding:var(--space)}
main{padding-top:calc(var(--space) * 1.2)}

/* =========================
   Header / nav
   ========================= */
#site-header{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  gap:.6rem;
  align-items:center;
  justify-content:flex-end;
  border-bottom:1px solid var(--bd);
  background:color-mix(in oklab, var(--surface) 78%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

#site-header a{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.45rem .65rem;
  border-radius:999px;
}
#site-header a:hover{
  text-decoration:none;
  background:color-mix(in oklab, var(--atomic-tangerine) 16%, transparent);
}

#site-header .nav-toggle{
  display:none;
  border:1px solid var(--bd);
  background:color-mix(in oklab, var(--surface) 86%, white 14%);
  color:inherit;
  border-radius:999px;
  padding:.45rem .65rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 8px 18px color-mix(in oklab, var(--charcoal) 18%, transparent);
}

#site-header nav{display:flex;gap:.5rem;align-items:center}

/* Mobile / portrait: collapse to hamburger */
@media (max-width: 720px), (orientation: portrait) {
  #site-header{justify-content:space-between}
  #site-header .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  #site-header nav{
    width:calc(100vw - 2*var(--space));
    display:none;
    position:absolute;
    right:var(--space);
    top:calc(100% + .20rem);
    background:color-mix(in oklab, var(--surface) 92%, white 8%);
    border:1px solid var(--bd);
    border-radius:calc(var(--radius) - 6px);
    padding:.55rem;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    min-width:12rem;
  }
  #site-header nav a{justify-content:center}
  #site-header[data-open="true"] nav{display:flex}
}

/* =========================
   Type
   ========================= */
h1,h2,h3{line-height:1.15;margin:.65em 0 .35em}
h1{font-size:clamp(1.8rem,1.2rem + 2.7vw,2.4rem)}
h2{font-size:clamp(1.35rem,1.1rem + 1.4vw,1.8rem)}
h3{font-size:var(--title-text)}
p{margin:.6em 0 1em}
.muted{color:var(--muted)}

/* =========================
   Cards, buttons, helpers
   ========================= */
.grid{display:grid;gap:var(--space);grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}

.card{
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:var(--space);
  background:linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow:0 10px 26px color-mix(in oklab, var(--charcoal) 14%, transparent);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.55rem .9rem;
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--atomic-tangerine) 25%, var(--bd) 75%);
  background:color-mix(in oklab, var(--atomic-tangerine) 12%, transparent);
  color:inherit;
  text-decoration:none;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:hover{
  text-decoration:none;
  transform:translateY(-1px);
  background:color-mix(in oklab, var(--atomic-tangerine) 18%, transparent);
  border-color:color-mix(in oklab, var(--atomic-tangerine) 55%, var(--bd) 45%);
  box-shadow:0 10px 24px color-mix(in oklab, var(--charcoal) 16%, transparent);
}

/* Forms */
input,select,textarea,button{font:inherit;color:inherit}
input,select,textarea{
  width:100%;
  max-width:100%;
  padding:.65rem .75rem;
  border:1px solid var(--bd);
  border-radius:calc(var(--radius) - 8px);
  background:color-mix(in oklab, var(--surface) 88%, white 12%);
}
label{display:block;margin:.5rem 0 .25rem;color:var(--muted)}

/* =========================
   Motion / accessibility
   ========================= */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .btn{transition:none}
}

@media (prefers-reduced-motion: no-preference){
  #site-header nav{transition:opacity .15s ease, transform .15s ease}
  @media (max-width: 720px), (orientation: portrait) {
    #site-header nav{opacity:0; transform:translateY(-6px)}
    #site-header[data-open="true"] nav{opacity:1; transform:translateY(0)}
  }
}