@font-face { font-family:"Atkinson Hyperlegible"; src:url("fonts/atkinson-hyperlegible-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"Atkinson Hyperlegible"; src:url("fonts/atkinson-hyperlegible-400-italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap }
@font-face { font-family:"Atkinson Hyperlegible"; src:url("fonts/atkinson-hyperlegible-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap }
@font-face { font-family:"Gochi Hand"; src:url("fonts/gochi-hand-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:"Shrikhand"; src:url("fonts/shrikhand-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap }
:root {
  --navy:#062447;
  --cobalt:#0074bd;
  --turq:#00b4ca;
  --magenta:#e5008a;
  --magenta-ink:#c4007a;
  --gold:#e2a11a;
  --pink:#f8b49c;
  --blush:#fde6da;
  --white:#fff;
  --display:"Shrikhand","Cooper Black",Georgia,serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --hand:"Gochi Hand","Comic Sans MS",cursive;
  --bar-height:76px
}
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:var(--bar-height)
}
body {
  margin:0;
  color:var(--navy);
  background:#fffaf6;
  font:17px/1.55 var(--body)
}
[hidden] {
  display:none!important
}
img,svg {
  max-width:100%
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea,summary {
  -webkit-tap-highlight-color:transparent
}
a {
  color:inherit
}
button {
  cursor:pointer
}
h1,h2,h3,.placard__title {
  font-family:var(--display);
  font-weight:400;
  line-height:1.16
}
h1 {
  font-size:3.1rem;
  margin:.2em 0
}
h2 {
  font-size:clamp(2.5rem,5vw,4.4rem);
  margin:0 0 .35em
}
h3 {
  font-size:1.75rem
}
p {
  max-width:70ch
}
section {
  scroll-margin-top:var(--bar-height)
}
:focus-visible {
  outline:3px solid var(--magenta-ink);
  outline-offset:5px
}
.room :focus-visible { outline-color:var(--ring) }
footer :focus-visible { outline-color:var(--gold) }
.skip {
  position:fixed;
  top:8px;
  left:12px;
  z-index:110;
  background:var(--white);
  padding:12px;
  transform:translateY(-160%)
}
.skip:focus {
  transform:none
}
.bar {
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  height:var(--bar-height);
  padding:6px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  background:#fffaf6;
  border-bottom:1px solid #06244726;
  box-shadow:0 2px 12px #06244712
}
.brand {
  display:flex;
  align-items:center;
  min-height:44px
}
.brand img {
  mix-blend-mode:multiply;
  width:110px;
  height:60px;
  object-fit:contain
}
.bar nav,.bar__rooms {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:15px
}
.bar nav a,summary {
  display:flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
  font-weight:700
}
.bar nav a:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
.bar__rooms,.desktop-ask,.bar__about {
  display:none
}
.bar nav .bar__about { display:none }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 22px;
  border:2px solid currentColor;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font-weight:700;
  text-decoration:none
}
.btn:hover {
  box-shadow:0 4px 0 #06244728
}
.btn--primary {
  background:var(--magenta-ink);
  border-color:var(--magenta-ink);
  color:white
}
.btn:disabled {
  cursor:default;
  opacity:.65
}
.door {
  padding-top:var(--bar-height);
  min-height:100svh;
  overflow:hidden
}
.door__inner {
  max-width:1400px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding:40px 22px 30px;
  align-items:center
}
.door__words {
  position:relative;
  isolation:isolate
}
.eyebrow,.room__sign {
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:17px
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:28px 0
}
.tags {
  list-style:none;
  padding:0;
  font-size:17px
}
.tags li {
  margin:7px 0
}
.tags li::before {
  content:'•';
  color:var(--magenta-ink);
  margin-right:10px
}
.hint {
  font-size:17px
}
.arrow-hint {
  display:none
}
.door__scene {
  position:relative;
  min-height:300px;
  max-width:450px;
  width:100%;
  margin:auto;
  display:flex;
  align-items:center
}
.door__picture {
  width:100%;
  height:auto;
  object-fit:contain;
  mask-image:radial-gradient(closest-side, #000 84%, transparent 100%);
  -webkit-mask-image:radial-gradient(closest-side, #000 84%, transparent 100%)
}
.door__pig {
  position:absolute;
  left:62%;
  bottom:7%;
  width:38%
}
.door__pig svg {
  display:block;
  width:100%;
  height:auto
}
.speech {
  background:white;
  color:var(--navy);
  border:2px solid var(--navy);
  border-radius:45% 45% 45% 8%;
  padding:16px 22px;
  font:26px/1.2 var(--hand);
  box-shadow:0 5px 14px #06244718
}
.door__pig .speech {
  position:absolute;
  bottom:104%;
  right:0;
  width:max-content;
  max-width:230px;
  margin:0;
  transform:rotate(-5deg)
}
.pig__arm {
  transform-box:view-box;
  transform-origin:57.534% 60.58%;
}
.blobs {
  position:absolute;
  inset:-30px;
  z-index:-1;
  pointer-events:none
}
.blobs i {
  position:absolute;
  width:180px;
  height:170px;
  background:var(--pink);
  border-radius:60% 40% 52% 48%;
  opacity:.25
}
.blobs i:nth-child(2) {
  background:var(--turq);
  width:130px;
  height:120px;
  right:0;
  top:30%
}
.blobs i:nth-child(3) {
  background:var(--gold);
  bottom:0;
  left:30%
}
.blobs i:nth-child(4) {
  background:var(--magenta);
  width:80px;
  height:75px;
  right:10%;
  top:-5%
}
.room {
  position:relative;
  isolation:isolate;
  background:radial-gradient(ellipse at 23% 0,#ffffff1c,transparent 35%),radial-gradient(ellipse at 75% 0,#ffffff18,transparent 40%),linear-gradient(90deg,#00000015,transparent 20%,transparent 80%,#00000018),var(--wall);
  color:var(--ink)
}
.room__inner,.section__inner {
  max-width:1280px;
  margin:auto;
  padding:65px 22px 45px
}
.room__line {
  font-size:clamp(22px,2.5vw,30px)
}
.wall {
  list-style:none;
  padding:0;
  margin:40px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:45px;
  align-items:start
}
.wall__lead {
  grid-column:1/-1;
  max-width:720px;
  width:100%;
  justify-self:center;
  margin-bottom:0
}
.wall>li:not(.wall__lead):nth-child(3n) {
  padding-top:0
}
.hung {
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:center;
  position:relative
}
.frame {
  display:block;
  width:100%;
  padding:8px;
  border:3px solid #392818;
  outline:2px solid #cfad61;
  background:var(--photo-bg);
  box-shadow:inset 0 0 0 2px #f5d990,0 16px 25px #0005;
  position:relative
}
.frame img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:var(--photo-bg)
}
.wall .hung::before {
  content:'';
  position:absolute;
  inset:-35px -20px 25%;
  background:radial-gradient(ellipse at top,#fff2,transparent 68%);
  pointer-events:none;
  z-index:-1
}
.wall .hung {
  transition:transform .25s
}
.wall .hung:hover,.wall .hung:focus-visible {
  transform:translateY(-6px)
}
.placard {
  display:flex;
  flex-direction:column;
  gap:6px;
  max-width:94%;
  width:fit-content;
  margin:20px auto 0;
  padding:14px 18px;
  background:#fffaf6;
  color:var(--navy);
  box-shadow:0 4px 9px #0002;
  font-size:17px
}
.placard__title {
  font-size:23px
}
.hung--lead .placard__title {
  font-size:28px
}
.room__next {
  margin:0
}
.room__floor {
  height:clamp(90px,15vw,190px);
  background:url('floor.webp') center top/cover no-repeat,linear-gradient(#eee1d0 0 14%,#806044 15%,#b38254 35%,#916843 100%)
}
.drip {
  position:absolute;
  top:calc(100% - 1px);
  left:0;
  width:100%;
  height:55px;
  z-index:4;
  pointer-events:none
}
.ribbon {
  display:block;
  position:absolute;
  top:12px;
  width:100%;
  height:70px;
  pointer-events:none
}
.ribbon path {
  fill:none;
  stroke-width:9;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:0
}
/* The panels occupy the viewport without making the gallery a second scrolling surface. */
.curtains {
  display:none;
  position:sticky;
  top:0;
  height:100svh;
  margin-bottom:-100svh;
  z-index:10;
  overflow:hidden;
  pointer-events:none
}
.curtains::after {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:24px;
  background:linear-gradient(#0006,#0002),var(--curtain)
}
.curtain {
  position:absolute;
  top:0;
  bottom:0;
  width:50.5%;
  background-color:var(--curtain);
  background-image:url('curtain.webp'),linear-gradient(180deg,#ffffff24,#00000038),repeating-linear-gradient(90deg,#00000036 0%,#00000008 3%,#ffffff2e 7%,#ffffff08 11%,#00000036 16%);
  background-position:center;
  background-size:100% 100%;
  background-blend-mode:multiply,soft-light,normal;
  transition:transform 1.5s cubic-bezier(.65,0,.25,1);
  visibility:visible
}
.curtain--l {
  left:0;
  border-right:2px solid var(--gold);
  box-shadow:14px 0 22px #0006;
  transform-origin:left center
}
.curtain--r {
  right:0;
  border-left:2px solid var(--gold);
  box-shadow:-14px 0 22px #0006;
  transform-origin:right center
}
@media(prefers-reduced-motion:no-preference) {
  html {
    scroll-behavior:smooth
  }
  html.js .curtains {
    display:block
  }
  html.js .room:not(.is-open) .ribbon path {
    stroke-dashoffset:1
  }
  .room.is-open .ribbon path {
    animation:pour 1.5s ease both
  }
  .room.is-open .curtain--l {
    transform:translateX(-101%) scaleX(.88)
  }
  .room.is-open .curtain--r {
    transform:translateX(101%) scaleX(.88)
  }
  .room.is-settled .curtain {
    visibility:hidden
  }
  .room.open-instant .curtain {
    transition:none
  }
  .room.open-instant .ribbon path {
    animation:none
  }
}
.all-pieces {
  background:var(--blush)
}
.catalogue {
  list-style:none;
  padding:0;
  margin:45px 0;
  display:grid;
  grid-template-columns:1fr;
  gap:45px;
  align-items:start
}
.catalogue .frame {
  box-shadow:0 4px 12px #06244720
}
.catalogue .placard {
  background:transparent;
  box-shadow:none;
  padding:12px 0
}
.catalogue li>p {
  font-size:17px;
  margin-top:14px
}
.front-desk {
  background:var(--cobalt);
  color:white
}
.desk__cards {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  margin-top:35px
}
.desk__card {
  padding:22px;
  border:1px solid #ffffff60;
  border-radius:12px;
  background:#06244735
}
.desk__card h3 {
  margin-top:0
}
footer {
  background:var(--navy);
  color:white;
  padding:35px clamp(22px,5vw,70px) 35px;
  font-size:17px
}
footer p {
  margin:8px 0
}
footer a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.paint-dot {
  position:absolute;
  right:35px;
  bottom:12px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--dot);
  animation:burst .8s ease-out forwards;
  pointer-events:none
}
dialog {
  border:0;
  padding:0;
  width:min(1200px,94vw);
  max-height:92svh;
  border-radius:12px;
  background:#fffaf6;
  color:var(--navy);
  box-shadow:0 20px 80px #0005
}
dialog[open] {
  animation:forward .3s ease both
}
dialog::backdrop {
  background:#062447cc
}
.dialog__top {
  position:sticky;
  top:0;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  background:#fffaf6;
  padding:12px 20px;
  border-bottom:1px solid #06244720
}
.dialog__layout {
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  padding:18px
}
.dialog__photos {
  display:grid;
  gap:20px;
  align-content:start
}
.dialog__photos img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain
}
.dialog__words h2 {
  font-size:2.1rem;
  overflow-wrap:anywhere
}
.dialog__words h3 {
  font-size:1.55rem;
  margin-top:30px
}
body.dialog-open {
  overflow:hidden
}
@keyframes wave {
  0%,100% {
    transform:rotate(-3deg)
  }
  50% {
    transform:rotate(5deg)
  }
}
@keyframes pour {
  from {
    stroke-dashoffset:1
  }
  to {
    stroke-dashoffset:0
  }
}
@keyframes forward {
  from {
    transform:scale(.86);
    opacity:0
  }
  to {
    transform:scale(1);
    opacity:1
  }
}
@keyframes burst {
  to {
    transform:translate(var(--dx),var(--dy)) scale(.3);
    opacity:0
  }
}
@media(hover:hover) and (pointer:fine) {
  .arrow-hint {
    display:inline
  }
}
.bar__menu,.phone-ask { display:block }
.bar__menu summary { display:list-item; line-height:44px; cursor:pointer }
.bar__menu>div { position:absolute; right:10px; top:70px; min-width:210px; background:#fffaf6; padding:12px 18px; border:1px solid #06244730; box-shadow:0 8px 20px #06244725 }
.door__pig .speech { left:0; right:auto; width:auto; max-width:100%; font-size:19px; padding:10px 14px }

a,button,summary { min-width:44px; min-height:44px }
a { overflow-wrap:anywhere }
.hung { text-decoration:none }
.bar nav a { white-space:nowrap }
.bar__menu>div { max-width:calc(100vw - 20px); max-height:calc(100svh - 90px); overflow:auto }
.bar__menu>div a { display:flex }
li[id^="piece-"] { scroll-margin-top:calc(var(--bar-height) + 24px) }
.front-desk { background:var(--pink); color:var(--navy) }
.desk__card { border-color:#06244740; background:#fffaf650 }
.desk__card>a:not(.btn) { display:inline-flex; align-items:center }
.about { background:#fffaf6; color:var(--navy) }
.about__layout { display:grid; gap:28px }
.about__layout>img { width:120px; height:auto }
.about p a,#find-email { display:inline-block; line-height:44px }
.linklike { display:inline-flex; align-items:center; padding:10px 0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; text-decoration:underline }
.door__scene--fallback::before { content:''; position:absolute; z-index:-1; inset:10% 25% 10% 13%; border:12px solid #e2a11a; border-radius:6px 6px 0 0; background:radial-gradient(circle at 85% 55%,#e2a11a 0 5px,transparent 6px),linear-gradient(90deg,transparent 12%,#ffffff16 13% 15%,transparent 16% 84%,#ffffff16 85% 87%,transparent 88%),var(--navy); box-shadow:0 12px 25px #06244728 }
.door__scene { isolation:isolate }
.room__empty { margin:45px 0 }
.dialog__photos img { max-height:none }
@media(min-width:700px) {
  :root { --bar-height:90px }
  body { font-size:18px }
  h1 { font-size:clamp(3rem,6.2vw,6.8rem) }
  .bar { padding:10px 24px; gap:12px }
  .brand img { width:185px; height:70px }
  .bar nav { font-size:16px; gap:16px }
  .door__inner { grid-template-columns:1.05fr 1fr; padding:60px 35px }
  .door__scene { min-height:340px; max-width:560px }
  .door__pig { width:44%; left:68% }
  .door__pig .speech { font-size:22px; padding:12px 16px }
  .room__inner,.section__inner { padding:80px 35px 70px }
  .wall,.catalogue { grid-template-columns:repeat(2,minmax(0,1fr)); gap:50px 30px }
  .wall__lead { width:80%; margin-bottom:20px }
  .about__layout { grid-template-columns:140px minmax(0,1fr) }

  .dialog__layout { grid-template-columns:1.1fr 1fr; padding:25px; gap:30px }
  .dialog__top { padding:12px 20px }
}
@media(min-width:1000px) { .desk__cards { grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(min-width:1100px) {
  .bar { padding:10px 16px }
  .brand img { width:160px }
  .bar nav,.bar__rooms { gap:10px }
  .bar__rooms,.desktop-ask,.bar__about { display:flex }
  .bar nav .bar__about { display:flex }
  .bar__menu,.phone-ask { display:none }
  .wall,.catalogue { grid-template-columns:repeat(3,minmax(0,1fr)); gap:65px 40px }
  .wall>li:not(.wall__lead):nth-child(3n) { padding-top:40px }
  .door__inner { padding:80px 60px }
  .door__scene { min-height:430px }
  .room__inner,.section__inner { padding:80px 60px 70px }
}
/* All content stays visible when scripting or motion is unavailable. */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  html {
    scroll-behavior:auto;
  }
  .curtains {
    display:none!important
  }
  .ribbon path {
    stroke-dashoffset:0!important
  }
  .blobs i,.pig__arm {
    transform:none
  }
  dialog[open] {
    transform:none;
    opacity:1
  }

}
/* Pivots are percentages of the original 420 22 730 690 viewBox, not each path's bounds. */
.pig__ear-rear { transform-box:view-box; transform-origin:45.479% 19.710% }
.pig__ear-near { transform-box:view-box; transform-origin:40.822% 28.116% }
.pig__tail { transform-box:view-box; transform-origin:18.082% 74.348% }
.pig__eye { transform-box:view-box; transform-origin:52.055% 28.696% }
.pig__arm { transform-box:view-box; transform-origin:57.534% 60.580% }

/* The opaque bar clips every pose and reserves space for focus and the last page control. */
:root { --guide-height:76px }
html.has-guide { scroll-padding-bottom:var(--guide-height) }
html.has-guide footer { padding-bottom:calc(35px + var(--guide-height)) }
.guide { position:fixed; inset:auto 0 0; z-index:60; height:var(--guide-height); display:flex; align-items:center; gap:8px; padding:0 8px 0 12px; overflow:hidden; background:#fffaf6; border-top:1px solid #06244730; box-shadow:0 -3px 16px #06244718; visibility:visible; transform:translateY(0); transition:transform .25s,visibility 0s }
.guide.is-away { transform:translateY(110%); visibility:hidden; transition:transform .25s,visibility 0s .25s }
.guide__line { flex:1; min-width:0; margin:0; max-height:66px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; font:19px/1.15 var(--hand); color:var(--navy); text-align:right; opacity:1; transition:opacity .4s }
.guide__line.is-fading { opacity:0 }
.guide.is-trotting .guide__line { visibility:hidden }
.guide__quiet { position:relative; z-index:1; flex:none; width:72px; min-height:44px; padding:5px; border:1px solid #06244750; border-radius:8px; background:#fffaf6; color:var(--navy); font:13px/1.25 var(--body) }
/* The pig stands inside his bar with room above and below: at full height his feet sat on the screen edge and looked cut off. */
.guide__button { flex:none; align-self:center; display:flex; align-items:center; justify-content:center; width:72px; height:68px; min-height:44px; margin:0; padding:0; border:0; background:transparent; box-shadow:none }
.guide__actor { display:block; width:64px; height:60px; pointer-events:none; transform-origin:50% 100% }
.guide__actor svg { display:block; width:100%; height:100%; overflow:visible }
.guide.is-trotting .guide__button { pointer-events:none }
.catalogue li>.btn { width:100% }
.peek,.cord { display:none }
/* Near the top of the curtain: a room opens with its top anywhere from just under the top bar to
   half-way down the screen, and at 12% from the curtain's foot he was below the screen or behind his own bar. */
html.js:not(.is-quiet) .peek { display:block; position:absolute; left:0; top:14%; width:110px; height:auto; opacity:0; transform:translateX(8%); pointer-events:none }
html.js:not(.is-quiet) .cord { display:block; position:absolute; right:20px; top:24px; width:4px; height:40%; background:var(--gold); box-shadow:2px 0 0 #06244735; transform-origin:top center; pointer-events:none }
.cord::after { content:''; position:absolute; bottom:-22px; left:-7px; width:18px; height:28px; border-radius:4px 4px 9px 9px; background:repeating-linear-gradient(90deg,#e2a11a 0 3px,#b77c0c 3px 4px); border-top:4px solid #fff0ac }
.room.is-settled .peek,.room.is-settled .cord { visibility:hidden }
.dialog__top { justify-content:space-between; align-items:center; gap:12px }
.dialog__greeting { display:flex; align-items:center; gap:10px; min-width:0 }
.dialog__greeting p { margin:0; font:24px/1.2 var(--hand) }
.dialog__pig { width:44px; height:42px; object-fit:contain; flex:none }
.desk__heading { display:flex; flex-direction:column; align-items:flex-start; gap:25px }
.desk__sign { display:flex; align-items:flex-end; gap:8px; padding-bottom:28px }
.desk__sign img { width:120px; height:auto; object-fit:contain }
.desk__board { display:block; position:relative; width:122px; padding:12px 10px; margin-bottom:36px; background:var(--navy); color:white; border:3px solid var(--gold); border-radius:6px; font:24px/1.15 var(--hand); text-align:center; transform-origin:50% calc(100% + 48px) }
.desk__board::after { content:''; position:absolute; top:100%; left:calc(50% - 4px); width:8px; height:48px; background:#a97943 }
@media(min-width:700px) {
  :root { --guide-height:84px }
  .guide { padding-left:24px; gap:16px }
  .guide__line { max-height:59.8px; -webkit-line-clamp:2; font-size:26px }
  .guide__quiet { width:112px; padding:6px; font-size:14px }
  .guide__button { width:88px; height:72px }
  .guide__actor { width:70px; height:66px }
  .catalogue li>.btn { width:auto }
  html.js:not(.is-quiet) .peek { width:170px }
  .desk__heading { flex-direction:row; align-items:center; gap:35px }
  .desk__sign img { width:150px }
}
@media(prefers-reduced-motion:no-preference) {
  html.js:not(.is-quiet) .bit-wave .pig__arm { animation:pig-wave 1.4s ease-in-out }
  html.js:not(.is-quiet) .bit-wave .pig__ear-rear { animation:pig-ear .65s ease-out }
  html.js:not(.is-quiet) .bit-wave .pig__ear-near { animation:pig-ear .65s .1s ease-out }
  html.js:not(.is-quiet) .bit-wave .pig__tail,
  html.js:not(.is-quiet) .bit-surprise .pig__tail { animation:pig-tail .85s ease-in-out }
  html.js:not(.is-quiet) .bit-wave .pig__eye { animation:pig-eye .45s ease-in-out }
  html.js:not(.is-quiet) .bit-peek .peek { animation:pig-peek 1.45s ease-in-out }
  html.js:not(.is-quiet) .bit-cord .cord { animation:pig-cord 1.3s ease-in-out }
  html.js:not(.is-quiet) .guide__actor.bit-cord { animation:pig-lean 1.3s ease-in-out }
  html.js:not(.is-quiet) .guide__actor.bit-trot { animation:pig-trot 1.45s ease-in-out; pointer-events:none }
  html.js:not(.is-quiet) .bit-point .pig__arm { animation:pig-point 1.45s ease-in-out }
  html.js:not(.is-quiet) .bit-point .pig__ear-near { animation:pig-ear .65s ease-out }
  html.js:not(.is-quiet) .dialog__pig.bit-goodeye { animation:pig-hop .7s ease-in-out }
  html.js:not(.is-quiet) .guide__actor.bit-surprise { animation:pig-surprise 1.4s ease-in-out }
  html.js:not(.is-quiet) .desk__board.bit-sign { animation:pig-sign 1.25s ease-in-out }
  /* 0022: he runs in when his bar first shows, bobs when he speaks or is tapped, and fidgets between bits. */
  html.js:not(.is-quiet) .guide__actor.bit-arrive { animation:pig-arrive 1.7s .5s cubic-bezier(.3,.5,.5,1) backwards; pointer-events:none }
  html.js:not(.is-quiet) .guide__actor.bit-hop { animation:pig-bob .95s ease-in-out }
  html.js:not(.is-quiet) .bit-hop .pig__ear-near,
  html.js:not(.is-quiet) .bit-idle .pig__ear-near { animation:pig-ear .65s ease-out }
  html.js:not(.is-quiet) .bit-hop .pig__tail,
  html.js:not(.is-quiet) .bit-idle .pig__tail { animation:pig-tail .85s ease-in-out }
  html.js:not(.is-quiet) .bit-idle .pig__eye { animation:pig-eye .45s .3s ease-in-out }
}
/* Quiet affects the sidekick only: gallery curtains keep their original transitions. */
.is-quiet .guide__actor { opacity:.7 }
.is-quiet .door__pig .speech { visibility:hidden }
.is-quiet .pig__arm,.is-quiet .pig__ear-rear,.is-quiet .pig__ear-near,.is-quiet .pig__tail,.is-quiet .pig__eye,
.is-quiet .guide__actor,.is-quiet .dialog__pig,.is-quiet .desk__board { animation:none!important; transform:none!important }
@media(prefers-reduced-motion:reduce) {
  .guide.is-away { transition:none; visibility:hidden }
  html.js .peek,html.js .cord { display:none!important }
}
@keyframes pig-wave { 0%,100%{transform:rotate(0)} 25%,65%{transform:rotate(-10deg)} 45%,85%{transform:rotate(7deg)} }
@keyframes pig-ear { 0%,100%{transform:rotate(0)} 35%{transform:rotate(-14deg)} 70%{transform:rotate(8deg)} }
@keyframes pig-tail { 0%,100%{transform:rotate(0)} 25%,65%{transform:rotate(-14deg)} 45%,85%{transform:rotate(12deg)} }
@keyframes pig-eye { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.65)} }
@keyframes pig-peek { 0%{transform:translateX(8%) rotate(0);opacity:0} 20%,65%{transform:translateX(-55%) rotate(-12deg);opacity:1} 100%{transform:translateX(-55%) rotate(0);opacity:0} }
@keyframes pig-cord { 0%,100%{transform:translateY(0)} 35%{transform:translateY(18px)} 60%{transform:translateY(-5px)} 80%{transform:translateY(3px)} }
@keyframes pig-lean { 0%,100%{transform:rotate(0)} 35%,55%{transform:rotate(-8deg)} }
@keyframes pig-trot { 0%{transform:translate(0,0) scaleX(-1)} 15%{transform:translate(calc((-100vw + 166px)*.35),-3px) scaleX(-1)} 30%{transform:translate(calc((-100vw + 166px)*.7),0) scaleX(-1)} 45%{transform:translate(calc(-100vw + 166px),-3px) scaleX(-1)} 50%{transform:translate(calc(-100vw + 166px),0) scaleX(1)} 65%{transform:translate(calc((-100vw + 166px)*.7),-3px) scaleX(1)} 80%{transform:translate(calc((-100vw + 166px)*.35),0) scaleX(1)} 95%{transform:translate(0,-3px) scaleX(1)} 100%{transform:translate(0,0) scaleX(1)} }
@keyframes pig-point { 0%,100%{transform:rotate(0)} 25%,66%{transform:rotate(-28deg)} }
@keyframes pig-hop { 0%,100%{transform:translateY(0)} 45%{transform:translateY(-8px)} }
@keyframes pig-surprise { 0%{transform:translateY(0) rotate(0) scale(1)} 25%{transform:translateY(-10px) rotate(0) scale(.55)} 75%{transform:translateY(-10px) rotate(360deg) scale(.55)} 100%{transform:translateY(0) rotate(360deg) scale(1)} }
@keyframes pig-arrive { 0%{transform:translate(-100vw,0)} 14%{transform:translate(-80vw,-7px)} 28%{transform:translate(-60vw,0)} 42%{transform:translate(-42vw,-7px)} 56%{transform:translate(-26vw,0)} 70%{transform:translate(-13vw,-6px)} 84%{transform:translate(-4vw,0)} 92%{transform:translate(0,-5px)} 100%{transform:translate(0,0)} }
@keyframes pig-bob { 0%,100%{transform:translateY(0)} 20%{transform:translateY(-7px)} 40%{transform:translateY(0)} 60%{transform:translateY(-5px)} 80%{transform:translateY(0)} }
@keyframes pig-sign { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-4deg)} 60%{transform:rotate(4deg)} 80%{transform:rotate(-2deg)} }

/* Quantity queries keep small walls and short final rows centred. Each card spans
   two half-columns, preserving the existing card widths and gaps. */
.room-jumps { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px }
.room-jumps a { display:inline-flex; align-items:center; min-height:44px }
@media(min-width:700px) {
  .wall,.catalogue { grid-template-columns:repeat(4,minmax(0,1fr)) }
  .wall>li:not(.wall__lead),.catalogue>li { grid-column:span 2 }
  .wall>li:last-child:nth-child(2n),.catalogue>li:last-child:nth-child(2n+1) { grid-column:2/span 2 }
}
@media(min-width:1100px) {
  .wall,.catalogue { grid-template-columns:repeat(6,minmax(0,1fr)) }
  .wall>li:not(.wall__lead),.catalogue>li { grid-column:span 2 }
  .wall>li:last-child:nth-child(2n),.catalogue>li:last-child:nth-child(2n+1) { grid-column:span 2 }
  .wall>li:last-child:nth-child(3n+2),.catalogue>li:last-child:nth-child(3n+1) { grid-column:3/span 2 }
  .wall:has(>li.wall__lead:first-child)>li:nth-child(2):nth-last-child(2) { grid-column:2/span 2 }
  .wall:has(>li.wall__lead:first-child)>li:nth-child(3):last-child { grid-column:4/span 2 }
}

/* ===== moms-website-0027: bigger logo, the guitar at the door, prices and labels, the signs,
   and the pig out of his bar. Later rules win, so this block overrides what is above it. ===== */
:root { --orange:#f47b20; --bar-height:84px; --perch-h:64px; --pig-w:58px; --pig-h:55px; --pad-x:22px; --pad-top:80px }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
/* The logo's own picture area is now cut to the drawing, so the same box shows it far larger. */
.brand img { width:auto; height:72px }
.bar__menu>div { top:calc(var(--bar-height) - 6px) }
.bar__menu>div .bar__sub { padding-left:16px; font-weight:400 }
.bar__rooms .bar__sub { font-weight:400; font-size:.94em }
.door__logo { margin:0 0 4px; max-width:none }
.door__logo img { display:block; width:auto; height:clamp(104px,19svh,150px) }
.door__words>p.door__logo { order:0; margin-bottom:10px }
.brand { flex:none }
@media(max-width:349px) { :root { --bar-height:72px } .brand img { height:58px } }
.brand img { mix-blend-mode:normal }
.price-option { margin:2px 0; font-size:15px }
.catalogue li>p.price-option { margin-top:2px; font-size:15px }
.door__front { width:100%; max-width:330px; margin:0 auto }
.door__front .hung { transition:transform .25s }
.door__front .hung:hover,.door__front .hung:focus-visible { transform:translateY(-6px) }
/* Labels and prices: small and quiet, under the title. */
.labels { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin:0 }
.label { padding:1px 9px; border:1.5px solid var(--orange); border-radius:99px; font-size:14px; font-weight:700 }
.price { display:block; margin-top:2px; padding-top:8px; border-top:1px solid #06244726 }
.price__label { margin-right:3px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.72 }
.price__amount { font-size:19px; font-weight:700 }
.price__unit { font-size:15px }
.dialog__words .labels { justify-content:flex-start }
.dialog__words .price { margin:14px 0 6px; padding-top:12px }
.price--large .price__amount { font-size:27px }
.handmade { font-style:italic }
.label-links { display:flex; flex-wrap:wrap; gap:0 20px; margin:6px 0 }
.label-links a { display:inline-flex; align-items:center; min-height:44px }
/* A sign on the wall: what eco resin is, what an aroma stone is. */
.note { max-width:70ch; margin:22px 0; padding:16px 20px; border-left:6px solid var(--orange); border-radius:6px; background:#fffaf6; color:var(--navy); box-shadow:0 4px 9px #0002 }
.note h3 { margin:0 0 6px; font-size:1.45rem }
.note p { margin:0 }
.note,.subroom { scroll-margin-top:calc(var(--bar-height) + 16px) }
.subroom { margin:10px 0 40px; padding-top:14px; border-top:2px dashed #06244745 }
.subroom__title { margin:.4em 0 .2em; font-size:clamp(1.9rem,3.6vw,2.8rem) }
.more { margin:10px 0 }
.more summary { display:list-item; line-height:44px; cursor:pointer; text-decoration:underline; text-underline-offset:4px; font-weight:700 }
.catalogue .more p { font-size:17px }
.dialog__words .story { margin:.45em 0 }
.desk__card h4 { margin:0 0 4px; font:700 1.05rem/1.3 var(--body) }
.desk__sign { position:relative }

/* THE PIG, OUT OF HIS BAR. A perch is a strip of wall he may stand in: above a section's heading,
   on top of a picture frame, behind the front desk's sign. Each strip is clear space by
   construction (the padding above a heading, the gap above a frame), it is clipped to its own
   box, and it takes no taps except on the pig himself. */
.room__inner,.section__inner { position:relative; padding-top:var(--pad-top) }
.wall>li,.catalogue>li { position:relative }
.wall,.catalogue { row-gap:calc(var(--perch-h) + 8px); margin-top:calc(var(--perch-h) + 10px) }
.perch { display:none; position:absolute; z-index:11; height:var(--perch-h); align-items:flex-end; justify-content:flex-end; gap:8px; overflow:hidden; pointer-events:none }
html.pig-roams .perch { display:flex }
.perch--head { top:calc(var(--pad-top) - var(--perch-h) - 4px); left:var(--pad-x); right:var(--pad-x) }
.perch--frame { top:calc(var(--stagger,0px) - var(--perch-h)); left:0; right:6px }
.perch--desk { left:0; bottom:28px; width:120px; height:122px }
.perch__spot { flex:none; width:var(--pig-w); height:var(--pig-h) }
.perch--desk .perch__spot { width:120px; height:114px }
.perch .guide__actor { width:100%; height:100%; pointer-events:auto; cursor:pointer }
.perch__bubble { display:none; align-self:center; max-width:calc(100% - var(--pig-w) - 12px); max-height:100%; overflow:hidden; padding:4px 11px; border:2px solid var(--navy); border-radius:16px 16px 4px 16px; background:#fff; color:var(--navy); font:18px/1.15 var(--hand); text-align:right; opacity:1; transition:opacity .4s }
.perch__bubble.is-on { display:block }
.perch__bubble.is-long { font-size:15px; line-height:1.12 }
.perch__bubble.is-fading { opacity:0 }
.perch .paint-dot { right:24px; bottom:14px }
html.pig-roams .desk__sign img { visibility:hidden }
.dialog__pig { display:block }
.dialog__pig svg,.dialog__pig img { display:block; width:100%; height:100%; overflow:visible }
.is-quiet .dialog__greeting p { visibility:hidden }
/* Review 0024: with Quiet on, his bar is simply there after a reload; it does not slide in. */
.is-quiet .guide { transition:none }
@media(min-width:700px) {
  :root { --bar-height:104px; --perch-h:74px; --pig-w:68px; --pig-h:64px; --pad-x:35px; --pad-top:92px }
  .brand img { width:auto; height:90px }
  .door__logo img { height:clamp(150px,22vh,210px) }
  .door__inner { grid-template-columns:1.05fr 1fr }
  .door__scene { grid-column:1/-1 }
  .door__front { max-width:380px }
  .perch--desk { width:150px; height:150px }
  .perch--desk .perch__spot { width:150px; height:142px }
}
@media(min-width:1100px) {
  :root { --pad-x:60px }
  .brand img { width:auto }
  .door__inner { grid-template-columns:1.15fr .72fr 1fr; gap:36px }
  .door__scene { grid-column:auto }
  .door__words h1 { font-size:min(4.6vw,72px) }
  .wall>li:not(.wall__lead):nth-child(3n) { --stagger:40px }
}
@media(prefers-reduced-motion:no-preference) {
  /* Review 0024: the spin turned about his feet and dipped below the screen edge. It turns about his middle. */
  html.js:not(.is-quiet) .guide__actor.bit-surprise { transform-origin:50% 50% }
  html.js:not(.is-quiet) .guide__actor.bit-pop { animation:pig-pop .55s cubic-bezier(.3,1.3,.5,1) }
  html.js:not(.is-quiet) .guide__actor.bit-drop { animation:pig-drop .26s ease-in forwards }
  html.js:not(.is-quiet) .guide__actor.bit-leave { animation:pig-leave .32s ease-in forwards }
  html.js:not(.is-quiet) .guide__actor.bit-walk { animation:pig-walk var(--walk-time,1.6s) linear }
  html.js:not(.is-quiet) .bit-flick .pig__arm { animation:pig-point 1.1s ease-in-out }
  html.js:not(.is-quiet) .bit-flick .pig__tail { animation:pig-tail .85s ease-in-out }
  html.js:not(.is-quiet) .dialog__pig.bit-goodeye .pig__arm { animation:pig-point 1.3s .2s ease-in-out }
  html.js:not(.is-quiet) .dialog__pig.bit-goodeye .pig__ear-near { animation:pig-ear .65s ease-out }
}
@media(prefers-reduced-motion:reduce) { .perch { display:none!important } }
@keyframes pig-pop { 0%{transform:translateY(108%)} 60%{transform:translateY(-7%)} 100%{transform:translateY(0)} }
@keyframes pig-drop { to{transform:translateY(112%)} }
@keyframes pig-leave { to{transform:translateX(150px)} }
@keyframes pig-walk { 0%{transform:translate(var(--walk),0)} 10%{transform:translate(calc(var(--walk)*.9),-5px)} 20%{transform:translate(calc(var(--walk)*.8),0)} 30%{transform:translate(calc(var(--walk)*.7),-5px)} 40%{transform:translate(calc(var(--walk)*.6),0)} 50%{transform:translate(calc(var(--walk)*.5),-5px)} 60%{transform:translate(calc(var(--walk)*.4),0)} 70%{transform:translate(calc(var(--walk)*.3),-5px)} 80%{transform:translate(calc(var(--walk)*.2),0)} 90%{transform:translate(calc(var(--walk)*.1),-4px)} 100%{transform:translate(0,0)} }
/* A frame lifts a little under a pointer; the pig standing on it lifts with it. */
.wall>li>.perch { transition:transform .25s }
.wall>li:has(.hung:hover)>.perch,.wall>li:has(.hung:focus-visible)>.perch { transform:translateY(-6px) }
@media(max-width:349px) { .door__words h1 { font-size:2.45rem } }
@media(min-width:1100px) and (max-width:1279px) { .bar nav,.bar__rooms { gap:8px; font-size:14.5px } }
/* At the front desk he stands at the left, so his words sit at the left above him. */
#front-desk .perch--head { justify-content:flex-start }
#front-desk .perch__bubble { border-radius:16px 16px 16px 4px; text-align:left }

@media(max-width:379px) { .perch__bubble { padding:3px 9px; font-size:15px; line-height:1.1 } .perch__bubble.is-long { font-size:13.5px } }
/* His bar can come back while a control has the focus, so room is always kept for it. */
html.js,html.has-guide { scroll-padding-bottom:calc(var(--guide-height) + 6px) }

/* ===== moms-website-0030: the fix pass after review 0029. Later rules win, so this block
   overrides what is above it. ===== */

/* LARGE TEXT. Neither bar has a fixed height: each is at least its designed height (--bar-min,
   --guide-min) and grows when the visitor's text is larger. studio.js writes the real heights
   back as --bar-height and --guide-height, which the page's spacing and scrolling already use.
   The strips the pig stands in are --perch-h tall; studio.js makes that taller when his longest
   lines need it, and the space kept above a heading (--pad-top) follows. */
:root { --bar-min:84px; --guide-min:76px; --guide-slim:52px }
@media(max-width:349px) { :root { --bar-min:72px } }
@media(min-width:700px) { :root { --bar-min:104px; --guide-min:84px; --guide-slim:56px } }
:root { --bar-height:var(--bar-min); --guide-height:var(--guide-min); --pad-top:calc(var(--perch-h) + 16px) }
@media(min-width:700px) { :root { --pad-top:calc(var(--perch-h) + 18px) } }
/* No padding above or below: the bars are their designed height by min-height and centre what
   they hold, so at ordinary text sizes they measure exactly what they did. */
.bar { height:auto; min-height:var(--bar-min); padding-top:0; padding-bottom:0 }
.bar nav,.bar__rooms { flex-wrap:wrap; justify-content:flex-end; row-gap:0; min-width:0 }
.bar__menu>div { max-height:calc(100svh - var(--bar-height) - 10px) }
.guide { height:auto; min-height:var(--guide-min) }
.guide__line { display:block; max-height:none; overflow:visible; -webkit-line-clamp:unset; overflow-wrap:anywhere; padding:4px 0 }
/* The Quiet button is as wide as it was, and widens with its own text (em) so that large text
   still takes two lines in it, not three. */
.guide__quiet { width:auto; min-width:72px; max-width:max(72px,5.8em); margin:4px 0 }
.perch__bubble { overflow-wrap:anywhere }
.desk__board { width:min-content; min-width:122px }
@media(min-width:700px) { .guide__line { max-height:none } .guide__quiet { min-width:112px; max-width:max(112px,8.2em) } }
/* A word too long for its line breaks; it never pushes the page sideways. With doubled text the
   room headings ("Functional art") were wider than a phone. */
body { overflow-wrap:break-word }

/* QUIET IS ALWAYS IN REACH. His bar never leaves the screen: while he is out in the page, or the
   door's own pig is the pig, it slims down to the Quiet button. */
.guide.is-slim { min-height:var(--guide-slim) }
.guide.is-slim .guide__line,.guide.is-slim .guide__button { display:none }

/* A PHONE ON ITS SIDE keeps more than half its screen for the page: both bars are lower. */
@media(max-height:480px) and (orientation:landscape) {
  :root { --bar-min:56px; --guide-min:58px; --guide-slim:50px }
  .brand img { height:46px }
  .guide__button { width:62px; height:50px }
  .guide__actor { width:52px; height:49px }
  .guide__line { font-size:19px }
}

/* ===== moms-website-0032: the last small fixes from review 0031. Later rules win. ===== */

/* A control that takes the focus is scrolled clear of the pig's bar at its TALLEST (--guide-full,
   written by studio.js), not at whatever height it has at that moment. A button brought into view
   while the bar was slim used to end up 22 px under it when the bar grew back. */
html.js,html.has-guide { scroll-padding-bottom:calc(var(--guide-full,var(--guide-height)) + 6px) }

/* LARGE TEXT IN AN OPENED PIECE. The top row wraps, so Close goes under the pig's words instead of
   lying over them, and long words break instead of pushing the window sideways. */
.dialog__top { flex-wrap:wrap; row-gap:6px }
.dialog__greeting { flex:1 1 auto }
.dialog__greeting p { min-width:0; overflow-wrap:anywhere }
#piece-close { margin-left:auto }
#piece-content { overflow-wrap:anywhere }

/* ===== moms-website-0036: the front door is a stage, the rooms' curtains are seen closed first,
   the About is unfolded, and a box for writing to Sherry. Later rules win. ===== */

/* THE FRONT DOOR. In the page the door reads, in order: the logo, "Come on in.", Come in, the pig,
   then the welcome behind the curtains: her sentence, her hello, the guitar. That is also exactly
   what a visitor sees with JavaScript off, with Reduce motion, or with the pig quieted: no
   curtains, everything in its place. With motion, the curtains are closed over the welcome when
   the page opens and the logo's sign hangs in front of them in the middle of the screen; when
   they part, the sign goes up to its own place at the top of the door. Only its transform
   changes, so nothing in the page moves and the page does not jump. */
:root { --stage-pad:18px }
.door { position:relative; isolation:isolate; overflow:visible; min-height:100svh; padding-top:var(--bar-height) }
.door__body { max-width:1280px; margin:auto; padding:var(--stage-pad) var(--pad-x) 44px }
.stage { position:relative; z-index:11; width:fit-content; max-width:100%; margin:0 auto; padding:14px 16px 16px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:8px 12px; border-radius:14px; background:#fffaf6 }
.stage .door__logo { grid-column:1; grid-row:1; align-self:center; margin:0; max-width:none }
.stage .door__logo img { display:block; width:auto; height:clamp(84px,15svh,128px) }
.stage .door__pig { grid-column:2; grid-row:1; position:relative; left:auto; bottom:auto; width:auto; min-width:0; display:flex; flex-direction:column; align-items:flex-end; gap:6px }
.stage .door__pig svg { flex:none; width:78px; height:auto }
.stage .door__pig .speech { position:static; order:-1; width:auto; max-width:100%; margin:0; padding:8px 12px; border-radius:18px 18px 4px 18px; font-size:19px; transform:rotate(-3deg) }
.stage__words { grid-column:1/-1; text-align:center }
.stage h1 { margin:0 0 10px; font-size:clamp(2.3rem,11vw,3.1rem) }
.stage .actions { margin:0; justify-content:center }
.stage .actions .btn { min-width:min(100%,220px) }
@media(min-width:700px) {
  :root { --stage-pad:26px }
  .stage { gap:12px 28px; padding:20px 30px 24px }
  .stage .door__logo img { height:clamp(130px,17svh,190px) }
  .stage .door__pig svg { width:112px }
  .stage .door__pig .speech { font-size:22px; padding:10px 14px }
  .stage h1 { font-size:3.6rem; margin-bottom:14px }
}
@media(min-width:1100px) {
  .stage { grid-template-columns:auto auto auto; align-items:center; gap:10px 30px; padding:20px 34px }
  .stage .door__logo img { height:clamp(150px,24vh,220px) }
  .stage__words { grid-column:2; grid-row:1; text-align:left }
  .stage h1 { font-size:clamp(2.8rem,4.6vw,4.4rem); margin-bottom:16px; white-space:nowrap }
  .stage .actions { justify-content:flex-start }
  .stage .door__pig { grid-column:3; align-self:end }
  .stage .door__pig svg { width:clamp(112px,10vw,150px) }
  .stage .door__pig .speech { max-width:190px }
}
/* A phone on its side: the sign is one low row, so the welcome still starts on the first screen. */
@media(max-height:480px) and (orientation:landscape) {
  .stage { grid-template-columns:auto auto auto; align-items:center; gap:6px 18px; padding:8px 16px }
  .stage .door__logo img { height:96px }
  .stage__words { grid-column:2; grid-row:1 }
  .stage h1 { font-size:2rem; margin-bottom:6px }
  .stage .door__pig { grid-column:3 }
  .stage .door__pig svg { width:62px }
  .stage .door__pig .speech { font-size:16px; padding:5px 9px }
}
@media(prefers-reduced-motion:no-preference) {
  html.js:not(.is-quiet) .door .stage { transition:transform 1.3s cubic-bezier(.65,0,.25,1),box-shadow 1.1s }
  /* Closed: the sign hangs in the middle of what the two bars leave of the screen. 100% here is
     the sign's own height. On a screen too low for that it stays where it is. */
  html.js:not(.is-quiet) .door:not(.is-open) .stage { transform:translateY(max(0px,calc((100svh - var(--bar-height) - var(--guide-slim) - 100%)/2 - var(--stage-pad)))); box-shadow:0 0 0 3px var(--gold),0 18px 40px #000a }
  .door.is-open .curtain--l { transform:translateX(-101%) scaleX(.88) }
  .door.is-open .curtain--r { transform:translateX(101%) scaleX(.88) }
  .door.is-settled .curtain { visibility:hidden }
  /* The strip along the curtains' top goes with them: an open door has no dark band under the bar. */
  .door .curtains::after { transition:opacity .9s .5s }
  .door.is-open .curtains::after { opacity:0 }
  .door.open-instant .curtains::after { transition:none }
  .door.open-instant .curtain,html.js:not(.is-quiet) .door.open-instant .stage { transition:none }
}
/* Quiet at the door: no curtains at all (the rooms' curtains are not the pig's and keep theirs). */
html.is-quiet .door .curtains { display:none }

/* BEHIND THE DOOR'S CURTAINS: her sentence, her hello, and the guitar hung on its own piece of wall. */
.welcome { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; margin-top:26px; align-items:start; scroll-margin-top:calc(var(--bar-height) + 12px) }
.welcome__words { position:relative; isolation:isolate }
.welcome .blobs { inset:-10px 0 }
.door__say { margin:0 0 18px; font-size:clamp(19px,2vw,23px) }
.hello { max-width:62ch; padding:14px 18px 6px; border-left:6px solid var(--orange); border-radius:6px; background:#fff; box-shadow:0 4px 9px #0002 }
.hello p { margin:0 }
.hello__more a { display:inline-flex; align-items:center; min-height:44px; font-weight:700 }
.door__front { width:100%; max-width:400px; margin:0 auto; padding:30px 24px 24px; border-radius:10px; background:radial-gradient(ellipse at 30% 0,#ffffff24,transparent 55%),linear-gradient(90deg,#00000022,transparent 22%,transparent 78%,#00000026),var(--navy) }
.door__front :focus-visible { outline-color:var(--gold) }
.welcome__more .actions { margin:0 0 14px }
.welcome__more .tags { margin:0 0 10px }
@media(min-width:900px) {
  .welcome { grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:22px 52px; margin-top:34px }
  .welcome__words { grid-column:1; grid-row:1 }
  .welcome__more { grid-column:1; grid-row:2 }
  .door__front { grid-column:2; grid-row:1/span 2; max-width:440px }
}

/* WRITING TO SHERRY: the box a mail button opens under itself. */
html.js .mail-note { display:none }
.write { margin:12px 0 6px; padding:14px 16px; border:2px solid var(--navy); border-radius:10px; background:#fffaf6; color:var(--navy); font-size:16px; text-align:left; overflow-wrap:anywhere }
.write p { max-width:none; margin:0 0 10px }
.write p:last-child { margin-bottom:0 }
.write__row { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px }
.write__note { padding:10px 12px; border-left:4px solid var(--orange); background:#fff; white-space:pre-wrap }
.write__open { display:flex; flex-wrap:wrap; align-items:center; gap:8px }
.write__open span { flex:1 0 100% }
.write .btn { width:auto; min-height:44px; padding:6px 14px; font-size:15px }
.write__small,.write__status { font-size:15px }