/* Page title (Series, Contact, Legal): a big title that rides up to the menu and docks there, an optional summary line
   under it, and a hairline that docks under both and then runs edge to edge. Behaviour: js/components/page-title.js.
   Markup:  <h1 class="pt">Series</h1> [<p class="pt-sum mono">…</p>] <div class="pt-rule"></div> */

.pt{
  --hfs:clamp(48px,9vw,140px);   /* full size */
  --k:0;                          /* 0…1, set from the scroll: the title shrinks to half */
  position:sticky;top:calc(48px + var(--safe-t));z-index:3;background:var(--bg);
  margin:0 0 calc(var(--hfs) * .495 * var(--k));   /* gives back exactly the height it loses, so the text below stays put */
  padding-bottom:calc(.14em + 6px);                 /* room for descenders (the g in Legal) above the line */
  font-weight:780;font-stretch:72%;font-size:calc(var(--hfs) * (1 - .5 * var(--k)));line-height:.85;letter-spacing:-.02em;
}
.pt::before{content:"";position:absolute;left:calc(-1 * var(--gut));right:calc(-1 * var(--gut));bottom:100%;height:200px;background:var(--bg)} /* covers whatever scrolls past above it */

.pt-sum{position:sticky;z-index:3;background:var(--bg);color:var(--mute);margin:0 calc(-1 * var(--gut)) 24px;padding:4px var(--gut) 12px;box-shadow:0 -6px 0 var(--bg)} /* the shadow closes sub-pixel seams to the title */

.pt-rule{position:sticky;z-index:3;height:1px;background:var(--line);margin:0;transition:margin .3s var(--ease)}
.pt-rule.stuck{margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut))}
/* text pages: the line keeps a little air around it; their column is narrow, so docked it reaches the far edge of the screen */
.doc .pt-rule{margin-top:14px;margin-bottom:36px}
.doc .pt-rule.stuck{margin-left:calc(-1 * var(--gut));margin-right:calc(min(100vw,760px) - var(--gut) - 100vw)}

@media (hover:none),(max-width:760px){.pt-sum{font-size:14px}}