#magazine {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  color: #573b28;
  background: transparent;
}
#magazine[open] { display: grid; place-items: center; }
#magazine::backdrop {
  background: rgb(55 39 27 / 10%);
  backdrop-filter: blur(13px);
  -webkit-backdrop-filter: blur(13px);
}
#magazine-close {
  position: absolute;
  z-index: 2;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  padding: 8px 16px;
}
.magazine-spread {
  position: relative;
  width: min(calc(100vw - 24px), calc(142.439dvh - 34.185px));
  aspect-ratio: 1168 / 820;
  box-shadow: 0 8px 28px rgb(50 28 16 / 20%);
}
.magazine-spread img { display: block; width: 100%; height: auto; }
.magazine-spread img[hidden] { display: none; }
button.magazine-category {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  appearance: none;
  touch-action: manipulation;
  cursor: pointer;
}
button.magazine-category:disabled { opacity: 1; cursor: default; }
button.magazine-category:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.magazine-ai { left: 2.74%; top: 35.98%; width: 14.55%; height: 33.54%; }
.magazine-graphic { left: 18.41%; top: 44.27%; width: 12.24%; height: 31.59%; }
.magazine-commercial { left: 31.68%; top: 38.78%; width: 14.55%; height: 30.85%; }
/* Match the profile entrance each time the magazine is opened. */
@media (prefers-reduced-motion: no-preference) {
  #magazine[open] { animation: profile-appear 320ms ease-out; }
  #magazine[open]::backdrop { animation: backdrop-appear 320ms ease-out; }
}

#gf-trigger {
  position:absolute; left:79.37%; top:0; width:16.01%; height:100%;
  padding:0; border:0; border-radius:0; background:transparent; box-shadow:none;
  cursor: pointer; touch-action: manipulation;
}
#gf-trigger:focus-visible { outline:2px solid #f65f96; outline-offset:-3px; }
#magazine.gf-receded { filter:blur(clamp(9px, 1vw, 14px)); }
#gf-lightbox {
  position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none;
  box-sizing:border-box; margin:0; border:0; overflow:hidden;
  --controls-height:44px; --controls-gap:clamp(3px,.7dvh,8px);
  padding-block:calc(var(--controls-height) + var(--controls-gap) + max(8px,env(safe-area-inset-bottom),env(safe-area-inset-top)));
  padding-inline:max(14px,env(safe-area-inset-left),env(safe-area-inset-right));
  background:transparent; color:white; touch-action:pan-y pinch-zoom;
}
#gf-lightbox[open] { display:grid; place-items:center; }
#gf-lightbox::backdrop { background:rgb(18 22 18 / 35%); }
#gf-position { position:relative; width:var(--art-width); height:var(--art-height); margin:0; }
#gf-art { width:100%; height:100%; display:grid; place-items:center; }
#gf-art img { display:block; width:100%; height:100%; object-fit:contain; user-select:none; -webkit-user-select:none; }
#gf-art img:active { cursor:grabbing; }
#gf-controls {
  position:absolute; top:calc(100% + var(--controls-gap)); left:50%; transform:translateX(-50%);
  width:var(--nav-width); height:var(--controls-height); display:flex; align-items:center; justify-content:space-between;
}
#gf-lightbox button {
  color:inherit; background:transparent; border:0; border-radius:0; box-shadow:none;
  text-shadow:0 1px 4px rgb(0 0 0 / 95%); touch-action:manipulation;
}
#gf-lightbox button:focus-visible { outline:2px solid white; outline-offset:2px; }
#gf-controls button { width:44px; height:44px; padding:0; font:400 32px/1 system-ui,sans-serif; }
#gf-pagination { margin-inline:auto; font:500 13px/1 system-ui,sans-serif; font-variant-numeric:tabular-nums; text-shadow:0 1px 4px #111; }
#gf-dismiss { position:absolute; z-index:1; top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); min-height:44px; padding:6px 12px; }

#ai-view { position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:transparent; }
#ai-view[open] { display:grid; place-items:center; }
#ai-view::backdrop { background:rgb(18 22 18 / 35%); }
#ai-view img,#ai-view video { display:block; width:auto; height:auto; max-width:calc(100% - 28px); max-height:calc(100dvh - 96px); }
#ai-view [hidden],.ai-media-trigger[hidden] { display:none!important; }
#ai-close { position:absolute; top:max(8px,env(safe-area-inset-top)); left:max(8px,env(safe-area-inset-left)); min-height:44px; padding:6px 12px; border:0; background:transparent; box-shadow:none; color:white; text-shadow:0 1px 4px #111; }