/* This experiment leaves the intro's original column and spacing intact. */
.page-home .home-content { max-width: none; }
.page-home .home-hero-section { max-width: 600px; }
.visual-gallery { width:100%; padding-bottom:80px; }
.visual-grid { position:relative; width:100%; }
.visual-tile { position:absolute; display:block; padding:0; border:0; background:var(--color-tag-background,#eee); cursor:pointer; overflow:hidden; }
.visual-tile[hidden], [hidden] { display:none!important; }
.visual-tile img,.visual-tile video { display:block; width:100%; height:auto; }
.visual-tile:focus-visible { outline:2px solid var(--color-foreground,#111); outline-offset:3px; }
.visual-arrange-tools { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:16px; margin-bottom:16px; font:12px/1.5 sans-serif; }
.visual-arrange-tools button,.visual-more { color:inherit; font:inherit; background:none; border:0; border-bottom:1px solid currentColor; padding:4px 0; cursor:pointer; }
#visual-help { margin:0 0 16px; font:14px/1.5 sans-serif; }
.visual-position { display:none; position:absolute; top:8px; left:8px; padding:5px 9px; background:#fff; color:#111; border-radius:4px; font:12px sans-serif; pointer-events:none; }
.visual-gallery.is-arranging .visual-position { display:block; }
.visual-gallery.is-arranging .visual-tile { cursor:grab; }
.visual-tile.is-dragging { opacity:.4; }
.visual-more { display:block; margin:32px auto 0; }
.visual-viewer { border:0; padding:32px; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none; box-sizing:border-box; background:transparent; color:#fff; overflow:hidden; }
.visual-viewer[open] { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; }
.visual-viewer::backdrop { background:rgba(0,0,0,.78); animation:visual-backdrop-in 80ms ease-out both; }
.visual-viewer.is-closing::backdrop { animation:visual-backdrop-out 232ms ease-in-out both; }
.visual-viewer [data-viewer-close] { position:absolute; left:50%; bottom:max(32px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:2; display:grid; place-items:center; width:48px; height:48px; padding:0; border-radius:50%; background:#fff; color:#000; }
.visual-viewer [data-viewer-close]:focus-visible { outline:2px solid #fff; outline-offset:5px; }
.visual-viewer button { border:0; background:none; color:inherit; cursor:pointer; padding:8px; }
.visual-viewer-media { display:flex; justify-content:center; align-items:center; width:100%; pointer-events:none; }
.visual-viewer-media img,.visual-viewer-media video { display:block; width:auto; height:auto; max-width:100%; max-height:calc(100dvh - 240px); object-fit:contain; transform-origin:top left; pointer-events:auto; will-change:transform; }
.visual-viewer-bottom { text-align:center; }
.visual-viewer-bottom p { margin:0 0 4px; }
.visual-viewer-bottom a { color:inherit; }
.visual-tile.is-viewing .visual-open { visibility:hidden; }
@keyframes visual-backdrop-in { from { background:rgba(0,0,0,0); } to { background:rgba(0,0,0,.78); } }
@keyframes visual-backdrop-out { from { background:rgba(0,0,0,.78); } to { background:rgba(0,0,0,0); } }
@media(prefers-reduced-motion:reduce) { .visual-viewer::backdrop { animation:none; } }
body:has(.visual-viewer[open]) { overflow:hidden; }
@media(max-width:600px) { .visual-viewer { padding:12px; } .visual-gallery { padding-bottom:40px; } }
.visual-open { display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; color:inherit; }
.visual-open:focus-visible { outline:3px solid var(--color-foreground,#111); outline-offset:-3px; }
.visual-hide { display:none; position:absolute; right:8px; top:8px; border:0; border-radius:4px; padding:6px 10px; background:#fff; color:#111; font:12px sans-serif; cursor:pointer; }
.visual-gallery.is-arranging .visual-hide { display:block; }
.visual-gallery.is-arranging .visual-open { cursor:grab; }
.visual-gallery.is-arranging .is-hidden .visual-open { opacity:.3; }

/* Recede around the visible viewport rather than the full document center. */
#main { transition:transform 232ms cubic-bezier(.16,1,.3,1), filter 232ms cubic-bezier(.16,1,.3,1); }
#main.is-receded { transform:scale(.94); filter:blur(6px); transition-duration:278ms; transition-delay:90ms; }
@media(prefers-reduced-motion:reduce) { #main { transition:none; } #main.is-receded { transform:none; filter:none; } }

/* Match the page beneath the full-screen backdrop as content recedes. */
html:has(.visual-viewer[open]), body:has(.visual-viewer[open]) { background:var(--color-background, #fff); }

.visual-viewer { --color-foreground:#fff; --color-subdued:rgba(255,255,255,.7); }
.visual-viewer .rich-text { --text-alignment:center; }

.visual-viewer-bottom .text-body { --text-font-open-type-features:normal; --letter-spacing:-0.00643em; --line-height:21px; }

/* Inset outlines define opaque photography edges without changing layout.
   PNG artwork is excluded so transparent illustrations keep their silhouette. */
.visual-tile img:is([src$=".jpg"], [data-src$=".jpg"], [src$=".jpeg"], [data-src$=".jpeg"]),
.visual-viewer-media img:is([src$=".jpg"], [src$=".jpeg"]) {
  outline: 1px solid oklch(0 0 0 / 0.1);
  outline-offset: -1px;
}
/* Give the final work a clear ending and room before the footer. */
.page-home .visual-gallery { padding-bottom:clamp(96px, 10vw, 160px); }