:root{
  --wo-ink:#161817;
  --wo-body:#606361;
  --wo-line:#e0e4e4;
  --wo-bleed:max(0px, calc((100vw - 1440px) / 2));
}

/* core/group always wraps its content in an extra .wp-block-group__inner-container
   div (needed for WordPress's width-constraining "layout" feature, which this
   theme doesn't use) — every layout rule on this site assumes DIRECT children
   (flex items, position:absolute reference boxes), so that extra wrapper level
   would silently break all of it. display:contents removes its own box from
   the render tree entirely — its children behave exactly as if they were direct
   children of the real .wp-block-group element, restoring the assumption. */
.wp-block-group__inner-container{display:contents}

/* Smooth-scroll for internal anchor links (nav menu section jumps). */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ---------- shared "canvas" wrapper (see project_wanderingopus_css_gotchas) ----------
   GeneratePress's own container caps at 1200px and isn't centered, so any
   section needing the full 1440px design canvas escapes it with width:100vw
   + this max-width:1440px/margin-left:bleed pair. .wo-home defines its own
   copy (higher specificity, wins for home) — this is the sitewide version
   for every other page. */
.wo-canvas{
  position:relative;
  max-width:1440px;
  margin-left:var(--wo-bleed)!important;
}

/* ---------- reset (sitewide, only within our own components) ---------- */
.wo-header, .wo-header *, .wo-footer, .wo-footer *{margin:0;padding:0;box-sizing:border-box}
.wo-header img, .wo-footer img{display:block}
.wo-header a, .wo-footer a{text-decoration:none;color:inherit}

/* ---------- shared ---------- */
.serif{font-family:'Cormorant Garamond',serif}
.pill{display:inline-flex;align-items:center;justify-content:center;padding:18px 24px!important;
  border-radius:9999px;font:500 18px/1.1 'Inter',sans-serif;text-transform:uppercase;
  white-space:nowrap;cursor:pointer;border:0;transition:opacity .2s ease,transform .2s ease;
  text-decoration:none!important}
.pill--light{background:#fff;color:var(--wo-ink)!important}
.pill--dark{background:var(--wo-ink);color:#fff!important}
.pill:hover{opacity:.8;transform:translateY(-1px)}
.index-row{display:flex;gap:16px;align-items:center;height:49px;
  font:500 20px/1.2 'Inter',sans-serif;text-transform:uppercase;white-space:nowrap}
.index-row .num{color:var(--wo-line)}
.btn-round{display:flex;align-items:center;justify-content:center;background:#fff;
  border-radius:9999px;width:56px;height:56px;border:0;cursor:pointer;
  transition:opacity .2s ease,transform .2s ease}
.btn-round img{width:32px;height:32px}
.btn-round:hover{opacity:.8;transform:translateY(-1px)}

/* ---------- site header ---------- */
.wo-header{position:absolute;left:0;top:0;width:100%;z-index:10;display:flex;
  align-items:center;justify-content:space-between;
  padding:22px calc(var(--wo-bleed, 0px) + 64px)!important}
.wo-header.wo-header--static{position:relative;background:var(--wo-ink)}
.wo-header__logo{width:408px;height:30px}
.wo-header__nav{display:flex;gap:16px;align-items:center}

/* ---------- site footer ---------- */
.wo-footer{display:flex;flex-direction:column;gap:40px;align-items:center;background:#fff}
.wo-footer__inner{display:flex;flex-direction:column;gap:24px;align-items:flex-end;
  padding:120px 64px 24px!important;width:100%;max-width:1440px;margin:0 auto}
.wo-footer__top{display:flex;align-items:flex-start;justify-content:space-between;
  padding-bottom:80px!important;border-bottom:1px solid var(--wo-line);width:100%}
.wo-footer__brand{display:flex;flex-direction:column;gap:40px;width:533px}
.wo-footer__brand-txt{display:flex;flex-direction:column;gap:24px;width:468px}
.wo-footer__brand-txt img{width:408px;height:30px}
.wo-footer__brand-txt p{font:400 18px/1.6 'Inter',sans-serif;color:var(--wo-body)}
.wo-footer__social{display:flex;gap:16px}
.wo-footer__social a{display:flex;align-items:center;justify-content:center;width:64px;height:64px;
  background:#fff;border:1px solid var(--wo-line);border-radius:9999px}
.wo-footer__social img{width:40px;height:40px}
.wo-footer__nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 28px;
  align-items:center;font:400 18px/1.6 'Inter',sans-serif;
  color:var(--wo-body);text-transform:uppercase;white-space:nowrap;list-style:none}
.wo-footer__nav li{list-style:none}
.wo-footer__legal{display:flex;justify-content:center;width:100%;
  font:400 18px/1.6 'Inter',sans-serif;color:var(--wo-body);text-transform:uppercase}
.wo-footer__policy{display:flex;justify-content:center;align-items:center;gap:10px;width:100%;
  margin-top:8px;font:400 13px/1.4 'Inter',sans-serif;color:var(--wo-body)}
.wo-footer__policy a{opacity:.8;transition:opacity .2s ease}
.wo-footer__policy a:hover{opacity:1;text-decoration:underline}
/* !important: WooCommerce's own woocommerce-layout.css ships
   ".woocommerce img,.woocommerce-page img{max-width:100%}", which is
   more specific than a single class and silently overrides this on
   every WooCommerce-templated page (Shop/Product/Cart/Checkout/My
   Account) — the wordmark otherwise stretches to the full viewport
   there while staying correctly capped on Home/The Artist. */
.wo-footer__wordmark{width:100%;max-width:1440px!important;height:auto;margin:0 auto}

/* ---------- off-canvas menu ---------- */
#generate-slideout-menu.slideout-navigation{
  background:var(--wo-ink);
  width:480px;
  max-width:90vw;
}
#generate-slideout-menu .slideout-menu{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:140px 64px 64px;
}
#generate-slideout-menu .slideout-menu li{
  list-style:none;
  border-bottom:1px solid rgba(255,255,255,.12);
}
#generate-slideout-menu .slideout-menu li:last-child{
  border-bottom:0;
}
#generate-slideout-menu .slideout-menu a{
  display:block;
  padding:20px 0;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:32px;
  line-height:1.2;
  color:#fff;
  text-decoration:none;
  transition:opacity .2s ease;
}
#generate-slideout-menu .slideout-menu a:hover,
#generate-slideout-menu .slideout-menu a:focus{
  opacity:.6;
}
#generate-slideout-menu .slideout-exit{
  position:absolute;
  top:22px;
  right:64px;
  width:56px;
  height:56px;
  border-radius:9999px;
  background:#fff;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
