/* stanza.pictures — the links at the top and the bottom of every page; the experience is everything between */
.site-top{position:absolute; z-index:6; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:baseline;
  padding:calc(14px + env(safe-area-inset-top,0px)) var(--pad) 0}
.site-bottom{position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:18px;
  padding:28px var(--pad) calc(30px + env(safe-area-inset-bottom,0px)); border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.site-top a, .site-bottom a{color:var(--ink); text-decoration:none}
.site-top a:hover, .site-bottom a:hover{text-decoration:underline; text-underline-offset:3px}
.mark{font:italic 400 1.35rem/1 var(--display); letter-spacing:.01em}
.site-top nav, .site-bottom nav{display:flex; gap:20px; font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.site-bottom .credit{flex:1; text-align:center; font:500 11px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
@media (max-width:700px){ .site-bottom{flex-wrap:wrap} .site-bottom .credit{order:3; flex-basis:100%; text-align:left} }

/* the About page */
.about{max-width:36rem; margin:0 auto; padding:clamp(110px,18vh,190px) var(--pad) clamp(70px,12vh,120px)}
.about h1{font:italic 400 clamp(3rem,9vw,5rem)/1 var(--display); margin:0 0 10px}
.about .lede{font:400 clamp(1.35rem,2.6vw,1.75rem)/1.35 var(--display); margin:0 0 30px}
.about p{margin:0 0 18px; font-size:1.12rem; line-height:1.6}
.about .room{color:var(--soft); font-style:italic}
.about .go a{color:var(--accent); font:500 12px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}

/* room for the strip above the opening title, and for the Labels button beside the bottom links */
.site-bottom{padding-right:calc(var(--pad) + 104px)}
@media (max-width:700px){ .site-bottom{padding-right:var(--pad); padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))} }

/* the landing page: no About at the top; at the foot, its own line, after the experience (his word, 2026-10-10) */
.site-bottom.first{flex-wrap:wrap; padding-top:clamp(56px,10vh,110px)}
.site-bottom.first .about-go{order:-1; flex-basis:100%; text-align:center; margin-bottom:clamp(44px,8vh,90px);
  font:italic 400 clamp(1.5rem,2.6vw,2.05rem)/1.2 var(--display); color:var(--ink)}
.site-bottom.first .credit{text-align:right}
@media (max-width:700px){ .site-bottom.first .credit{text-align:left} }