/* Sasha Beautee: the pages (Services, Portfolio, Classes, Shop).
   Loaded on top of style.css on those pages only (server/lib/pages.js adds the link). Each page is
   its own design and holds only what it is named for. What they share is below: the page head (a
   kicker with a gold rule, the big title, one line, a few live facts and the chips that jump down
   the page), the arched mirror frame, the quiet buttons and the last word before the footer.
   Sizes are rem on the site's canvas: 1rem is 10px at 1440 wide, and 1/52 of the width on phones. */

/* ---------- shared: the page head ---------- */
.pg-kicker { display: flex; align-items: center; gap: 1.6rem; font: 500 1.3rem/1 var(--f-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--gold-text); }
.pg-kicker::before { content: ""; flex: none; width: 5.2rem; height: 1px; background: linear-gradient(90deg, var(--gold), rgba(224, 176, 74, .15)); }
.pg-title { margin-top: 2.8rem; font-size: 19rem; }
.pg-lede { max-width: 60rem; margin-top: 4rem; font: 300 2rem/1.65 var(--f-sans); letter-spacing: .01em; color: var(--ink); }
.pg-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 0; margin-top: 2.8rem; font: 500 1.2rem/1.4 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wine); }
.pg-facts span { display: inline-flex; align-items: center; }
.pg-facts span { margin-right: 2.8rem; }
.pg-facts span::before { content: ""; flex: none; width: .5rem; height: .5rem; margin-right: 1.2rem; border-radius: 50%; background: var(--hot); }
.pg-chips { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 4.4rem; }
.pg-chip {
  display: inline-flex; align-items: center; gap: 1rem; height: 4.6rem; padding: 0 1.6rem; border-radius: 99rem; white-space: nowrap;
  font: 500 1.12rem/1 var(--f-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--wine);
  background: var(--paper); box-shadow: inset 0 0 0 .1rem var(--line-2); transition: color .35s ease, box-shadow .35s ease, background .35s ease;
}
.pg-chip b { font-weight: 500; color: var(--berry); transition: color .35s ease; }
@media (hover: hover) { .pg-chip:hover { color: var(--hot); box-shadow: inset 0 0 0 .1rem var(--hot); } }
.pg-chip.is-on { color: var(--on-pink); background: var(--satin-edges), var(--satin); box-shadow: 0 1rem 2rem -1rem rgba(194, 10, 108, .55); }
.pg-chip.is-on b { color: rgba(255, 255, 255, .78); }

/* ---------- shared: the quiet button (a word and a ring with an arrow) ---------- */
.go { display: inline-flex; align-items: center; gap: 1.4rem; font: 500 1.25rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--wine); white-space: nowrap; }
.go__ring { display: grid; place-items: center; width: 4.8rem; height: 4.8rem; border-radius: 50%; color: var(--hot); box-shadow: inset 0 0 0 .1rem var(--hot); transition: background .45s var(--ease), color .45s var(--ease), translate .6s var(--ease); }
.go__ring svg { width: 1.7rem; height: 1.7rem; }
@media (hover: hover) { .go:hover .go__ring { background: var(--hot); color: #fff; translate: .5rem 0; } }
.go:focus-visible .go__ring { background: var(--hot); color: #fff; }
.go:active .go__ring { scale: .92; }

/* ---------- shared: the last word ---------- */
.pg-end { position: relative; padding: 15rem 2rem 17rem; text-align: center; }
.pg-end__script { font-size: 6.2rem; }
.pg-end__title { margin-top: -.4rem; font-size: 14rem; }
.pg-end__lede { max-width: 52rem; margin: 3.4rem auto 0; font: 300 2rem/1.65 var(--f-sans); color: var(--ink); }
.pg-end__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.4rem 4rem; margin-top: 5.4rem; }
.pg-end__link {
  display: inline-flex; align-items: center; gap: 1.2rem; padding-bottom: .9rem; font: 500 1.3rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--wine);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; transition: background-size .6s var(--ease);
}
.pg-end__link svg { width: 2rem; height: 2rem; color: var(--gold-text); }
@media (hover: hover) { .pg-end__link:hover { background-size: 40% 1px; } }

/* ---------- shared: the arched mirror ---------- */
.mirror__frame {
  position: relative; display: block; padding: 1.3rem; border-radius: 50% 50% 3.4rem 3.4rem / 39% 39% 3.4rem 3.4rem; background: var(--paper);
  box-shadow: 0 0 0 .1rem rgba(224, 176, 74, .6), 0 0 0 .8rem var(--paper), 0 0 0 .9rem rgba(224, 176, 74, .28), 0 6rem 11rem -6rem var(--shade);
}
.mirror__glass { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: 4 / 5; border-radius: 50% 50% 2.2rem 2.2rem / 40% 40% 2.2rem 2.2rem; background: var(--blush); }
.mirror__glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a breath of light across the glass */
.mirror__glass::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(128deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 38%); }
/* it arrives as a curtain rising inside the arch */
[data-anim="mirror"] .mirror__frame { opacity: 0; translate: 0 3rem; transition: opacity 1.4s var(--ease), translate 1.8s var(--ease); }
[data-anim="mirror"] .mirror__glass { clip-path: inset(100% 0 0 0); transition: clip-path 1.9s cubic-bezier(.7, 0, .2, 1) .25s; }
[data-anim="mirror"].is-in .mirror__frame { opacity: 1; translate: none; }
[data-anim="mirror"].is-in .mirror__glass { clip-path: inset(0 0 0 0); }

