/* =========================================================================
   THE BOSTON ARTISTRY — /maker-board/ only (23 Sep 2026, round 7)
   Nandita's "Maker Time" page, 1:1 from her board HTML (_site/copy/canva-round7/p3.html) in the site's theme.
   Loaded after site.css and service.css by _site/build-r7-maker-time.py. The paper-and-tape kit
   (.polaroid .tape .pnote .sticker .dot-eyebrow .gingham--pink) is in site.css, ROUND 6B.
   Headings take the site's own font (h1,h2,h3 in site.css); nothing here sets a heading font-family.
   ========================================================================= */
.mk .dot-eyebrow{ --dot:#FF6FAE; }
.mk.sec{ --sec-pad:clamp(3.25rem,6.5vw,5.25rem); }
.mk-h2{ margin:.2rem 0 1rem; font-weight:600; letter-spacing:-.02em; line-height:1; font-size:clamp(2rem,1rem + 3vw,3.6rem); }
.mk-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem 2.4rem; margin-bottom:clamp(1.5rem,3vw,2.2rem); }
.mk-head .mk-h2{ margin:0; max-width:17ch; }
.mk-head p{ margin:0; max-width:44ch; color:var(--ink-2); }
.mk-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:34px 1rem; margin:1.5rem 0 26px; }   /* the drips need room under the buttons, and between two stacked ones */
@media (max-width:800px){ .mk-head{ flex-direction:column; align-items:flex-start; } }

