@font-face{font-family:Subjectivity;src:url("assets/Subjectivity-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Subjectivity;src:url("assets/Subjectivity-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --cream:#fdf2e5;
  --honey:#f0be72;
  --blue:#00779d;
  --olive-text:#4b642e;
  --rule:#45355533;
  --paper:#fffbf6;
  --lumbre-mauve:#d2b3d2;
  --banner-plum:#453555;
  --banner-beige:#fbf4e1;
  --banner-pink:#f0c5d9;
  --banner-green:#e3edb0;
  --soft-lilac:color-mix(in srgb,var(--lumbre-mauve) 24%,var(--cream));
  --soft-green:color-mix(in srgb,var(--banner-green) 35%,var(--cream));
  --banner-rule:#fbf4e144;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--olive-text);font:400 1rem/1.6 Subjectivity,system-ui,sans-serif}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.25em}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.06;letter-spacing:-.055em}
h2{font-size:clamp(2.5rem,5.1vw,4.75rem)}
h3{font-size:clamp(1.34rem,2.35vw,1.85rem)}
p+p{margin-top:.8rem}
.wrap{width:min(100% - 8.5vw,1260px);margin-inline:auto}
.section{padding-block:clamp(4rem,8vw,7.5rem)}
.eyebrow,.location,.ribbon{font-size:.69rem;font-weight:700;letter-spacing:.18em}
.eyebrow{margin-bottom:1.05rem}
.eyebrow span{margin-right:.4rem}
.skip{position:fixed;top:.7rem;left:.7rem;z-index:5;padding:.7rem 1rem;background:var(--cream);transform:translateY(-180%)}
.skip:focus{transform:translateY(0)}
.location,.ribbon{background:var(--banner-green);color:var(--banner-plum)}
.location{text-align:center;padding:.65rem .75rem;font-size:.81rem;letter-spacing:.14em;line-height:1.4}
.location span{margin-inline:.65rem}
.header{background:var(--banner-plum);color:var(--banner-beige);border-bottom:1px solid var(--banner-rule)}
.nav-row{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{width:clamp(108px,12vw,140px)}
.header .brand img{width:clamp(142px,15vw,186px);filter:brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(352%) hue-rotate(329deg) brightness(106%)}
.desktop-nav{display:flex;gap:clamp(.9rem,2.5vw,2.35rem);align-items:center}
.desktop-nav a{text-decoration:none;font-size:clamp(.93rem,1.25vw,1.05rem)}
.desktop-nav a:hover,.footer-base>a:last-child:hover{text-decoration:underline}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.15rem;padding:.82rem 1.18rem;border-radius:999px;border:1px solid transparent;font-size:.79rem;font-weight:700;line-height:1.35;text-decoration:none;min-height:46px;width:fit-content}
.button span{font:400 1.16rem/1 system-ui,sans-serif}
.header-cta{color:inherit;border-color:#fbf4e180;min-height:46px;padding:.65rem 1rem;font-size:.95rem}
.header-cta:hover{background:var(--banner-beige);color:var(--banner-plum)}
.accent {
  background: var(--banner-green);
  color: var(--banner-plum);
  border-color: var(--banner-plum);
  box-shadow: inset 0 -2px var(--rule);
}
.accent:hover{background:var(--cream)}
.outline{border-color:currentColor}
.outline:hover{background:var(--cream)}
.mobile-menu{display:none}

.hero{background:var(--banner-plum);color:var(--banner-beige);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(1.5rem,2.4vw,2.75rem);align-items:center;min-height:505px;padding-block:2.5rem 1.4rem}
.hero-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: .35rem 0 1.5rem clamp(1.4rem, 4.5vw, 4.25rem);
  padding: .52rem .92rem;
  border-radius: 1.1rem;
  background: var(--banner-green);
  color: var(--banner-plum);
  line-height: 1.3;
  letter-spacing: .09em;
  box-shadow: 0 3px 0 var(--lumbre-mauve);
  transform: rotate(-7deg);
}
.hero-eyebrow::after {
  content: "";
  position: absolute;
  left: 1.3rem;
  bottom: -.38rem;
  width: .85rem;
  height: .55rem;
  background: var(--banner-green);
  clip-path: polygon(0 0, 100% 0, 12% 100%);
}
.hero-eyebrow span { margin: 0; }
.hero-eyebrow-star { font: 1.15rem/1 system-ui, sans-serif; }
.hero h1 {
  font-size: clamp(2.8rem, 5.25vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: -.075em;
  text-wrap: balance;
}
.hero h1 span {
  display: block;
  color: var(--banner-pink);
  margin-top: .45em;
  font-size: .56em;
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.15;
}
.hero-copy .button {
  background: var(--banner-green);
  color: var(--banner-plum);
  border-color: transparent;
  box-shadow: none;
  margin-top: 1.6rem;
  gap: clamp(1rem, 1.8vw, 1.5rem);
  min-height: 49px;
  padding: .7rem clamp(1rem, 1.7vw, 1.45rem);
  font-size: clamp(.85rem, 1.05vw, .97rem);
}
.hero-copy .button:hover{background:var(--banner-beige)}
.hero-copy .button span{font-size:1.3rem}
.hero-intro {
  padding-block: 1.1rem clamp(2.2rem,5vw,3.5rem);
  border-top: 1px solid var(--banner-rule);
  text-align: center;
}
.hero-intro p{max-width:58ch;margin-inline:auto;text-wrap:pretty}
.hero-visual{position:relative;isolation:isolate;margin-inline:.4rem}
.hero-sparkles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-sparkle {
  position: absolute;
  aspect-ratio: 1;
  background: var(--honey);
}
.hero-sparkle-four {
  bottom: 1%;
  left: 30%;
  width: clamp(1.15rem, 4.5%, 2.25rem);
  transform: rotate(9deg);
  clip-path: polygon(47% 2%, 50% 0, 54% 3%, 62% 38%, 97% 47%, 100% 50%, 97% 54%, 62% 61%, 54% 97%, 50% 100%, 46% 97%, 38% 61%, 3% 54%, 0 50%, 3% 46%, 38% 38%);
}
.hero-sparkle-seven {
  top: 5%;
  right: 25%;
  width: clamp(1.4rem, 6%, 3.1rem);
  transform: rotate(12deg);
  clip-path: polygon(36% 2%, 40% 0, 44% 4%, 51% 32%, 75% 2%, 80% 3%, 80% 8%, 68% 38%, 96% 26%, 100% 29%, 98% 34%, 74% 53%, 98% 62%, 100% 67%, 95% 70%, 66% 66%, 75% 94%, 73% 99%, 68% 97%, 51% 75%, 35% 99%, 30% 100%, 28% 95%, 35% 69%, 3% 77%, 0 74%, 2% 69%, 27% 51%, 6% 25%, 6% 20%, 11% 20%, 35% 36%);
}
.hero-polaroids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  padding: 8% 10% 10%;
}
.hero-photo {
  width: calc(100% + clamp(.8rem, 2.5vw, 2rem));
  max-width: none;
  height: auto;
  aspect-ratio: .79;
  object-fit: cover;
  border: clamp(7px, 1.1vw, 14px) solid var(--banner-beige);
  border-bottom-width: clamp(30px, 5vw, 66px);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--lumbre-mauve), 0 5px 0 var(--lumbre-mauve);
}
.hero-photo:first-child {
  transform: translateY(-5%) rotate(-11deg);
}
.hero-photo:last-child {
  transform: translateY(8%) rotate(11deg);
}
.hero-fairy {
  position: absolute;
  width: clamp(84px, 30%, 194px);
  height: auto;
  pointer-events: none;
}
.hero-fairy-left{left:-3%;bottom:-2%;transform:rotate(-6deg)}
.hero-fairy-right{width:clamp(58px,20.5%,133px);right:1%;top:-3%;transform:rotate(6deg)}
.ribbon{border-bottom:1px solid var(--rule)}
.ribbon-inner{min-height:48px;display:flex;align-items:center;justify-content:space-evenly;gap:.65rem;text-align:center}
.ribbon-star {
  flex: none;
  font: 1rem/1 system-ui, sans-serif;
}
.ribbon a{padding:.55rem .3rem;text-decoration:none;text-transform:uppercase}
.ribbon a:hover{text-decoration:underline}
.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: .28em;
  padding: .18em .65em;
  border: 1px solid var(--lumbre-mauve);
  border-radius: 999px;
  background: var(--soft-lilac);
  color: var(--blue);
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}
.coming-soon span{color:var(--banner-plum)}
.ribbon .coming-soon{margin-left:.25rem;font-size:.9em;transform:rotate(-4deg)}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:1.1rem;margin-bottom:2rem}
.section-head>p{max-width:27ch;padding-bottom:.2rem;font-size:.92rem}
.section-head strong{display:block;margin-top:.2rem}
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
.card{border:1px solid var(--rule);border-radius:1.15rem;overflow:hidden}
.card.lilac{background:var(--soft-lilac);border-color:var(--lumbre-mauve)}
.card.lilac h3,.gift h2,.about h2{color:var(--banner-plum)}
.card.green{background:var(--soft-green);border-color:var(--banner-green)}
.card>img{width:100%;height:clamp(150px,18vw,245px);object-fit:cover}
.class-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: stretch;
}
.class-cards > .card {
  display: flex;
  flex-direction: column;
  color: var(--banner-plum);
  background: var(--banner-beige);
  border-color: var(--lumbre-mauve);
}
.class-cards > .lilac { background: var(--soft-lilac); }
.class-cards > .green { background: var(--soft-green); border-color: var(--banner-green); }
.class-cards > .class-featured {
  background: color-mix(in srgb, var(--lumbre-mauve) 48%, var(--cream));
  border-color: var(--banner-plum);
}
.class-photo { position: relative; }
.class-cards .card > img, .class-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.75;
  object-fit: cover;
}
.class-sticker {
  position: absolute;
  top: .85rem;
  right: .85rem;
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  padding: .35rem .75rem;
  border: 1px solid var(--banner-plum);
  border-radius: 999px;
  background: var(--banner-green);
  color: var(--banner-plum);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 3px var(--lumbre-mauve);
  transform: rotate(5deg);
}
.class-featured .class-sticker { left: .85rem; right: auto; transform: rotate(-5deg); }
.card-body{padding:clamp(.95rem,2.1vw,1.55rem)}
.card-title{display:flex;align-items:start;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.card-title span{white-space:nowrap;font-weight:700;font-size:.79rem;border:1px solid var(--rule);border-radius:999px;padding:.23rem .52rem}
.card-body>p{margin:.72rem 0 .85rem;min-height:3.1em;font-size:.89rem}
.card-body details{border-top:1px solid var(--rule);margin-bottom:1rem;font-size:.81rem}
.class-cards .card-body { flex: 1; display: flex; flex-direction: column; }
.class-cards .card-title { align-items: center; }
.class-cards .card-title span { background: var(--banner-beige); }
.class-cards .card-body > p { min-height: 0; margin-block: .75rem 1rem; }
.class-cards .card-body > details { margin-bottom: 0; }
.class-cards .card-body > details:last-of-type { margin-bottom: 1.1rem; }
.class-cards .card-body > .button { width: 100%; margin-top: auto; text-align: left; }
.class-cards .card-body > .outline:hover { background: var(--banner-green); }
summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.8rem}
summary::-webkit-details-marker{display:none}
.card-body summary,.questions summary{font-weight:700;padding-block:.75rem}
.card-body summary::after,.questions summary::after{content:"+";font:400 1.15rem/1 system-ui,sans-serif;flex:none}
details[open]>summary::after{content:"−"}
.card-body details p{padding-bottom:.35rem}
.wheel-class > img { object-position: center 77%; }
.card-body button, .dialog-close {
  font-family: inherit;
  color: inherit;
  background: transparent;
  cursor: pointer;
}
.class-dialog {
  position: fixed;
  width: min(34rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1.25rem, 5vw, 2.25rem);
  border: 1px solid var(--rule);
  border-radius: 1.15rem;
  background: var(--cream);
  color: var(--olive-text);
  overflow: auto;
}
.class-dialog::backdrop { background: #2c203ac4; }
.class-dialog form {
  display: flex;
  justify-content: end;
  margin-bottom: .5rem;
}
.dialog-close { padding: .5rem .85rem; }
.class-dialog h2 {
  color: var(--banner-plum);
  font-size: clamp(1.8rem, 5vw, 2.65rem);
}
.class-dialog p, .class-dialog > a { margin-top: .9rem; }
.group-events { background: var(--soft-lilac); }
.group-events h2 { color: var(--banner-plum); }
.group-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.group-options .card { background: var(--cream); }
.group-options .group-status { min-height: 0; margin-bottom: 0; font-weight: 700; }
.group-options .group-celebration-photo { object-position: center 56%; }
.group-options .group-workshop-photo { object-position: center 56%; }
.text-link{font-size:.84rem;font-weight:700;text-decoration-thickness:1px}
.text-link:hover{text-decoration-thickness:2px}

.workshops{background:var(--soft-green);padding-block:clamp(3.5rem,7vw,6rem);overflow:hidden}
.workshop-grid,.about-grid,.kiln,.faq-grid,.footer-main{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,7vw,7rem)}
.workshop-visual{position:relative;isolation:isolate;margin:.4rem .85rem .75rem .55rem}
.workshop-visual::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--lumbre-mauve);border-radius:1.1rem;transform:rotate(5deg)}
.workshop-photo{width:100%;aspect-ratio:1.35;object-fit:cover;object-position:center 69%;border:.45rem solid var(--paper);border-radius:1.1rem;transform:rotate(-3deg)}
.workshop-sticker{position:absolute;top:4%;left:-.6rem;padding:.4rem .8rem;border:1px solid var(--lumbre-mauve);border-radius:999px;background:var(--cream);color:var(--banner-plum);font-size:.8rem;font-weight:700;transform:rotate(-9deg)}
.workshop-fairy{position:absolute;width:clamp(102px,35%,196px);bottom:-9%;right:-7%;filter:drop-shadow(0 3px 0 var(--paper));pointer-events:none}
.workshops h2{color:var(--banner-plum)}
.workshop-grid p:not(.eyebrow),.gift-copy>p:not(.eyebrow),.about-copy>p:not(.eyebrow),.kiln>div:first-child>p:not(.eyebrow){margin-top:1rem;max-width:48ch}
.workshop-grid .button{margin-top:1.45rem}
#presente{padding-block:clamp(2.5rem,5vw,4.5rem)}
.gift{display:grid;grid-template-columns:1.3fr 1fr;max-width:65rem;margin-inline:auto;border-radius:1.25rem;overflow:hidden;background:var(--soft-lilac)}
.gift-copy{padding:clamp(1.25rem,3vw,2.75rem)}
.gift h2{font-size:clamp(2rem,4vw,3.5rem)}
.gift .button{margin-top:1.15rem}
.gift-visual {
  position: relative;
  background: #fef2e6;
}
.gift-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.gift-meta{display:flex;align-items:center;gap:1rem}
.gift-meta strong{font-size:1.6rem;white-space:nowrap}
.gift-meta span{padding-left:1rem;border-left:1px solid var(--rule);font-size:.77rem}
.about{background:var(--soft-lilac);overflow:hidden}
.about-grid{grid-template-columns:.8fr 1.2fr;max-width:1060px}
.about-copy{padding-block:3rem}
.portrait{position:relative;align-self:end;display:grid;justify-items:center;isolation:isolate}
.portrait::before{content:"";position:absolute;width:78%;aspect-ratio:1;bottom:0;border-radius:50%;background:var(--lumbre-mauve);z-index:-1}
.portrait span{position:absolute;right:5%;top:15%;font:clamp(2.5rem,6vw,5rem)/1 Georgia,serif;color:var(--lumbre-mauve);transform:rotate(12deg)}
.portrait img{width:min(75%,278px);padding-top:1.5rem}
.kiln{align-items:end}
.kiln .text-link{display:inline-block;margin-top:1rem}
.table-card{background:var(--soft-green);border:1px solid var(--rule);border-radius:1rem;padding:clamp(.65rem,2.4vw,1.5rem)}
table{border-collapse:collapse;width:100%;font-size:.88rem;text-align:left}
caption{text-align:left;font-size:.81rem;font-weight:700;padding:.35rem .4rem .75rem}
th,td{padding:.65rem .4rem;border-top:1px solid var(--rule)}
td{white-space:nowrap}

