.afterword-layer {
  position: fixed;
  inset: 0;
  z-index: 25;
  overflow: hidden;
  pointer-events: none;
}

.afterword-panel {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .45s ease, visibility 0s .45s;
}

.afterword-panel__content {
  position: absolute;
  color: #f4eee3;
  font-family: "Geist", Arial, sans-serif;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s .12s ease, transform .65s .12s cubic-bezier(.2, .72, .2, 1);
  pointer-events: auto;
}

html[data-gallery-section="afterword-commission"] .afterword-panel--commission,
html[data-gallery-section="afterword-ai-systems"] .afterword-panel--systems,
html[data-gallery-section="afterword-newsletter"] .afterword-panel--newsletter {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

html[data-gallery-section="afterword-commission"] .afterword-panel--commission .afterword-panel__content,
html[data-gallery-section="afterword-ai-systems"] .afterword-panel--systems .afterword-panel__content,
html[data-gallery-section="afterword-newsletter"] .afterword-panel--newsletter .afterword-panel__content {
  opacity: 1;
  transform: translateY(0);
}

html[data-gallery-section^="afterword-"] #world.sw-root .sw-copylayer,
html[data-gallery-section^="afterword-"] #world.sw-root .sw-hint {
  visibility: hidden;
  opacity: 0;
}

.afterword-panel--commission .afterword-panel__content {
  left: 50%;
  bottom: clamp(72px, 10vh, 116px);
  width: min(860px, calc(100vw - 160px));
  text-align: center;
  transform: translate(-50%, 18px);
}

html[data-gallery-section="afterword-commission"] .afterword-panel--commission .afterword-panel__content {
  transform: translate(-50%, 0);
}

.afterword-panel--systems .afterword-panel__content,
.afterword-panel--newsletter .afterword-panel__content {
  left: clamp(26px, 4.9vw, 80px);
  bottom: clamp(76px, 10vh, 124px);
  width: min(540px, calc(100vw - 170px));
}

.afterword-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 21px;
  color: #c8a565;
  font-size: .65rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.afterword-panel__eyebrow::before {
  width: 22px;
  height: 1px;
  background: currentColor;
  content: "";
}

.afterword-panel--commission .afterword-panel__eyebrow { justify-content: center; }
.afterword-panel--commission .afterword-panel__eyebrow::before { display: none; }

.afterword-panel h2 {
  max-width: 13ch;
  margin: 0;
  color: #f4eee3;
  font-family: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  font-size: clamp(3.2rem, 5.5vw, 6rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .91;
  text-wrap: balance;
}

.afterword-panel--commission h2 { max-width: none; }

.afterword-panel__body {
  max-width: 54ch;
  margin: 23px 0 0;
  color: rgba(244, 238, 227, .78);
  font-size: clamp(.92rem, 1.02vw, 1.04rem);
  font-weight: 300;
  line-height: 1.62;
}

.afterword-panel--commission .afterword-panel__body { margin-right: auto; margin-left: auto; }

.afterword-panel__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 28px;
}

.afterword-panel--commission .afterword-panel__actions { justify-content: center; }

.afterword-action {
  color: #f4eee3;
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .25s ease, background .25s ease;
}

.afterword-action:focus-visible,
.afterword-newsletter input:focus-visible,
.afterword-newsletter button:focus-visible,
.afterword-colophon a:focus-visible {
  outline: 2px solid #f4eee3;
  outline-offset: 4px;
}

.afterword-action--primary {
  display: inline-flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 1px solid rgba(200, 165, 101, .8);
  background: rgba(6, 7, 9, .66);
}

.afterword-action--primary:hover { color: #090a0d; background: #c8a565; }
.afterword-action--text { padding: 9px 0 7px; border-bottom: 1px solid rgba(200, 165, 101, .72); }
.afterword-action--text:hover { color: #c8a565; }

.afterword-newsletter { width: min(520px, 100%); margin-top: 28px; }

.afterword-newsletter label {
  display: block;
  margin-bottom: 9px;
  color: rgba(244, 238, 227, .7);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.afterword-newsletter__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }

.afterword-newsletter input,
.afterword-newsletter button { min-height: 52px; border-radius: 0; font: inherit; }

.afterword-newsletter input {
  min-width: 0;
  border: 1px solid rgba(244, 238, 227, .34);
  border-right: 0;
  padding: 0 16px;
  color: #f4eee3;
  background: rgba(6, 7, 9, .76);
  font-size: .9rem;
}

.afterword-newsletter input::placeholder { color: rgba(244, 238, 227, .38); }

.afterword-newsletter button {
  border: 1px solid #c8a565;
  padding: 0 20px;
  color: #090a0d;
  background: #c8a565;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.afterword-newsletter button:hover { background: #dbc18e; }
.afterword-newsletter__status { min-height: 1.3em; margin: 10px 0 0; color: rgba(244, 238, 227, .54); font-size: .68rem; line-height: 1.45; }

.afterword-colophon {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(200, 165, 101, .28);
  color: rgba(244, 238, 227, .5);
  font-size: .57rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.afterword-colophon a { color: inherit; text-decoration: none; }
.afterword-colophon a:hover { color: #f4eee3; }

@media (max-width: 780px) {
  .afterword-panel--commission .afterword-panel__content,
  .afterword-panel--systems .afterword-panel__content,
  .afterword-panel--newsletter .afterword-panel__content {
    right: 52px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 18px;
    width: auto;
    text-align: left;
    transform: translateY(16px);
  }

  html[data-gallery-section="afterword-commission"] .afterword-panel--commission .afterword-panel__content { transform: translateY(0); }
  .afterword-panel--commission .afterword-panel__eyebrow { justify-content: flex-start; }
  .afterword-panel--commission .afterword-panel__eyebrow::before { display: block; }
  .afterword-panel h2 { max-width: 12ch; font-size: clamp(2rem, 9.5vw, 3rem); line-height: .94; }
  .afterword-panel--commission h2 { max-width: 10ch; }
  .afterword-panel__body { max-width: 37ch; margin-top: 12px; font-size: .8rem; line-height: 1.42; }
  .afterword-panel--commission .afterword-panel__body { margin-left: 0; }
  .afterword-panel__actions { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 16px; }
  .afterword-panel--commission .afterword-panel__actions { align-items: flex-start; }
  .afterword-action--primary { min-height: 42px; padding: 0 16px; }
  .afterword-newsletter { margin-top: 16px; }
  .afterword-newsletter__row { grid-template-columns: 1fr; gap: 8px; }
  .afterword-newsletter input { border-right: 1px solid rgba(244, 238, 227, .34); }
  .afterword-newsletter button { min-height: 42px; }
  .afterword-colophon { gap: 8px 14px; margin-top: 14px; font-size: .5rem; }
  html[data-gallery-section="afterword-commission"] #world.sw-root .sw-scene.is-active .sw-scene__still { object-position: 50% center; }
  html[data-gallery-section="afterword-ai-systems"] #world.sw-root .sw-scene.is-active .sw-scene__still { object-position: 68% center; }
  html[data-gallery-section="afterword-newsletter"] #world.sw-root .sw-scene.is-active .sw-scene__still { object-position: 70% center; }
}

@media (prefers-reduced-motion: reduce) {
  .afterword-panel,
  .afterword-panel__content { transition: none !important; }
}