/* =========================================================================
   THE BOSTON ARTISTRY — service pages only (16 Sep 2026 · v7 17 Sep 2026, late)
   Loaded after site.css by the nine pages _site/build-service-pages.py
   writes (eight services and /schedule/). Kept apart from site.css so the
   home page work never collides with it. Everything here is additive.
   v7, Nitin's ask ("design the service page on the hero page, consistent;
   pills in different rows; Apple"): the hero is the home hero's stack
   (eyebrow, H1, sub, one wet-paint button, a note) with the picture beside
   it capped to the first screen, the crumb a wayfinding line across the top
   of the hero, the four facts one hairline strip under both columns; the
   tier cards sit in one exact grid (no card spans two rows, no empty cell,
   the buttons on one baseline); the FAQ stack hands over to the kit's
   accordion on touch screens and narrow windows (those rules are the
   `.faq--alt` block at the end of site.css, shared with the home page).
   ========================================================================= */

/* ---------------------------------------------------------------- hero */
.hero.hero--svc{ min-height:0; overflow:visible; padding-block:clamp(1rem,2.5vw,1.75rem) clamp(2.5rem,5vw,4rem); }
.hero--svc .hero__wrap{
  pointer-events:auto; display:grid; align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); grid-template-rows:auto auto auto;
  column-gap:clamp(var(--s6),5vw,var(--s9)); row-gap:0;
}
.hero--svc .crumb{ grid-column:1 / -1; grid-row:1; margin:0 0 clamp(var(--s5),3vw,var(--s7)); }
.hero--svc .hero__copy{ grid-column:1; grid-row:2; max-width:none; min-width:0; }
.hero--svc .hero__copy::before{ display:none; }
.hero--svc .hero__img{ grid-column:2; grid-row:2; min-width:0; }
.hero--svc .hero__facts{ grid-column:1 / -1; grid-row:3; margin-top:clamp(var(--s6),4vw,var(--s7)); }
.hero--svc .hero__h1{ font-size:clamp(2.5rem,1rem + 4.4vw,4.1rem); }
.hero--svc .hero__sub{ max-width:44ch; }
.hero--svc .hero__cta{ margin-bottom:44px; }   /* the button's drips (24px, a 6px shoulder, the falling drop) must clear the note under it, as on the home hero */
.hero__note{ font-size:.86rem; color:var(--ink-3); margin:0; max-width:52ch; line-height:1.5; }
.hero__img img{
  width:100%; height:auto; aspect-ratio:4/5; object-fit:cover;
  max-height:clamp(420px, calc(100svh - 340px), 640px);   /* crumb, hero and facts strip fit one laptop screen */
  border-radius:var(--r-xl); box-shadow:var(--sh-2);
}

/* the crumb: a quiet wayfinding line, not part of the hero's message */
.crumb{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .45rem; margin:0; padding:0; font-size:.8rem; color:var(--ink-3); }
.crumb a{ color:inherit; text-decoration:none; display:inline-block; padding:.3rem 0; }   /* 24px hit area (WCAG 2.5.8) */
.crumb a:hover{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.crumb li+li::before{ content:"/"; margin-right:.45rem; color:var(--line); }
.crumb [aria-current]{ color:var(--ink-2); }

/* the four facts: one strip of four cells on one hairline, never ragged pills */
.hero__facts{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0;
  margin:0; padding:0; list-style:none;
  border-top:1px solid var(--line);
  font-size:.95rem; line-height:1.45; color:var(--ink-2);
}
.hero__facts li{ padding:var(--s4) var(--s5) var(--s4) 0; }
.hero__facts li + li{ border-left:1px solid var(--line); padding-left:var(--s5); }
.hero__facts b{ color:var(--ink); font-weight:700; }

/* ------------------------------------------------------------- reviews */
.quotes{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
.quote-card{ margin:0; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-top:6px solid var(--k,var(--y)); border-radius:var(--r-md); padding:var(--s5); }
.quote-card .stars{ justify-content:flex-start; margin-bottom:var(--s4); }
.quote-card .stars svg{ width:16px; height:16px; }
.quote-card blockquote{ margin:0; }
.quote-card p{ font-size:1.02rem; line-height:1.5; margin:0 0 var(--s4); color:var(--paper); }
.quote-card figcaption{ font-weight:700; color:var(--y); font-size:.95rem; }
.quote-card figcaption span{ display:block; font-weight:400; color:var(--on-ink-3); font-size:.84rem; margin-top:.15rem; }
.quotes__src{ margin:var(--s6) 0 0; font-size:.9rem; }
.quotes__src a{ color:var(--on-ink-2); text-decoration:underline; text-underline-offset:3px; }

/* ------------------------------------------------------------- details */
.block{ margin-top:clamp(var(--s7),6vw,var(--s8)); }
.block > h2{ font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem); margin-bottom:var(--s5); }
.block__cta{ margin-top:var(--s6); }
.block__cta--center{ display:flex; justify-content:center; margin-top:var(--s7); }
.tiers__note{ margin:var(--s5) 0 0; font-size:.92rem; color:var(--ink-3); max-width:70ch; }

/* the tier cards: one exact grid. Three or four cards take a column each, six
   take three columns; every card is the same box, the featured one dark, and
   the buttons sit on one baseline. No card spans two rows, so no cell is empty. */
.tiers{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s4); align-items:stretch; }
.tiers--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.tiers--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.tiers .tier{ display:flex; flex-direction:column; gap:.6rem; padding:var(--s5); }
.tiers .tier--hero{ grid-row:auto; grid-column:auto; }
.tier__price{ font-family:var(--display); font-weight:800; font-size:1.4rem; letter-spacing:-.03em; margin:.1rem 0 0; color:var(--ink); }
.tier--hero .tier__price{ color:var(--y); }
.tier__meta{ font-size:.85rem; color:var(--ink-3); margin:0 0 .3rem; }
.tier--hero .tier__meta{ color:var(--on-ink-3); }
.tier .tier__btn{ margin-top:auto; align-self:flex-start; }
.tier .wpb{ margin-bottom:1.1rem; }   /* room for the drips inside the card */