/* =================================================================== SERVICES */
.sv { position: relative; padding: 1rem 0 12rem; }
.sv__grid { display: grid; grid-template-columns: minmax(0, 1fr) 42rem; gap: 7rem; width: min(132rem, 100% - 7rem); margin: 0 auto; }
.sv__side { position: relative; }
.mirror { position: sticky; top: max(12rem, 116px); margin-top: 2rem; }
.mirror__cap { display: grid; justify-items: center; gap: 1.2rem; min-height: 9rem; margin-top: 3rem; text-align: center; }
.mirror__name { font-size: 4.8rem; }
.mirror__meta { font: 500 1.2rem/1 var(--f-sans); letter-spacing: .22em; text-transform: uppercase; color: var(--berry); }
.mirror__meta b { font-weight: 500; color: var(--wine); }

.sv__cat { margin-top: 12rem; scroll-margin-top: 11rem; }
.sv__cat:first-child { margin-top: 10rem; }
.sv__cat-head { display: grid; grid-template-columns: minmax(0, 1fr); }
.sv__rule { height: 1px; background: linear-gradient(90deg, var(--gold), rgba(224, 176, 74, 0)); }
.sv__cat-title { margin-top: 2.2rem; font-size: 9.2rem; }
.sv__cat-line { grid-column: 1 / -1; max-width: 52rem; margin-top: 2.2rem; font: 300 1.8rem/1.6 var(--f-sans); color: var(--berry); }
.sv__looks { display: grid; gap: 1.8rem; margin-top: 4.2rem; }

/* Every look is a card: her own photo in a champagne ring, the name, a dotted leader to the price,
   what it includes and Book. The one the mirror is showing wears a gold hairline. */
.look {
  position: relative; display: grid; grid-template-columns: 9.6rem minmax(0, 1fr); column-gap: 3rem; align-items: start;
  padding: 3rem 3.4rem 2.6rem; border-radius: 2.8rem; background: var(--paper); scroll-margin-top: 14rem;
  box-shadow: inset 0 0 0 .1rem var(--line), 0 2.6rem 4.6rem -3.8rem var(--shade);
  transition: box-shadow .6s var(--ease), translate .6s var(--ease);
}
.look.is-on { box-shadow: inset 0 0 0 .12rem var(--hair), 0 3rem 5rem -3.4rem var(--shade); }
.look__pic { display: block; width: 9.6rem; height: 9.6rem; padding: .34rem; border-radius: 50%; background: var(--gold-foil); box-shadow: 0 1.6rem 2.8rem -1.8rem var(--shade); }
.look__pic img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; transition: scale 1.4s var(--ease); }
.look.is-on .look__pic img, .look:hover .look__pic img { scale: 1.06; }
.look__main { display: grid; grid-template-columns: auto minmax(2.4rem, 1fr) auto; align-items: baseline; column-gap: 1.8rem; }
.look__name { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 3.7rem; line-height: 1.08; letter-spacing: -.01em; color: var(--wine); transition: color .5s ease; }
.look.is-on .look__name { color: var(--hot); }
.look__badge { display: inline-flex; align-items: center; height: 2.6rem; padding: 0 1.2rem; border-radius: 99rem; font: 500 1rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--hot); background: var(--blush); }
.look__lead { align-self: center; height: 1px; border-bottom: 1px dotted rgba(138, 106, 44, .45); }
.look__price { font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 3.5rem; line-height: 1.08; letter-spacing: -.01em; color: var(--wine); white-space: nowrap; }
.look__desc { grid-column: 1 / -1; max-width: 54rem; margin-top: 1.4rem; font: 300 1.7rem/1.7 var(--f-sans); color: var(--ink); }
.look__foot { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 2.4rem; }
.look__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; font: 500 1.15rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.look__meta li { display: inline-flex; align-items: center; gap: 1rem; }
.look__meta svg { width: 1.7rem; height: 1.7rem; color: var(--gold-text); }
@media (hover: hover) {
  .look:hover { translate: 0 -.4rem; box-shadow: inset 0 0 0 .1rem var(--hair), 0 3.6rem 5.6rem -3.4rem var(--shade); }
}

/* the head's gold flourish and her line under the title */
.sv__swoosh { width: 26rem; margin: 2.4rem 0 0; }
.sv__script { margin-top: 1.4rem; font-size: 4.6rem; }

/* ---------- services: her work, sliding by ---------- */
.svm { position: relative; margin-top: 12rem; padding: 8rem 0 4.5rem; overflow: hidden; background: linear-gradient(180deg, rgba(253, 230, 239, 0) 0%, var(--blush) 22%, var(--blush) 78%, rgba(253, 230, 239, 0) 100%); }
.svm__head { display: grid; justify-items: center; text-align: center; }
.svm__script { font-size: 5.4rem; }
.svm__line { margin-top: 1rem; font: 300 1.8rem/1.6 var(--f-sans); color: var(--ink); }
.svm__lane { margin-top: 4.6rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.svm__track { display: flex; width: max-content; animation: svm-run 64s linear infinite; }
.svm.is-away .svm__track, .svm__track.is-waiting { animation-play-state: paused; }
.svm__track.is-waiting { opacity: 0; }
.svm__track { opacity: 1; transition: opacity .6s var(--ease); }
.svm__print { flex: none; width: 17.5rem; margin-right: 2.4rem; padding: .9rem .9rem 2.4rem; border-radius: 1.3rem; background: var(--paper); rotate: var(--t, 0deg); box-shadow: inset 0 0 0 .1rem rgba(224, 176, 74, .34), 0 2.4rem 4rem -2.8rem var(--shade); }
.svm__print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .7rem; }
@keyframes svm-run { to { translate: -50% 0; } }
.svm__link { display: flex; justify-content: center; margin-top: 4.4rem; }
.svb__bow { width: 7.2rem; margin: 0 auto 1.4rem; color: var(--gold); }