#generate-slideout-menu .slideout-exit svg,
#generate-slideout-menu .slideout-exit::before{
  color:var(--wo-ink);
}
.slideout-overlay{
  background:rgba(2,0,1,.7);
}

/* ---------- mobile (<=767px): sitewide header/footer ---------- */
@media (max-width:767px){
  .wo-header{padding:14px calc(var(--wo-bleed, 0px) + 16px)!important}
  .wo-header__logo{width:150px;height:auto;flex-shrink:0}
  .wo-header__nav{gap:8px}
  .wo-header .pill{padding:10px 12px!important;font-size:10.5px;letter-spacing:.02em}
  .pill{padding:14px 20px!important;font-size:14px}
  .btn-round{width:40px;height:40px;flex-shrink:0}
  .btn-round img{width:20px;height:20px}

  #generate-slideout-menu .slideout-menu{padding:100px 24px 40px}
  #generate-slideout-menu .slideout-menu a{font-size:24px}
  #generate-slideout-menu .slideout-exit{right:20px;top:16px;width:44px;height:44px}

  .wo-footer__inner{padding:60px 20px 24px!important}
  .wo-footer__top{flex-direction:column;gap:40px;padding-bottom:40px!important;align-items:flex-start}
  .wo-footer__brand{width:100%}
  .wo-footer__brand-txt{width:100%}
  .wo-footer__brand-txt img{width:220px;height:auto}
  .wo-footer__nav{flex-wrap:wrap;gap:16px 24px;font-size:15px}
  .wo-footer__legal{font-size:13px;text-align:center}
  .wo-footer__wordmark{display:none!important}
}

/* ---------- tablet (768px-1439px): sitewide header ----------
   Below 1440px, literal desktop px widths (e.g. .wo-footer__brand at
   533px alongside a nav list) don't fit their viewport at all — this
   range was entirely unstyled before, not just "not tablet-optimized".
   Footer rules are scoped separately below (768-1199px only) — common
   laptop/scaled-desktop widths like 1200-1439px (e.g. a 1920px screen
   at 150% Windows scale) should get the real desktop footer, wordmark
   included, per Figma; only genuine tablets (768-1199px) stack it. */
@media (min-width:768px) and (max-width:1439px){
  .wo-header{padding:22px 32px!important}
  .wo-header__logo{width:280px;height:auto;flex-shrink:0}
  .wo-header__nav{gap:14px}
  .wo-header .pill{padding:14px 20px!important;font-size:15px}
  .btn-round{width:52px;height:52px;flex-shrink:0}
  .btn-round img{width:26px;height:26px}

  #generate-slideout-menu .slideout-menu{padding:120px 48px 48px}
}

/* ---------- tablet (768px-1199px): sitewide footer only ---------- */
@media (min-width:768px) and (max-width:1199px){
  .wo-footer__inner{padding:90px 32px 24px!important}
  .wo-footer__top{flex-direction:column;gap:48px;padding-bottom:56px!important;align-items:flex-start}
  .wo-footer__brand{width:100%}
  .wo-footer__brand-txt{width:100%;max-width:480px}
  .wo-footer__nav{flex-wrap:wrap;gap:20px 32px}
  .wo-footer__wordmark{display:none!important}
}