.svc-steps{ counter-reset:step; list-style:none; margin:0; padding:0; display:grid; gap:var(--s4); max-width:64ch; }
.svc-steps li{ display:grid; grid-template-columns:44px 1fr; gap:var(--s4); align-items:start; }
.svc-steps li::before{ counter-increment:step; content:counter(step); width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--y); font-family:var(--display); font-weight:800; font-size:1.05rem; }
.svc-steps b{ display:block; margin-bottom:.15rem; }
.svc-steps p{ margin:0; color:var(--ink-2); }
.svc-steps p:empty{ display:none; }

.facts3{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); align-items:start; }
.fact{ background:var(--card); border-radius:var(--r-md); padding:var(--s5); box-shadow:var(--sh-1); border-top:6px solid var(--k,var(--c)); }
.fact h3{ margin-bottom:var(--s3); font-size:1.05rem; }
.fact p,.fact li{ color:var(--ink-2); font-size:.95rem; }
.fact p:last-child{ margin-bottom:0; }
.fact ul{ margin:0; padding-left:1.1rem; display:grid; gap:.35rem; }
.also{ display:flex; flex-wrap:wrap; gap:var(--s3); }

/* ------------------------------------------------------------- gallery */
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.gal figure{ margin:0; }
.gal img{ width:100%; height:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--sh-1); }
.gal--4 figure:first-child,.gal--5 figure:first-child,.gal--6 figure:first-child{ grid-row:span 2; }
.gal--4 figure:first-child img,.gal--5 figure:first-child img,.gal--6 figure:first-child img{ aspect-ratio:auto; }
.gal--3{ grid-template-columns:repeat(3,1fr); }

/* 16 Sep 2026, command 3: small text links get a 24px hit area (WCAG 2.5.8) */
.quotes__src a{ display:inline-block; padding:.3rem 0; }

/* 17 Sep 2026, v2 (Nitin's pop-up): every card carries its own Sawyer button, the long copy
   lives in the FAQ, and the /schedule/ page lists everything as text over the live widget. */
.block__cta--row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4) var(--s5); }
.book-note{ margin:0; font-size:.92rem; color:var(--ink-3); max-width:58ch; }
.faq details > div > * + *{ margin-top:.65rem; }
.faq details ol,.faq details ul{ margin:0; padding-left:1.25rem; color:var(--ink-2); max-width:64ch; display:grid; gap:.3rem; }
.faq details li{ margin:0; }
.visit__alt{ margin:0 0 var(--s5); font-size:.95rem; }
.visit__alt a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:.3rem 0; }
.hero--noimg .hero__wrap{ grid-template-columns:minmax(0,1fr); }
.hero--noimg .hero__copy{ max-width:56rem; }
.rows{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.row{ display:grid; grid-template-columns:1fr auto auto; gap:var(--s4) var(--s5); align-items:center; background:var(--card); border-radius:var(--r-md); box-shadow:var(--sh-1); padding:var(--s4) var(--s5); border-left:7px solid var(--k,var(--c)); }
.row h3{ margin:0; font-size:1.08rem; }
.row__meta{ margin:.2rem 0 0; font-size:.88rem; color:var(--ink-3); }
.row__price{ margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.02em; font-size:1.05rem; white-space:nowrap; }
.row .wpb{ margin-bottom:.9rem; }
.cal{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-2); overflow:hidden; }
.cal__frame{ display:block; width:100%; height:min(1100px,88vh); border:0; }
.cal__alt{ margin:var(--s4) 0 0; font-size:.92rem; color:var(--ink-3); }
.cal__alt a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; display:inline-block; padding:.3rem 0; }
.fs-a ol{ padding-left:1.1rem; }   /* the FAQ cards' numbered steps sit like their bullet lists */
.fs-a a{ display:inline-block; padding:.3rem 0; margin:-.3rem 0; }   /* 24px hit area, no layout change (WCAG 2.5.8) */

/* 17 Sep 2026: one of Nitin's April clips leads the parties and sneakers galleries, two
   columns wide so a 16:9 clip sits in the row almost uncropped (never the tall first slot). */