/* bridal: a pink band with her packages either side of a bride */
.svb { position: relative; padding: 10rem 0 15rem; scroll-margin-top: 4rem; background: linear-gradient(180deg, rgba(253, 230, 239, 0) 0%, var(--blush) 16%, var(--blush) 84%, rgba(253, 230, 239, 0) 100%); }
.svb__in { width: min(128rem, 100% - 8rem); margin: 0 auto; }
.svb__head { display: grid; justify-items: center; text-align: center; }
.svb__script { font-size: 6.8rem; }
.svb__title { margin-top: -.6rem; font-size: 17rem; }
.svb__intro { max-width: 62rem; margin-top: 3.6rem; font: 300 2rem/1.65 var(--f-sans); color: var(--ink); }
.svb__stage { display: grid; grid-template-columns: minmax(0, 1fr) 42rem minmax(0, 1fr); gap: 4.4rem; align-items: center; margin-top: 8rem; }
.svb__stage--one { grid-template-columns: 42rem minmax(0, 52rem); justify-content: center; }
.svb__stage--many { grid-template-columns: 42rem minmax(0, 1fr); align-items: start; }
.svb__stage--many .svb__packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; }
.svb__photo { margin: 0; }
.pack {
  position: relative; display: flex; flex-direction: column; padding: 5rem 4.4rem 4.4rem; border-radius: 3.2rem; background: var(--paper);
  box-shadow: 0 0 0 .1rem rgba(224, 176, 74, .45), 0 4.4rem 8rem -5rem var(--shade);
}
.pack__name { font-size: 5.2rem; }
.pack__price { margin-top: 2.6rem; font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 6.4rem; line-height: 1; letter-spacing: -.01em; color: var(--wine); }
.pack__per { margin-top: 1.2rem; font: 500 1.15rem/1.5 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.pack__desc { margin-top: 2.4rem; font: 300 1.7rem/1.7 var(--f-sans); color: var(--ink); }
.pack__list { display: grid; gap: 1.3rem; margin-top: 2.8rem; padding-top: 2.8rem; border-top: 1px solid var(--line); }
.pack__list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1.2rem; font: 400 1.55rem/1.5 var(--f-sans); color: var(--wine); }
.pack__list svg { width: 1.6rem; height: 1.6rem; margin-top: .25rem; color: var(--hot); }
.pack__time { margin-top: 2.6rem; font: 500 1.15rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--berry); }
.pack__act { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 2.8rem; margin-top: auto; padding-top: 3.4rem; }
.pack .chrome { height: 5.4rem; padding: 0 3rem; font-size: 1.6rem; }
.svb__more { max-width: 84rem; margin: 8rem auto 0; }
.svb__more-title { text-align: center; font-size: 4.8rem; }
.svb__extras { margin-top: 3rem; }
.svb__extra { padding: 2.6rem 0; border-bottom: 1px solid rgba(224, 176, 74, .4); }
.svb__extra:first-child { border-top: 1px solid rgba(224, 176, 74, .4); }
.svb__extra p { display: flex; align-items: baseline; gap: 2rem; font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 3.2rem; line-height: 1.1; color: var(--wine); }
.svb__extra p i { flex: 1; min-width: 4rem; border-bottom: 1px dotted rgba(138, 106, 44, .55); translate: 0 -.8rem; }
.svb__extra span { display: block; max-width: 60rem; margin-top: 1rem; font: 300 1.6rem/1.6 var(--f-sans); color: var(--ink); }
/* the terms under the extras: where she gets ready and the deposit, then her number */
.svb__terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 4rem; margin-top: 5.6rem; }
.svb__terms li { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); gap: 1.8rem; align-items: start; }
.svb__terms svg { width: 4.4rem; height: 4.4rem; padding: 1.1rem; border-radius: 50%; color: var(--hot); background: var(--paper); box-shadow: inset 0 0 0 .1rem rgba(224, 176, 74, .45); }
.svb__terms p { font: 300 1.6rem/1.65 var(--f-sans); color: var(--ink); }
.svb__terms b { display: block; margin-bottom: .6rem; font: 500 1.2rem/1.4 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wine); }
.svb__call { display: flex; align-items: center; justify-content: center; gap: 1.2rem; width: fit-content; margin: 5.6rem auto 0; padding-bottom: .9rem; font: 500 1.35rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--wine); border-bottom: 1px solid var(--gold); transition: color .4s ease; }
.svb__call svg { width: 2rem; height: 2rem; color: var(--gold-text); }
@media (hover: hover) { .svb__call:hover { color: var(--hot); } }
/* the light that crosses the mirror when a new look settles */
.mirror__sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: translateX(-130%); background: linear-gradient(105deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .32) 47%, rgba(255, 255, 255, .08) 55%, rgba(255, 255, 255, 0) 68%); }

/* add ons */
.sva { padding: 12rem 0 2rem; scroll-margin-top: 8rem; }
.sva__in { display: grid; grid-template-columns: 40rem minmax(0, 1fr); gap: 8rem; align-items: start; width: min(128rem, 100% - 8rem); margin: 0 auto; }
.sva__title { margin-top: 2.6rem; font-size: 10.4rem; }
.sva__note { margin-top: 2.8rem; font: 300 1.8rem/1.6 var(--f-sans); color: var(--berry); }
.sva__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 2rem; }
.addon { position: relative; display: flex; flex-direction: column; min-height: 26rem; padding: 3.6rem 3.2rem 3.2rem; border-radius: 2.6rem; background: var(--paper); box-shadow: inset 0 0 0 .1rem var(--line); overflow: hidden; }
.addon::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 16rem; height: 16rem; border-radius: 50%; background: radial-gradient(closest-side, var(--blush), rgba(253, 230, 239, 0)); pointer-events: none; }
.addon__icon { width: 2.8rem; height: 2.8rem; color: var(--gold-text); }
.addon__name { margin-top: 3rem; font: 500 1.35rem/1.35 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--wine); }
.addon__desc { margin-top: 1.2rem; font: 300 1.6rem/1.6 var(--f-sans); color: var(--ink); }
.addon__price { margin-top: auto; padding-top: 2.4rem; font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 4rem; line-height: 1; color: var(--wine); }

