/* The site dialog: a faceted window on wide screens, a bottom sheet on phones; toasts. */
.site-dialog { --c:var(--cut); --face:radial-gradient(ellipse at 90% 0%,var(--glow),transparent 60%),linear-gradient(160deg,var(--ink-4),var(--ink-3) 40%); --edge-c:var(--line-gold-strong); --edge-top:linear-gradient(90deg,transparent 10%,var(--gold) 50%,transparent 90%);
  position:fixed; isolation:isolate; width:min(560px,calc(100% - 32px)); max-height:min(88dvh,860px); margin:auto; padding:0;
  border:0; background:none; color:var(--text); overflow:hidden; box-shadow:0 40px 140px #000c; }
.dialog-scroll { max-height:inherit; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:clamp(36px,2.4vw,56px) clamp(22px,2.4vw,52px) clamp(26px,2vw,44px); }
.site-dialog::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  --k:calc(var(--c) * .7071 + 1px); --s:calc(var(--c) + 2px); --flat:linear-gradient(var(--edge-c) 0 0);
  background:linear-gradient(135deg,var(--edge-c) var(--k),transparent 0) top left/var(--s) var(--s) no-repeat,linear-gradient(225deg,var(--edge-c) var(--k),transparent 0) top right/var(--s) var(--s) no-repeat,linear-gradient(315deg,var(--edge-c) var(--k),transparent 0) bottom right/var(--s) var(--s) no-repeat,linear-gradient(45deg,var(--edge-c) var(--k),transparent 0) bottom left/var(--s) var(--s) no-repeat,var(--edge-top) top/100% 1px no-repeat,var(--flat) bottom/100% 1px no-repeat,var(--flat) left/1px 100% no-repeat,var(--flat) right/1px 100% no-repeat,var(--face);
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c)); }
/* Фон и рамка остаются на месте; прокручивается только содержимое .dialog-scroll. */
#dialog-content { position:relative; }
.site-dialog::backdrop { background:rgb(8 7 14 / .74); backdrop-filter:blur(8px); }
.site-dialog[open] { animation:dialog-in .26s var(--ease); }
.site-dialog[open]::backdrop { animation:reveal-fade .26s var(--ease); }
@keyframes dialog-in { from { opacity:0; transform:translateY(14px) scale(.98); } }
/* Exit: the window sinks and fades; closeDialog() waits for this animation's duration. */
.site-dialog.is-closing { animation:dialog-out .2s cubic-bezier(.5,0,.75,0) forwards; }
.site-dialog.is-closing::backdrop { animation:backdrop-out .2s linear forwards; }
@keyframes dialog-out { to { opacity:0; transform:translateY(10px) scale(.98); } }
@keyframes backdrop-out { to { opacity:0; } }
.article-dialog { width:min(760px,calc(100% - 32px)); }

.dialog-controls { position:sticky; top:0; z-index:10; height:0; pointer-events:none; }
.dialog-controls .dialog-close { position:absolute; right:calc(clamp(22px,2.4vw,52px) * -1 + 8px); top:calc(clamp(36px,2.4vw,56px) * -1 + 8px); pointer-events:auto; --face-c:#211828f2; }

/* Content. */
.dialog-kicker { display:flex; align-items:center; gap:.7em; font:600 var(--fs-micro)/1.3 var(--sans); letter-spacing:.2em; color:var(--gold); }
.site-dialog h2 { margin-block:12px 14px; font-size:clamp(32px,1vw + 24px,56px); line-height:1.08; }
.site-dialog h2 em { font-style:italic; color:var(--gold-bright); }
.dialog-description { color:var(--text-soft); overflow-wrap:anywhere; }
.dialog-description strong { color:var(--text); font-weight:600; }
/* Publications and events. */
.article-cover { display:block; width:calc(100% + 2 * clamp(22px,2.4vw,52px)); max-width:none; height:auto; aspect-ratio:16 / 8; margin:8px calc(clamp(22px,2.4vw,52px) * -1) 24px; object-fit:cover; -webkit-mask:linear-gradient(180deg,#000 70%,transparent); mask:linear-gradient(180deg,#000 70%,transparent); }
.article-body p { margin-bottom:14px; color:var(--text-soft); max-width:40em; }
.article-dialog .article-body>p:first-child::first-letter { float:left; margin:.06em .12em 0 0; font:500 3.6em/.8 var(--serif); color:var(--gold); }
.article-body h3 { margin:22px 0 10px; font-size:var(--fs-h4); }
.event-dialog-crest .ui-icon { width:64px; height:64px; color:var(--gold); margin-bottom:12px; }

/* Messages: inside the open dialog, or at the bottom of the page. */
.dialog-toast { position:sticky; bottom:0; z-index:5; display:none; margin-top:18px; padding:12px 14px; border:1px solid var(--line-gold); background:var(--ink-5); box-shadow:0 -10px 30px #0008; }
.dialog-toast.visible { display:block; animation:reveal-up .3s var(--ease); }
.toast { position:fixed; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); z-index:var(--z-toast); translate:-50% 12px; width:max-content; max-width:min(440px,calc(100% - 32px)); padding:14px 22px; border:1px solid var(--line-gold); background:var(--ink-5); box-shadow:0 20px 50px #000a; text-align:center; opacity:0; pointer-events:none; transition:opacity var(--t-mid),translate var(--t-mid) var(--ease); }
.toast.visible { opacity:1; translate:-50% 0; }

/* Phones: a bottom sheet with rounded top, full width. */
@media (max-width:640px) {
  .site-dialog,.article-dialog { --c:0px; width:100%; max-width:100%; max-height:92dvh; margin:auto 0 0; border-radius:18px 18px 0 0; }
  .dialog-scroll { padding:40px 20px max(24px,env(safe-area-inset-bottom)); }
  .site-dialog::before { clip-path:none; }
  .site-dialog[open] { animation:sheet-in .32s cubic-bezier(.2,.9,.25,1); }
  @keyframes sheet-in { from { transform:translateY(100%); } }
  .site-dialog.is-closing { animation:sheet-out .24s cubic-bezier(.5,0,.75,0) forwards; }
  @keyframes sheet-out { to { transform:translateY(100%); } }
  .dialog-controls .dialog-close { right:-12px; top:-32px; }
  .article-cover { width:calc(100% + 40px); margin-inline:-20px; }
}