/* =========================================================================
   THE BOSTON ARTISTRY — /family-art-classes/ only (round 7, 23 Sep 2026)
   Nandita's Family Drop-In page (_site/copy/canva-round7/p5.html) rebuilt one
   to one in the site's theme. Loaded after site.css and service.css by
   _site/build-r7-family.py. The paper-and-tape kit (.polaroid .tape .pnote
   .sticker .gingham--pink .dot-eyebrow) is in site.css, ROUND 6B; the drip
   button is .wpb. Her breakpoints: 980px and 640px.
   ========================================================================= */
.fm .dot-eyebrow{ --dot:#FF6FAE; }
.fm-sec{ --sec-pad:clamp(3rem,6.5vw,5.25rem); }
.fm-hero, .fm-sec{ overflow-x:clip; }
.fm-h2{ margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.02; font-size:clamp(2rem,1rem + 3vw,3.4rem); }

/* ---------------------------------------------------------------- hero */
.fm-hero{ padding-block:clamp(1rem,2.5vw,1.75rem) clamp(2rem,4vw,3rem); }
.fm-hero__wrap{ display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.fm-hero .crumb{ grid-column:1 / -1; margin-bottom:clamp(.4rem,1.2vw,1rem); }
.fm-hero__h1{ margin:.2rem 0 .9rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:.98;
  font-size:clamp(2.4rem,1rem + 4.4vw,4.6rem); max-width:15ch; }
.fm-nw{ white-space:nowrap; }
.fm-hero__h1 svg{ display:inline-block; width:.62em; height:.62em; vertical-align:-.02em; margin-left:.14em; }
.fm-hero__tag{ margin:0 0 .8rem; font-weight:700; font-size:clamp(1.15rem,.95rem + .8vw,1.6rem); line-height:1.2; max-width:34ch; }
.fm-hero__p{ margin:0; max-width:56ch; color:var(--ink-2); line-height:1.55; }
.fm-hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; row-gap:44px; margin:1.5rem 0 30px; }   /* 44px and 30px: room for the drips */

.fm-hero__pics{ position:relative; padding:clamp(18px,2.6vw,30px) clamp(16px,2.4vw,28px) clamp(20px,2.6vw,30px);
  border-radius:38px; box-shadow:0 18px 45px rgba(30,20,24,.08); }
.fm-hero__photos{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(10px,1.6vw,18px); align-items:start; }
.fm-hero__photos .polaroid{ padding:8px 8px 26px; }
.fm-hero__photos .polaroid:first-child{ --tilt:-3.5deg; --ar:4/5; }
.fm-hero__photos .polaroid:nth-child(2){ --tilt:3deg; --ar:4/5; --tt:3deg; margin-top:clamp(18px,3vw,34px); }
.fm-panel{ position:relative; z-index:2; margin:clamp(-54px,-4vw,-30px) clamp(6px,1.6vw,18px) 0 clamp(18px,3.4vw,44px);
  padding:clamp(18px,2.4vw,28px); border-radius:24px; background:rgba(255,250,247,.96); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 14px 34px -18px rgba(20,17,10,.45); }
.fm-panel__big{ margin:.3rem 0 .6rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1;
  font-size:clamp(1.6rem,1rem + 1.7vw,2.5rem); }
.fm-panel p:last-child{ margin:0; color:var(--ink-2); font-size:.95rem; line-height:1.5; }
.fm-hero__pics .pnote{ z-index:3; font-size:1.05rem; }
.fm-hero__pics .n1{ right:-10px; top:-16px; --tilt:5deg; background:#FFF3B8; }
.fm-hero__pics .n2{ left:-12px; top:42%; --tilt:-4deg; background:#FFD8E7; }
.fm-hero__pics .sticker{ z-index:3; }
.fm-hero__pics .fm-smile{ right:-14px; bottom:-18px; width:62px; height:62px; }
.fm-hero__pics .fm-star{ left:46%; top:-20px; width:44px; height:44px; }

/* her white strip of four facts */
.fm-strip{ background:#fff; border-block:1px solid var(--line); }
.fm-strip__grid{ list-style:none; margin-block:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.fm-strip__grid li{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.7rem; align-content:start;
  padding:1.2rem 1.3rem; border-right:1px solid var(--line); }
.fm-strip__grid li:first-child{ padding-left:0; }
.fm-strip__grid li:last-child{ border-right:0; padding-right:0; }
.fm-strip__grid svg{ grid-row:span 2; width:1.5rem; height:1.5rem; color:#FF6FAE; margin-top:.05rem; }
.fm-strip__grid strong{ font-size:.95rem; line-height:1.3; }
.fm-strip__grid span{ margin-top:.15rem; font-size:.82rem; line-height:1.35; color:var(--ink-3); }

/* ---------------------------------------------------------------- newsletter */
.fm-news{ padding-top:clamp(2.2rem,4vw,3rem); }
.fm-news__box{ position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.4rem,3vw,2.4rem);
  align-items:center; padding:clamp(1.4rem,4vw,3.2rem); border-radius:30px; }
.fm-news__box > .tape{ width:96px; height:24px; }
.fm-news__box > .t1{ top:-12px; left:34px; transform:rotate(-4deg); }
.fm-news__box > .t2{ bottom:-12px; left:42%; transform:rotate(3deg); }
.fm-news__copy{ padding:clamp(1.2rem,2.4vw,1.9rem); border-radius:22px; background:rgba(255,236,242,.9); }
.fm-news__copy .fm-h2{ margin:.2rem 0 .8rem; }
.fm-news__copy p:last-child{ margin:0; color:var(--ink-2); }
.fm-sign{ position:relative; background:#fff; border-radius:22px; padding:clamp(1.4rem,2.4vw,1.8rem); box-shadow:0 18px 45px rgba(30,20,24,.08); }
.fm-sign > .tape{ top:-13px; left:50%; transform:translateX(-50%) rotate(-3deg); width:96px; height:24px; }
.fm-sign .fm-smile{ right:-18px; top:-22px; width:54px; height:54px; }
.fm-sign h3{ margin:0 0 1rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:clamp(1.4rem,1rem + 1vw,1.75rem); }
.fm-sign .news__row{ display:grid; gap:.6rem; }
.fm-sign .news__row input{ width:100%; min-height:56px; }
/* 27 Sep 2026 (Nitin: the sign-up drips "are very bad", make it like the home page): the home
   newsletter's round inputs and pink pill (.news2__form); its drips: site.css, after .drip7 */
.fm-sign .news__row input{ border-radius:999px; text-align:center; background:#fff; border:2px solid #F3D9E2; }
.fm-sign .news__row .pillbtn{ width:100%; min-height:56px; margin:.35rem 0 30px; box-shadow:0 4px 0 #E58AAE; border:2px solid #1B1B1B; }
.fm-sign__hearts{ display:flex; justify-content:center; gap:.45rem; margin:0; }
.fm-sign__hearts svg{ width:20px; height:20px; }

/* ---------------------------------------------------------------- section heads, steps, projects */
.fm-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem 2.2rem; margin-bottom:clamp(1.4rem,3vw,2.2rem); }
.fm-head .fm-h2{ max-width:17ch; }
.fm-head p{ margin:0; max-width:40ch; color:var(--ink-2); }
.fm-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.9rem,1.6vw,1.2rem); }
.fm-step{ padding:clamp(1.3rem,2.4vw,1.8rem); background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 10px 28px rgba(30,20,24,.05); }
.fm-step__n{ display:grid; place-items:center; width:38px; height:38px; margin-bottom:1rem; border-radius:50%; background:#FFD8E7;
  font-family:var(--display); font-weight:700; }
.fm-step:nth-child(2) .fm-step__n{ background:#FDE382; }
.fm-step:nth-child(3) .fm-step__n{ background:#CFE4FB; }
.fm-step h3, .fm-proj h3{ margin:0 0 .5rem; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(1.35rem,1rem + .9vw,1.7rem); }
.fm-step p, .fm-proj p:last-child{ margin:0; color:var(--ink-2); line-height:1.5; }

.fm-projects{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.4vw,1.1rem); }
.fm-proj{ display:flex; flex-direction:column; padding:12px 12px clamp(1.1rem,2vw,1.5rem); background:#fff; border-radius:22px;
  border-top:6px solid var(--top); box-shadow:0 10px 28px rgba(30,20,24,.06); }
.fm-proj img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:14px; margin-bottom:1rem; }
.fm-proj .dot-eyebrow, .fm-proj h3, .fm-proj p:last-child{ padding-inline:.5rem; }
.fm-proj .dot-eyebrow{ --dot:var(--top); }

/* ---------------------------------------------------------------- early release: her dark checkerboard band */
.fm-early{ --sec-pad:clamp(3rem,6vw,4.75rem); }
.fm-early__in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(1.5rem,4.5vw,3.4rem);
  align-items:center; padding:clamp(1.5rem,4vw,2.9rem); border-radius:30px; background:rgba(14,14,17,.92); border:1px solid rgba(255,255,255,.1); }
.fm-early__in > .tape{ width:92px; height:22px; }
.fm-early__in > .t1{ top:-11px; left:30px; transform:rotate(-4deg); }
.fm-early__in > .t2{ bottom:-11px; right:34px; transform:rotate(3deg); }
.fm-early .dot-eyebrow{ color:#EEE; --dot:#F8C72F; }
.fm-early .fm-h2{ margin:.2rem 0 1rem; color:#fff; }
.fm-early__in p:not(.dot-eyebrow){ margin:0; color:var(--on-ink-2); }
.fm-early__list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.fm-early__list li{ padding:1.05rem 1.2rem; background:#232328; border:1px solid rgba(255,255,255,.08); border-radius:16px; }
.fm-early__list b{ display:block; color:#fff; }
.fm-early__list span{ display:block; margin-top:.2rem; font-size:.86rem; color:#BDBAC2; }
.fm-drip{ position:relative; z-index:1; margin-top:-1px; line-height:0; pointer-events:none; }
.fm-drip svg{ display:block; width:100%; height:clamp(24px,4vw,52px); }

/* ---------------------------------------------------------------- private sessions */
.fm-private{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(1.5rem,3.5vw,2.6rem);
  align-items:center; padding:clamp(1.5rem,4vw,3.2rem); background:#fff; border-radius:30px; box-shadow:0 18px 45px rgba(30,20,24,.08); }
.fm-private > .tape{ width:96px; height:24px; }
.fm-private > .t1{ top:-12px; left:30px; transform:rotate(-3deg); }
.fm-private > .t2{ top:-12px; right:30px; transform:rotate(4deg); }
.fm-private .fm-h2{ margin:.2rem 0 1rem; }
.fm-private__copy > p:not(.dot-eyebrow){ margin:0 0 1.4rem; color:var(--ink-2); }
.fm-private__copy .btn{ margin-bottom:28px; }
.fm-private__pts{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.fm-private__pts li{ padding:.95rem 1.1rem; background:var(--paper); border:1px solid var(--line); border-radius:14px; font-size:.92rem; line-height:1.45; }
.fm-private__pts strong{ display:block; }
.fm-private__pts span{ color:var(--ink-2); }
.fm-doodle{ position:absolute; right:18px; bottom:14px; width:28px; height:28px; pointer-events:none; }

/* ---------------------------------------------------------------- FAQ */
.fm-faq{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(1.5rem,5vw,4.5rem); align-items:start; }
.fm-faq .fm-h2{ margin:.2rem 0 0; }
.fm-faq__hearts{ display:flex; gap:.5rem; margin:1rem 0 0; }
.fm-faq__hearts svg{ width:26px; height:26px; }

/* ---------------------------------------------------------------- the last band */
.fm-final{ padding-top:clamp(.5rem,2vw,1.6rem); }
.fm-final__box{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:1.4rem 2.2rem;
  padding:clamp(1.4rem,3.6vw,2.8rem) clamp(1.4rem,3.8vw,3.1rem); border-radius:30px; }
.fm-final__box .fm-smile{ left:-16px; top:-22px; width:60px; height:60px; }
.fm-final__copy{ max-width:760px; padding:clamp(1.1rem,2vw,1.5rem) clamp(1.2rem,2.2vw,1.7rem); border-radius:20px; background:rgba(255,236,242,.9); }
.fm-final__copy .fm-h2{ margin:0 0 .6rem; font-size:clamp(1.8rem,1rem + 2.4vw,3rem); }
.fm-final__copy p{ margin:0; color:var(--ink-2); }
.fm-final__box > .btn{ flex:0 0 auto; margin-bottom:20px; }

/* ---------------------------------------------------------------- her breakpoints */
@media (max-width:980px){
  .fm-hero__wrap, .fm-news__box, .fm-early__in, .fm-private, .fm-faq{ grid-template-columns:minmax(0,1fr); }
  .fm-hero__pics{ max-width:600px; }
  .fm-strip__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fm-strip__grid li{ padding:1.1rem 1.1rem; }
  .fm-strip__grid li:nth-child(odd){ padding-left:0; }
  .fm-strip__grid li:nth-child(2){ border-right:0; }
  .fm-strip__grid li:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .fm-projects{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fm-steps{ grid-template-columns:minmax(0,1fr); }
  .fm-head{ flex-direction:column; align-items:flex-start; }
  .fm-final__box{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .fm-strip__grid{ grid-template-columns:minmax(0,1fr); }
  .fm-strip__grid li{ padding:.95rem 0; border-right:0; border-bottom:1px solid var(--line); }
  .fm-strip__grid li:last-child{ border-bottom:0; }
  .fm-hero__pics .n1{ right:-6px; }
  .fm-hero__pics .n2{ left:10px; top:auto; bottom:-14px; }
  .fm-hero__pics .fm-smile{ right:-6px; width:52px; height:52px; }
  .fm-sign .fm-smile{ right:-8px; top:-28px; width:46px; height:46px; }
  .fm-sign h3{ padding-right:1.6rem; }
  .fm-final__box .fm-smile{ left:-6px; }
  .fm-final__box > .btn{ width:100%; }
}
@media (max-width:560px){
  .fm-projects{ grid-template-columns:minmax(0,1fr); }
  .fm-proj img{ aspect-ratio:4/3; }
}