/* =================================================================== phones */
@media (max-width: 767px) {
  .pg-kicker { gap: 1.4rem; font-size: 1.35rem; letter-spacing: .28em; }
  .pg-kicker::before { width: 4rem; }
  .pg-title { margin-top: 2.2rem; font-size: 13.6rem; }
  .pg-lede { margin-top: 3rem; font-size: 2.15rem; line-height: 1.6; }
  .pg-facts { margin-top: 2.4rem; font-size: 1.3rem; letter-spacing: .14em; }
  .pg-facts { gap: 1.2rem 0; }
  .pg-facts span { margin-right: 2.4rem; }
  .pg-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; gap: .9rem; margin: 3.6rem -2.4rem 0; padding: .2rem 2.4rem; scrollbar-width: none; }
  .pg-chips::-webkit-scrollbar { display: none; }
  .pg-chip { flex: none; height: 5.4rem; padding: 0 2.3rem; font-size: 1.3rem; }
  .go { font-size: 1.35rem; }
  .go__ring { width: 5.6rem; height: 5.6rem; }
  .go__ring svg { width: 2rem; height: 2rem; }
  .pg-end { padding: 11rem 2.4rem 13rem; }
  .pg-end__script { font-size: 5.6rem; }
  .pg-end__title { font-size: 11.6rem; }
  .pg-end__lede { font-size: 2.1rem; }
  .pg-end__actions { flex-direction: column; gap: 3.4rem; margin-top: 4.4rem; }
  .pg-end__link { font-size: 1.4rem; }

  .sv { padding: 3.4rem 0 8rem; }
  .sv__grid { display: block; width: calc(100% - 4.8rem); }
  .sv__side { display: none; }
  .sv__cat { margin-top: 10rem; scroll-margin-top: 10rem; }
  .sv__cat:first-child { margin-top: 8.4rem; }
  .sv__cat-title { margin-top: 2.2rem; font-size: 9.4rem; }
  .sv__cat-line { font-size: 2rem; }
  .sv__looks { margin-top: 3rem; }
  .sv__looks { gap: 1.6rem; margin-top: 3.4rem; }
  .look { grid-template-columns: 11.6rem minmax(0, 1fr); column-gap: 2.4rem; padding: 2.4rem 2.4rem 2.6rem; border-radius: 2.6rem; scroll-margin-top: 12rem; }
  .look__pic { grid-row: 1 / span 2; align-self: start; width: auto; height: auto; padding: .4rem; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 1.8rem; }
  .look__pic img { border-radius: 1.5rem; }
  .look__main { grid-template-columns: minmax(0, 1fr); }
  .look__name { font-size: 3.7rem; }
  .look__lead { display: none; }
  .look__price { margin-top: .8rem; font-size: 3.3rem; }
  .look__desc { margin-top: 1.4rem; font-size: 1.9rem; }
  .look__foot { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; margin-top: 2.4rem; }
  .look__meta { font-size: 1.25rem; gap: 1rem 2rem; }
  .sv__swoosh { width: 21rem; margin-top: 2rem; }
  .sv__script { margin-top: 1.2rem; font-size: 5rem; }
  .svm { margin-top: 10rem; padding: 7rem 0 6rem; }
  .svm__script { font-size: 5.6rem; }
  .svm__line { font-size: 2rem; }
  .svm__lane { margin-top: 3.6rem; }
  .svm__print { width: 19rem; margin-right: 1.8rem; padding: .8rem .8rem 2.2rem; }
  .svm__track { animation-duration: 52s; }
  .svm__link { margin-top: 4rem; }
  .svb__bow { width: 8.6rem; }

  .svb { padding: 10rem 0 11rem; }
  .svb__in { width: calc(100% - 4.8rem); }
  .svb__script { font-size: 5.8rem; }
  .svb__title { font-size: 14rem; }
  .svb__intro { font-size: 2.1rem; }
  .svb__stage, .svb__stage--one, .svb__stage--many { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3.2rem; margin-top: 5.6rem; }
  .svb__stage--many .svb__packs { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; }
  .svb__photo { width: 76%; margin: 0 auto 1.6rem; }
  .pack { padding: 4.4rem 3.4rem 3.8rem; border-radius: 2.8rem; }
  .pack__name { font-size: 5.6rem; }
  .pack__price { font-size: 6rem; }
  .pack__per { font-size: 1.3rem; }
  .pack__desc { font-size: 1.95rem; }
  .pack__list li { font-size: 1.85rem; }
  .pack__time { font-size: 1.3rem; }
  .pack__act { gap: 2.4rem; }
  .svb__more { margin-top: 6.4rem; }
  .svb__more-title { font-size: 4.6rem; }
  .svb__extra p { font-size: 3.2rem; }
  .svb__extra span { font-size: 1.9rem; }
  .svb__terms { grid-template-columns: minmax(0, 1fr); gap: 3rem; margin-top: 5rem; }
  .svb__terms li { grid-template-columns: 5rem minmax(0, 1fr); }
  .svb__terms svg { width: 5rem; height: 5rem; }
  .svb__terms p { font-size: 1.95rem; }
  .svb__terms b { font-size: 1.35rem; }
  .svb__call { margin-top: 5rem; font-size: 1.45rem; }

  .sva { padding: 9rem 0 0; }
  .sva__in { grid-template-columns: minmax(0, 1fr); gap: 4.4rem; width: calc(100% - 4.8rem); }
  .sva__title { font-size: 11rem; }
  .sva__note { font-size: 2rem; }
  .sva__list { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .addon { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; align-items: center; column-gap: 2.2rem; min-height: 0; padding: 3rem 2.8rem; border-radius: 2.4rem; }
  .addon__icon { grid-row: 1 / span 2; width: 3.2rem; height: 3.2rem; }
  .addon__name { margin: 0; font-size: 1.45rem; }
  .addon__desc { grid-column: 2; margin-top: .8rem; font-size: 1.8rem; }
  .addon__price { grid-column: 3; grid-row: 1 / span 2; margin: 0; padding: 0; font-size: 3.8rem; }
}