.gal .gal__vid:first-child{ grid-row:auto; grid-column:span 2; }   /* :first-child only to outweigh the gal--4/5/6 tall-first-slot rule */
.gal__vid video{ display:block; width:100%; height:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--sh-1); background:var(--paper-2); }
.gal--7 .gal__vid + figure{ grid-row:span 2; }                 /* 6 photos + the clip: 2+1+1 · 1+1+1 · 1+1+1, nine cells, no orphan */
.gal--7 .gal__vid + figure img{ aspect-ratio:auto; }

/* ---------------------------------------------------------- responsive */
@media (max-width:1080px){
  .hero--svc .hero__wrap{ column-gap:var(--s6); }
  .quotes,.facts3{ grid-template-columns:1fr; }
  .tiers,.tiers--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tiers .tier--hero{ grid-column:auto; grid-row:auto; }
  .tiers--3 .tier:last-child{ grid-column:span 2; }   /* two and one: the odd card takes the row */
  .gal,.gal--3{ grid-template-columns:repeat(2,1fr); }
  .row{ grid-template-columns:1fr auto; }
  .row .btn{ grid-column:1 / -1; justify-self:start; }
}
@media (max-width:900px){
  /* one column: crumb, the words and the button, the picture, then the facts as two by two */
  .hero--svc .hero__wrap{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto auto; }
  .hero--svc .hero__copy{ grid-row:2; }
  .hero--svc .hero__img{ grid-column:1; grid-row:3; margin-top:clamp(var(--s6),5vw,var(--s7)); max-width:none; }
  .hero--svc .hero__facts{ grid-row:4; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero__facts li:nth-child(odd){ border-left:0; padding-left:0; }
  .hero__facts li:nth-child(n+3){ border-top:1px solid var(--line); }
  .hero__img img{ aspect-ratio:3/2; max-height:none; }
}
@media (max-width:760px){
  .hero.hero--svc{ padding-top:var(--s4); padding-bottom:var(--s7); }
  .hero--svc .hero__h1{ font-size:clamp(2.3rem,9.6vw,3.2rem); }
  .hero__img img{ aspect-ratio:4/3; }
  .hero__facts{ font-size:.92rem; }
  .tiers,.tiers--4{ grid-template-columns:1fr; }
  .tiers--3 .tier:last-child{ grid-column:auto; }
  .row{ grid-template-columns:1fr; gap:var(--s3); }
  .row__price{ white-space:normal; }
  .gal img{ aspect-ratio:1; }
}
@media (max-width:380px){ .hero--svc .hero__h1 .ann{ white-space:normal; } }   /* 17 Sep: a two-word mark ("Fridays and Saturdays") ran 20px past a 360 screen */

/* ------------------------------------------------ gallery v2 (v8, 18 Sep 2026)
   Nitin: "replace pictures heavily ... use as many more pictures and videos ... not super heavy".
   Twelve cells a page: a lead (two by two: an upright phone clip or a photo), wide pieces (two by
   one: a 16:9 clip or a landscape photo) and single cells, packed dense, so four, three and two
   columns all close with no orphan (the generator refuses a page whose cells do not add up to 12).
   The figure holds the shape and the picture fills it; a per-picture object-position (inline) keeps
   a face in the crop. Cells take the 640px file, the lead and the wides the 1100px one; clips load
   only when near (expand.js), poster first, never under reduced motion. */
.gal--v2{ grid-template-columns:repeat(4,1fr); grid-auto-flow:dense; }
.gal--v2 figure{ position:relative; width:100%; min-width:0; justify-self:stretch; align-self:stretch; aspect-ratio:4/5; overflow:hidden;   /* width:100% or a stretched row pushes the ratio back into the width and the piece overlaps its neighbour */ border-radius:var(--r-md); box-shadow:var(--sh-1); background:var(--paper-2); }
.gal--v2 figure > img,.gal--v2 figure > video{ position:absolute; inset:0; display:block; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; border-radius:0; box-shadow:none; }
.gal--v2 .gal__lead{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.gal--v2 .gal__wide{ grid-column:span 2; aspect-ratio:3/2; }
.gal--v2 .gal__wide.gal__clip{ aspect-ratio:16/9; }
@media (max-width:1080px){ .gal--v2{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){
  .gal--v2{ grid-template-columns:repeat(2,1fr); gap:var(--s3); }
  .gal--v2 .gal__lead{ grid-row:auto; aspect-ratio:4/5; }
}

/* ───────────────────────────────────────── choose your experience · 20 Sep 2026
   Nandita's board, page 2: the schedule page opens with four cards instead of a
   text list. The list stays under them — it carries the dates, prices and links.
   Same pastel family as the home page's card pile, so nothing new enters the system. */
.pick4{
  --hp-plum:#4B3F63; --hp-rose:#FFC4D6; --hp-sky:#C7DEF8; --hp-butter:#FFE7A3; --hp-mint:#C6EBD9;
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.9rem,1.6vw,1.4rem); grid-template-columns:repeat(2,minmax(0,1fr));
}
.pick4__c{
  display:flex; flex-direction:column; gap:.55rem; min-width:0;
  padding:clamp(1.2rem,2.2vw,1.9rem); border-radius:var(--r-lg);
  background:var(--k); color:var(--hp-plum);
}
/* 20 Sep 2026 (Nitin): every booking card carries its own picture, no two the same. */
.pick4__pic{
  margin:0 0 .35rem; border-radius:calc(var(--r-lg) - 10px); overflow:hidden;
  aspect-ratio:16/10; background:rgba(75,63,99,.12);
}
.pick4__pic img{ display:block; width:100%; height:100%; object-fit:cover; }
.pick4__n{ margin:0; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.pick4__c h3{
  margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.25rem,1rem + 1vw,1.7rem); line-height:1.08; color:var(--hp-plum); text-wrap:balance;
}
.pick4__c p:not(.pick4__n){ margin:0; font-size:.98rem; line-height:1.5; color:var(--hp-plum); }
.pick4__go{
  margin-top:auto; padding-top:.6rem; align-self:flex-start;
  font-weight:600; color:var(--hp-plum); text-decoration:none; box-shadow:inset 0 -2px 0 currentColor;
}
.pick4__go:hover{ opacity:.72; }
.pick4__pair{
  display:grid; gap:clamp(.9rem,1.6vw,1.4rem); grid-template-columns:1.35fr 1fr;
  margin-top:clamp(.9rem,1.6vw,1.4rem);
}
.pick4__ink{
  background:var(--ink); color:var(--paper); border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.2vw,1.9rem);
}
.pick4__kicker{ margin:0 0 .55rem; font-size:.76rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--on-ink-3); }
.pick4__ink p + p{ margin:0; font-size:1.02rem; line-height:1.5; }
.pick4__warm{
  background:var(--y); color:var(--ink); border-radius:var(--r-lg);
  padding:clamp(1.2rem,2.2vw,1.9rem);
  display:flex; flex-direction:column; gap:.9rem; align-items:flex-start; justify-content:center;
}
.pick4__warm p{ margin:0; font-size:1.05rem; }
@media (max-width:780px){ .pick4, .pick4__pair{ grid-template-columns:1fr; } }

