:root{
  /* palette derived from the inspiration painting: pushed, non-literal */
  --green:#5a9a55;
  --green-d:#2f5d3a;
  --teal:#1f8a86;
  --teal-d:#136b67;
  --blue:#14365f;
  --blue-d:#0f2a4c;
  --salmon:#e08a84;
  --salmon-l:#ecaba6;
  --violet:#6b4ea0;
  --violet-d:#523c80;
  --cream:#e7f0ea;       /* sea-glass off-white from the painting's water, not beige */
  --cream-d:#d2e3da;
  --gold:#e6bb55;
  --ink:#16241f;          /* near-black green for text on light fields */
  --ink-soft:#4a5a53;
  --light:#f6f1e6;        /* warm off-white text on dark fields */
  --light-soft:#ccd6cf;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;font-family:"Public Sans",system-ui,sans-serif;
  color:var(--ink);background:var(--cream);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- type ---------- */
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.04;margin:0;
  letter-spacing:-.01em}
.eyebrow{font-family:"Public Sans",sans-serif;font-size:.82rem;font-weight:600;
  letter-spacing:.01em}
/* ALT eyebrow style: for an editorial feel, comment out the rule above and use:
   .eyebrow{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:1rem;letter-spacing:0} */
.mono{font-family:"IBM Plex Mono",monospace}
a{color:inherit}
a:focus-visible,button:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);
  outline-offset:3px;border-radius:4px}

/* ---------- layout shells ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.band{padding:clamp(4rem,11vh,8rem) 0}
.band--tight{padding:clamp(2.2rem,6vh,3.6rem) 0}
.on-dark{color:var(--light)}
.on-dark .eyebrow{color:var(--gold)}
.on-light .eyebrow{color:var(--teal-d)}

/* color fields (Barrett-style full-bleed alternating grounds) */
.f-cream{background:var(--cream)}
.f-teal{background:var(--teal)}
.f-salmon{background:var(--salmon)}
.f-blue{background:var(--blue)}
.f-violet{background:var(--violet)}
.f-green{background:var(--green-d)}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:"Public Sans",sans-serif;font-weight:600;
  font-size:.95rem;text-decoration:none;padding:.8rem 1.5rem;border-radius:999px;
  border:2px solid transparent;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:var(--ink);color:var(--cream)}
.btn--light{background:var(--light);color:var(--ink)}
.btn--ghost{background:transparent;border-color:currentColor;color:inherit}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(231,240,234,.86);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--cream-d)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;
  min-height:68px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand .mark{width:30px;height:30px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--teal),var(--green),var(--salmon),var(--violet),var(--teal));
  flex:none}
.brand .bname{font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem}
.brand .bracket{color:var(--teal-d)}
.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{text-decoration:none;font-size:.92rem;font-weight:500}
.nav-links a:hover{color:var(--teal-d)}
.nav-cta{font-family:"IBM Plex Mono",monospace;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.55rem 1rem;border-radius:999px;background:var(--ink);
  color:var(--cream);text-decoration:none}
@media (max-width:760px){.nav-links{display:none}}

/* ---------- ART FRAME (reserved space for Kelly's own artwork) ----------
   To use your own art: put an <img> inside the frame:
   <img src="your-art.png" alt="..." style="width:100%;height:100%;object-fit:cover">
   For a credit line, put it in a <figcaption class="art-credit"> BELOW the frame,
   wrapped with the frame in <figure class="art-block"> — never inside .art-cap. */
.art-frame{position:relative;width:100%;border-radius:18px;overflow:hidden;
  box-shadow:0 18px 50px rgba(15,42,76,.18);isolation:isolate}
.art-frame::after{content:"";position:absolute;inset:0;border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);pointer-events:none}
.art-hero{aspect-ratio:16/10}
.art-sq{aspect-ratio:4/3}
/* painterly washes so empty frames still look intentional + on-palette */
.wash-1{background:
  radial-gradient(120% 90% at 18% 12%, var(--green) 0%, transparent 55%),
  radial-gradient(120% 90% at 88% 22%, var(--teal) 0%, transparent 50%),
  radial-gradient(130% 100% at 30% 95%, var(--violet) 0%, transparent 55%),
  radial-gradient(120% 100% at 95% 92%, var(--salmon) 0%, transparent 50%),
  linear-gradient(160deg,var(--teal),var(--blue))}
.wash-2{background:
  radial-gradient(120% 100% at 20% 20%, var(--teal) 0%, transparent 55%),
  radial-gradient(120% 100% at 90% 85%, var(--green) 0%, transparent 55%),
  linear-gradient(150deg,var(--teal-d),var(--green-d))}
.wash-3{background:
  radial-gradient(120% 100% at 80% 18%, var(--salmon) 0%, transparent 55%),
  radial-gradient(120% 100% at 15% 90%, var(--gold) 0%, transparent 50%),
  linear-gradient(150deg,var(--salmon),var(--cream-d))}
.wash-4{background:
  radial-gradient(120% 100% at 22% 18%, var(--violet) 0%, transparent 55%),
  radial-gradient(120% 100% at 85% 88%, var(--blue) 0%, transparent 55%),
  linear-gradient(150deg,var(--violet),var(--blue-d))}
.art-cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:.5rem;color:#fff;padding:1.2rem}
.art-cap .pill{font-family:"IBM Plex Mono",monospace;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;background:rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.45);
  padding:.4rem .8rem;border-radius:999px}
