.ssc-opening { position: fixed; inset: 0; width: min(880px, calc(100% - 40px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 0; overflow: auto; border: 1px solid rgb(20 18 15 / 12%); border-radius: 20px; background: #eee8dd; color: #14120f; box-shadow: 0 30px 100px rgb(0 0 0 / 35%); font-family: var(--sans, sans-serif); }
.ssc-opening::backdrop { background: rgb(20 18 15 / 65%); backdrop-filter: blur(6px); }
.ssc-opening__layout { display: grid; grid-template-columns: 0.9fr 1.1fr; }
.ssc-opening__visual { position: relative; min-height: 540px; overflow: hidden; background: #2a2622; }
.ssc-opening__visual > img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 44% center; }
.ssc-opening__visual::after { position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(20 18 15 / 72%)); content: ''; }
.ssc-opening__stamp { position: absolute; top: 24px; left: 24px; display: grid; width: 94px; height: 94px; align-content: center; border: 1px solid rgb(255 250 242 / 65%); border-radius: 50%; background: #eee8dd; color: #14120f; font-family: var(--display, Georgia, serif); font-size: 35px; line-height: 1; text-align: center; }
.ssc-opening__stamp small { margin-top: 7px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; }
.ssc-opening__caption { position: absolute; z-index: 1; bottom: 27px; left: 24px; right: 16px; color: #fffaf2; font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.12em; }
.ssc-opening__content { padding: 38px 36px 30px; }
.ssc-opening__logo { display: block; width: 100px; height: 30px; object-fit: contain; object-position: left; margin-bottom: 35px; }
.ssc-opening__eyebrow { margin: 0 0 14px; color: #8f4b32; font-family: var(--mono, monospace); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.5; }
.ssc-opening h2 { margin: 0; color: #14120f; font-family: var(--display, Georgia, serif); font-size: clamp(40px, 4.8vw, 53px); font-weight: 400; letter-spacing: -0.035em; line-height: 0.99; }
.ssc-opening h2 em { color: #8f4b32; font-weight: 400; }
.ssc-opening__when { margin: 24px 0 5px; font-size: 16px; font-weight: 650; line-height: 1.4; }
.ssc-opening__when > span[aria-hidden] { margin: 0 5px; color: #8f4b32; }
.ssc-opening__where { margin: 0; color: #4f4942; font-size: 13px; line-height: 1.5; }
.ssc-opening__description { margin: 20px 0 24px; color: #4f4942; font-size: 14px; line-height: 1.6; }
.ssc-opening__cta { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-radius: 999px; background: #14120f; color: #fffaf2; font-size: 13px; font-weight: 600; line-height: 1.4; text-decoration: none; transition: background 160ms ease; }
.ssc-opening__cta:hover { background: #8f4b32; }
.ssc-opening__cta:focus-visible, .ssc-opening__close:focus-visible { outline: 3px solid #8f4b32; outline-offset: 4px; }
.ssc-opening__note { margin: 12px 0 0; color: #5f584f; font-size: 10px; line-height: 1.5; text-align: center; }
.ssc-opening__close { position: absolute; top: 12px; right: 12px; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid rgb(20 18 15 / 18%); border-radius: 50%; background: #eee8dd; color: #14120f; font-family: var(--sans, sans-serif); font-size: 27px; line-height: 1; cursor: pointer; }
@media (max-width: 640px) {
  .ssc-opening { width: calc(100% - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .ssc-opening__layout { grid-template-columns: 1fr; }
  .ssc-opening__visual { min-height: 170px; height: 24dvh; max-height: 220px; }
  .ssc-opening__visual > img { object-position: center 55%; }
  .ssc-opening__stamp { top: 16px; left: 20px; width: 76px; height: 76px; font-size: 29px; }
  .ssc-opening__caption { bottom: 17px; left: 20px; font-size: 8px; }
  .ssc-opening__content { padding: 22px 24px 22px; }
  .ssc-opening__logo { width: 82px; height: 25px; margin-bottom: 20px; }
  .ssc-opening__eyebrow { margin-bottom: 10px; font-size: 8px; }
  .ssc-opening h2 { max-width: 380px; font-size: clamp(36px, 10vw, 44px); }
  .ssc-opening__when { margin-top: 18px; font-size: 15px; }
  .ssc-opening__description { margin: 14px 0 18px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ssc-opening__cta { transition: none; } }