/* One in-flow header: the cover and Home already reserve its actual height. */
:root{
 --site-header-height:64px;
 --reading-viewport-height:max(0px,calc(100vh - var(--site-header-height)));
 --reading-sticky-top:calc(var(--site-header-height) + clamp(16px,3svh,28px));
 scroll-padding-top:var(--site-header-height);
}
@supports(height:100svh){
 :root{--reading-viewport-height:max(0px,calc(100svh - var(--site-header-height)))}
}
body:is(.home-page,.reader-page)>.site-header{
 position:sticky;
 top:0;
 z-index:30;
 flex-shrink:0;
 width:100%;
 max-width:none;
 margin:0 auto;
 padding-inline:var(--gutter);
 background:#fff;
}
body:is(.home-page,.reader-page)>.site-header>.header-inner{
 max-width:calc(var(--page-width) - 2 * var(--gutter));
 margin-inline:auto;
}
/* Keyboard navigation has the same clearance as native fragment links. */
.skip-link{position:fixed}
/* A tall illustration should scroll normally when text enlargement fills the viewport. */
.reader-page .portfolio-main [data-header-static]{position:relative!important;top:auto!important}
@media(min-width:600px) and (max-height:560px){
 :root{--site-header-height:56px}
}
@media print{
 :root{--site-header-height:0px!important;--reading-viewport-height:0px;scroll-padding-top:0}
 body:is(.home-page,.reader-page)>.site-header{position:static;padding:0;background:transparent}
 body:is(.home-page,.reader-page)>.site-header>.header-inner{max-width:none}
 .skip-link{display:none}
}