:root { --ui: 1px; }
/* Proportions keep following the viewport, including above the old size caps. */
.nav, .home, .menu-btn { font-size: max(18px, 2.75vw); }
.top { padding-top: calc(34 * var(--ui)); }
.menu-btn { top: calc(34 * var(--ui)); gap: calc(14 * var(--ui)); }
.menu-btn .bars { width: max(24px, calc(26 * var(--ui))); }
.logo { top: calc(24 * var(--ui)); height: max(36px, 4.6vw); }
.hero { min-height: 0; height: 100svh; }
.headline { font-size: max(48px, 8.2vw); bottom: 9svh; }
.big { font-size: max(36px, 8.4vw); }
.chap h2 { font-size: max(44px, 8vw); }
.sec-head h2, .bio-head h2, .st-head h2 { font-size: max(32px, 4.4vw); }
.xrow h3 { font-size: max(36px, 5.2vw); }
.about-grid p.lead { font-size: max(24px, 2.4vw); }
.bio { font-size: max(17px, 1.3vw); }
.wt { font-size:max(20px,2.9vw); }
.sec-head { margin-bottom:calc(56 * var(--ui)); }
.news-lead { font-size:max(20px,2.4vw); }
.contact h2 { font-size: max(44px, min(8.5vw, 12svh)); }
.cmail { font-size: max(22px, 2.3vw); }
.cphone { font-size: max(18px, 1.6vw); }
.contact .row a { font-size: max(16px, calc(18 * var(--ui))); height: max(44px, calc(52 * var(--ui))); line-height: max(42px, calc(50 * var(--ui))); padding-inline: calc(26 * var(--ui)); }
.sec { padding-top: max(100px, 19svh); }
.stairs { height: calc(100svh + 2px); margin-top: 0; }
.st-stage { height: 100svh; min-height: 0; }
.st-head { top: max(100px, 12svh); gap: calc(8 * var(--ui)); }
.st-world { top: 76%; }
.st-hint { font-size: max(12px, calc(15 * var(--ui))); height: max(32px, calc(44 * var(--ui))); line-height: max(32px, calc(44 * var(--ui))); padding-inline: calc(20 * var(--ui)); }
.st-foot .pill { font-size: max(15px, calc(20 * var(--ui))); height: max(44px, calc(56 * var(--ui))); line-height: max(44px, calc(56 * var(--ui))); padding-inline: calc(30 * var(--ui)); }
.st-foot { gap: calc(14 * var(--ui)); }
.lbl, .crumb, .facts dt, .scope-h { font-size: max(11px, calc(13 * var(--ui))); }
.side h1 { font-size: max(36px, 4.6vw); }
.side { padding-top: max(110px, calc(128 * var(--ui))); gap: calc(22 * var(--ui)); }
.desc { font-size: max(16px, 1.15vw); }
.facts dd, .scope li, .pn { font-size: max(14px, calc(15 * var(--ui))); }
.facts { gap: calc(12 * var(--ui)); }
.scope li { padding-inline: calc(16 * var(--ui)); }
.feed { padding-top: max(110px, calc(128 * var(--ui))); }
.pill, .st-hint, .st-tip { max-width: 100%; }
.big:hover, .menu-btn:hover, .n-link:hover, .cue:hover, .cmail:hover, .pill.dark:hover, .contact .row a:hover, .pn a:hover, .next a:hover { animation: btnGlitch .38s steps(1) 1; }
.portrait.glitching img { filter: url(#liqF) !important; }
.show-password { border:0 !important; background:transparent !important; color:inherit !important; font:inherit !important; font-size:14px !important; height:auto !important; padding:4px 0 !important; align-self:flex-start; text-decoration:underline; cursor:pointer; }
.gallery-link { font-size:max(14px, calc(15 * var(--ui))); text-decoration:underline; text-underline-offset:4px; }
.submission-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(100%); }
.fn-prev { max-height:32svh; object-fit:contain; }
.modal { overflow-y:auto; padding-block:24px; }
.modal .dialog { margin:auto; }
@media (max-width:760px) {
  .top { padding-top:22px; }
  .menu-btn { top:12px; gap:14px; }
  .nav, .menu-btn { font-size:max(18px, 2.75vw); }
  .n-name { font-size:max(18px, 2.75vw); }
  .headline { font-size:max(48px, 8.2vw); bottom:9svh; }
  .big { font-size:max(30px, 8.4vw); }
  .st-world { left:56%; }
  .st-head { top:100px; }
  .st-foot { left:5vw; right:5vw; bottom:4svh; }
  .st-foot .pill { padding-inline:20px; }
  .gallery-link { margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) {
  html.glitching, html.lglitch { filter:none !important; }
  #glitch, #cglitch { display:none; }
  .st-foot.glout { opacity:0; }
  .st-foot.glin { opacity:1; }
}