/* ---------------------------------------------------------------- hero */
.mk-hero{ padding-block:clamp(1rem,2.5vw,1.75rem) clamp(2rem,4vw,3rem); }
.mk-hero__wrap{ display:grid; grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr); gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.mk-hero .crumb{ grid-column:1 / -1; margin-bottom:clamp(.4rem,1.4vw,1rem); }
.mk-hero__h1{ margin:.3rem 0 1rem; font-weight:600; letter-spacing:-.025em; line-height:.96; font-size:clamp(2.5rem,1rem + 4.6vw,4.8rem); max-width:15ch; }
.mk-hero__h1 .u{ background:linear-gradient(transparent 68%, #FDE382 68%, #FDE382 92%, transparent 92%); }
.mk-hero__tag{ margin:0 0 .9rem; font-weight:700; font-size:clamp(1.15rem,.95rem + .9vw,1.6rem); line-height:1.2; max-width:34ch; }
.mk-hero__p{ margin:0; max-width:56ch; color:var(--ink-2); line-height:1.55; }

/* her pink gingham panel with the card, the tape and two notes */
.mk-hero__vis{ position:relative; padding:clamp(44px,5vw,58px) clamp(26px,4vw,46px) clamp(52px,5.5vw,64px) clamp(34px,6vw,74px); }
.mk-hero__ging{ position:absolute; inset:18px 4px 20px 26px; border-radius:38px; background-size:56px 56px; box-shadow:0 18px 45px rgba(30,20,24,.08); }
.mk-hero__card{ position:relative; padding:clamp(1.4rem,3vw,2.4rem); border-radius:28px; background:rgba(255,239,244,.9); border:1px solid rgba(255,255,255,.7); }
.mk-hero__card h2{ margin:.2rem 0 .8rem; font-weight:600; letter-spacing:-.02em; font-size:clamp(1.8rem,1rem + 2.2vw,2.8rem); line-height:1; }
.mk-hero__card p:last-child{ margin:0; color:var(--ink-2); }
.mk-hero__vis > .tape{ left:16%; top:24px; width:96px; transform:rotate(-6deg); }
.mk-hero__vis .pnote{ font-size:1.15rem; z-index:1; }
.mk-hero__vis .n1{ right:0; top:22px; background:#FFF0A9; --tilt:-4deg; }
.mk-hero__vis .n2{ left:0; bottom:34px; background:#FFD8E7; --tilt:3deg; }
.mk-hero__vis .sticker{ right:3%; bottom:2px; width:58px; height:58px; }
@media (max-width:900px){ .mk-hero__wrap{ grid-template-columns:1fr; } }
@media (max-width:480px){ .mk-hero__vis .n1{ top:4px; } .mk-hero__vis > .tape{ top:6px; left:6%; } }

/* her four facts, one white strip under the hero */
.mk-strip{ background:#fff; border-block:1px solid var(--line); }
.mk-strip__in{ list-style:none; margin-block:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.mk-strip__i{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:.75rem; align-content:start; padding:1.3rem 1.4rem; border-right:1px solid var(--line); }
.mk-strip__i:first-child{ padding-left:0; }
.mk-strip__i:last-child{ border-right:0; }
.mk-strip__i svg{ grid-row:span 2; width:26px; height:26px; color:#FF6FAE; margin-top:.05rem; }
.mk-strip__i strong{ display:block; font-size:.98rem; line-height:1.25; }
.mk-strip__i span{ display:block; margin-top:.15rem; font-size:.84rem; line-height:1.4; color:var(--ink-3); }
@media (max-width:980px){
  .mk-strip__in{ grid-template-columns:1fr 1fr; }
  .mk-strip__i:nth-child(2){ border-right:0; }
  .mk-strip__i:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .mk-strip__i:nth-child(3){ padding-left:0; }
}
@media (max-width:560px){
  .mk-strip__in{ grid-template-columns:1fr; }
  .mk-strip__i{ border-right:0; border-bottom:1px solid var(--line); padding-inline:0; }
  .mk-strip__i:last-child{ border-bottom:0; }
}

/* ---------------------------------------------------------------- why maker time exists */
.mk-why__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4rem); align-items:center; }
.mk-why__copy > p:not(.dot-eyebrow){ color:var(--ink-2); max-width:48ch; }
.mk-why__pics{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:1.2rem; align-items:start; max-width:520px; margin-top:1.8rem; padding-top:12px; }
.mk-why__pics .polaroid{ padding-bottom:12px; }
.mk-why__pics .polaroid:first-child{ --tilt:-3deg; --ar:4/3; margin-top:1.4rem; }
.mk-why__pics .polaroid:nth-child(2){ --tilt:3deg; --ar:4/5; }
.mk-cards{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.mk-card{ background:#fff; border:1px solid var(--line); border-top:6px solid var(--c); border-radius:20px; padding:1.4rem 1.4rem 1.5rem; box-shadow:0 10px 24px rgba(30,20,24,.05); }
.mk-card h3{ margin:0 0 .45rem; font-weight:600; letter-spacing:-.015em; font-size:clamp(1.25rem,1rem + .7vw,1.55rem); }
.mk-card p{ margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-2); }
@media (max-width:980px){ .mk-why__grid{ grid-template-columns:1fr; } }
@media (max-width:560px){ .mk-cards{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- how it works: a band with blue gingham edges */
.mk-how{ background:#FDF9F7; }
.mk-how::before, .mk-how::after{ content:""; position:absolute; left:0; right:0; height:16px; background-color:#EAF4FD;
  background-image:linear-gradient(90deg, rgba(171,216,246,.6) 50%, transparent 50%), linear-gradient(rgba(171,216,246,.6) 50%, transparent 50%);
  background-size:16px 16px; }
.mk-how::before{ top:0; } .mk-how::after{ bottom:0; }
.mk-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid #CFC7C0; }
.mk-step{ padding:1.8rem 1.5rem 1.6rem; border-right:1px solid var(--line); }
.mk-step:first-child{ padding-left:0; }
.mk-step:last-child{ border-right:0; }
.mk-num{ display:inline-flex; margin-bottom:1.4rem; padding:.35rem .7rem; border-radius:999px; background:var(--nb); font-size:.75rem; font-weight:800; letter-spacing:.06em; }
.mk-step h3{ margin:0 0 .5rem; font-weight:600; letter-spacing:-.02em; line-height:1.05; font-size:clamp(1.35rem,1rem + .9vw,1.7rem); }
.mk-step p{ margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-2); }
@media (max-width:980px){
  .mk-steps{ grid-template-columns:1fr 1fr; }
  .mk-step:nth-child(2){ border-right:0; }
  .mk-step:nth-child(-n+2){ border-bottom:1px solid var(--line); }
  .mk-step:nth-child(3){ padding-left:0; }
}
@media (max-width:560px){
  .mk-steps{ grid-template-columns:1fr; }
  .mk-step{ border-right:0; border-bottom:1px solid var(--line); padding-inline:0; }
  .mk-step:last-child{ border-bottom:0; }
}

/* ---------------------------------------------------------------- maker sunday: the dark checkerboard band */
.mk-month__in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(1.8rem,5vw,3.5rem); align-items:center;
  padding:clamp(1.5rem,4vw,3rem); border-radius:30px; background:rgba(14,14,17,.93); border:1px solid rgba(255,255,255,.09); }
.mk-month .dot-eyebrow{ color:#EEE; --dot:#F8C72F; }
.mk-month .mk-h2{ color:#fff; }
.mk-month__copy p:last-child{ margin:0; }
.mk-month__list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.mk-month__list li{ padding:1.1rem 1.25rem; border-radius:16px; background:#242429; border:1px solid rgba(255,255,255,.07); }
.mk-month__list b{ display:block; color:#fff; }
.mk-month__list span{ display:block; margin-top:.15rem; font-size:.86rem; line-height:1.45; color:#BDBAC2; }
@media (max-width:900px){ .mk-month__in{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- maker project request: the pink gingham box */
.mk-submit__box{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(1.4rem,4vw,2.6rem); align-items:center;
  padding:clamp(1.6rem,4vw,3rem) clamp(1rem,4vw,3.25rem); border-radius:30px; }
.mk-submit__box > .tape{ top:-12px; }
.mk-submit__box > .t1{ left:8%; transform:rotate(-5deg); }
.mk-submit__box > .t2{ right:8%; transform:rotate(4deg); }
.mk-submit__copy{ padding:clamp(1.3rem,3vw,1.8rem) clamp(1.1rem,3vw,1.8rem) .4rem; border-radius:22px; background:rgba(255,229,236,.9); border:1px solid rgba(255,255,255,.6); }
.mk-submit__copy > p:not(.dot-eyebrow){ margin:0; color:#514A50; }
.mk-submit__list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.mk-submit__list li{ padding:1rem 1.1rem; border-radius:16px; background:#fff; border:1px solid var(--line); }
.mk-submit__list b{ display:block; margin-bottom:.2rem; }
.mk-submit__list span{ font-size:.86rem; line-height:1.45; color:var(--ink-3); }
@media (max-width:900px){ .mk-submit__box{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- what can you bring */
.mk-proj__grid{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.mk-proj__card{ min-height:230px; padding:1.5rem; border-radius:22px; background:#fff; border:1px solid var(--line); border-top:6px solid var(--c); }
.mk-proj__card .dot-eyebrow{ --dot:var(--c); margin-bottom:.5rem; }
.mk-proj__card h3{ margin:0 0 .5rem; font-weight:600; letter-spacing:-.02em; font-size:clamp(1.3rem,1rem + .8vw,1.6rem); }
.mk-proj__card p:last-child{ margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-2); }
@media (max-width:980px){ .mk-proj__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .mk-proj__grid{ grid-template-columns:1fr; } .mk-proj__card{ min-height:0; } }

/* ---------------------------------------------------------------- faq: her two columns, the kit's accordion */
.mk-faq__grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:clamp(1.2rem,5vw,4.5rem); align-items:start; }
.mk-faq .mk-h2{ margin-bottom:0; }
@media (max-width:900px){ .mk-faq__grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- the last box */
.mk.mk-final{ padding-top:clamp(.5rem,2vw,1.5rem); }
.mk-final__box{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:1rem 2.2rem;
  padding:clamp(1.8rem,4vw,2.75rem) clamp(1.3rem,4vw,3.1rem) clamp(1.2rem,3vw,2rem); border-radius:30px; background:#fff; border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(30,20,24,.06); }
.mk-final__box .mk-h2{ margin:0 0 .5rem; font-size:clamp(1.8rem,1rem + 2.4vw,3.1rem); }
.mk-final__box p{ margin:0; color:var(--ink-2); }
.mk-final__box .mk-cta{ flex:0 0 auto; margin:0 0 26px; }
.mk-final__box .sticker{ left:-12px; top:-22px; width:54px; height:54px; }
.mk-final__box > .tape{ right:10%; top:-12px; transform:rotate(5deg); }
@media (max-width:760px){ .mk-final__box{ flex-direction:column; align-items:flex-start; } .mk-final__box .sticker{ top:-34px; } }

/* --- Round 9 (24 Sep 2026): the square container gets a torn-magazine photo (her note: "like the one in the teen page") --- */
.mk-hero__card{ overflow:visible; }
.mk-hero__mag{ position:absolute; right:-6%; top:-14%; width:clamp(120px,26%,190px); margin:0; padding:8px 8px 10px; background:#fff;
  transform:rotate(6deg); box-shadow:0 14px 30px -14px rgba(20,20,24,.45); z-index:2;
  clip-path:polygon(0 3%,6% 0,14% 2%,23% 0,31% 3%,40% 0,49% 2%,58% 0,67% 3%,76% 0,85% 2%,94% 0,100% 4%,99% 14%,100% 25%,98% 36%,100% 47%,99% 58%,100% 69%,98% 80%,100% 91%,97% 100%,88% 98%,79% 100%,70% 97%,61% 100%,52% 98%,43% 100%,34% 97%,25% 100%,16% 98%,7% 100%,0 96%,2% 84%,0 72%,2% 60%,0 48%,2% 36%,0 24%,2% 12%); }
.mk-hero__mag img{ display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; }
.mk-hero__mag .tape{ top:-12px; left:50%; transform:translateX(-50%) rotate(-6deg); width:90px; }
.mk-hero__mag figcaption{ margin:.45rem 0 0; font-family:var(--hand); font-size:1rem; line-height:1; color:var(--ink); text-align:center; }
.mk-hero__card .dot-eyebrow, .mk-hero__card h2{ max-width:74%; }
@media (max-width:700px){ .mk-hero__mag{ right:-4%; top:-10%; width:34%; } .mk-hero__card .dot-eyebrow, .mk-hero__card h2{ max-width:100%; padding-right:34%; } }

/* round 10 (25 Sep 2026): her card, "NEW COPY & Better Layout": the polaroid sits on top, the note clears it */
.mk-hero__mag{ position:relative; right:auto; top:auto; width:min(70%,300px); margin:.4rem auto 1.1rem; transform:rotate(2deg); }
.mk-hero__card{ padding-top:clamp(1.6rem,3vw,2.4rem); }
.mk-hero__card .dot-eyebrow, .mk-hero__card h2{ max-width:none; padding-right:0; }
.mk-hero__vis .n1{ top:-4px; right:2%; z-index:3; }
.mk-hero__vis .n2{ bottom:-6px; left:2%; z-index:3; }
@media (max-width:700px){
  .mk-hero__mag{ right:auto; top:auto; width:min(76%,260px); }
  .mk-hero__card .dot-eyebrow, .mk-hero__card h2{ padding-right:0; max-width:none; }
  .mk-hero__vis .n1{ top:-6px; }
}