/* ==========================================================================
   3. Bands
   ========================================================================== */

.band {
  position:relative;
  padding-block:var(--section-y);
  background:var(--band, var(--surface-page));
}

.band + .band,
.site-footer {
  margin-top:calc(var(--band-arc) * -1);
  border-radius:50% 50% 0 0 / var(--band-arc) var(--band-arc) 0 0;
  padding-top:calc(var(--band-arc) * 0.6 + var(--section-y) * 0.5);
}

.band-cream { --band:var(--surface-page); }
.band-mist { --band:var(--surface-mist); }
.band-night { --band:var(--surface-invert); }
.band-deep { --band:var(--surface-invert-deep); }
.band-gold { --band:var(--ppe-gold); }

.band-comprehension {
  --band:var(--strand-comprehension-tint);
  --strand:var(--strand-comprehension);
  --strand-deep:var(--strand-comprehension-deep);
}
.band-writing {
  --band:var(--strand-writing-tint);
  --strand:var(--strand-writing);
  --strand-deep:var(--strand-writing-deep);
}
.band-grammar {
  --band:var(--strand-grammar-tint);
  --strand:var(--strand-grammar);
  --strand-deep:var(--strand-grammar-deep);
}

.band-night,
.band-deep {
  color:var(--text-on-invert-muted);
  --text-strong:var(--ppe-white);
  --text-body:var(--text-on-invert-muted);
  --text-muted:var(--text-on-invert-muted);
  --surface-raised:rgba(var(--rgb-white),0.07);
  --line:rgba(var(--rgb-white),0.18);
  --line-strong:rgba(var(--rgb-white),0.3);
}
.band-night .eyebrow,
.band-deep .eyebrow { color:var(--ppe-gold); }

.band-gold { --text-muted:var(--text-body); }
.band-gold .eyebrow { color:var(--ppe-navy-deep); }

.band.band-strip {
  padding-top:calc(var(--band-arc) + 0.6rem);
  padding-bottom:calc(var(--band-arc) + 0.6rem);
}

/* ==========================================================================
   4. Buttons & skill lists
   ========================================================================== */

.btn {
  display:inline-block;
  padding:0.9rem 1.7rem;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--ppe-magenta);
  color:var(--ppe-white);
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  box-shadow:var(--shadow-pop);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform:translateY(-3px); box-shadow:0 9px 0 rgba(var(--rgb-ink),0.18); }
.btn:active { transform:translateY(1px); box-shadow:0 3px 0 rgba(var(--rgb-ink),0.18); }
.btn:disabled {
  opacity:0.65;
  cursor:wait;
  transform:none;
  box-shadow:var(--shadow-pop);
}

.btn-gold { background:var(--ppe-gold); color:var(--ppe-navy-deep); }

.btn-outline {
  background:transparent;
  color:var(--ppe-white);
  box-shadow:inset 0 0 0 2px rgba(var(--rgb-white),0.5);
}
.btn-outline:hover { box-shadow:inset 0 0 0 2px var(--ppe-white); transform:translateY(-3px); }

.btn-small { padding:0.6rem 1.2rem; font-size:var(--step-small); }

.social-links {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:0.6rem;
  padding:0;
  margin:0;
}
.social-links a {
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  border-radius:50%;
  border:2px solid var(--line-strong);
  color:var(--text-strong);
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.social-links a[href]:hover {
  background:var(--ppe-magenta);
  border-color:var(--ppe-magenta);
  color:var(--ppe-white);
  transform:translateY(-3px);
}

.skill-list {
  list-style:none;
  display:grid;
  gap:0.65rem;
  padding:0;
  margin:1.3rem 0 1.7rem;
}
.skill-list li {
  position:relative;
  padding-left:1.7rem;
}
.skill-list li::before {
  content:'';
  position:absolute;
  left:0;
  top:0.6em;
  width:0.6rem;
  height:0.6rem;
  border-radius:50%;
  background:var(--strand);
}