/* =====================================================
   Melissa site styles
   Vivid, saturated palette pulled from the paint-drip motifs
   on a warm cream base so the work pops.
   ===================================================== */

:root {
  --cream: #FFF6E5;
  --cream-2: #FFEAC2;
  --ink: #1A1424;
  --ink-soft: #4A3F5C;
  --pink: #FF1F8A;
  --orange: #FF7A00;
  --yellow: #FFD60A;
  --teal: #00B8C9;
  --purple: #7C2BFF;
  --lime: #A4D818;
  --line: rgba(26, 20, 36, 0.14);
  --shadow-sm: 0 2px 0 rgba(26,20,36,0.10);
  --shadow-md: 0 14px 30px -12px rgba(26,20,36,0.32);
  --shadow-lg: 0 26px 60px -22px rgba(26,20,36,0.45);
  --radius: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  /* Sticky footer: the page is always at least a screen tall, and the
     panel area soaks up any slack so the footer never floats mid-screen. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 0.4em;
}

h2 { font-size: clamp(2rem, 4.5vw, 3rem); }
h3 { font-size: 1.35rem; }

/* ---------- shared ---------- */
.section {
  position: relative;
  padding: clamp(64px, 10vw, 120px) clamp(20px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
}

.section__head {
  margin-bottom: clamp(32px, 5vw, 56px);
  text-align: center;
  position: relative;
}

.section__head .splat-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: clamp(180px, 30vw, 360px);
  opacity: 0.18;
  z-index: -1;
  pointer-events: none;
}

.section__sub {
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0.5em auto 0;
}

.eyebrow {
  display: inline-block;
  font-family: 'Caveat', cursive;
  font-size: 1.6rem;
  color: var(--pink);
  margin-bottom: 0.2em;
  transform: rotate(-2deg);
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  border: 2.5px solid var(--ink);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; box-shadow: var(--shadow-md); }
.btn--primary { background: var(--pink); color: white; }
.btn--ghost { background: var(--yellow); color: var(--ink); }

/* ---------- horizontal drip divider ---------- */
.drip-divider {
  display: block;
  width: 100%;
  height: clamp(40px, 7vw, 80px);
  object-fit: cover;
  object-position: center top;
  margin: 0;
  pointer-events: none;
}
.drip-divider--flip { transform: scaleY(-1); }

/* ---------- NAV ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px clamp(20px, 5vw, 60px);
  background: rgba(255, 246, 229, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink);
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}
.nav__logo:hover { text-decoration: none; }

.nav__name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--pink) 0%, var(--orange) 50%, var(--yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nav__brush {
  width: clamp(140px, 17vw, 200px);
  height: auto;
  display: block;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.5vw, 30px);
}
.nav__links a {
  color: var(--ink);
  font-weight: 600;
  font-size: 0.98rem;
  position: relative;
  padding: 4px 0;
}
.nav__links a:not(.nav__insta):hover {
  text-decoration: none;
  color: var(--pink);
}
.nav__links a:not(.nav__insta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 4px;
  border-radius: 4px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}
.nav__links a:not(.nav__insta):hover::after { transform: scaleX(1); }

.nav__insta { color: var(--ink); }
.nav__insta:hover { color: var(--pink); }

.nav__menu-btn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav__menu-btn span {
  width: 26px; height: 3px;
  background: var(--ink);
  border-radius: 3px;
  transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 720px) {
  .nav__brush { width: 130px; }
  .nav__name { font-size: 1.6rem; }
  .nav__links {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--cream);
    border-bottom: 2px solid var(--ink);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .nav__links a { padding: 14px 24px; width: 100%; }
  .nav__links.is-open { max-height: 400px; }
  .nav__menu-btn { display: flex; }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
  padding: clamp(48px, 8vw, 100px) clamp(20px, 5vw, 80px);
  max-width: 1200px;
  margin: 0 auto;
  overflow: visible;
}

.hero__inner { position: relative; z-index: 2; }

.hero__kicker {
  font-family: 'Caveat', cursive;
  color: var(--purple);
  font-size: 1.5rem;
  margin: 0 0 0.4em;
  transform: rotate(-2deg);
  font-weight: 700;
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 5rem);
  margin: 0 0 0.4em;
}
.hero__name {
  background: linear-gradient(120deg, var(--pink) 0%, var(--orange) 50%, var(--yellow) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__big {
  position: relative;
  display: inline-block;
  color: var(--teal);
  white-space: nowrap;
}
.hero__squiggle {
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  width: 100%;
  height: 14px;
  color: var(--yellow);
}

.hero__sub {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 0 1.6em;
}

.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

.hero__photo {
  position: relative;
  justify-self: center;
  width: min(100%, 420px);
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow: visible;
  transform: rotate(3deg);
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 8px solid white;
}
.tape {
  position: absolute;
  width: 100px; height: 26px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 2;
}
.tape--tl { top: -12px; left: 20px; transform: rotate(-8deg); background: rgba(255, 214, 10, 0.85); }
.tape--br { bottom: -10px; right: 24px; transform: rotate(6deg); background: rgba(255, 31, 138, 0.75); }

/* hero scattered motifs */
.hero__motifs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__motifs img { position: absolute; }
.motif--splat-rb     { top: -2%; right: 38%; width: 130px; transform: rotate(-12deg); opacity: 0.9; }
.motif--splot-blue   { top: 8%;  left: -20px; width: 110px; transform: rotate(20deg); }
.motif--splot-green  { bottom: 6%; left: 36%; width: 90px; transform: rotate(-30deg); }

@keyframes bob {
  0%, 100% { transform: translateY(0) var(--rot, rotate(0deg)); }
  50%      { transform: translateY(-8px) var(--rot, rotate(0deg)); }
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__cta { justify-content: center; }
  .hero__photo { transform: rotate(-1deg); }
  .hero__motifs { display: none; }
}

/* ---------- ABOUT ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: center;
}

.lead {
  font-size: 1.25rem;
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
}

.wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%,60%,100%{transform: rotate(0)} 10%,30%{transform: rotate(14deg)} 20%{transform: rotate(-8deg)} }

.about__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin-top: 1.2em;
}
.about__chips li {
  padding: 6px 16px;
  border-radius: 999px;
  background: white;
  border: 2.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 0.92rem;
  font-weight: 600;
  transform: rotate(var(--r, 0deg));
}
.about__chips li:nth-child(6n+1) { background: var(--pink);   color: white; --r: -3deg; }
.about__chips li:nth-child(6n+2) { background: var(--yellow); --r: 2deg; }
.about__chips li:nth-child(6n+3) { background: var(--teal);   color: white; --r: -2deg; }
.about__chips li:nth-child(6n+4) { background: var(--purple); color: white; --r: 3deg; }
.about__chips li:nth-child(6n+5) { background: var(--orange); color: white; --r: -1deg; }
.about__chips li:nth-child(6n+6) { background: var(--lime);   --r: 2deg; }

.about__media {
  position: relative;
}
.about__media img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 8px solid white;
  box-shadow: var(--shadow-lg);
  transform: rotate(-3deg);
}
@media (max-width: 760px) {
  .about__grid { grid-template-columns: 1fr; }
}

/* ---------- SERVICES ---------- */
.services { position: relative; }
.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 26px;
}
.card {
  position: relative;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }

