/* Resolve: portal transitions between pages + quiet mode (see portal.js) */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
:root{--px:50%;--py:50%;--world:#F3F6EF;--world-ink:#633B55}
::view-transition-group(root){animation-duration:.95s}
::view-transition-old(root){animation:pt-recede .95s cubic-bezier(.65,0,.25,1) both;transform-origin:var(--px) var(--py)}
::view-transition-new(root){animation:pt-open .9s cubic-bezier(.7,0,.2,1) both}
@keyframes pt-recede{0%{transform:scale(1);filter:brightness(1) saturate(1)}100%{transform:scale(.93);filter:brightness(.62) saturate(.85)}}
@keyframes pt-open{from{clip-path:circle(0 at var(--px) var(--py))}to{clip-path:circle(160vmax at var(--px) var(--py))}}
.pt-veil,.pt-ring,.pt-name{position:fixed;pointer-events:none;z-index:2147483000}
.pt-veil{inset:0;background:var(--world) url(../img/wash-mist.webp) center/1100px auto;background-blend-mode:multiply;animation:pt-veil 1.2s cubic-bezier(.4,0,.2,1) both}
@keyframes pt-veil{0%,50%{opacity:1}100%{opacity:0}}
.pt-ring{left:var(--px);top:var(--py);width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid #B88B48;
  box-shadow:0 0 18px rgba(184,139,72,.4),inset 0 0 18px rgba(184,139,72,.18);animation:pt-ring .9s cubic-bezier(.7,0,.2,1) both}
@keyframes pt-ring{0%{width:0;height:0;opacity:1}80%{opacity:.85}100%{width:314vmax;height:314vmax;opacity:.12}}
.pt-name{left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;padding:0 24px;font:400 clamp(34px,5vw,74px)/1.04 "Newsreader",Georgia,serif;letter-spacing:-.022em;color:var(--world-ink);
  animation:pt-name 1.2s cubic-bezier(.3,0,.2,1) both}
.pt-name small{display:block;margin-bottom:14px;font:600 12.5px "Instrument Sans",system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#B88B48}
@keyframes pt-name{0%{opacity:0;transform:translateY(-42%)}22%{opacity:1;transform:translateY(-50%)}58%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(-56%)}}

/* quiet mode: every animation and transition finishes instantly, so content shows in its final state */
html.quiet{scroll-behavior:auto}
html.quiet *,html.quiet *::before,html.quiet *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
html.quiet .rv{opacity:1!important;transform:none!important}
html.quiet .draw .ln{stroke-dashoffset:0!important}html.quiet .draw .dot{opacity:1!important}
html.quiet::view-transition-old(root),html.quiet::view-transition-new(root){animation:none}

/* the toggle (footer and mobile menu) */
.qm{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.qm b{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:#EEF2E9;color:#454B39;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.qm[aria-pressed="false"] b{background:#F1ECEF;color:#633B55}
.qm:hover span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}