.faq{background:var(--soft-green);padding-block:clamp(3.25rem,6vw,5.75rem)}
.faq-grid{grid-template-columns:.8fr 1.2fr;align-items:start}
.questions{border-top:1px solid var(--rule)}
.questions details{border-bottom:1px solid var(--rule)}
.questions summary{padding-block:1rem;font-size:.95rem}
.questions p{padding:0 1.5rem 1rem 0;font-size:.9rem}
footer{background:var(--soft-green)}
.footer-main{padding-block:clamp(3rem,7vw,6rem);align-items:start}
.footer-main h2+p{margin:1rem 0 1.3rem}
address{font-style:normal;display:grid;justify-items:start;gap:.45rem;font-size:.9rem}
address strong{font-size:1.18rem}
address .visit-note{font-size:inherit}
address .text-link{margin-bottom:.4rem}
.footer-base{border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.3rem;font-size:.8rem}
.footer-base>a:last-child{text-decoration:none}

@media (max-width:1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px){
  .hero-grid{min-height:450px;gap:2.5rem}
  .hero h1{font-size:clamp(2.5rem,5.3vw,4rem)}
}
@media (max-width:720px){
  .wrap{width:calc(100% - 2rem)}
  .nav-row{min-height:72px;position:relative}
  .desktop-nav,.header-cta{display:none}
  .mobile-menu{display:block}
  .mobile-menu summary{border:1px solid #fbf4e180;border-radius:999px;padding:.35rem .75rem;font-size:.95rem;min-height:44px}
  .mobile-menu[open] summary span{transform:rotate(45deg)}
  .mobile-menu nav{position:absolute;z-index:3;top:100%;right:0;min-width:12rem;display:grid;padding:.5rem;background:var(--banner-plum);color:var(--banner-beige);border:1px solid var(--banner-rule);border-radius:.8rem}
  .mobile-menu nav a{padding:.58rem .7rem;font-size:.95rem;text-decoration:none}
  .hero-grid{grid-template-columns:1fr;gap:2rem;min-height:0;padding-block:2.45rem 1.6rem}
  .hero h1{font-size:clamp(2.35rem,8.7vw,4rem)}
  .hero-visual{width:100%;max-width:580px;margin-inline:auto}
  .hero-photo:first-child {
    transform: translateY(-5%) rotate(-9deg);
  }
  .hero-photo:last-child {
    transform: translateY(8%) rotate(9deg);
  }
  .hero-fairy-left{left:0;bottom:-3%}
  .hero-fairy-right{right:2%;top:-3%}
  .ribbon-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0 .3rem;padding-block:.3rem;font-size:.63rem;letter-spacing:.09em}
  .ribbon-star-middle{display:none}
  .section-head{display:block}
  .section-head>p{margin-top:.8rem}
  .section-head strong{display:inline}
  .cards,.group-options,.workshop-grid,.gift,.about-grid,.kiln,.faq-grid,.footer-main{grid-template-columns:1fr}
  .gift-visual{height:clamp(12rem,55vw,19rem)}
  .card>img{height:auto;aspect-ratio:1.75}
  .card-body>p{min-height:0}
  .workshop-grid,.kiln,.faq-grid,.footer-main{gap:1.65rem}
  .about-grid{gap:.2rem}
  .about-copy{grid-row:1;padding:3rem 0 .35rem}
  .portrait img{width:min(62%,205px)}
  .portrait::before{width:min(72%,250px)}
  .portrait span{right:16%}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}