/* ================================== IN THE PRESS (second build, Nitin, 22 Sep 2026)
   /blog/ and its posts, built by _site/build-blog.py. One post per press piece.
   Every story wears its outlet's MASTHEAD, a small nameplate in a serif, one colour
   per outlet: NBC10 ink with the peacock stripe, the Anchor navy, the Moms rose.
   The index leads with the NBC10 video as a wide feature, three stories under it.
   A post: nameplate, headline, the video or the photograph full width, then the text
   beside a sticky "The original" card that sends the reader to the source. */
.mast{ display:inline-flex; align-items:stretch; margin:0; border-radius:8px; overflow:hidden; font-size:.74rem; line-height:1; }
.mast__outlet{ padding:.45rem .7rem; font-family:Georgia,'Times New Roman',serif; font-weight:700; letter-spacing:.02em; color:#fff; background:var(--mk,#141418); }
.mast__show{ padding:.45rem .7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.64rem; display:flex; align-items:center; color:var(--mk,#141418); background:color-mix(in srgb,var(--mk,#141418) 12%,#fff); }
.mast--nbc{ --mk:#141418; box-shadow:inset 0 -3px 0 #6E3FF3; }
.mast--anchor{ --mk:#1F3A5F; }
.mast--moms{ --mk:#B83268; }

.bx-top{ padding:clamp(1rem,2.5vw,1.75rem) 0 clamp(1.5rem,3vw,2.5rem); }
.bx-top .crumb{ margin:0 0 clamp(var(--s5),3vw,var(--s7)); }
.bx-top__h1{ margin:.35rem 0 1.1rem; max-width:17ch; font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,1rem + 4.6vw,4.4rem); letter-spacing:-.045em; line-height:1.02; }
.bx-top__outlets{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.bx-top__outlets .mast{ font-size:.86rem; }

.bx-list{ padding-top:0; }
.pgrid3{ display:grid; gap:clamp(var(--s5),3vw,var(--s6)); grid-template-columns:repeat(3,minmax(0,1fr)); }
.pc{ margin:0; }
.pc__link{ display:flex; flex-direction:column; height:100%; border-radius:26px; overflow:hidden; text-decoration:none; color:var(--ink);
  background:var(--card); box-shadow:var(--sh-1); transition:transform var(--base) var(--spring-b), box-shadow var(--base) linear; }
.pc__link:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.pc__link:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.pc__pic{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); }
.pc__pic img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--slow) var(--spring-b); }
.pc__link:hover .pc__pic img{ transform:scale(1.04); }
.pc__pic--vid{ aspect-ratio:16/9; }
.pc__body{ display:flex; flex-direction:column; gap:.6rem; padding:clamp(1.1rem,2.4vw,1.5rem); flex:1; }
.pc__body .mast{ align-self:flex-start; }
.pc__t{ font-family:var(--display); font-weight:800; font-size:1.25rem; letter-spacing:-.03em; line-height:1.16; }
.pc__d{ color:var(--ink-2); line-height:1.55; font-size:.94rem; }
.pc__meta{ margin-top:auto; padding-top:.3rem; font-size:.8rem; color:var(--ink-3); }
.pc--feature{ margin-bottom:clamp(var(--s5),3vw,var(--s6)); }
.pc--feature .pc__link{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); }
.pc--feature .pc__pic{ aspect-ratio:auto; min-height:100%; }
.pc--feature .pc__body{ justify-content:center; padding:clamp(1.4rem,3.4vw,2.6rem); }
.pc--feature .pc__t{ font-size:clamp(1.5rem,1rem + 1.5vw,2.25rem); }
.pc--feature .pc__d{ font-size:1.02rem; }

/* the NBC10 card: a still and a play button until pressed, then the YouTube player */
.yt{ position:relative; aspect-ratio:16/9; border-radius:inherit; overflow:hidden; background:#0d0d10; }
.yt iframe,.yt__play{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt__play{ padding:0; cursor:pointer; background:#0d0d10; }
.yt__play img{ display:block; width:100%; height:100%; object-fit:cover; }
.yt__btn{ position:absolute; left:50%; top:50%; width:clamp(56px,8vw,84px); height:clamp(56px,8vw,84px); transform:translate(-50%,-50%);
  color:#E8336D; filter:drop-shadow(0 8px 24px rgba(0,0,0,.35)); transition:transform var(--base) var(--spring-b); }
.yt__btn svg{ display:block; width:100%; height:100%; }
.yt__play:hover .yt__btn,.pc__link:hover .yt__btn{ transform:translate(-50%,-50%) scale(1.08); }
.yt__play:focus-visible{ outline:4px solid var(--y); outline-offset:-4px; }
.yt__tag{ position:absolute; left:14px; bottom:14px; padding:.35rem .65rem; border-radius:8px; background:rgba(13,13,16,.78); color:#fff; font-size:.78rem; font-weight:600; }

.ar__top{ padding-top:clamp(1rem,2.5vw,1.75rem); }
.ar__top .crumb{ margin:0 0 clamp(var(--s5),3vw,var(--s6)); }
.ar__h1{ margin:.9rem 0 .7rem; max-width:22ch; font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,1rem + 3.6vw,3.6rem); letter-spacing:-.045em; line-height:1.03; }
.ar__meta{ margin:0 0 var(--s5); font-size:.88rem; font-weight:600; color:var(--ink-3); }
.ar__lede{ margin:0 0 clamp(var(--s6),4vw,var(--s7)); max-width:58ch; color:var(--ink-2); font-size:clamp(1.08rem,1rem + .4vw,1.32rem); line-height:1.55; }
.ar__media{ margin:0 auto clamp(var(--s6),4vw,var(--s8)); width:min(100% - 2.5rem,1100px); border-radius:clamp(20px,3vw,32px); overflow:hidden; box-shadow:var(--sh-2); background:var(--paper-2); }
.ar__media > img{ display:block; width:100%; height:min(72svh,640px); object-fit:cover; }
.ar__cols{ display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:clamp(var(--s6),5vw,var(--s8)); align-items:start; }
.ar__body{ max-width:66ch; }
.ar__body > p{ margin:0 0 1.1rem; color:var(--ink-2); line-height:1.7; font-size:1.04rem; }
.ar__body a{ color:var(--ink); text-underline-offset:3px; text-decoration-thickness:2px; }
.ar__h2{ margin:clamp(2rem,4vw,2.8rem) 0 .7rem; font-family:var(--display); font-weight:800; font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem); letter-spacing:-.035em; line-height:1.15; }
.ar__h2:first-child{ margin-top:0; }
.ar__q{ margin:clamp(1.6rem,3vw,2.4rem) 0; padding:0 0 0 clamp(1rem,2.5vw,1.6rem); border-left:6px solid var(--y); }
.ar__q blockquote{ margin:0; }
.ar__q p{ margin:0; font-family:var(--display); font-weight:700; letter-spacing:-.03em; color:var(--ink); font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem); line-height:1.25; }
.ar__q figcaption{ margin-top:.6rem; font-size:.84rem; font-weight:600; color:var(--ink-3); }
.ar__steps{ counter-reset:st; margin:0 0 1.4rem; padding:0; list-style:none; }
.ar__steps li{ counter-increment:st; position:relative; margin:0 0 .8rem; padding:.9rem 1rem .9rem 3.4rem; border-radius:18px; background:var(--card); box-shadow:var(--sh-1); color:var(--ink-2); line-height:1.55; }
.ar__steps li::before{ content:counter(st); position:absolute; left:.9rem; top:.85rem; width:1.8rem; height:1.8rem; border-radius:50%; display:grid; place-items:center;
  background:var(--ink); color:#fff; font-family:var(--display); font-weight:800; font-size:.9rem; }
.ar__steps b{ color:var(--ink); }
.ar__facts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin:clamp(1.4rem,3vw,2rem) 0; }
.ar__facts div{ padding:.85rem 1rem; border-radius:16px; background:var(--card); box-shadow:var(--sh-1); }
.ar__facts dt{ font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.ar__facts dd{ margin:.25rem 0 0; font-family:var(--display); font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.3; }
.ar__pair{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.6rem,1.4vw,1rem); margin:clamp(1.6rem,3vw,2.4rem) 0; }
.ar__pair figure{ margin:0; aspect-ratio:4/5; border-radius:22px; overflow:hidden; background:var(--paper-2); }
.ar__pair img{ display:block; width:100%; height:100%; object-fit:cover; }
.ar__pair figure:nth-child(1){ transform:rotate(-1.5deg); }
.ar__pair figure:nth-child(2){ transform:rotate(1.5deg) translateY(14px); }
.ar__cta{ margin:clamp(1.8rem,4vw,2.6rem) 0 clamp(2.4rem,5vw,3.6rem); }
.ar__side{ position:sticky; top:96px; }
.orig{ --mk:#141418; padding:1.3rem 1.3rem 1.4rem; border-radius:22px; background:var(--card); box-shadow:var(--sh-2); border-top:6px solid var(--mk); }
.orig--anchor{ --mk:#1F3A5F; } .orig--moms{ --mk:#B83268; } .orig--nbc{ border-top-color:#6E3FF3; }
.orig__k{ margin:0; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.orig__o{ margin:.5rem 0 .3rem; font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:1.2rem; color:var(--mk); }
.orig__t{ margin:0 0 .6rem; font-weight:600; line-height:1.4; color:var(--ink); }
.orig__m{ margin:0 0 1rem; font-size:.82rem; color:var(--ink-3); }
.orig__go{ display:inline-block; padding:.6rem 1rem; border-radius:100px; background:var(--mk); color:#fff; font-weight:700; font-size:.86rem; text-decoration:none; }
.orig__go:hover{ opacity:.86; }
@media (max-width:980px){
  .pgrid3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ar__cols{ grid-template-columns:1fr; }
  .ar__side{ position:static; order:-1; }
}
@media (max-width:760px){
  .pgrid3{ grid-template-columns:1fr; }
  .pc--feature .pc__link{ display:flex; }
  .pc--feature .pc__pic{ aspect-ratio:16/9; min-height:0; }
  .ar__h1,.bx-top__h1{ max-width:none; }
  .ar__media > img{ height:auto; aspect-ratio:4/5; }
  .ar__facts{ grid-template-columns:1fr; }
}

/* ======================= INSIDE, IN PICTURES (schedule page, Nitin, 20 Sep 2026)
   One tall clip and four photographs: 3 x 2 on a desktop, 2 x 3 on a phone. */
.smedia{
  display:grid; gap:clamp(.7rem,1.4vw,1.1rem);
  grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr;
}
.smedia figure{ margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); aspect-ratio:3/4; }
.smedia__tall{ grid-row:span 2; aspect-ratio:3/8 !important; }
.smedia img, .smedia video{ display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:780px){
  .smedia{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .smedia__tall{ grid-row:span 2; aspect-ratio:3/8 !important; }
}
.ar__media{ position:relative; }
.ar__credit{ position:absolute; left:14px; bottom:14px; max-width:calc(100% - 28px); padding:.35rem .65rem; border-radius:8px;
  background:rgba(13,13,16,.72); color:#fff; font-size:.76rem; font-weight:600; line-height:1.3; }
/* 22 Sep 2026: the press heroes are portraits (Nandita and Yuvi, Nandita at the logo wall). In a
   1100x640 frame they lost their heads, so a photo hero now keeps its own shape, centred, as tall as
   the screen allows. The NBC10 video keeps the full width. */
.ar__media:not(.ar__media--vid){ width:fit-content; max-width:min(100% - 2.5rem, 1100px); }
.ar__media:not(.ar__media--vid) > img{ width:auto; max-width:100%; height:min(78svh, 760px); object-fit:cover; }
@media (max-width:760px){
  .ar__media:not(.ar__media--vid) > img{ width:100%; height:auto; aspect-ratio:auto; }
}

/* ======================= THE BOOKING PAGE, NANDITA'S PAGE 2 (board read 22 Sep 2026)
   Her mockup, section by section: a condensed headline beside two taped photos and two
   stickers; "Find your next creative experience" as four pastel tiles, a black studio card
   and a yellow party card; then the list as white panels, one per kind, each row a colored
   dot, the name and its line, a price column and a pink text link. The condensed face is
   Bricolage Grotesque's own width axis (75%), loaded on this page only. */
.hero--book .hero__wrap{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); }
.hero--book .bk-h1{ font-stretch:75%; font-size:clamp(2.8rem,1rem + 4.9vw,5rem); line-height:.93; letter-spacing:-.035em; max-width:none; }
.bk-h2{ font-stretch:75%; font-size:clamp(2.3rem,1.1rem + 3.6vw,4rem); line-height:.95; letter-spacing:-.03em; }
.hero--book .hero__sub{ max-width:40ch; }
.hero--book .hero__cta{ margin-bottom:24px; }
.bk-collage{ position:relative; aspect-ratio:1/.86; margin:clamp(1rem,2vw,1.5rem) 0; }
.bk-collage__blob{ position:absolute; left:4%; right:14%; top:30%; bottom:0; background:var(--y);
  border-radius:48% 52% 44% 56% / 58% 46% 54% 42%; transform:rotate(-8deg); }
.bk-collage figure{ position:absolute; margin:0; padding:clamp(6px,.9vw,11px) clamp(6px,.9vw,11px) clamp(9px,1.2vw,14px);
  background:#fff; box-shadow:0 14px 34px rgba(20,20,24,.18), 0 2px 6px rgba(20,20,24,.08); }
.bk-collage img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:0; max-height:none; aspect-ratio:auto; box-shadow:none; }
.bk-collage__a{ left:2%; top:9%; width:47%; height:78%; transform:rotate(-4deg); z-index:1; }
.bk-collage__a img{ object-position:50% 45%; }
.bk-collage__b{ right:1%; top:1%; width:50%; height:84%; transform:rotate(5deg); z-index:2; }
.bk-collage__b img{ object-position:50% 40%; }
.bk-sticker{ position:absolute; z-index:3; padding:.5rem 1.05rem .55rem; border-radius:100px; font-family:var(--display);
  font-weight:800; font-size:clamp(.9rem,.7rem + .5vw,1.15rem); letter-spacing:-.01em; line-height:1; box-shadow:0 6px 14px rgba(20,20,24,.16); }
.bk-sticker--pink{ right:6%; top:6%; background:var(--m); color:#fff; transform:rotate(-7deg); }
.bk-sticker--yellow{ left:24%; bottom:4%; background:var(--y); color:var(--ink); transform:rotate(-9deg); }

.bk-choose .sec__head{ max-width:none; margin-bottom:clamp(var(--s5),3vw,var(--s6)); }
.bk-tiles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.6rem,1.2vw,.9rem); }
.bk-tile{ display:flex; flex-direction:column; justify-content:space-between; gap:.6rem; min-height:clamp(5.4rem,8vw,7.2rem);
  padding:clamp(1rem,1.8vw,1.35rem) clamp(1.1rem,2vw,1.5rem); border-radius:18px; background:var(--k); color:var(--ink);
  text-decoration:none; font-family:var(--display); font-weight:800; font-size:clamp(1.15rem,.85rem + .9vw,1.65rem);
  letter-spacing:-.025em; line-height:1.05; transition:transform var(--fast) var(--spring), box-shadow var(--fast) linear; }
.bk-tile i{ font-style:normal; font-weight:700; font-size:1.25em; line-height:1; transition:transform var(--fast) var(--spring); }
.bk-tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.bk-tile:hover i{ transform:translateX(5px); }
.bk-tile:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.bk-pair{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(.6rem,1.2vw,.9rem); margin-top:clamp(.6rem,1.2vw,.9rem); }
.bk-ink,.bk-warm{ border-radius:18px; padding:clamp(1.2rem,2.2vw,1.7rem) clamp(1.2rem,2.2vw,1.7rem); }
.bk-ink{ background:var(--ink); color:#fff; }
.bk-ink p:not(.bk-big){ margin:0; color:var(--on-ink-2); line-height:1.5; }
.bk-u{ color:#fff; text-decoration:underline; text-decoration-color:var(--y); text-decoration-thickness:3px; text-underline-offset:6px; }
.bk-warm{ background:var(--y); display:flex; flex-direction:column; justify-content:space-between; gap:.9rem; }
.bk-big{ margin:0 0 .45rem; font-family:var(--display); font-weight:800; font-size:clamp(1.55rem,1.1rem + 1.3vw,2.2rem); letter-spacing:-.035em; line-height:1; }
.bk-out{ align-self:flex-start; display:inline-flex; gap:.4rem; padding:.6rem 1.05rem; border:2px solid var(--ink); border-radius:100px;
  color:var(--ink); font-weight:700; font-size:.92rem; text-decoration:none; transition:background var(--fast) linear, color var(--fast) linear; }
.bk-out:hover{ background:var(--ink); color:var(--y); }
.bk-out:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

.bk-list{ padding-top:clamp(var(--s6),4vw,var(--s8)); }
.bk-sec + .bk-sec{ margin-top:clamp(var(--s7),6vw,var(--s8)); }
.bk-sec__head{ margin-bottom:clamp(var(--s4),2vw,var(--s5)); }
.bk-sec__head .hx{ margin:.35rem 0 .45rem; }
.bk-sec__head .lede{ margin:0; max-width:62ch; }
.bk-panel{ background:var(--card); border-radius:22px; box-shadow:var(--sh-1); padding:clamp(.6rem,1.6vw,1.1rem) clamp(1rem,2.4vw,1.9rem) clamp(.9rem,1.8vw,1.2rem); }
.bk-group{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:clamp(.8rem,1.6vw,1.1rem) 0 .35rem; }
.bk-group + .bk-rows, .bk-rows + .bk-group{ margin-top:0; }
.bk-rows + .bk-group{ margin-top:clamp(.8rem,1.6vw,1.2rem); }
.bk-group h3{ margin:0; font-size:clamp(1.15rem,1rem + .5vw,1.4rem); letter-spacing:-.02em; }
.bk-group p{ margin:0; font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.bk-rows{ list-style:none; margin:0; padding:0; }
.bk-row{ display:grid; grid-template-columns:14px minmax(0,1fr) 11.5rem 10.5rem; gap:.3rem clamp(.8rem,2vw,1.6rem);
  align-items:center; padding:clamp(.8rem,1.5vw,1.05rem) 0; border-top:1px solid var(--line); }
.bk-group + .bk-rows .bk-row:first-child, .bk-panel > .bk-rows:first-child .bk-row:first-child{ border-top:0; }
.bk-row__dot{ width:12px; height:12px; border-radius:50%; background:var(--k); align-self:start; margin-top:.35rem; }
.bk-row__main h3,
.bk-row__main h4{ margin:0; font-family:var(--body); font-weight:600; font-size:1rem; letter-spacing:0; color:var(--ink); }
.bk-row__main p{ margin:.15rem 0 0; font-size:.84rem; line-height:1.45; color:var(--ink-3); }
.bk-row__price{ margin:0; display:grid; gap:.1rem; }
.bk-row__price b{ font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.bk-row__price span{ font-size:.76rem; color:var(--ink-3); }
.bk-row__go{ justify-self:end; font-size:.74rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--m-txt);
  text-decoration:none; white-space:nowrap; padding:.5rem 0; }
.bk-row__go:hover{ color:var(--m); text-decoration:underline; text-underline-offset:4px; }
.bk-row__go:focus-visible{ outline:3px solid var(--m); outline-offset:3px; border-radius:4px; }
.bk-note{ margin:.2rem 0 0; padding-top:.8rem; border-top:1px solid var(--line); font-size:.8rem; line-height:1.5; color:var(--ink-3); }
.bk-ask{ display:grid; grid-template-columns:40px minmax(0,1fr) auto; gap:.3rem clamp(.8rem,2vw,1.4rem); align-items:center;
  padding:clamp(.9rem,1.6vw,1.1rem) 0; border-top:1px solid var(--line); }
.bk-ask__sun{ width:34px; height:34px; }
.bk-ask__sun circle{ fill:var(--y); stroke:var(--ink); stroke-width:2; }
.bk-ask__sun path{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; }
.bk-ask p{ margin:0; font-size:.84rem; color:var(--ink-3); }
.bk-ask .bk-ask__h{ font-weight:600; font-size:1rem; color:var(--ink); }

@media (max-width:900px){
  .hero--book .hero__wrap{ grid-template-columns:minmax(0,1fr); }
  .hero--book .hero__copy{ grid-row:2; }
  .hero--book .bk-collage{ grid-column:1; grid-row:3; width:min(100%,520px); margin-inline:auto; }
}
@media (max-width:640px){
  .bk-br{ display:none; }
  .bk-tiles{ grid-template-columns:minmax(0,1fr); }
  .bk-pair{ grid-template-columns:minmax(0,1fr); }
  .bk-row{ grid-template-columns:14px minmax(0,1fr) auto; }
  .bk-row__price{ grid-column:2; grid-row:2; }
  .bk-row__go{ grid-column:3; grid-row:1 / span 2; align-self:center; }
  .bk-group{ flex-direction:column; gap:.2rem; }
  .bk-ask{ grid-template-columns:34px minmax(0,1fr); }
  .bk-ask .bk-row__go{ grid-column:2; justify-self:start; }
}
@media (prefers-reduced-motion:reduce){ .bk-tile,.bk-tile i,.bk-out{ transition:none; } }

/* ======================= THE HERO SHUFFLE (service pages, Nitin 22 Sep 2026)
   assets/js/hero-shuffle.js lays each extra picture exactly over the page's own one and fades it in;
   while it holds its 2 seconds it settles from a slight zoom, so the frame keeps moving. */
.hero__img[data-shuffle]{ position:relative; }
.hero__shuf{ position:absolute; z-index:1; overflow:hidden; border-radius:var(--r-xl); opacity:0; pointer-events:none;
  transition:opacity .7s ease; }
.hero__shuf.is-on{ opacity:1; }
.hero__shuf img{ display:block; width:100%; height:100%; max-height:none; aspect-ratio:auto; object-fit:cover; border-radius:0;
  box-shadow:none; transform:scale(1.07); }
.hero__shuf.is-on img{ transform:scale(1); transition:transform 2.8s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce){ .hero__shuf{ display:none; } }

/* ===== ROUND 14 (28 Sep 2026, Nandita's board picture a929bb04): her "GOOD TO KNOW" card fills the FAQ hero's
   empty right column, one <img> with a clear background, tilted a touch like on her board. The generic .hero__img
   picture rules (4/5 crop, radius, shadow) are switched off for it. */
.r14-gtk{ display:flex; justify-content:center; align-items:center; margin:0; }
.r14-gtk img{ width:min(100%,440px); height:auto; aspect-ratio:auto; object-fit:contain; max-height:none;
  border-radius:0; box-shadow:none; transform:rotate(4deg); filter:drop-shadow(0 14px 22px rgba(60,30,40,.14)); }
@media (max-width:900px){ .r14-gtk img{ width:min(78vw,380px); } }