/* One fixed icon box for every card, so the h3s line up across the row
   no matter how tall or square the motif is. contain scales each motif
   to fit and leaves the box height identical. */
.card__icon {
  width: 150px;
  height: 44px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin: 0 0 12px;
}
.card--painting { background: linear-gradient(160deg, #FFD0E5 0%, white 70%); }
.card--teaching { background: linear-gradient(160deg, #B6F0F4 0%, white 70%); }
.card--events { background: linear-gradient(160deg, #FFE082 0%, white 70%); }

.card h3 { margin-bottom: 6px; font-size: 1.6rem; }
.card__lead {
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 14px;
  font-weight: 500;
}
.card ul { padding-left: 18px; margin: 0; }
.card li { margin: 5px 0; }

.card__corner-drip {
  position: absolute;
  top: 0;
  right: 12px;
  width: 70px;
  pointer-events: none;
}

/* ---------- PORTFOLIO ---------- */
.portfolio { position: relative; }
.portfolio__list {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 9vw, 110px);
}

.project { position: relative; }
.project__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.project__title { margin: 0; font-size: 2rem; }
.project__meta {
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 500;
}
.project__blurb {
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 560px;
  font-size: 1.05rem;
}

/* Chaotic overlapping stage: photos use absolute positioning,
   each with rotation + position from inline custom properties */
.project__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin: 0 auto;
}
.project--b .project__stage { aspect-ratio: 16 / 9; }

.project__photo {
  /* <figure> carries a UA default of margin: 1em 40px, which shifted the
     whole spread 40px right and 16px down out of its stage. */
  margin: 0;
  position: absolute;
  top: var(--t, 0%);
  left: var(--l, 0%);
  width: var(--w, 30%);
  height: var(--h, auto);
  aspect-ratio: var(--ar, 1 / 1);
  transform: rotate(var(--r, 0deg));
  z-index: var(--z, 1);
  border-radius: 6px;
  border: 10px solid white;
  background: white;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease, z-index 0.01s;
}
.project__photo:hover {
  transform: rotate(var(--r, 0deg)) scale(1.05);
  z-index: 20;
  box-shadow: 0 30px 60px -10px rgba(26,20,36,0.55);
}
.project__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tape accent on each photo */
.project__photo::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(var(--tape-r, -4deg));
  width: 70px;
  height: 18px;
  background: var(--tape-c, rgba(255, 214, 10, 0.85));
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.project__photo:nth-child(2n)::before { --tape-c: rgba(255, 31, 138, 0.75); --tape-r: 5deg; }
.project__photo:nth-child(3n)::before { --tape-c: rgba(0, 184, 201, 0.78); --tape-r: -7deg; }
.project__photo:nth-child(5n)::before { --tape-c: rgba(124, 43, 255, 0.7);  --tape-r: 3deg; }

/* Splat motif tucked behind the project stage */
.project__splat {
  position: absolute;
  width: 240px;
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.project--a .project__splat { top: -40px; right: -30px; transform: rotate(15deg); }
.project--b .project__splat { bottom: -50px; left: -40px; transform: rotate(-12deg); }
.project--c .project__splat { top: -35px; left: -35px; transform: rotate(-20deg); }

@media (max-width: 720px) {
  .project__stage { aspect-ratio: 4 / 5; }
  .project--b .project__stage { aspect-ratio: 4 / 5; }
  .project__photo { border-width: 6px; }
}

/* ---------- FAQ ---------- */
.faq { position: relative; }

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 60px);
  align-items: start;
}

.faq__list details {
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.15s;
}
.faq__list details:hover { transform: translate(-1px, -1px); }
.faq__list summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after {
  content: '+';
  font-size: 1.7rem;
  color: var(--pink);
  transition: transform 0.2s;
  line-height: 1;
  font-weight: 700;
}
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list details p {
  margin: 10px 0 0;
  color: var(--ink-soft);
}

.inquiry {
  position: relative;
  background: white;
  border: 2.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 8px 8px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.inquiry h3 { margin: 0; font-size: 1.6rem; }
.inquiry__intro { margin: -6px 0 6px; color: var(--ink-soft); }
.inquiry label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
}
.inquiry input,
.inquiry select,
.inquiry textarea {
  font: inherit;
  padding: 12px 14px;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  outline-offset: 2px;
}
.inquiry input:focus,
.inquiry select:focus,
.inquiry textarea:focus {
  outline: 3px solid var(--yellow);
  border-color: var(--ink);
}
.inquiry textarea { resize: vertical; }
.inquiry button { margin-top: 4px; align-self: flex-start; }
.inquiry__status {
  margin: 0;
  font-weight: 600;
  min-height: 1.4em;
}
.inquiry__status.is-error { color: var(--pink); }
.inquiry__status.is-ok { color: var(--teal); }

@media (max-width: 760px) {
  .faq__grid { grid-template-columns: 1fr; }
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 56px clamp(20px, 5vw, 80px) 28px;
  margin-top: 0;
  position: relative;
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
}
.footer__logo {
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 1.5rem;
}
.footer__logo:hover { text-decoration: none; }
.footer__brush {
  width: 100px;
  height: auto;
}
.footer__insta {
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.footer__insta:hover { color: var(--yellow); text-decoration: none; }
.footer__copy {
  text-align: center;
  margin: 28px 0 0;
  color: rgba(255, 246, 229, 0.6);
  font-size: 0.85rem;
}

/* ---------- LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 30, 0.94);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vw;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  border: 8px solid white;
}
.lightbox__close,
.lightbox__nav {
  background: white;
  color: var(--ink);
  border: 2.5px solid var(--ink);
  width: 50px; height: 50px;
  border-radius: 50%;
  font-size: 1.7rem;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.lightbox__close { top: 22px; right: 22px; }
.lightbox__nav--prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 22px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--yellow); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- TABS ----------
   The site is a tab set rather than one long scroll: the four section
   panels swap in place. The tabs live in the nav itself, so there is
   only ever one row of them, and they fold into the burger on mobile.
*/
[hidden] { display: none !important; }

.nav__tabs {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
}

.nav__links a.tab {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(0.88rem, 1.2vw, 1rem);
  padding: 8px 20px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}
/* Pills carry their own active state, so the sliding underline is off here */
.nav__links a.tab::after { display: none; }
.nav__links a.tab:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  text-decoration: none;
}
.nav__links a.tab:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.nav__links a.tab.is-active {
  background: var(--pink);
  color: white;
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow-sm);
}
.nav__links a.tab.is-active:hover {
  transform: rotate(-1.5deg) translateY(-2px);
  color: white;
}
/* ---------- PORTFOLIO SUB-TABS (one per project) ---------- */
.portfolio__list { gap: clamp(28px, 4vw, 44px); }

.subtabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.subtab {
  font-family: 'Caveat', cursive;
  font-size: 1.35rem;
  line-height: 1.2;
  padding: 6px 18px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: white;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}
.subtab:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.subtab:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.subtab.is-active {
  background: var(--yellow);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-sm);
}
.subtab.is-active:hover { transform: rotate(-2deg) translateY(-2px); }

.subpanel:focus { outline: none; }

/* ---------- MOBILE PROJECT STEPPER ----------
   Five pills will not fit a phone, and a scrolling row hides the one that
   is actually open. Below 720px the pills give way to a prev/next bar
   naming the current project, with a dot per project underneath. The
   photo stage is swipeable too (see bindSwipe in script.js).
*/
.stepper { display: none; }

.stepper__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  background: white;
  box-shadow: var(--shadow-sm);
}

