.welcome:not([hidden]) {
  display: grid;
  grid-column: 2;
  grid-row: 1;
  place-items: start center;
  padding: clamp(64px, 16vh, 164px) 20px 20px;
  min-width: 0;
}
.welcome:not([hidden]) + .explore {display:none}

.welcome-card {
  display:grid;
  grid-template-columns:minmax(0,430px) auto;
  grid-template-areas:"heading door" "copy door";
  column-gap:clamp(24px,4vw,60px);
}
.welcome-copy {grid-area:copy}
.welcome-card h2 {
  grid-area:heading;
  align-self:end;
  margin:0;
  color:var(--ink);
  font-size:clamp(32px,3.4vw,48px);
  font-weight:700;
  letter-spacing:-.045em;
  line-height:1.08;
}
.welcome-copy p {
  margin:12px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
  text-wrap:pretty;
}
.welcome-copy .welcome-count {
  margin-top:14px;
  color:var(--blue);
  font-size:16px;
  font-weight:600;
}

.welcome-copy .welcome-updated {
  margin-top:12px;
  font-size:12px;
}

.welcome-door-button {
  grid-area:door;
  align-self:center;
  width:clamp(160px,16vw,229px);
  padding:0;
  border:0;
  border-radius:18px;
  background:transparent;
}
.welcome-door-button[aria-disabled="true"] {cursor:default}
.welcome-doorway {
  display:block;
  width:100%;
  height:auto;
  pointer-events:none;
}
.welcome-door-leaf {transform-origin:173px 162px}
.welcome-knock {opacity:0}
.welcome-door-button[data-scene="inside"] .welcome-mascot {transform:translateX(73px)}
.welcome-door-button:is([data-scene="inside"], [data-scene="leaving"]) .welcome-door-panel {fill:#f8dd8b}
.welcome-door-button[data-scene="inside"]:focus-visible .welcome-door-panel {fill:var(--logo-yellow)}
.welcome-door-button:is([data-scene="outside"], [data-scene="inside"]):focus-visible .welcome-knock {opacity:1}

@media (hover:hover) {
  .welcome-door-button[data-scene="inside"]:hover .welcome-door-panel {fill:var(--logo-yellow)}
  .welcome-door-button:is([data-scene="outside"], [data-scene="inside"]):hover .welcome-knock {opacity:1}
}

@media (prefers-reduced-motion:no-preference) {
  .welcome-door-button {
    --welcome-arrival-duration:5.25s;
    --welcome-arrival-delay:.65s;
    --welcome-exit-duration:1.65s;
  }
  .welcome-door-panel {transition:fill var(--motion-fast) ease-out}
  .welcome-knock {transition:opacity var(--motion-quick) ease-out}
  .welcome-door-button[data-scene="entering"] .welcome-door-leaf {animation:welcome-arrive-door var(--welcome-arrival-duration) var(--welcome-arrival-delay) both}
  .welcome-door-button[data-scene="entering"] .welcome-mascot {animation:welcome-step-in var(--welcome-arrival-duration) var(--welcome-arrival-delay) both}
  .welcome-door-button[data-scene="entering"] .welcome-knock {animation:welcome-knock var(--welcome-arrival-duration) var(--welcome-arrival-delay) both}
  .welcome-door-button[data-scene="leaving"] .welcome-door-leaf {animation:welcome-exit-door var(--welcome-exit-duration) both}
  .welcome-door-button[data-scene="leaving"] .welcome-mascot {animation:welcome-step-out var(--welcome-exit-duration) both}
}

@keyframes welcome-arrive-door {
  0%,62.6%,100% {transform:none}
  72.9%,90% {transform:scaleX(.25) skewY(8deg)}
}
@keyframes welcome-step-in {
  0%,7.5%,14.1%,42.4%,46.5%,52.3%,72.9% {transform:translateX(0)}
  10.8%,44.7%,50.1% {transform:translate(6px,-2px)}
  80.6% {transform:translate(46px,-8px)}
  85.7%,100% {transform:translateX(73px)}
}
@keyframes welcome-knock {
  0%,9.7%,14.1%,43.8%,46.5%,49.2%,52.3%,100% {opacity:0}
  10.8%,11.9%,44.7%,45.4%,50.1%,50.8% {opacity:1}
}
@keyframes welcome-exit-door {
  0%,100% {transform:none}
  30%,75% {transform:scaleX(.25) skewY(8deg)}
}
@keyframes welcome-step-out {
  0%,30% {transform:translateX(73px)}
  50% {transform:translate(46px,-8px)}
  68% {transform:translate(12px,-3px)}
  78%,100% {transform:translateX(0)}
}

@media (max-width:980px) {
  .welcome:not([hidden]) {padding:24px 12px 48px}
}
@media (max-width:720px) {
  .welcome:not([hidden]) {padding:12px 4px 20px}
  .welcome-card {display:flow-root;width:100%}
  .welcome-card h2 {font-size:25px}
  .welcome-copy p {font-size:14px;margin-top:7px}
  .welcome-copy .welcome-count {clear:both;font-size:15px;margin-top:9px}
  .welcome-door-button {
    float:right;
    width:clamp(82px,25vw,110px);
    margin:0 0 4px 8px;
    shape-outside:polygon(35% 12%, 88% 12%, 88% 92%, 10% 92%, 10% 49%, 35% 49%) border-box;
    shape-margin:8px;
  }
}