.art-cap .note{font-size:.82rem;max-width:24ch;color:rgba(255,255,255,.88);text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* credit line that sits BELOW the frame (fixes overlap) */
.art-block{margin:0}
.art-credit{margin-top:.6rem;font-family:"IBM Plex Mono",monospace;
  font-size:.72rem;letter-spacing:.02em;color:var(--ink-soft)}
.on-dark .art-credit{color:var(--light-soft)}

/* upena net overlay for empty frames */
.art-net{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}

/* ---------- hero ---------- */
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem);margin:.6rem 0 0}
.hero h1 em{font-style:italic;color:var(--teal-d)}
.hero .sub{font-size:clamp(1.1rem,2vw,1.35rem);margin:1.4rem 0 0;max-width:34ch;color:var(--ink)}
.hero .cta-row{margin-top:2rem;display:flex;gap:.9rem;flex-wrap:wrap}

/* ---------- definition list (hero: Kilo, n., v.) ---------- */
.def-list{list-style:none;counter-reset:def;margin:1.4rem 0 0;padding:0;max-width:34ch}
.def-list li{counter-increment:def;position:relative;padding-left:1.9rem;
  font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.5;color:var(--ink)}
.def-list li+li{margin-top:1rem}
.def-list li::before{content:counter(def)".";position:absolute;left:0;top:0;
  font-family:"IBM Plex Mono",monospace;font-size:.78em;color:var(--ink-soft)}
.acronym-highlight{font-weight:600;color:var(--teal-d)}
.def-source{display:block;margin-top:.25rem;font-family:"Public Sans",sans-serif;
  font-size:.78rem;font-style:normal;color:var(--ink-soft)}
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr}
  .hero .art-frame{order:-1}
}

/* ---------- generic split (alternating) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split.rev .copy{order:2}
.split h2{font-size:clamp(1.9rem,4vw,3rem);max-width:16ch}
.split p{font-size:1.1rem;margin:1.2rem 0 0;max-width:46ch}
.on-dark.split p,.split.on-dark p{color:var(--light)}
.split .cta-row{margin-top:1.8rem}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:1.8rem}
  .split.rev .copy{order:0}
}

/* ---------- fact callout ---------- */
.fact{text-align:center}
.fact .eyebrow{display:block;margin-bottom:1rem;color:var(--blue-d)}
.fact h2{font-size:clamp(1.8rem,4.4vw,3.2rem);max-width:20ch;margin:0 auto;color:var(--blue-d)}
.fact p{margin:1.4rem auto 0;max-width:48ch;font-size:1.05rem;color:var(--blue-d)}

/* ---------- questions intro ---------- */
.q-head{text-align:center;margin-bottom:clamp(2.5rem,6vh,4rem)}
.q-head h2{font-size:clamp(2rem,4.5vw,3.2rem)}
.q-head .eyebrow{display:block;margin-bottom:.9rem}
.q-block{margin-top:clamp(3rem,7vh,5rem)}
.q-block h3{font-size:clamp(1.5rem,3vw,2.1rem);max-width:18ch}
.q-block p{font-size:1.08rem;margin:1.1rem 0 0;max-width:46ch}
.q-block .tools{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.5rem}
.chip{font-family:"IBM Plex Mono",monospace;font-size:.72rem;letter-spacing:.03em;
  padding:.38rem .7rem;border-radius:999px;border:1px solid var(--ink);opacity:.75}

/* ---------- projects ---------- */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.6rem}
.proj{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:16px;padding:1.6rem 1.6rem 1.8rem}
.proj .pname{font-family:"IBM Plex Mono",monospace;color:var(--gold);font-size:.85rem;
  letter-spacing:.04em}
.proj h3{font-size:1.3rem;font-weight:500;margin:.5rem 0 0}
.proj p{margin:.7rem 0 0;color:var(--light-soft);font-size:.98rem}
.proj .stat{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--light-soft);
  margin-top:.9rem;opacity:.8}
@media (max-width:680px){.proj-grid{grid-template-columns:1fr}}

/* ---------- why it matters / join ---------- */
.why{text-align:center}
.why .eyebrow{display:block;margin-bottom:1rem}
.why h2{font-size:clamp(2rem,5vw,3.4rem);max-width:20ch;margin:0 auto 2rem}

/* ---------- people ---------- */
.people-head{margin-bottom:2.4rem}
.people-head h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.people-head .eyebrow{display:block;margin-bottom:.8rem}
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.person .pic{aspect-ratio:1;border-radius:14px;margin-bottom:1rem}
.person .name{font-family:"Fraunces",serif;font-size:1.25rem;font-weight:600}
.person .role{font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--teal-d);
  letter-spacing:.03em;margin-top:.25rem}
.person p{font-size:.95rem;margin:.6rem 0 0;color:var(--ink-soft)}
.join-note{margin-top:2.4rem;font-size:1.02rem}
.join-note a{color:var(--teal-d);font-weight:600}
@media (max-width:680px){.people{grid-template-columns:1fr;gap:2rem}}

/* ---------- footer ---------- */
.foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.foot .mark-lg{width:64px;height:64px;border-radius:50%;
  background:conic-gradient(from 200deg,var(--teal),var(--green),var(--salmon),var(--violet),var(--teal));
  margin-bottom:1.2rem}
.foot h3{font-size:1.2rem;margin-bottom:1rem}
.foot a{color:var(--light);text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot ul{list-style:none;padding:0;margin:0;line-height:2.1}
.foot .meta{font-family:"IBM Plex Mono",monospace;font-size:.82rem;color:var(--light-soft);
  line-height:1.9}
.foot .colophon{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
  font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--light-soft);letter-spacing:.02em}
@media (max-width:760px){.foot .wrap{grid-template-columns:1fr;gap:2.4rem}}