/* ============================================================
   DefendHer Academy — "Composure"
   pine ground · brass precision · bone warmth
   Fraunces (display) · Archivo (body) · Spline Sans Mono (labels)
   ============================================================ */

:root{
  --pine:#13271F;
  --pine-deep:#0C1A14;
  --bone:#F1EBDD;
  --bone-2:#E7DECB;
  --brass:#C6A24C;
  --brass-lite:#E7CE93;
  --brass-ink:#6f571d;
  --sage:#8CA394;
  --ink:#16211C;
  --ink-soft:#43514A;
  --line-ink:rgba(22,33,28,.16);
  --line-brass:rgba(198,162,76,.30);

  --display:'Fraunces',Georgia,serif;
  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
:target,.band[id]{scroll-margin-top:82px}
body{
  margin:0;background:var(--pine);color:var(--bone);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:900;line-height:1.02;letter-spacing:-.015em}

.skip{position:absolute;left:-999px;top:0;background:var(--brass);color:var(--pine-deep);
  padding:12px 18px;border-radius:4px;font-family:var(--mono);font-size:.8rem;z-index:100}
.skip:focus{left:16px;top:16px}

:where(a,button,.chip,.btn):focus-visible{outline:2px solid var(--brass-lite);outline-offset:3px;border-radius:3px}

/* ---------- layout primitives ---------- */
.shell{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,5vw,52px);width:100%}
.band{padding-block:clamp(76px,12vh,148px)}
.band--tight{padding-block:clamp(52px,8vh,88px)}
.band--pine{background:var(--pine);color:var(--bone)}
.band--deep{background:var(--pine-deep);color:var(--bone)}
.band--bone{background:var(--bone);color:var(--ink)}

/* ---------- eyebrow / tick ---------- */
.eyebrow{font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-lite);margin:0 0 26px;display:flex;align-items:center;gap:.6em}
.eyebrow-ink{color:var(--brass-ink)}
.tick{color:var(--brass);font-weight:500}

/* ---------- header ---------- */
.site{position:fixed;inset:0 0 auto;z-index:50;padding-block:18px;
  transition:background .3s ease,padding .3s ease,box-shadow .3s ease}
.site.scrolled{background:rgba(12,26,20,.86);backdrop-filter:blur(10px);padding-block:11px;
  box-shadow:0 1px 0 var(--line-brass)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--bone)}
.brand-mark{width:34px;height:34px;color:var(--brass);flex:0 0 auto}
.brand-word{display:flex;flex-direction:column;line-height:1}
.brand-word b{font-family:var(--display);font-weight:900;font-size:1.28rem;letter-spacing:-.01em}
.brand-word i{font-family:var(--mono);font-style:normal;font-size:.62rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--brass-lite);margin-top:3px}
.navlinks{display:flex;align-items:center;gap:30px}
.navlinks a{font-family:var(--mono);font-size:.8rem;letter-spacing:.02em;color:var(--bone);opacity:.82;transition:opacity .2s}
.navlinks a:hover{opacity:1;color:var(--brass-lite)}
.nav-cta{border:1px solid var(--brass);color:var(--brass-lite)!important;opacity:1!important;
  padding:9px 18px;border-radius:4px;transition:background .2s,color .2s}
.nav-cta:hover{background:var(--brass);color:var(--pine-deep)!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);
  font-weight:600;font-size:.95rem;letter-spacing:.01em;padding:15px 26px;border-radius:4px;
  border:1px solid transparent;transition:transform .16s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn:active{transform:translateY(1px)}
.btn-brass{background:var(--brass);color:var(--pine-deep)}
.btn-brass:hover{background:var(--brass-lite)}
.btn-ghost{border-color:var(--line-brass);color:var(--bone)}
.btn-ghost:hover{border-color:var(--brass);background:rgba(198,162,76,.10)}

/* ---------- hero ---------- */
.hero{padding-top:clamp(128px,20vh,190px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,6vw,72px);align-items:center}
.hero-title{font-size:clamp(2.9rem,8.4vw,6.4rem);font-variation-settings:"opsz" 144;margin:0 0 26px}
.hero-lede{font-size:clamp(1.08rem,2.3vw,1.34rem);line-height:1.5;color:#d9d2c1;max-width:34ch;margin:0 0 34px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:40px}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.trust li{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--sage);
  display:flex;align-items:center;gap:.55em}
.trust li::before{content:"+";color:var(--brass);font-weight:500}

/* ---------- hero figure / ring ---------- */
.hero-figure{justify-self:center;width:min(92vw,440px);text-align:center}
.ring{width:100%;height:auto;overflow:visible}
.figure-cap{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--sage);margin:22px 0 0}

.draw{stroke-dashoffset:var(--len);stroke-dasharray:var(--len);animation:draw 1.25s cubic-bezier(.4,.05,.2,1) forwards}
.r-outer{--len:1181;animation-delay:.06s}
.r-mid{--len:943;animation-delay:.24s}
.r-in{opacity:0;animation:fade .8s ease .55s forwards}
.ticks{opacity:0;animation:fade .6s ease .78s forwards}
.crest{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.94);
  animation:crest .7s cubic-bezier(.2,.7,.2,1) 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
@keyframes crest{to{opacity:1;transform:scale(1)}}

/* ---------- band heads ---------- */
.band-head{max-width:46ch;margin-bottom:clamp(40px,6vw,64px)}
.band-head--center{margin-inline:auto;text-align:center}
.band-head--center .eyebrow{justify-content:center}
.band-head--row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;
  max-width:none;margin-bottom:34px;border-bottom:1px solid var(--line-ink);padding-bottom:20px}
