:root {
  --overlay-backdrop: rgba(38, 30, 21, 0.42);
  --overlay-panel-bg: #f8f4ea;
  --overlay-panel-bg-2: #efe6d4;
  --overlay-panel-border: #d8d2c4;
  --overlay-panel-shadow: 0 22px 54px rgba(37, 27, 17, 0.24);
  --overlay-text: #241f19;
  --overlay-muted: #6d6458;
  --overlay-accent: #8a4a2b;
  --overlay-radius: 8px;
  --overlay-header-height: 52px;
  --overlay-gap: 16px;
}

dialog.site-overlay {
  width: min(1100px, calc(100vw - 32px));
  max-width: 1100px;
  height: auto;
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--overlay-panel-border);
  border-radius: var(--overlay-radius);
  background: var(--overlay-panel-bg);
  color: var(--overlay-text);
  box-shadow: var(--overlay-panel-shadow);
  overflow: hidden;
}

dialog.site-overlay::backdrop {
  background: var(--overlay-backdrop);
  backdrop-filter: blur(2px);
}

dialog.site-overlay[open] {
  display: flex;
  flex-direction: column;
}

.site-overlay--small {
  width: min(720px, calc(100vw - 32px));
}

.site-overlay--large {
  width: min(1180px, calc(100vw - 32px));
}

.site-overlay--full {
  width: calc(100vw - 24px);
  max-width: none;
  height: calc(100vh - 24px);
  max-height: none;
}

.site-overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--overlay-header-height);
  padding: 10px 14px;
  background: linear-gradient(to bottom, #f3ebdb 0%, #ede2cf 100%);
  border-bottom: 1px solid var(--overlay-panel-border);
}

.site-overlay__title {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--overlay-text);
}

.site-overlay__close {
  appearance: none;
  border: 1px solid #cfc5b4;
  background: #fbf8f2;
  color: var(--overlay-text);
  min-width: 40px;
  height: 36px;
  padding: 0 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.site-overlay__close:hover {
  background: #fffdf8;
  border-color: #bcae99;
}

.site-overlay__close:focus-visible {
  outline: 2px solid var(--overlay-accent);
  outline-offset: 2px;
}

.site-overlay__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 220px;
  background: var(--overlay-panel-bg);
  overflow: auto;
}

.site-overlay__body--padded {
  padding: 18px;
}

.site-overlay__frame {
  display: block;
  width: 100%;
  height: calc(100vh - 140px);
  min-height: 420px;
  border: 0;
  background: #f7f3e9;
  /* Iframe preview is view-only by default. Users escape via the
     'Open full page →' link in the header. This blocks clicks, scroll wheel,
     and text selection from reaching the previewed page. Opt out per-trigger
     by adding data-overlay-interactive="1" (used by Topic cards so the rail
     of tabs works inside the popup). */
  pointer-events: none;
  user-select: none;
}

/* Interactive overlays: user CAN click, scroll, and select text inside
   the iframe. Opt in with data-overlay-interactive="1" on the trigger. */
.site-overlay--interactive .site-overlay__frame {
  pointer-events: auto;
  user-select: auto;
}

/* 'Open full page →' link that sits in the modal header, between the
   title and the close button. Only shown for iframe previews. */
.site-overlay__openfull {
  margin-left: auto;
  margin-right: 12px;
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--overlay-accent);
  text-decoration: none;
  white-space: nowrap;
}

.site-overlay__openfull:hover,
.site-overlay__openfull:focus-visible {
  color: #6d3517;
  text-decoration: underline;
}

.site-overlay--small .site-overlay__frame {
  height: min(70vh, 760px);
}

.site-overlay--large .site-overlay__frame {
  height: calc(100vh - 140px);
}

.site-overlay--full .site-overlay__frame {
  height: calc(100vh - 78px);
}

.site-overlay__content {
  color: var(--overlay-text);
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}

.site-overlay__content h1,
.site-overlay__content h2,
.site-overlay__content h3 {
  color: var(--overlay-text);
}

.site-overlay__content p {
  margin: 0 0 1rem;
}

.site-overlay__loading,
.site-overlay__error {
  padding: 18px;
  font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.98rem;
  line-height: 1.45;
}

.site-overlay__loading {
  color: var(--overlay-muted);
}

.site-overlay__error {
  color: #7f2f23;
}

body.has-site-overlay-open {
  overflow: hidden;
}

@media (max-width: 760px) {
  dialog.site-overlay,
  .site-overlay--small,
  .site-overlay--large,
  .site-overlay--full {
    width: calc(100vw - 14px);
    max-width: none;
    max-height: calc(100vh - 14px);
    border-radius: 6px;
  }

  dialog.site-overlay {
    margin: 7px;
  }

  .site-overlay__header {
    padding: 8px 10px;
    min-height: 48px;
  }

  .site-overlay__title {
    font-size: 1.25rem;
  }

  .site-overlay__close {
    min-width: 38px;
    height: 34px;
    padding: 0 10px;
  }

  .site-overlay__body--padded,
  .site-overlay__loading,
  .site-overlay__error {
    padding: 14px;
  }

  .site-overlay__frame,
  .site-overlay--small .site-overlay__frame,
  .site-overlay--large .site-overlay__frame,
  .site-overlay--full .site-overlay__frame {
    height: calc(100vh - 110px);
    min-height: 320px;
  }
}