/* The gallery frame stays quiet; the work carries the composition. */
#showcase {
  --gallery-gutter:clamp(20px,5vw,88px);
  -webkit-font-smoothing:antialiased;
}
#showcase .showcase-bar {
  padding:14px var(--gallery-gutter);
  background:#101a19e8;
  border-bottom-color:#e6e1cf24;
}
#showcase .showcase-bar h2 { font-size:19px; }
#showcase .showcase-bar h2 span { font-size:9px;letter-spacing:.15em; }
#showcase .showcase-bar button {
  border-radius:24px;
  padding:10px 20px;
  font-size:12px;
}
#showcase .showcase-guide {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:8px 24px;
  padding:22px var(--gallery-gutter) 0;
  font-size:22px;
  color:#d8d4c3;
}
#showcase .showcase-guide span {
  margin:0;
  font-size:10px;
  color:#adb7ab;
}
#showcase .universe {
  padding:20px var(--gallery-gutter) 48px;
  max-width:1680px;
  margin-inline:auto;
}
#showcase .universe>.eyebrow {
  font-size:9px;
  letter-spacing:.18em;
  margin:0 0 6px;
  color:#9baa9e;
}
#showcase .universe-nav {
  max-width:none;
  gap:0;
  padding:0 0 14px;
  border-bottom:1px solid #e2dfc927;
}
#showcase .universe-nav button {
  position:relative;
  min-height:48px;
  padding:10px 16px;
  border:0;
  border-radius:0;
  font-size:14px;
  gap:12px;
  color:#b8c1b5;
}
#showcase .universe-nav button[aria-pressed="true"] {
  background:#e8e4d50c;
  color:#f2eedf;
  box-shadow:inset 0 -2px #cfab7d;
}
#showcase .universe-nav button[aria-pressed="true"]>span { color:#dfb786; }
#showcase .universe-stage { padding:20px 0 12px; }
#showcase .universe-window--map { gap:24px;padding:0; }
#showcase .universe-window--map>figcaption {
  grid-template-columns:1.05fr 1fr;
  column-gap:6%;
  padding:0;
  border:0;
  background:none;
  transform:none;
}
#showcase .universe-window--map>figcaption>.eyebrow {
  margin:0 0 8px;
  color:#d1ad82;
  font-size:10px;
  letter-spacing:.1em;
}
#showcase .universe-window--map>figcaption>h3 {
  margin:0;
  font-size:clamp(34px,3.4vw,54px);
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}
#showcase .universe-window--map>figcaption>p:not(.eyebrow) {
  margin:0 0 10px;
  font-size:15px;
  line-height:1.65;
  max-width:60ch;
}
#showcase .universe-window--map>figcaption>p.universe-caption {
  font:11px/1.6 var(--mono);
  color:#aab6aa;
}
#showcase .universe-window--map>figcaption>.prototype-note {
  justify-self:start;
  padding:5px 10px;
  border-radius:2px;
  border-color:#b9c29750;
  font:11px/1.5 var(--mono);
}
#showcase .flow-plate { transform:none; }
.universe .world-after {
  border:0;
  border-top:1px solid #d4cdb636;
  background:transparent;
  padding:22px 0 0;
}
#showcase .universe-window--story {
  gap:40px 7%;
  padding:24px 0;
}
#showcase .universe-window--story>figcaption {
  background:none;
  border:0;
  padding:0;
  transform:none;
}
#showcase .universe-window--story>figcaption h3 {
  font-size:clamp(44px,5.2vw,78px);
  line-height:.98;
}
#showcase .universe-window--story>figcaption>p { font-size:16px;line-height:1.75; }
.universe-invitation {
  gap:32px 5%;
  padding:12px 0 44px;
}
.banner-copy { align-self:start; }
.banner-copy h3 { font-size:clamp(48px,5.5vw,84px); }
.banner-stage {
  --banner-art-height:clamp(180px,20vw,250px);
  min-height:440px;
  border:0;
  border-bottom:1px solid #d6c8ab66;
  background:#0c1b1880;
  box-shadow:none;
}
.banner-slide { padding:32px;gap:24px;isolation:isolate; }
.banner-slide::before {
  content:"";
  position:absolute;
  z-index:-1;
  width:68%;
  aspect-ratio:1;
  top:8%;
  left:16%;
  border:1px solid #c6b68b38;
  border-radius:50%;
  box-shadow:0 0 0 28px #c6b68b06,0 0 0 56px #c6b68b04;
}
.banner-slide--tools::before {
  border-radius:0;
  transform:rotate(45deg) scale(.75);
}
.banner-slide--giftme::before {
  border-radius:2px;
  transform:rotate(-12deg) scale(.8);
  box-shadow:24px 20px 0 #c6b68b0c;
}
.banner-slide--welinks::before { border-radius:50% 50% 4px 4px; }
.banner-slide--tools img { max-width:180px; }
.banner-slide--sound img { max-width:94%; }
.banner-slide>span { color:#d1ad82;letter-spacing:.08em; }
.banner-slide em { font-size:clamp(22px,2.3vw,32px);letter-spacing:-.025em; }
@media(max-width:900px) {
  #showcase .universe-window--map>figcaption { grid-template-columns:1fr; }
  #showcase .universe-window--map>figcaption>h3 { grid-area:auto;margin:0 0 14px; }
  #showcase .universe-window--map>figcaption>p:not(.eyebrow) { grid-column:auto; }
}
@media(max-width:700px) {
  #showcase .showcase-bar { padding:12px 16px;gap:8px; }
  #showcase .showcase-bar h2 { font-size:16px;max-width:110px; }
  #showcase .showcase-bar button { padding:9px 12px;font-size:11px; }
  #showcase .showcase-guide { font-size:20px;gap:6px;padding-top:18px; }
  #showcase .universe { padding-top:18px; }
  #showcase .universe-nav { display:grid;grid-template-columns:1fr 1fr;gap:2px 8px; }
  #showcase .universe-nav button { min-width:0;padding:10px 4px;font-size:12px;gap:8px; }
  #showcase .universe-window--map>figcaption>h3 { font-size:38px; }
  #showcase .universe-window--story { grid-template-columns:1fr; }
  #showcase .universe-window--story>figcaption h3 { font-size:48px; }
  .banner-stage { --banner-art-height:200px;min-height:400px; }
  .banner-slide { padding:24px; }
}

.welinks-live-link {
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin-top:28px;padding:24px 28px;border:1px solid #a7e5cb;
  border-radius:4px;background:#bfead8;color:#122c25;
  font:500 clamp(24px,3.2vw,42px)/1.15 var(--sans);
  letter-spacing:-.035em;text-decoration:none;
}
.welinks-live-link small { font:13px/1.5 var(--mono);letter-spacing:.03em; }
.universe .welinks-live-link:hover { background:#d7f5e8;color:#122c25; }
.welinks-live-link:focus-visible { outline:3px solid #fff;outline-offset:5px; }
@media(max-width:600px) { .welinks-live-link { padding:20px; } }