/* =================================================================== night */
html[data-theme="dark"] .pg-chip { background: rgba(255, 255, 255, .04); }
html[data-theme="dark"] .pg-chip.is-on { color: #111; background: #fff; box-shadow: 0 1rem 2.4rem -1rem rgba(0, 0, 0, .8); }
html[data-theme="dark"] .pg-chip.is-on b { color: rgba(0, 0, 0, .55); }
html[data-theme="dark"] .go__ring { color: #fff; box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .55); }
@media (hover: hover) { html[data-theme="dark"] .go:hover .go__ring { background: #fff; color: #111; } }
html[data-theme="dark"] .mirror__frame { background: #161617; box-shadow: 0 0 0 .1rem rgba(255, 255, 255, .3), 0 0 0 .8rem #161617, 0 0 0 .9rem rgba(255, 255, 255, .12), 0 6rem 11rem -6rem rgba(0, 0, 0, .9); }
html[data-theme="dark"] .look { background: #161617; box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .1), 0 2.6rem 4.6rem -3.8rem rgba(0, 0, 0, .9); }
html[data-theme="dark"] .look.is-on { box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .34), 0 3rem 5rem -3.4rem rgba(0, 0, 0, .9); }
html[data-theme="dark"] .look.is-on .look__name { color: #fff; }
html[data-theme="dark"] .look__lead { border-bottom-color: rgba(255, 255, 255, .26); }
html[data-theme="dark"] .look__badge { color: #111; background: #fff; }
html[data-theme="dark"] .svm { background: linear-gradient(180deg, rgba(28, 28, 29, 0) 0%, #1c1c1d 22%, #1c1c1d 78%, rgba(28, 28, 29, 0) 100%); }
html[data-theme="dark"] .svm__print { background: #161617; box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .14), 0 2.4rem 4rem -2.8rem rgba(0, 0, 0, .9); }
html[data-theme="dark"] .svb__bow { color: rgba(255, 255, 255, .6); }
html[data-theme="dark"] .svb { background: linear-gradient(180deg, rgba(28, 28, 29, 0) 0%, #1c1c1d 16%, #1c1c1d 84%, rgba(28, 28, 29, 0) 100%); }
html[data-theme="dark"] .pack { background: #161617; box-shadow: 0 0 0 .1rem rgba(255, 255, 255, .16), 0 4.4rem 8rem -5rem rgba(0, 0, 0, .9); }
html[data-theme="dark"] .svb__extra, html[data-theme="dark"] .svb__extra:first-child { border-color: rgba(255, 255, 255, .14); }
html[data-theme="dark"] .svb__extra p i { border-bottom-color: rgba(255, 255, 255, .3); }
html[data-theme="dark"] .svb__terms svg { color: #fff; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .2); }
html[data-theme="dark"] .addon { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .1); }
html[data-theme="dark"] .addon::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0)); }

/* =================================================================== PORTFOLIO */
.pw { position: relative; padding: 1rem 0 4rem; }
.pw__in { width: min(128rem, 100% - 8rem); margin: 0 auto; }
.pw__head { display: grid; grid-template-columns: minmax(0, 1fr) 42rem; align-items: end; gap: 6rem; }
.pw__in { width: min(132rem, 100% - 7rem); }
.pw .pg-title { font-size: 16.6rem; }
.pw__intro { padding-bottom: 1.6rem; }
.pw__intro .pg-lede { margin-top: 0; }
.pw__filters { margin-top: 6.4rem; }
/* the wall: her prints in four columns, each with her caption under it */
.pw__wall { columns: 4; column-gap: 2.2rem; margin-top: 4rem; }
.print { display: block; width: 100%; margin: 0 0 2.2rem; break-inside: avoid; cursor: zoom-in; }
.print__card {
  display: block; padding: 1.1rem 1.1rem 0; border-radius: 1.5rem; background: var(--paper); rotate: var(--t, 0deg);
  box-shadow: inset 0 0 0 .1rem rgba(224, 176, 74, .3), 0 3rem 5.2rem -3.4rem var(--shade);
  transition: rotate .7s var(--ease), translate .7s var(--ease), box-shadow .7s var(--ease);
}
.print__photo { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar, 4 / 5); border-radius: .9rem; background: var(--blush-2); }
.print__photo img, .print__photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.print__cap { display: grid; justify-items: center; gap: .5rem; padding: 1.6rem 1rem 1.9rem; text-align: center; }
.print__look { font-family: var(--f-script); font-weight: 600; font-size: 3rem; line-height: 1.1; color: var(--hot); }
.print__meta { font: 500 1.05rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--berry); }
.print__badge {
  position: absolute; left: 1.4rem; top: 1.4rem; z-index: 2; display: inline-flex; align-items: center; gap: .8rem; height: 3.2rem; padding: 0 1.4rem; border-radius: 99rem;
  font: 500 1.05rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: #fff; background: rgba(20, 12, 16, .36);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .28);
}
.print__badge svg { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) {
  .print:hover .print__card { rotate: 0deg; translate: 0 -.9rem; box-shadow: inset 0 0 0 .1rem rgba(224, 176, 74, .6), 0 4.4rem 6.4rem -3.2rem var(--shade); }
  .print:hover .print__photo img, .print:hover .print__photo video { transform: scale(1.05); }
  .print:hover .print__look { color: var(--magenta); }
}
.print:focus-visible .print__card { rotate: 0deg; translate: 0 -.9rem; }
.print:active .print__card { translate: 0 -.2rem; transition-duration: .3s; }
.pw__script { margin-top: 1.6rem; font-size: 4.8rem; color: var(--gold-text); }
/* Every print settles out of a breath of zoom as it comes up the screen. It runs on the scroll
   itself where the browser allows it, and where it does not the photo simply sits still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the timeline is named on the print, since the photo frame clips its own overflow and would
       otherwise be the thing the browser measures */
    .print { view-timeline-name: --print; }
    .print__photo img { animation: print-settle linear both; animation-timeline: --print; animation-range: entry 6% cover 34%; }
    @keyframes print-settle { from { scale: 1.09; } to { scale: 1; } }
  }
}
.pw__swoosh { width: 24rem; margin: 2.2rem 0 0; }
.pw__empty { column-span: all; padding: 8rem 0; text-align: center; font: 300 1.8rem/1.6 var(--f-sans); color: var(--berry); }

@media (max-width: 767px) {
  .pw { padding: 3.4rem 0 2rem; }
  .pw__in { width: calc(100% - 3.2rem); }
  .pw__head { display: block; padding: 0 .8rem; }
  .pw .pg-title { font-size: 10.6rem; }
  .pw__intro { padding: 0; }
  .pw__intro .pg-lede { margin-top: 3rem; }
  .pw__filters { margin: 3.6rem -1.6rem 0; padding: .2rem 2.4rem; }
  .pw__wall { columns: 2; column-gap: 1.6rem; margin-top: 3rem; }
  .print { margin-bottom: 1.6rem; }
  .print__card { padding: .8rem .8rem 0; border-radius: 1.3rem; rotate: calc(var(--t, 0deg) * .6); box-shadow: inset 0 0 0 .1rem rgba(224, 176, 74, .3), 0 2.2rem 3.6rem -2.6rem var(--shade); }
  .print__photo { border-radius: .8rem; }
  .print__cap { gap: .4rem; padding: 1.3rem .6rem 1.5rem; }
  .print__look { font-size: 2.9rem; }
  .print__meta { font-size: 1.1rem; letter-spacing: .16em; }
  .print__badge { left: 1.2rem; top: 1.2rem; height: 3.4rem; font-size: 1.15rem; }
  .pw__script { font-size: 5rem; }
  .pw__swoosh { width: 20rem; margin-top: 1.8rem; }
}
html[data-theme="dark"] .print__card { background: #161617; box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .13), 0 3rem 5.2rem -3.4rem rgba(0, 0, 0, .9); }
html[data-theme="dark"] .print__look { color: #fff; }
@media (hover: hover) { html[data-theme="dark"] .print:hover .print__card { box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .28), 0 4.4rem 6.4rem -3.2rem rgba(0, 0, 0, .9); } }

/* =================================================================== CLASSES */
.cl { position: relative; padding: 1rem 0 4rem; }
.cl__in { width: min(128rem, 100% - 8rem); margin: 0 auto; }
.cl__head { display: grid; grid-template-columns: minmax(0, 1fr) 44rem; gap: 10rem; align-items: center; }
.cl__portrait { margin: 2rem 0 0; }
.cl__sign { display: grid; justify-items: center; margin-top: 2.2rem; }
.cl__sign .script { font-size: 6.6rem; }
.cl__sign small { margin-top: .6rem; font: 500 1.15rem/1 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--berry); }

.cl__courses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4.4rem; margin-top: 13rem; }
.course { position: relative; display: grid; grid-template-columns: 40rem minmax(0, 1fr); column-gap: 6rem; align-items: center; padding: 6.4rem 6rem 6rem; border-radius: 3.6rem; background: var(--paper); box-shadow: 0 0 0 .1rem rgba(224, 176, 74, .45), 0 5rem 9rem -6rem var(--shade); scroll-margin-top: 12rem; }
.course__level { display: flex; align-items: center; gap: 1.4rem; font: 500 1.2rem/1 var(--f-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-text); }
.course__name { max-width: 40rem; margin-top: 3rem; font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 5.6rem; line-height: 1.02; letter-spacing: -.01em; color: var(--wine); }
.course__desc { max-width: 44rem; margin-top: 2rem; font: 300 1.75rem/1.7 var(--f-sans); color: var(--ink); }
.course__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1.2rem 2.6rem; margin-top: 3.6rem; padding: 3rem 0; border-block: 1px solid var(--line); }
.course__price b { font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 8rem; line-height: .9; letter-spacing: -.02em; color: var(--wine); }
.course__price span { font: 500 1.2rem/1.5 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.course__facts { display: flex; flex-wrap: wrap; gap: 1rem 2.6rem; margin-top: 2.6rem; font: 500 1.2rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--berry); }
.course__facts li { display: inline-flex; align-items: center; gap: 1rem; }
.course__facts svg { width: 1.7rem; height: 1.7rem; color: var(--gold-text); }
.course__info { display: flex; flex-direction: column; }
.course__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.4rem; padding-left: 5rem; border-left: 1px solid var(--line); }
.course--feat .course__lists { border-left-color: rgba(255, 255, 255, .14); }
.course__head { font: 500 1.2rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase; color: var(--wine); }
.course__list { display: grid; gap: 1.5rem; margin-top: 2.4rem; }
.course__list li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: 1.2rem; font: 400 1.5rem/1.5 var(--f-sans); color: var(--ink); }
.course__list svg { width: 1.5rem; height: 1.5rem; margin-top: .3rem; color: var(--hot); }
.course__act { padding-top: 4rem; }
.course .chrome { height: 5.8rem; padding: 0 3.2rem; font-size: 1.6rem; white-space: nowrap; }
/* the one to aim for: ink, gold and its seal */
.course--feat { background: radial-gradient(120% 80% at 100% 0%, #2b2331 0%, #17131a 55%, #0f0c11 100%); box-shadow: 0 0 0 .1rem rgba(224, 176, 74, .6), 0 6rem 11rem -6rem rgba(23, 19, 26, .75); }
.course--feat .course__name, .course--feat .course__price b, .course--feat .course__head { color: #fff; }
.course--feat .course__desc, .course--feat .course__list li { color: rgba(255, 255, 255, .78); }
.course--feat .course__level, .course--feat .course__price span, .course--feat .course__list svg, .course--feat .course__facts svg { color: var(--gold); }
.course--feat .course__facts { color: rgba(255, 255, 255, .62); }
.course--feat .course__price { border-color: rgba(255, 255, 255, .14); }
.seal { position: absolute; right: 7rem; top: -6.8rem; width: 13.6rem; height: 13.6rem; }
.seal::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, #17131a 72%, rgba(23, 19, 26, 0) 100%); }
.seal__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: seal-turn 48s linear infinite; }
.seal__ring text { font: 500 10px var(--f-sans); letter-spacing: .3em; text-transform: uppercase; fill: var(--gold); }
.seal__core { position: absolute; inset: 2.9rem; display: grid; place-items: center; border-radius: 50%; color: #4a3510; background: var(--gold-foil); box-shadow: inset 0 .2rem .4rem rgba(255, 255, 255, .55), 0 1.2rem 2.6rem -1rem rgba(0, 0, 0, .7); }
.seal__core svg { width: 3.4rem; height: 3.4rem; }
@keyframes seal-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal__ring { animation: none; } }

.cl__also { display: grid; grid-template-columns: 40rem minmax(0, 1fr); gap: 8rem; align-items: start; margin-top: 13rem; }
.cl__also-title, .cl__how-title { margin-top: 2.6rem; font-size: 9.6rem; }
.cl__also-list { display: grid; gap: 2rem; }
.short { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: center; gap: 3rem; padding: 3.4rem 3.8rem; border-radius: 3rem; background: var(--paper); box-shadow: inset 0 0 0 .1rem var(--line); scroll-margin-top: 12rem; }
.short__icon { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; color: var(--hot); background: var(--blush); }
.short__icon svg { width: 2.6rem; height: 2.6rem; }
.short__name { font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 3.6rem; line-height: 1.1; color: var(--wine); }
.short__desc { max-width: 52rem; margin-top: .9rem; font: 300 1.65rem/1.6 var(--f-sans); color: var(--ink); }
.short__meta { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.4rem; font: 500 1.15rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--berry); }
.short__meta svg { width: 1.6rem; height: 1.6rem; color: var(--gold-text); }
.short__side { display: grid; justify-items: end; gap: 1.8rem; }
.short__price { font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 4.2rem; line-height: 1; color: var(--wine); white-space: nowrap; }

.cl__how { margin-top: 13rem; }
.cl__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.2rem; margin-top: 5.6rem; }
.step { position: relative; padding-top: 3.4rem; border-top: 1px solid var(--line); }
.step::before { content: ""; position: absolute; left: 0; top: -1px; width: 5.2rem; height: .2rem; background: var(--hot); }
.step__num { font: italic 400 5.2rem/1 var(--f-display); color: var(--gold-text); }
.step__title { margin-top: 2.2rem; font: 500 1.3rem/1.4 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--wine); }
.step__text { margin-top: 1.4rem; font: 300 1.65rem/1.65 var(--f-sans); color: var(--ink); }

@media (max-width: 767px) {
  .cl { padding: 3.4rem 0 2rem; }
  .cl__in { width: calc(100% - 4.8rem); }
  .cl__head { grid-template-columns: minmax(0, 1fr); gap: 7rem; }
  .cl .pg-title { font-size: 13.4rem; }
  .cl__portrait { width: 80%; margin: 0 auto; }
  .cl__sign .script { font-size: 6.4rem; }
  .cl__sign small { font-size: 1.3rem; }
  .cl__courses { grid-template-columns: minmax(0, 1fr); gap: 3.2rem; margin-top: 9rem; }
  .course { display: flex; flex-direction: column; align-items: stretch; padding: 4.8rem 3.4rem 4rem; border-radius: 3rem; }
  .course__info { display: contents; }
  .course__lists { order: 2; margin-top: 4rem; padding: 0; border: 0; }
  .course__act { order: 3; }
  .course .chrome { width: 100%; }
  .course__level { font-size: 1.3rem; }
  .course__name { max-width: 30rem; font-size: 5.2rem; }
  .course__desc { font-size: 1.95rem; }
  .course__price b { font-size: 8.4rem; }
  .course__price span { font-size: 1.3rem; }
  .course__facts { font-size: 1.3rem; }
  .course__lists { grid-template-columns: minmax(0, 1fr); gap: 4rem; }
  .course__head { font-size: 1.35rem; }
  .course__list li { font-size: 1.9rem; }
  .course .chrome { padding: 0 2.2rem; font-size: 1.7rem; }
  .seal { right: 2.6rem; top: -4.4rem; width: 11.6rem; height: 11.6rem; }
  .seal__core { inset: 2.5rem; }
  .cl__also { grid-template-columns: minmax(0, 1fr); gap: 4rem; margin-top: 10rem; }
  .cl__also-title, .cl__how-title { font-size: 9.6rem; }
  .short { grid-template-columns: 5.6rem minmax(0, 1fr); gap: 2.4rem; padding: 3.2rem 2.8rem; border-radius: 2.6rem; }
  .short__icon { width: 5.6rem; height: 5.6rem; align-self: start; }
  .short__name { font-size: 3.6rem; }
  .short__desc { font-size: 1.9rem; }
  .short__meta { font-size: 1.3rem; }
  .short__side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .cl__how { margin-top: 10rem; }
  .cl__steps { grid-template-columns: minmax(0, 1fr); gap: 4.4rem; margin-top: 4.4rem; }
  .step__title { font-size: 1.45rem; }
  .step__text { font-size: 1.95rem; }
}
html[data-theme="dark"] .course { background: #161617; box-shadow: 0 0 0 .1rem rgba(255, 255, 255, .14), 0 5rem 9rem -6rem rgba(0, 0, 0, .9); }
html[data-theme="dark"] .course--feat { background: radial-gradient(120% 80% at 100% 0%, #313133 0%, #1b1b1c 55%, #0e0e0f 100%); box-shadow: 0 0 0 .1rem rgba(255, 255, 255, .42), 0 6rem 11rem -6rem rgba(0, 0, 0, .95); }
html[data-theme="dark"] .course--feat .course__level, html[data-theme="dark"] .course--feat .course__price span, html[data-theme="dark"] .course--feat .course__list svg { color: #d8d8d8; }
html[data-theme="dark"] .seal__ring text { fill: #d8d8d8; }
html[data-theme="dark"] .short { background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .1); }
html[data-theme="dark"] .short__icon { color: #fff; background: rgba(255, 255, 255, .08); }

/* =================================================================== SHOP */
.sh { position: relative; padding: 1rem 0 12rem; }
.sh__in { width: min(128rem, 100% - 8rem); margin: 0 auto; }
.sh__head { display: grid; grid-template-columns: minmax(0, 1fr) 40rem; gap: 10rem; align-items: center; }
.sh .pg-title { font-size: 24rem; }
.sh__visual { margin: 2rem 0 0; }
/* her products: three generous cards */
.sh__stock { margin-top: 12rem; }
.sh__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.2rem; }
.sh .prod { border-radius: 3.2rem; box-shadow: 0 0 0 .1rem rgba(224, 176, 74, .38), 0 4rem 7rem -5rem var(--shade); }
.sh .prod__img { aspect-ratio: 4 / 5; }
.sh .prod__body { gap: 1.2rem; padding: 3rem 3rem 3.2rem; }
.sh .prod__name { font-family: var(--f-display); font-variation-settings: "wdth" 72; font-weight: 400; font-size: 3.4rem; line-height: 1.1; letter-spacing: -.005em; }
.sh .prod__desc { font-size: 1.6rem; line-height: 1.65; }
.sh .prod__price { font-size: 4.6rem; }
.sh__note { margin-top: 4.4rem; text-align: center; font: 500 1.2rem/1.6 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--berry); }
@media (hover: hover) { .sh .prod:hover { transform: translateY(-.8rem); } .sh .prod:hover .prod__img img { transform: scale(1.05); } }
/* while she has nothing listed */
.sh__empty { position: relative; display: grid; justify-items: center; margin-top: 12rem; padding: 10rem 4rem 11rem; overflow: hidden; border-radius: 4rem; text-align: center; background: radial-gradient(90% 120% at 50% 0%, #ffffff 0%, var(--blush) 72%); box-shadow: inset 0 0 0 .1rem rgba(224, 176, 74, .42); }
.sh__art { display: flex; gap: 4.4rem; }
.sh__piece { width: 7.4rem; height: 7.4rem; color: var(--hot); animation: piece-bob 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.5s); }
@keyframes piece-bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-1.4rem) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .sh__piece { animation: none; } }
.sh__empty-script { margin-top: 5.4rem; font-size: 6rem; }
.sh__empty-title { margin-top: -.4rem; font-size: 13rem; }
.sh__empty-lede { max-width: 54rem; margin-top: 3.4rem; font: 300 2rem/1.65 var(--f-sans); color: var(--ink); }
.sh__empty-act { margin-top: 5rem; }

@media (max-width: 767px) {
  .sh { padding: 3.4rem 0 8rem; }
  .sh__in { width: calc(100% - 4.8rem); }
  .sh__head { grid-template-columns: minmax(0, 1fr); gap: 6rem; }
  .sh .pg-title { font-size: 18rem; }
  .sh__visual { width: 74%; margin: 0 auto; }
  .sh__stock { margin-top: 8rem; }
  .sh__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .sh .prod { width: auto; border-radius: 2.4rem; }
  .sh .prod__body { padding: 2.2rem 2rem 2.4rem; }
  .sh .prod__name { font-size: 2.9rem; }
  .sh .prod__desc { font-size: 1.75rem; line-height: 1.6; }
  .sh .prod__row { flex-direction: column; align-items: stretch; gap: 1.6rem; }
  .sh .prod__price { font-size: 4.2rem; }
  .sh .prod__add { width: 100%; }
  .sh__note { font-size: 1.3rem; }
  .sh__empty { margin-top: 8rem; padding: 7rem 2.8rem 8rem; border-radius: 3rem; }
  .sh__art { gap: 3rem; }
  .sh__piece { width: 6rem; height: 6rem; }
  .sh__empty-script { font-size: 5.4rem; }
  .sh__empty-title { font-size: 8.8rem; }
  .sh__empty-lede { max-width: 100%; font-size: 2.1rem; }
}
html[data-theme="dark"] .sh__empty { background: radial-gradient(90% 120% at 50% 0%, #26262a 0%, #161617 72%); box-shadow: inset 0 0 0 .1rem rgba(255, 255, 255, .12); }
html[data-theme="dark"] .sh__piece { color: #fff; }
html[data-theme="dark"] .sh .prod { box-shadow: 0 0 0 .1rem rgba(255, 255, 255, .14), 0 4rem 7rem -5rem rgba(0, 0, 0, .9); }