.stepper__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0 0 4px;
  border: 2.5px solid var(--ink);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.stepper__arrow:active { transform: scale(0.92); background: var(--orange); }
.stepper__arrow:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

.stepper__label {
  flex: 1 1 auto;
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
}

.stepper__dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 8px;
}
/* The button is a comfortable tap target; the visible dot is the ::before */
.stepper__dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.stepper__dot::before {
  content: '';
  width: 11px;
  height: 11px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s, transform 0.15s;
}
.stepper__dot.is-active::before { background: var(--pink); transform: scale(1.3); }
.stepper__dot:focus-visible { outline: 3px solid var(--teal); outline-offset: -2px; border-radius: 50%; }

@media (max-width: 720px) {
  /* Burger menu: tabs stack as full-width pills instead of a row */
  .nav__tabs {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 24px;
    width: 100%;
  }
  .nav__links a.tab {
    width: 100%;
    text-align: center;
    padding: 12px 16px;
  }
  .nav__links a.tab.is-active,
  .nav__links a.tab.is-active:hover { transform: none; }
  /* Pills out, stepper in */
  .subtabs { display: none; }
  .stepper { display: block; }
}

/* ---------- STICKY FOOTER ----------
   The panel area grows to fill whatever height the tab content does not
   use, so the footer always sits on the bottom edge of the screen. When a
   panel is shorter than the viewport its content is centred in the slack
   rather than hugging the nav.
*/
.tabs__panels {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer { flex-shrink: 0; }