.band-title{font-size:clamp(2.1rem,5vw,3.6rem);font-variation-settings:"opsz" 90;color:var(--ink)}
.band-title--light{color:var(--bone)}
.band-intro{font-size:1.14rem;color:var(--ink-soft);margin:20px 0 0;max-width:52ch}
.band-intro--light{color:#cfc8b8}

/* ---------- tracks ---------- */
.tracks{display:grid;grid-template-columns:1fr;gap:clamp(38px,5vw,64px)}
.track{padding-top:30px;border-top:2px solid var(--ink)}
.track-kicker{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);margin:0 0 16px}
.track-name{font-size:clamp(1.7rem,3.2vw,2.4rem);color:var(--ink);font-variation-settings:"opsz" 60;margin-bottom:14px}
.track-body{color:var(--ink-soft);margin:0 0 26px;max-width:46ch}
.learn{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:13px}
.learn li{position:relative;padding-left:28px;color:var(--ink);font-size:1.02rem}
.learn li::before{content:"+";position:absolute;left:0;top:0;color:var(--brass);
  font-family:var(--mono);font-weight:500}
.track-meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--ink-soft);
  margin:0;padding-top:18px;border-top:1px solid var(--line-ink)}

/* ---------- why women-only ---------- */
.women-grid{display:grid;grid-template-columns:1fr;gap:clamp(44px,6vw,72px);align-items:start}
.women-lead .band-title{margin-top:0}
.commit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}
.commit li{display:flex;gap:18px;padding:24px 4px;border-top:1px solid var(--line-brass)}
.commit li:last-child{border-bottom:1px solid var(--line-brass)}
.commit-tick{font-family:var(--mono);color:var(--brass);font-size:1.1rem;line-height:1.3;flex:0 0 auto}
.commit h3{font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--bone);margin:0 0 5px;letter-spacing:-.01em}
.commit p{margin:0;color:var(--sage);font-size:.98rem}

/* ---------- instructors ---------- */
.insts{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,56px)}
.inst{border-top:2px solid var(--ink);padding-top:30px}
.inst-role{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);margin:0 0 14px}
.inst-name{font-size:clamp(1.9rem,3.4vw,2.6rem);color:var(--ink);font-variation-settings:"opsz" 72}
.inst-cred{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);margin:8px 0 20px}
.inst-bio{color:var(--ink-soft);margin:0 0 26px;max-width:48ch}
.inst-contact{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.phone{font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--ink);letter-spacing:-.01em}
.bcard-num:hover,.phone:hover{color:var(--brass-ink)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;padding:8px 15px;border-radius:4px;
  border:1px solid var(--line-ink);color:var(--ink);transition:background .18s,border-color .18s,color .18s}
.chip:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.chips--light .chip{border-color:var(--line-brass);color:var(--bone)}
.chips--light .chip:hover{background:var(--brass);color:var(--pine-deep);border-color:var(--brass)}

/* ---------- notes ---------- */
.notes{border-top:1px solid var(--line-ink)}
.notes-title{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,3vw,2rem);color:var(--ink)}
.notes-sub{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);margin:0}
.note-list{list-style:none;margin:0;padding:0}
.note-list li{border-bottom:1px solid var(--line-ink)}
.note-list a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 24px;padding:22px 4px;
  transition:padding-left .2s ease,background .2s ease}
.note-list a:hover{padding-left:16px;background:rgba(22,33,28,.035)}
.note-cat{grid-column:1;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-ink);grid-row:1}
.note-h{grid-column:1;grid-row:2;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,2vw,1.4rem);
  color:var(--ink);letter-spacing:-.01em;line-height:1.2}
.note-go{grid-column:2;grid-row:1/3;color:var(--brass);font-size:1.3rem;transition:transform .2s}
.note-list a:hover .note-go{transform:translateX(5px);color:var(--brass-ink)}

/* ---------- book ---------- */
.book-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:900px;margin-inline:auto}
.bcard{border:1px solid var(--line-brass);border-radius:8px;padding:clamp(28px,4vw,40px);text-align:center;
  background:rgba(198,162,76,.04)}
.bcard-role{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brass-lite);margin:0 0 12px}
.bcard-name{font-family:var(--display);font-weight:900;font-size:1.7rem;color:var(--bone);margin:0 0 6px;letter-spacing:-.01em}
.bcard-num{display:inline-block;font-family:var(--display);font-weight:600;font-size:1.7rem;color:var(--brass-lite);
  margin:0 0 20px}
.book-grid .chips{justify-content:center}
.book-loc{text-align:center;font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;color:var(--sage);
  margin:clamp(40px,6vw,60px) 0 0;display:flex;align-items:center;justify-content:center;gap:.6em}

/* ---------- footer ---------- */
.foot{background:var(--pine-deep);border-top:1px solid var(--line-brass);padding-block:52px}
.foot-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.foot-brand{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--bone);display:flex;align-items:baseline;gap:10px}
.foot-brand span{font-family:var(--mono);font-weight:400;font-size:.6rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--brass-lite)}
.foot-tag{margin:0;color:var(--sage);font-size:.92rem;max-width:44ch}

/* ---------- responsive ---------- */
@media(min-width:720px){
  .book-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:940px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .hero-figure{justify-self:end}
  .tracks{grid-template-columns:1fr 1fr;gap:clamp(40px,4vw,72px)}
  .insts{grid-template-columns:1fr 1fr}
  .women-grid{grid-template-columns:.85fr 1.15fr;gap:clamp(56px,7vw,110px)}
}

@media(max-width:859px){
  .navlinks{gap:14px}
  .navlinks a:not(.nav-cta){display:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-delay:0ms!important;transition-duration:.001ms!important}
  .draw{stroke-dashoffset:0}
  .r-in,.ticks,.crest{opacity:1;transform:none}
}