/* Wand & Whisk additions layered on top of the live site's own styles.
   Everything James built stays as is; this file only adds Jesse's
   reference-site animations and replaces pieces that needed WordPress. */

/* Search needs WordPress, so the icon is hidden on the static copy */
#et_top_search, .et_search_outer, .et_pb_menu__search-button { display: none !important; }

/* ---------- sign-up box: James's box, without the full-screen dark overlay ---------- */
.wppopups-whole { display: block !important; }
.wppopups-whole .spu-bg { display: none !important; }
.wppopups-whole .spu-box {
  display: block !important;
  position: fixed !important;
  right: 18px; bottom: 18px; left: auto; top: auto;
  width: min(450px, calc(100vw - 36px)) !important;
  margin: 0 !important;
  padding: 20px !important;
  background: rgb(252, 230, 235) !important;
  border-radius: 15px;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
  z-index: 99998;
  opacity: 0; visibility: hidden;
  transform: translateY(24px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.wppopups-whole .spu-box.ww-open { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease, transform .35s ease; }
.wppopups-whole .spu-close { position: absolute; top: 4px; right: 12px; font-size: 30px; line-height: 1; color: #666; cursor: pointer; }
.wppopups-whole .spu-close:hover { color: #000; }
@media (max-width: 600px) {
  .wppopups-whole .spu-box { right: 10px; bottom: 10px; width: calc(100vw - 20px) !important; padding: 14px 16px !important; }
  .wppopups-whole #mc_embed_signup_scroll h2 { font-size: 24px; padding-bottom: 4px; }
  .wppopups-whole .indicates-required { display: none; }
}

/* ---------- Load More (static) ---------- */
.ww-hidden-item { display: none !important; }

/* ---------- Pokémon Café style fade-up as cards enter ---------- */
.ww-js .ww-rise { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.ww-js .ww-rise.ww-in { opacity: 1; transform: none; }

/* ---------- Kirby Café style bounce on hover ---------- */
.dp-dfg-item { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease !important; }
.dp-dfg-item:hover { transform: translateY(-8px); box-shadow: rgba(0, 0, 0, 0.3) 0 10px 26px 0 !important; }
.et_pb_blurb .et_pb_main_blurb_image img { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.et_pb_blurb:hover .et_pb_main_blurb_image img { transform: translateY(-10px) rotate(-3deg); }

/* ---------- Little Goat style wavy "Menu" title ---------- */
.ww-wave-title { margin: 0 !important; padding: 0 !important; line-height: 0 !important; }
.ww-wave { display: block; width: 100vw; max-width: none; margin: 24px 0 0 calc(50% - 50vw); height: auto; overflow: visible; }
.ww-wave text { font-family: 'Magic Story', Helvetica, Arial, sans-serif; font-size: 96px; fill: #fff; }
.ww-wave .row2 text { fill: rgba(255, 255, 255, 0.55); }
@media (max-width: 767px) {
  .ww-wave text { font-size: 150px; }
  .ww-wave .row2 { display: none; }
}

/* room for the footer's rounded top */
.ww-last-section { padding-bottom: calc(4% + 48px) !important; }
.ww-last-plain { padding-bottom: 48px !important; }
@media (max-width: 767px) { .ww-last-section { padding-bottom: calc(50px + 48px) !important; } }

@media (prefers-reduced-motion: reduce) {
  .ww-js .ww-rise, .dp-dfg-item, .et_pb_blurb .et_pb_main_blurb_image img { transition: none !important; opacity: 1 !important; }
  .ww-ornament::after { transform: none !important; }
}

/* =====================================================================
   Fonts. The live site only ships the hairline (100) weight of Museo Sans
   Rounded, so every heading and button was a browser-faked bold and the body
   text was spindly. Re-pointing that family name at a real rounded family with
   real weights fixes all of James's text rules at once. Magic Story (the H1s)
   is untouched.
   ===================================================================== */
@font-face { font-family: 'Museo Sans Rounded'; src: url(fonts/nunito-latin.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Magic Story was only loaded on pages that already used it */
@font-face { font-family: 'Magic Story'; src: url(../wp-content/uploads/et-fonts/Magic-Story.ttf) format('truetype'); font-display: swap; }
/* the hero/menu intro paragraph was forced to Helvetica */
body .et_pb_section .et_pb_text_0 .et_pb_text_inner,
body .et_pb_section .et_pb_text_0 .et_pb_text_inner p { font-family: 'Museo Sans Rounded', Helvetica, Arial, sans-serif !important; }
/* calmer weights: headings were all set to 800 */
body h2, body h3, body h4, body h5, body h6 { font-weight: 600 !important; letter-spacing: 0; }
body h2 b, body h2 strong, body h3 b, body h3 strong, body h4 b, body h4 strong { font-weight: inherit !important; }
body .dp-dfg-item h2.entry-title, body .dp-dfg-item h2.entry-title a { font-weight: 700 !important; }
body .et_pb_toggle_title, body .et_pb_toggle h5 { font-weight: 600 !important; }
body p, body li { font-weight: 500 !important; }
body #top-menu li a, body .et_mobile_menu li a { font-weight: 600 !important; }
body .side-anchor { font-weight: 600 !important; }
body .et_pb_button { font-weight: 700 !important; }
body #mc_embed_signup_scroll h2 { font-family: 'Magic Story', Helvetica, Arial, sans-serif !important; font-weight: 400 !important; }

/* =====================================================================
   Rounder shapes
   ===================================================================== */
body .et_pb_button, body .dp-dfg-load-more-button,
body .nf-form-content input[type="submit"], body #mc-embedded-subscribe { border-radius: 999px !important; }
body .dp-dfg-item { border-radius: 24px !important; overflow: hidden; }
body .dp-dfg-item .dp-dfg-image, body .dp-dfg-item .dp-dfg-image img { border-radius: 0 !important; }
body .et_pb_section .et_pb_column:has(> .et_pb_blurb) { border-radius: 26px !important; overflow: hidden; }
body .et_pb_blurb { border-radius: 26px; }
/* FAQ + event policy toggles: soft white bubbles instead of flat grey boxes */
body .et_pb_toggle {
  background: rgba(255, 255, 255, 0.82) !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: 0 2px 14px rgba(94, 39, 80, 0.12);
  margin-bottom: 14px !important;
  overflow: hidden;
}
body .et_pb_toggle_title, body .et_pb_toggle h5.et_pb_toggle_title { color: #5e2750 !important; }
body .et_pb_toggle_title:before { color: #a84d9c !important; }
/* event cards, blog and post images */
body .et_pb_section article.et_pb_post, body .em-item, body .em.em-list .em-item,
body .et_pb_post .entry-featured-image-url, body .et_pb_post .entry-featured-image-url img,
body.single-post .entry-content img, body .et_pb_image_wrap, body .et_pb_image_wrap img { border-radius: 22px !important; }
/* form fields */
body .nf-form-content input:not([type="submit"]), body .nf-form-content textarea,
body #mc_embed_signup input[type="email"], body .mailchimp-field input {
  border-radius: 14px !important;
  border: 1px solid rgba(94, 39, 80, 0.18) !important;
  background: rgba(255, 255, 255, 0.92) !important;
  padding: 10px 14px !important;
}
body .wppopups-whole .spu-box { border-radius: 26px; }
@media (max-width: 767px) { body .side-anchor-nav { border-radius: 22px !important; } }

/* home hero: a rounded "bubble" bottom instead of a flat cut */
body.home .et_pb_section_0 { position: relative; z-index: 1; border-radius: 0 0 56px 56px; }
body.home .et_pb_section_0 + .et_pb_section { margin-top: -56px; padding-top: calc(4% + 56px) !important; }

/* footer: softer plum with a rounded top, the cast standing on it */
html body .et-l--footer > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_footer { background-color: #8a3f80 !important; border-radius: 48px 48px 0 0; margin-top: -48px; }

/* every page title in Magic Story, like the home and menu titles */
body h1.entry-title, body .et_pb_post_title h1, body h1.et_pb_module_header { font-family: 'Magic Story', Helvetica, Arial, sans-serif !important; font-weight: 500 !important; }

/* Events page: its white title sat on a white background; give it the pink glow the other pages have */
body.page-id-426 .et_pb_section_0 { background-image: radial-gradient(circle, rgb(167, 76, 156) 0%, rgb(246, 184, 198) 100%) !important; }

/* blog posts: drop the empty sidebar divider and center the article */
body.single-post.et_right_sidebar #main-content .container:before { display: none !important; }
body.single-post #left-area { float: none !important; width: 100% !important; max-width: 820px; margin: 0 auto; padding-right: 0 !important; }

/* contact map */
body iframe[src*="google.com/maps"] { border-radius: 22px; }
body.single-post #main-content .container { padding-top: 48px !important; }
body .et_pb_blurb_description, body .et_pb_blurb_description * { font-weight: 500 !important; }

/* =====================================================================
   Details borrowed from the sites in Jesse's brief
   ===================================================================== */

/* FF Eorzea Café: a thin ornament line (diamond ends, the café's star in the
   middle) under centered titles; it draws outward like Pokémon Café's lines */
.ww-ornament::after {
  content: "";
  display: block;
  width: 230px; max-width: 70%; height: 16px;
  margin: 14px auto 0;
  background-color: currentColor;
  opacity: .85;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 16'%3E%3Cpath d='M5 3l5 5-5 5-5-5z'/%3E%3Crect x='14' y='7.3' width='86' height='1.4' rx='.7'/%3E%3Cpath d='M115 0q1.7 6.3 8 8-6.3 1.7-8 8-1.7-6.3-8-8 6.3-1.7 8-8z'/%3E%3Crect x='130' y='7.3' width='86' height='1.4' rx='.7'/%3E%3Cpath d='M225 3l5 5-5 5-5-5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 16'%3E%3Cpath d='M5 3l5 5-5 5-5-5z'/%3E%3Crect x='14' y='7.3' width='86' height='1.4' rx='.7'/%3E%3Cpath d='M115 0q1.7 6.3 8 8-6.3 1.7-8 8-1.7-6.3-8-8 6.3-1.7 8-8z'/%3E%3Crect x='130' y='7.3' width='86' height='1.4' rx='.7'/%3E%3Cpath d='M225 3l5 5-5 5-5-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.ww-ornament.ww-drawn::after { transform: scaleX(1); }

/* Kirby Café: the menu tracker's active item becomes a white bubble with
   two trailing dots, sliding to whichever category is on screen */
@media (min-width: 768px) {
  body .side-anchor-nav { padding-left: 14px !important; }
  body .side-anchor-nav::after {
    left: 14px !important; width: calc(100% - 14px) !important;
    border-radius: 999px; background: #fff !important;
    box-shadow: 0 4px 16px rgba(94, 39, 80, 0.18);
    transition: top .45s cubic-bezier(.34, 1.4, .64, 1), height .3s ease !important;
    z-index: 0;
  }
  body .side-anchor { position: relative; z-index: 1; padding: 10px 18px !important; }
  body .side-anchor.active { color: #a84d9c !important; font-size: 19px !important; transform: none !important; }
  body .side-anchor.active::after {
    content: ""; position: absolute; right: -26px; top: 50%;
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    box-shadow: 11px 0 0 #fff; transform: translateY(-50%);
  }
  body .side-anchor-nav::before { left: 4px !important; width: 2px; background: rgba(255, 255, 255, 0.35) !important; }
}
@media (max-width: 767px) {
  body .side-anchor-nav { padding: 6px !important; }
  body .side-anchor-nav a { flex: 0 0 50% !important; }
  body .side-anchor.active { background: #fff; color: #a84d9c !important; text-decoration: none !important; border-radius: 999px; }
}

/* Pokémon Café: the three character cards sit in double-ring circle frames */
body.home .et_pb_section_1 .et_pb_blurb .et_pb_main_blurb_image { margin-bottom: 26px !important; }
body.home .et_pb_section_1 .et_pb_blurb .et_pb_main_blurb_image .et_pb_image_wrap {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 180px; height: 180px;
  border-radius: 50% !important; overflow: visible;
  background: radial-gradient(circle at 50% 42%, #fff 0%, #fde8ed 72%);
  box-shadow: 0 0 0 5px #f6b8c6, 0 0 0 11px #fff, 0 0 0 12px rgba(168, 77, 156, 0.45);
}
body.home .et_pb_section_1 .et_pb_blurb .et_pb_main_blurb_image img { width: 150px !important; max-width: 150px !important; height: auto !important; border-radius: 0 !important; }
body.home .et_pb_section_1 .et_pb_blurb { padding-top: 16px; }

/* Kirby Café arch: single menu-item photos in the same arched frame as the menu cards */
body.single-menu-item .et_pb_image_0_tb_body { text-align: center; }
body.single-menu-item .et_pb_image_0_tb_body .et_pb_image_wrap {
  display: inline-block !important; width: min(380px, 78vw); aspect-ratio: 3 / 4;
  border-radius: 999px 999px 36px 36px !important; overflow: hidden;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.9), 0 0 0 16px rgba(255, 255, 255, 0.3), 0 18px 40px rgba(94, 39, 80, 0.25);
}
body.single-menu-item .et_pb_image_0_tb_body .et_pb_image_wrap img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 50% 50%; border-radius: 0 !important; }
body.single-menu-item .et_pb_post_content_0_tb_body { text-align: center; margin-top: 30px; }

/* Kirby Café shop cards: menu cards get arched tops */
html body .dp_dfg_filtergrid .dp-dfg-container .dp-dfg-items .dp-dfg-item {
  border-top-left-radius: 90px !important; border-top-right-radius: 90px !important;
  border-bottom-left-radius: 24px !important; border-bottom-right-radius: 24px !important;
}
/* Taiyaki soft serve cards: the photos are cropped tight above the swirl, so the tip ran into the arch.
   Room above the tip now matches the gap beside the cone (Jesse, 2026-10-24); ww-enhance.js fills it
   with each photo's own backdrop color so the extra strip reads as part of the photo. */
html body .dp_dfg_filtergrid .dp-dfg-item.menu-category-taiyaki-soft-serve img {
  box-sizing: border-box !important; display: block !important;
  padding: 10.5% 0 0 !important; margin-bottom: 20px !important; /* % of the card width, so it scales on phones; the theme's 20px under the photo moves to a margin */
  background-color: var(--ww-photo-top, #f4eeea) !important;
  object-fit: cover !important; object-position: 50% 100% !important;
}

/* Blog index as tiles (Marc's first blog layout, restored 2026-10-24): newest post as a wide feature tile,
   the rest as photo cards; plum border and a hard shadow that jumps up on hover. Markup from build.mjs blogTiles. */
body.page-id-719 .ww-posts { --ww-plum: #5e2750; --ww-ink: #45193d; --ww-ink-soft: #6b3a62; --ww-line: 2.5px solid var(--ww-plum); }
body.page-id-719 .ww-post {
  display: flex; flex-direction: column; background: #fff; color: var(--ww-ink); text-decoration: none;
  border: var(--ww-line); border-radius: 20px; box-shadow: 5px 5px 0 var(--ww-plum); overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}
body.page-id-719 .ww-post:hover { color: var(--ww-ink); transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ww-plum); }
body.page-id-719 .ww-post-pic { aspect-ratio: 16 / 10; border-bottom: var(--ww-line); overflow: hidden; background: #fde9ee; }
body.page-id-719 .ww-post-pic img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0 !important; }
body.page-id-719 .ww-post-txt { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
body.page-id-719 .ww-post h2 { margin: 0; padding: 0; font-family: 'Museo Sans Rounded', Nunito, sans-serif !important; font-weight: 800 !important; font-size: 19px !important; line-height: 1.3 !important; color: var(--ww-ink) !important; }
body.page-id-719 .ww-post-meta { margin: 0; padding: 0; font-size: 14px; font-weight: 700; color: var(--ww-ink-soft); }
body.page-id-719 .ww-post-ex { margin: 0; padding: 0; font-size: 15.5px; line-height: 1.6; color: var(--ww-ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.page-id-719 .ww-post-more { margin-top: auto; padding-top: 4px; font-weight: 800; color: #a84d9c; }
body.page-id-719 .ww-post-more::after { content: " \2192"; }
body.page-id-719 .ww-post:hover .ww-post-more { text-decoration: underline; }
body.page-id-719 .ww-post--feature { display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 28px; }
body.page-id-719 .ww-post--feature .ww-post-pic { aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: var(--ww-line); }
body.page-id-719 .ww-post--feature .ww-post-txt { padding: clamp(22px, 3vw, 36px); justify-content: center; }
body.page-id-719 .ww-post--feature h2 { font-family: 'Magic Story', Georgia, serif !important; font-weight: 400 !important; font-size: clamp(26px, 2.8vw, 36px) !important; line-height: 1.2 !important; }
body.page-id-719 .ww-post--feature .ww-post-ex { -webkit-line-clamp: 4; }
body.page-id-719 .ww-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) {
  body.page-id-719 .ww-post-grid { grid-template-columns: 1fr 1fr; }
  body.page-id-719 .ww-post--feature { grid-template-columns: 1fr; }
  body.page-id-719 .ww-post--feature .ww-post-pic { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: var(--ww-line); }
}
@media (max-width: 620px) { body.page-id-719 .ww-post-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { body.page-id-719 .ww-post { transition: none; } }

/* About: Jesse and Gwen, in the same double-ring circle frames as the home cards */
.ww-founder { display: grid; grid-template-columns: 280px 1fr; gap: 44px; align-items: center; margin: 22px 0 34px; }
.ww-founder-photo { margin: 0; }
.ww-founder-photo img {
  display: block; width: 280px; height: 280px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.95), 0 0 0 11px rgba(255, 255, 255, 0.28), 0 16px 34px rgba(94, 39, 80, 0.3);
}
.ww-founder-text h3 { margin-top: 0 !important; padding-top: 0 !important; }
@media (max-width: 767px) {
  .ww-founder { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .ww-founder-photo img { width: 230px; height: 230px; }
  .ww-founder-text h3 { text-align: center; }
}

/* About hero, in the home hero's style */
.ww-about-hero {
  position: relative; z-index: 2;
  padding: 150px 24px 70px; text-align: center; overflow: hidden;
  background: radial-gradient(circle, rgb(167, 76, 156) 0%, rgb(246, 184, 198) 100%);
  border-radius: 0 0 56px 56px;
  box-shadow: 0 18px 40px rgba(94, 39, 80, 0.22);
}
.ww-about-hero h1.entry-title { color: #fff !important; font-size: 60px !important; line-height: 1.1 !important; margin: 0 !important; padding: 0 !important; }
.ww-about-hero .ww-hero-sub { max-width: 760px; color: #fff !important; font-size: 34px !important; line-height: 1.25 !important; font-weight: 500 !important; margin: 22px auto 0 !important; padding: 0 !important; }
.ww-guild { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 28px; max-width: 1100px; margin: 40px auto 0; min-height: 300px; }
.ww-guild-girl { width: auto; height: 250px; animation: float 4s ease-in-out infinite; }
.ww-guild-girl.g2 { height: 300px; animation-delay: -1.3s; }
.ww-guild-girl.g3 { animation-delay: -2.6s; }
.ww-star { position: absolute; width: 27px; height: 27px; animation: randomTwinkle 7s ease-in-out infinite both; }
.ww-star.s1 { left: 6%; top: 18%; animation-duration: 6s; }
.ww-star.s2 { left: 12%; top: 62%; animation-duration: 9s; }
.ww-star.s3 { right: 8%; top: 12%; animation-duration: 5s; }
.ww-star.s4 { right: 14%; top: 58%; animation-duration: 11s; }
.ww-star.s5 { left: 49%; top: -6%; animation-duration: 8s; width: 20px; height: 20px; }
/* the text section under the hero tucks under its rounded bottom */
body.page-id-14 .ww-about-hero + .et_pb_section_0, .ww-about-hero + .et_pb_section_0 { margin-top: -56px; padding-top: calc(4% + 56px) !important; }
@media (max-width: 767px) {
  .ww-about-hero { padding: 120px 16px 44px; border-radius: 0 0 40px 40px; }
  .ww-about-hero h1.entry-title { font-size: 44px !important; }
  .ww-about-hero .ww-hero-sub { font-size: 24px !important; }
  .ww-guild { gap: 0; min-height: 0; margin-top: 26px; }
  .ww-guild-girl { height: 90px; }
  .ww-guild-girl.g2 { height: 114px; }
}
@media (prefers-reduced-motion: reduce) { .ww-guild-girl, .ww-star { animation: none !important; } .ww-star { opacity: .8; } }

/* About: text and art side by side, switching sides each section */
.ww-about-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 56px; align-items: start; margin: 48px 0 56px; }
.ww-about-row + .ww-about-row { margin-top: 0; }
.ww-about-row.ww-art-left { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.ww-about-row.ww-art-left .ww-about-art { order: -1; }
.ww-about-art { margin: 0; position: sticky; top: 130px; padding-top: 8px; }
/* arched windows the girls stand in */
.ww-window {
  position: relative; width: 100%; max-width: 380px; margin: 0 auto; aspect-ratio: 4 / 5;
  border-radius: 999px 999px 34px 34px; overflow: hidden;
  background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.95) 0%, #fde8ed 55%, #f6b8c6 100%);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.9), 0 0 0 13px rgba(255, 255, 255, 0.25), 0 18px 40px rgba(94, 39, 80, 0.28);
  display: flex; align-items: flex-end; justify-content: center;
}
.ww-window-girl { position: relative; z-index: 1; width: 92%; height: auto; margin-bottom: 6%; animation: float 4s ease-in-out infinite; }
.ww-window--creamia { aspect-ratio: 1 / 1; }
.ww-window--creamia .ww-window-girl { width: 112%; max-width: none; margin-bottom: 0; animation: none; }
.ww-window--ube .ww-window-girl { animation-delay: -1.4s; }
.ww-window--matcha .ww-window-girl { animation-delay: -2.4s; }
.ww-window .ww-star { z-index: 0; filter: drop-shadow(0 0 2px rgba(168, 77, 156, 0.6)); }
.ww-window .ww-star.s1 { left: 16%; top: 22%; }
.ww-window .ww-star.s2 { right: 18%; top: 14%; animation-duration: 9s; }
.ww-window .ww-star.s3 { right: 12%; top: 46%; animation-duration: 6s; width: 18px; height: 18px; }
/* three arched menu photos, middle one raised */
.ww-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; max-width: 460px; margin: 0 auto; }
.ww-trio-arch {
  border-radius: 999px 999px 22px 22px; overflow: hidden; aspect-ratio: 3 / 5; background: #f3f0f1;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9), 0 14px 30px rgba(94, 39, 80, 0.25);
}
.ww-trio-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; border-radius: 0 !important; }
.ww-trio-arch.a1, .ww-trio-arch.a3 { margin-top: 30px; }
@media (max-width: 980px) { .ww-about-row, .ww-about-row.ww-art-left { gap: 32px; } }
@media (max-width: 767px) {
  .ww-about-row, .ww-about-row.ww-art-left { grid-template-columns: 1fr; gap: 26px; margin-bottom: 40px; }
  .ww-about-art { position: static; order: -1; padding-top: 0; }
  .ww-window { max-width: 280px; }
  .ww-trio { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) { .ww-window-girl { animation: none !important; } }