/* =========================================================================
   THE BOSTON ARTISTRY — /custom-sneakers/ only (round 7, 23 Sep 2026 night)
   Nandita's HTML page (_site/copy/canva-round7/p6.html): her sections and
   words, our theme. Loaded after site.css and service.css by
   _site/build-r7-sneakers.py. The paper-and-tape kit (.polaroid .tape
   .pnote .dot-eyebrow .gingham--*) is in site.css, ROUND 6B.
   ========================================================================= */

/* ---------------------------------------------------------------- hero */
.sk-hero .hero__h1 .u{ background:linear-gradient(transparent 64%, #FBC3D6 64%, #FBC3D6 92%, transparent 92%); padding:0 .06em; }
.sk-hero .sk-lead{ max-width:52ch; font-size:clamp(1rem,.95rem + .25vw,1.12rem); line-height:1.55; }
.sk-hero .hero__cta{ display:flex; flex-wrap:wrap; gap:2.1rem 1rem; }   /* the drips of a wrapped button must clear the one under it */
.sk-pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.sk-pills li{ padding:.42rem .8rem; border-radius:999px; background:#fff; border:1.5px solid var(--ink); font-size:.8rem; font-weight:700; line-height:1.2; }
.sk-hero__pics{ grid-column:2; grid-row:2; position:relative; min-width:0; }
.sk-hero__pics .pnote{ z-index:3; font-size:1.1rem; }
.sk-hero__pics .sk-n1{ left:-18px; top:9%; --tilt:-6deg; }
.sk-hero__pics .sk-n2{ right:6px; top:40%; --tilt:5deg; background:#FDCEE1; }      /* round 11: inside the frame, her "IMPROVE" shot had it cut off */
.sk-hero__pics .sk-n3{ left:10%; bottom:-14px; --tilt:-3deg; background:#FDE382; }
.sk-hero__pics .tape{ z-index:3; }
.sk-hero__pics .sk-t1{ top:-10px; left:26%; transform:rotate(-4deg); }
.sk-hero__pics .sk-t2{ bottom:18%; right:4px; width:84px; height:22px; transform:rotate(58deg); }
.sk-hero__pics .sticker{ z-index:3; right:8%; top:-22px; width:58px; height:58px; }
.sk-heart{ position:absolute; z-index:3; left:-26px; bottom:26%; width:40px; transform:rotate(-12deg); pointer-events:none; }
.sk-heart svg{ display:block; width:100%; height:auto; }
.sk-hero .hero__facts b{ font-weight:700; }
@media (max-width:900px){
  .sk-hero__pics{ grid-column:1; grid-row:3; margin-top:clamp(var(--s6),5vw,var(--s7)); }
  .hero--svc .sk-hero__pics .hero__img{ margin-top:0; }
  .sk-hero__pics .sk-n1{ left:-8px; }
  .sk-hero__pics .sk-n2{ right:-8px; }
  .sk-hero__pics .sk-t2{ right:-6px; }
  .sk-heart{ left:-10px; width:32px; }
}
@media (max-width:560px){
  .sk-hero__pics .pnote{ font-size:.92rem; padding:.45rem .6rem; }
  .sk-hero__pics .sk-n2{ top:auto; bottom:22%; }
  .sk-hero__pics .sticker{ width:46px; height:46px; top:-16px; }
}

/* ------------------------------------------------ her section head: words left, paragraph right */
.sk-head{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:1rem clamp(1.5rem,4vw,3.5rem); align-items:end;
  margin-bottom:clamp(1.6rem,3.5vw,2.6rem); }
.sk-h2{ margin:0; font-family:var(--display); font-weight:600; letter-spacing:-.02em; line-height:1; font-size:clamp(2rem,1rem + 3.2vw,3.5rem); text-wrap:balance; }
.sk-head__p{ margin:0; font-size:clamp(1rem,.95rem + .25vw,1.12rem); line-height:1.6; color:var(--ink-2); max-width:62ch; }
.sk .dot-eyebrow{ --dot:#FF6FAE; }
.sk .dot-eyebrow.y{ --dot:#F8C72F; }
@media (max-width:900px){ .sk-head{ grid-template-columns:1fr; } }

/* ------------------------------------------------ the four experiences: four taped cards, two by two */
.sk-opts{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.3rem,2.6vw,2.2rem); }
.sk-opt{ position:relative; display:flex; flex-direction:column; align-items:flex-start; padding:1.9rem clamp(1.2rem,2.4vw,1.8rem) .4rem;
  background:#fff; border-radius:var(--r-md); box-shadow:0 2px 0 rgba(0,0,0,.04), 0 22px 40px -28px rgba(20,17,10,.5); }
.sk-opt > .tape{ top:-12px; left:1.4rem; width:92px; height:22px; transform:rotate(-3deg); }
.sk-opt:nth-child(even) > .tape{ left:auto; right:1.4rem; transform:rotate(3deg); }
.sk-mini{ display:inline-block; padding:.32rem .62rem; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  border:1.5px solid var(--ink); border-radius:3px; transform:rotate(-1deg); }
.sk-mini--pink{ background:#FDCEE1; } .sk-mini--yellow{ background:#FDE382; } .sk-mini--blue{ background:#CFE6FB; } .sk-mini--mint{ background:#CFE9CF; }
.sk-opt h3{ margin:.95rem 0 .4rem; font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.05; font-size:clamp(1.5rem,1rem + 1.3vw,2.05rem); }
.sk-price{ margin:0 0 .6rem; font-weight:800; font-size:1.06rem; }
.sk-d{ margin:0 0 1.3rem; line-height:1.58; color:var(--ink-2); max-width:56ch; }
.sk-opt .btn{ margin-top:auto; margin-bottom:34px; }
.sk-byo{ position:relative; margin:clamp(1.8rem,3.5vw,2.6rem) 0 0; padding:1.15rem 1.4rem; background:#FFF6C9; border:2px dashed var(--ink); border-radius:4px;
  font-weight:800; font-size:clamp(1rem,.95rem + .3vw,1.15rem); line-height:1.45; transform:rotate(-.3deg); }
.sk-byo .tape{ top:-13px; right:1.6rem; width:80px; height:20px; transform:rotate(4deg); }
@media (max-width:760px){ .sk-opts{ grid-template-columns:1fr; } }

/* ------------------------------------------------ what to bring: three material cards */
.sk-corner{ top:22px; left:clamp(1rem,5vw,4rem); width:120px; height:24px; transform:rotate(-4deg); }
.sk-mats{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2vw,1.4rem); }
.sk-mat{ position:relative; min-height:240px; display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; border-radius:var(--r-md);
  background:var(--bg); box-shadow:0 18px 34px -26px rgba(20,17,10,.45); }
.sk-mat--pink{ --bg:#FCD5E3; } .sk-mat--yellow{ --bg:#FDE9A6; } .sk-mat--blue{ --bg:#D3E7FB; }
.sk-mat__n{ position:absolute; top:1rem; right:1.2rem; font-family:var(--display); font-weight:600; font-size:3rem; line-height:1; opacity:.3; }
.sk-mat h3{ margin:0 0 .45rem; font-family:var(--display); font-weight:600; letter-spacing:-.015em; line-height:1.05; font-size:clamp(1.5rem,1rem + 1.2vw,2rem); }
.sk-mat p{ margin:0; line-height:1.55; color:var(--ink-2); }
.sk-note{ display:inline-block; margin:clamp(1.3rem,2.6vw,1.9rem) 0 0; padding:.8rem 1.1rem; background:#FDCEE1; border-radius:4px; font-weight:700;
  line-height:1.45; box-shadow:0 10px 20px -14px rgba(20,17,10,.5); transform:rotate(-.4deg); }
@media (max-width:760px){ .sk-mats{ grid-template-columns:1fr; } .sk-mat{ min-height:170px; } }

/* ------------------------------------------------ the process: the title stays while five steps pass */
.sk-proc{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.5rem,5vw,3.5rem); align-items:start; }
.sk-proc__title{ position:sticky; top:110px; }
.sk-proc__title .sk-h2{ font-size:clamp(2.2rem,1rem + 3.8vw,4.3rem); line-height:.96; }
.sk-scribble{ display:inline-block; margin:1.1rem 0 0; padding:.3rem .9rem; background:#FDCEE1; font-family:var(--hand); font-weight:700;
  font-size:clamp(1.2rem,1rem + .5vw,1.45rem); line-height:1.1; transform:rotate(-3deg); border-radius:2px; }
.sk-proc__title .polaroid{ width:min(230px,62%); margin-top:2rem; --tilt:-3deg; --ar:4/5; }
.sk-steps{ list-style:none; margin:0; padding:0; border-top:2px solid var(--ink); }
.sk-step{ display:grid; grid-template-columns:4.2rem minmax(0,1fr); gap:1rem; padding:1.45rem 0; border-bottom:1px solid var(--line); }
.sk-step__n{ font-family:var(--display); font-weight:600; font-size:2.3rem; line-height:1; color:var(--m); }
.sk-step h3{ margin:0 0 .35rem; font-family:var(--display); font-weight:600; letter-spacing:-.01em; line-height:1.1; font-size:clamp(1.3rem,1rem + .9vw,1.7rem); }
.sk-step p{ margin:0; line-height:1.6; color:var(--ink-2); max-width:60ch; }
@media (max-width:900px){ .sk-proc{ grid-template-columns:1fr; } .sk-proc__title{ position:static; } }
@media (max-width:560px){ .sk-step{ grid-template-columns:3rem minmax(0,1fr); gap:.7rem; } .sk-step__n{ font-size:1.9rem; } .sk-proc__title .polaroid{ width:min(190px,58%); } }

/* ------------------------------------------------ the gallery has no heading on this page */
#gallery .gal--v2{ margin-top:0; }

/* ------------------------------------------------ the story: her collage as gingham, a polaroid, three paper sheets */
.sk-story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(1.5rem,5vw,3.5rem); align-items:center; }
.sk-collage{ position:relative; min-height:clamp(380px,40vw,470px); border-radius:var(--r-lg); overflow:hidden; }
.sk-collage .polaroid{ position:absolute; left:7%; top:9%; width:46%; --tilt:-4deg; --ar:4/5; z-index:1; }
.sk-sheet{ position:absolute; z-index:2; max-width:50%; padding:.8rem 1rem .75rem; background:#fff; border-radius:2px;
  font-family:var(--display); font-weight:600; letter-spacing:-.01em; line-height:1; text-transform:uppercase;
  font-size:clamp(1.05rem,.8rem + 1.1vw,1.7rem); box-shadow:0 2px 0 rgba(0,0,0,.06), 0 14px 24px -14px rgba(20,17,10,.5); transform:rotate(var(--tilt,0deg)); }
.sk-sheet .tape{ top:-11px; left:50%; width:70px; height:18px; transform:translateX(-50%) rotate(-3deg); }
.sk-sheet.s1{ right:7%; top:10%; --tilt:3deg; }
.sk-sheet.s2{ right:9%; top:45%; --tilt:-2.5deg; background:#DDEEFC; }
.sk-sheet.s3{ right:6%; bottom:7%; --tilt:-3deg; background:#FDE382; }
.sk-story__copy .sk-h2{ font-size:clamp(2.2rem,1rem + 3.4vw,3.9rem); line-height:.98; margin-bottom:1.1rem; }
.sk-story__copy p:not(.dot-eyebrow){ margin:0 0 1rem; font-size:clamp(1rem,.95rem + .3vw,1.13rem); line-height:1.65; color:var(--ink-2); max-width:56ch; }
.sk-story__copy .btn{ margin-top:.5rem; margin-bottom:34px; }
@media (max-width:900px){ .sk-story{ grid-template-columns:1fr; } .sk-collage{ order:2; } }
@media (max-width:560px){ .sk-collage .polaroid{ left:5%; width:44%; } .sk-sheet.s1,.sk-sheet.s2,.sk-sheet.s3{ right:5%; } }

/* ------------------------------------------------ reviews on the dark checkerboard (.sec--ink) */
.sk-reviews .dot-eyebrow{ color:#FF8FBD; --dot:#FF8FBD; }
.sk-reviews .sk-h2{ color:var(--paper); }
.sk-reviews .sk-head__p{ color:var(--on-ink-2); }
.sk-quotes{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr); gap:clamp(.9rem,1.8vw,1.3rem); align-items:start; }
.sk-quotes .quote-card.is-feat{ padding:clamp(1.6rem,2.6vw,2.1rem); }
.sk-quotes .quote-card.is-feat p{ font-family:var(--display); font-weight:500; font-size:clamp(1.12rem,1rem + .4vw,1.3rem); line-height:1.42; }
@media (max-width:1080px){ .sk-quotes{ grid-template-columns:1fr; } }

/* ------------------------------------------------ the warranty: a taped card on blue gingham */
.sk-warr{ padding-block:clamp(3rem,6vw,5rem); }
.sk-warr__card{ position:relative; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(1.2rem,3.5vw,2.6rem);
  padding:clamp(1.6rem,3.5vw,2.6rem); background:#fff; border-radius:var(--r-md); box-shadow:0 24px 44px -28px rgba(20,17,10,.55); }
.sk-warr__card > .tape{ top:-13px; left:50%; transform:translateX(-50%) rotate(-2deg); }
.sk-warr__card > .sticker{ right:-12px; top:-20px; }
.sk-warr__card .sk-h2{ font-size:clamp(2.2rem,1rem + 3.6vw,4rem); line-height:.96; }
.sk-warr__copy p{ margin:0 0 .9rem; font-size:clamp(1rem,.95rem + .25vw,1.08rem); line-height:1.65; color:var(--ink-2); }
.sk-warr__copy .sk-care{ margin:1.1rem 0 0; padding:.95rem 1.1rem; background:#FDE382; border:2px dashed var(--ink); border-radius:4px;
  font-weight:700; line-height:1.5; color:var(--ink); }
.sk-care a{ color:inherit; text-decoration:underline; text-underline-offset:3px; }
@media (max-width:800px){ .sk-warr__card{ grid-template-columns:1fr; } .sk-warr__card > .sticker{ right:-6px; width:46px; height:46px; } }

/* ------------------------------------------------ FAQ: two columns of accordions (the .faq look from site.css) */
.sk-faq{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s3) clamp(1rem,2.4vw,1.6rem); align-items:start; }
.sk-faq .faq{ align-content:start; }
@media (max-width:800px){ .sk-faq{ grid-template-columns:1fr; } }

/* ------------------------------------------------ her closing words in the visit block */
.sk-final__cta{ display:flex; flex-wrap:wrap; gap:2.1rem 1rem; margin:1.4rem 0 34px; }