/* r9.css v1 · 24 Sep 2026, round 9 (Nandita's board pages 2 to 5, Nitin's yes by pop-up).
   The pieces the four new pages add on top of service.css and r7-teens.css: the hub's three day cards, the
   "what do they want to make" photo tiles, the upcycle grid, the tag cloud, the Live Embroidery band and the
   activation points on /pop-up-events/. Our kit throughout: Fraunces, Caveat scribbles, tape, pastel cards, drips. */

.r9-scribble{ margin:1rem 0 0; font-family:var(--hand); font-size:clamp(1.15rem,.9rem + .9vw,1.5rem); line-height:1.15; color:#D6467E; text-align:center; }
.r9-scribble--left{ text-align:left; }
.r9-scribble--light{ color:#FFB3CF; }
.r9-link{ font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; }
.r9-link:hover{ color:#D6467E; }

/* --- the three creative days ------------------------------------------------------------------------------------ */
.r9-days{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.2vw,1.6rem); margin-top:clamp(1.4rem,3vw,2.2rem); }
.r9-day{ position:relative; display:flex; flex-direction:column; gap:.55rem; padding:clamp(1.3rem,2.6vw,2rem); border-radius:22px; background:var(--bg,#FBE3EC);
  border:1px solid rgba(20,20,24,.08); box-shadow:0 18px 40px -30px rgba(20,20,24,.45); }
.r9-day__n{ margin:0; font-family:var(--display); font-weight:800; font-size:2.4rem; line-height:1; color:rgba(20,20,24,.18); }
.r9-day h3{ margin:0; font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.1rem + 1.2vw,2rem); line-height:1.02; letter-spacing:-.02em; }
.r9-day p:not(.r9-day__n):not(.dot-eyebrow){ margin:0 0 .6rem; color:var(--ink-2); line-height:1.55; }
.r9-day .btn{ margin-top:auto; align-self:flex-start; }

/* --- what do they want to make: four photo tiles ------------------------------------------------------------------ */
.r9-makes{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.8vw,1.3rem); margin-top:clamp(1.4rem,3vw,2.2rem); }
.r9-make{ position:relative; display:block; border-radius:18px; overflow:hidden; text-decoration:none; color:#fff; aspect-ratio:4/5; background:var(--ink); }
.r9-make img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.r9-make:hover img{ transform:scale(1.04); }
.r9-make__t{ position:absolute; inset:auto 0 0 0; padding:2.6rem 1rem 1rem; background:linear-gradient(transparent, rgba(20,20,24,.82)); display:grid; gap:.15rem; }
.r9-make__t small{ font:600 .72rem/1.2 var(--body); letter-spacing:.12em; text-transform:uppercase; color:#FFD75E; }
.r9-make__t b{ font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,.9rem + .7vw,1.5rem); line-height:1.05; }
.r9-idea{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.4rem; margin-top:clamp(1.4rem,3vw,2.2rem); padding:clamp(1.4rem,3vw,2.2rem);
  border-radius:22px; background:#FFF6D6; border:1px dashed rgba(20,20,24,.35); }
.r9-idea .tape{ top:-12px; left:34px; width:110px; transform:rotate(-4deg); }
.r9-idea h3{ margin:.2rem 0 .5rem; font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem); line-height:1.02; }
.r9-idea p:not(.dot-eyebrow){ margin:0; color:var(--ink-2); max-width:60ch; }

/* --- upcycle • mend • stitch • embroider -------------------------------------------------------------------------- */
.r9-upsec{ background:#F6F1EA; }
.r9-ups{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.8vw,1.3rem); margin-top:clamp(1.4rem,3vw,2.2rem); }
.r9-up{ padding:clamp(1.2rem,2.2vw,1.6rem); border-radius:18px; background:#fff; border:1px solid rgba(20,20,24,.08); box-shadow:0 14px 30px -26px rgba(20,20,24,.5); }
.r9-up h3{ margin:.3rem 0 .5rem; font-family:var(--display); font-weight:700; font-size:clamp(1.25rem,1rem + .8vw,1.6rem); line-height:1.05; letter-spacing:-.015em; }
.r9-up p:not(.dot-eyebrow){ margin:0; color:var(--ink-2); line-height:1.55; }
.r9-up__tag{ margin-top:.7rem !important; font-family:var(--hand); color:#D6467E !important; font-size:1.05rem; }
.r9-upcta{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:1.2rem 2rem; margin-top:clamp(1.4rem,3vw,2rem); padding:clamp(1.4rem,3vw,2rem);
  border-radius:22px; background:var(--ink); color:#fff; }
.r9-upcta h3{ margin:.1rem 0 .3rem; font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.1rem + 1.3vw,2.1rem); line-height:1.02; color:#fff; }
.r9-upcta p:not(.r9-scribble){ margin:0; color:rgba(255,255,255,.8); }
.r9-upcta .r9-scribble{ margin:0; color:#FFB3CF; }
.r9-upcta .btn{ grid-row:1 / span 4; grid-column:2; }

/* --- the custom box's four lines, the tag cloud, the final buttons ------------------------------------------------ */
.r9-steps{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem; }
.r9-steps li{ display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:.6rem; align-items:baseline; }
.r9-steps b{ font-family:var(--display); font-weight:800; font-size:1.2rem; color:#D6467E; }
.r9-steps strong{ font-weight:700; }
.r9-steps span{ color:var(--ink-2); line-height:1.5; }
.r9-tags{ list-style:none; margin:1rem 0 1.4rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.r9-tags li{ padding:.4rem .8rem; border-radius:999px; background:#fff; border:1px solid rgba(20,20,24,.14); font-size:.86rem; }
.r7t-seo__box h3{ margin:1.2rem 0 .4rem; font-family:var(--display); font-weight:700; font-size:clamp(1.3rem,1rem + 1vw,1.7rem); line-height:1.05; }
.r9-cta__btns{ display:flex; flex-wrap:wrap; gap:.8rem; align-items:center; }

/* --- /pop-up-events/: the Live Embroidery band and the activation points ----------------------------------------- */
.r9-emb{ color:#fff; }
.r9-emb .hx{ color:#fff; }
.r9-emb__u{ background:linear-gradient(transparent 62%, #D6467E 62%); }
.r9-emb p{ color:rgba(255,255,255,.82); }
.r9-emb__top{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(1.6rem,4vw,3.6rem); align-items:center; }
.r9-emb__top .eyebrow{ color:#fff; }
.r9-emb__steps{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; counter-reset:none; }
.r9-emb__steps li{ display:grid; grid-template-columns:2.6rem minmax(0,1fr); grid-template-rows:auto auto; column-gap:.9rem; padding:1rem 1.2rem; border-radius:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); }
.r9-emb__n{ grid-row:1 / span 2; display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:#FFD75E; color:var(--ink); font-family:var(--display); font-weight:800; font-size:1.2rem; }
.r9-emb__steps b{ font-family:var(--display); font-weight:700; font-size:1.15rem; color:#fff; }
.r9-emb__steps span:not(.r9-emb__n){ color:rgba(255,255,255,.78); line-height:1.45; }
.r9-emb__chips{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.8vw,1.3rem); margin-top:clamp(1.6rem,3.5vw,2.6rem); }
.r9-emb__chip{ padding:clamp(1.1rem,2vw,1.5rem); border-radius:18px; background:#fff; color:var(--ink); }
.r9-emb__chip h3{ margin:.3rem 0 .4rem; font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,1rem + .6vw,1.45rem); line-height:1.05; }
.r9-emb__chip p:not(.dot-eyebrow){ margin:0; color:var(--ink-2); line-height:1.5; }
.r9-emb .r9-scribble{ margin-top:1.4rem; }
.r9-build{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(1.6rem,4vw,3.6rem); align-items:start; }
.r9-build__list{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem; }
.r9-build__list li{ display:grid; gap:.25rem; padding:1rem 1.2rem; border-radius:16px; background:#FFF6D6; border:1px solid rgba(20,20,24,.08); }
.r9-build__list b{ font-family:var(--display); font-weight:700; font-size:1.15rem; }
.r9-build__list span{ color:var(--ink-2); line-height:1.5; }

@media (max-width:980px){
  .r9-days{ grid-template-columns:1fr; }
  .r9-makes, .r9-ups, .r9-emb__chips{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .r9-emb__top, .r9-build{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .r9-idea, .r9-upcta{ grid-template-columns:1fr; }
  .r9-upcta .btn{ grid-row:auto; grid-column:1; justify-self:start; }
  .r9-make{ aspect-ratio:1; }
}

/* --- /offsite-inquiry/ at phone width: a fieldset will not shrink below its widest child's min-content, and a <select>
   whose longest option is "Wedding / shower / private celebration" is wider than a phone; the step then spilled 14 px
   past the edge. Let the step and its boxes shrink. --------------------------------------------------------------- */
.iq__step{ min-inline-size:0; }
.iq select, .iq input, .iq textarea{ min-width:0; max-width:100%; }