/* Foundation: tokens, fonts, reset, type, buttons, links, .edge, header, mobile menu, store menu, footer, dialog.
   Sections live in hero.css, chains-send.css, bridge.css and keys.css. docs/DESIGN.md is the contract. */

@font-face{font-family:Newsreader;src:url('../fonts/newsreader.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('../fonts/manrope-latin.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('../fonts/geist-mono.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  /* Colour: only these, from the brand kit. */
  --ink:#1B2B41;
  --mineral:#8DB1C1;
  --paper:#F4F2EC;
  --ink-soft:#2E405A;
  --paper-soft:#E9EAE4;
  --line:#C9D1D4;
  --muted:#4A5A6E;
  --paper-72:rgb(244 242 236 / .72);

  /* Ground. Sections reset these through data-ground. --fg also colours focus rings. */
  --bg:var(--ink);
  --fg:var(--paper);
  --fg-2:var(--paper-72);

  /* Type. */
  --font-display:Newsreader,'Iowan Old Style',Georgia,serif;
  --font-body:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --size-hero:clamp(56px,8.2vw,132px);
  --size-section:clamp(44px,6vw,96px);
  --size-body:clamp(17px,16px + .28vw,20px);

  /* Motion. */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drop:cubic-bezier(.22,1,.36,1);
  --press:120ms;
  --hover-in:140ms;
  --hover-out:200ms;
  --menu-open:250ms;
  --menu-close:150ms;

  /* Layout. */
  --gutter:clamp(20px,4.5vw,64px);
  --wrap:1440px;
  /* One art pixel of a plate shown at cover: about 1 CSS pixel up to 1400 wide, then growing with the viewport. */
  --art-px:max(1px,calc(100vw / 1400));
  /* What focus has to clear when the header is back: its flat ground, then its dissolve. */
  --header-clear:calc(76px + 80 * var(--art-px));
}

/* Reset. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--ink)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font-body);font-size:var(--size-body);line-height:1.55;font-weight:400;font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.menu-open{overflow:hidden}
h1,h2,h3,p,figure,dl,dd,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img,svg,canvas,video{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{margin:0;padding:0;border:0;background:none;cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent}
p{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
/* Moving focus upward parks an element at the top of the screen, where the header returns. */
:is(a,button,input,textarea,summary){scroll-margin-block:var(--header-clear) 24px}
.mobile-trigger{scroll-margin-block:var(--header-clear) 184px}   /* and room for its menu below it */
::selection{background:var(--mineral);color:var(--ink)}
main:focus{outline:none}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:12px;left:12px;z-index:70;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:8px;background:var(--paper);color:var(--ink);font-weight:600;transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* Layout and ground. A section clips sideways bleed without becoming a scroll container, so sticky stages still work. */
.wrap{width:min(var(--wrap),100% - 2 * var(--gutter));margin-inline:auto}
main>section{position:relative;overflow-x:clip}
section[data-ground="ink"],footer[data-ground="ink"]{--bg:var(--ink);--fg:var(--paper);--fg-2:var(--paper-72);background:var(--bg);color:var(--fg)}
section[data-ground="paper"],footer[data-ground="paper"]{--bg:var(--paper);--fg:var(--ink);--fg-2:var(--muted);background:var(--bg);color:var(--fg)}

/* Type. */
h1,.type-hero,h2{font-family:var(--font-display);font-optical-sizing:auto;font-weight:400;line-height:.98;letter-spacing:-.025em}
h1,.type-hero{font-size:var(--size-hero)}
h2{font-size:var(--size-section)}
.nowrap{white-space:nowrap}
.type-2nd{color:var(--fg-2)}

/* The shared stroke for the chevron, plus and check. */
.icon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.store-icon{width:24px;height:24px;flex:none;fill:currentColor}

/* Buttons: Paper fill on night, Ink fill on day. Soft is the third fill the signup button needs. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:12px 24px;border-radius:8px;background:var(--paper);color:var(--ink);font-size:17px;line-height:24px;font-weight:600;white-space:nowrap;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform var(--press) var(--ease-out),background-color var(--hover-out) var(--ease-out)}
.button:active{transform:scale(.97)}
.button-ink{background:var(--ink);color:var(--paper)}
section[data-ground="ink"] .button-ink{box-shadow:inset 0 0 0 1px rgb(244 242 236 / .5)}
.button-soft{background:var(--paper-soft);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .button:hover{background:var(--paper-soft);transition-duration:var(--press),var(--hover-in)}
  .button-ink:hover{background:var(--ink-soft)}
  .button-soft:hover{background:var(--line)}
}
@media (max-width:380px){
  .button{padding-inline:14px;font-size:16px;gap:10px}
}
/* A folded phone: Download Chrome extension no longer fits on one line. */
@media (max-width:319px){
  .button{white-space:normal;line-height:20px}
}

/* Link with a drawn underline. Inline padding gives a 44px target without moving the lines around it. */
.link{--underline-y:calc(100% - 11px - .08em);padding-block:11px;font-weight:500;background:linear-gradient(currentColor,currentColor) no-repeat 0 var(--underline-y) / 100% 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (hover:hover) and (pointer:fine){
  .link:hover{animation:link-draw 340ms var(--ease-in-out)}
}
@keyframes link-draw{
  0%{background-position:100% var(--underline-y);background-size:100% 1.5px}
  45%{background-position:100% var(--underline-y);background-size:0 1.5px}
  46%{background-position:0 var(--underline-y);background-size:0 1.5px}
  100%{background-position:0 var(--underline-y);background-size:100% 1.5px}
}

/* A section's top edge: art above it dissolves into this section's ground. Sits over the section before it. */
.edge{position:absolute;inset-inline:0;bottom:calc(100% - 1px);z-index:1;height:calc(80 * var(--art-px));background-repeat:repeat-x;background-position:0 100%;background-size:calc(512 * var(--art-px)) calc(80 * var(--art-px));image-rendering:pixelated;pointer-events:none}
.edge-ink{background-image:url('../art/edge-ink.webp')}
.edge-paper{background-image:url('../art/edge-paper.webp')}
/* The same dissolve upside down, for the header. Text over art must sit on calm ground, and the first frame's arch runs
   right under the header. Put this inside a stage, above the art: solid Ink for --cap, then dissolving downward. */
.edge-cap{--cap:44px;position:absolute;inset:-2px 0 auto;z-index:1;height:calc(var(--cap) + 2px + 80 * var(--art-px));pointer-events:none}
.edge-cap::before{content:'';position:absolute;inset:0 0 auto;height:calc(var(--cap) + 4px);background:var(--ink)}
.edge-cap::after{content:'';position:absolute;inset:auto 0 0;height:calc(80 * var(--art-px));background:url('../art/edge-ink.webp') repeat-x 0 100% / calc(512 * var(--art-px)) calc(80 * var(--art-px));image-rendering:pixelated;transform:scaleY(-1)}

/* Header: no pill, no bar. Its colour follows the ground under it. In the first screen it has no background at all. Past
   that, it would land on headings, buttons and art when it returns, so it brings the ground with it: flat under the words,
   then the same dissolve the sections use, upside down, so there is never an edge to see. Same idea as .edge-cap. */
.site-header{--fg:var(--paper);--cap:var(--ink);--cap-edge:url('../art/edge-ink.webp');--cap-h:76px;position:fixed;inset:0 0 auto;z-index:50;color:var(--fg);pointer-events:none;transition:color 200ms var(--ease-out)}
html[data-ground="paper"] .site-header{--fg:var(--ink);--cap:var(--paper);--cap-edge:url('../art/edge-paper.webp')}
.site-header::before,.site-header::after{content:'';position:absolute;inset-inline:0;pointer-events:none;opacity:0;transition:opacity 200ms linear}
.site-header::before{top:0;height:var(--cap-h);background:var(--cap)}
.site-header::after{top:calc(var(--cap-h) - 1px);height:calc(80 * var(--art-px));background:var(--cap-edge) repeat-x 0 100% / calc(512 * var(--art-px)) calc(80 * var(--art-px));image-rendering:pixelated;scale:1 -1}
html.header-cap .site-header:is(:not(.is-hidden),:has(:focus-visible))::before,html.header-cap .site-header:is(:not(.is-hidden),:has(:focus-visible))::after{opacity:1}
body.menu-open .site-header::before,body.menu-open .site-header::after{opacity:0}
.masthead{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:16px max(var(--gutter),calc((100% - var(--wrap)) / 2));padding-top:max(16px,env(safe-area-inset-top));transition:transform 200ms var(--ease-out)}
.site-header.is-hidden .masthead{transform:translateY(-110%)}
.site-header:has(:focus-visible) .masthead{transform:none}
.masthead a,.masthead button{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;min-height:44px}
.brand-mark{display:block;width:40px;height:40px;background:currentColor;-webkit-mask:url('../img/pavilion-mark-mono.svg') center / contain no-repeat;mask:url('../img/pavilion-mark-mono.svg') center / contain no-repeat}
@media (forced-colors:active){
  .brand-mark{forced-color-adjust:none;background:CanvasText}
}
.brand-type{display:flex;flex-direction:column;gap:2px}
.brand-name{font-size:24px;line-height:24px;font-weight:700;letter-spacing:-.04em}
.brand-product{font-size:12px;line-height:16px;font-weight:500;letter-spacing:.08em}
.nav-links{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);font-size:16px;line-height:22px;font-weight:500}
.nav-links a:not(.link){position:relative;display:flex;align-items:center;min-height:44px}
.nav-links a:not(.link)::after{content:'';position:absolute;inset:auto 0 8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--hover-out) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .nav-links a:not(.link):hover::after{transform:scaleX(1);transition-duration:var(--hover-in)}
}
.menu-toggle{display:none;position:relative;width:44px;height:44px;margin-right:-10px;color:inherit}
.menu-toggle span{position:absolute;left:10px;width:24px;height:2px;border-radius:1px;background:currentColor;transition:transform 200ms var(--ease-out)}
.menu-toggle span:first-child{top:17px}
.menu-toggle span:last-child{top:25px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.mobile-menu{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:safe center;gap:4px;padding:112px var(--gutter) 48px;overflow-y:auto;background:var(--ink);color:var(--paper);pointer-events:auto;animation:mobile-menu-in 200ms var(--ease-out)}
.mobile-menu a{display:flex;align-items:center;min-height:64px;font-family:var(--font-display);font-optical-sizing:auto;font-size:clamp(44px,13vw,72px);font-weight:400;line-height:1.05;letter-spacing:-.025em}
@keyframes mobile-menu-in{from{opacity:0}}
body.menu-open .site-header{--fg:var(--paper)}
body.menu-open .masthead{transform:none}
@media (max-width:700px){
  .nav-links{display:none}
  .menu-toggle{display:block}
  .brand{gap:10px}
  .brand-mark{width:34px;height:34px}
  .brand-name{font-size:20px;line-height:20px}
  :root{--header-clear:calc(60px + 80 * var(--art-px))}
  .site-header{--cap-h:60px}
  .masthead{padding-block:max(10px,env(safe-area-inset-top)) 10px}
  /* With no JS the toggle can do nothing, so the links stay reachable. */
  html:not(.js) .masthead{flex-wrap:wrap;gap:0 24px}
  html:not(.js) .nav-links{display:flex;flex-wrap:wrap;gap:0 20px}
  html:not(.js) .menu-toggle{display:none}
}
html:not(.js) .site-header{position:absolute}

/* The two calls to action, side by side: Sign up is the primary, Follow on X the outlined secondary. Each is as wide as its
   label. Sign up opens its email field in the same space, so nothing moves. On a phone they share the row in halves. */
.cta{width:min(100%,520px);pointer-events:auto}
.cta-body{display:grid}
.cta-row,.cta-form{grid-area:1/1;min-width:0}
.cta-row{display:flex;justify-content:var(--cta-justify,flex-start);gap:8px}
.cta-button{gap:10px}
.cta-row a.cta-button{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px rgb(244 242 236 / .5)}
@media (hover:hover) and (pointer:fine){
  .cta-row a.cta-button:hover{background:var(--ink-soft)}
}
@media (max-width:520px){
  .cta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cta-button{width:100%;padding-inline:12px}
}
.cta-button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cta.is-open .cta-row{visibility:hidden}
.cta-form{display:flex;align-items:stretch;gap:8px;animation:cta-in 180ms var(--ease-out)}
.cta-form[hidden]{display:none}
@keyframes cta-in{from{opacity:0}}
.cta-input{flex:1 1 0;min-width:0;min-height:56px;padding:12px 16px;border:0;border-radius:8px;background:var(--ink);box-shadow:inset 0 0 0 1px rgb(244 242 236 / .5);color:var(--paper);caret-color:var(--paper);font-size:17px;line-height:24px;appearance:none;-webkit-appearance:none;transition:box-shadow var(--hover-out) var(--ease-out)}
.cta-input::placeholder{color:var(--paper-72);opacity:1}
.cta-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--paper);transition-duration:var(--hover-in)}
.cta-input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--mineral)}
.cta-submit{flex:none;padding-inline:20px}
.cta-close{flex:none;display:grid;place-items:center;width:44px;border-radius:8px;color:var(--paper);background:var(--ink)}
.cta-close .icon{transform:rotate(45deg)}
.cta-status{margin-top:8px;font-size:16px;line-height:22px;font-weight:500;color:var(--paper);text-wrap:balance}
.cta-status:empty{display:none}
.cta-soon{margin-top:16px;font-size:var(--size-body);line-height:1.4;font-weight:500}
.label-short{display:none}
@media (max-width:420px){
  .label-long{display:none}
  .label-short{display:inline}
}
@media (max-width:340px){
  .cta-button svg{display:none}
}
/* The sign-up needs a script to say anything honest, so without one the page offers X alone. */
html:not(.js) .cta-signup{display:none}
html:not(.js) .cta-row{grid-template-columns:minmax(0,1fr)}
html:not(.js) .cta-row a.cta-button{background:var(--paper);color:var(--ink);box-shadow:none}

/* Footer. */
/* The same footer as the bridge site: brand and the maker's line on the left, link columns, the pavilion, then a meta row. */
.site-footer{padding-block:clamp(56px,6vw,88px) clamp(24px,3vw,40px);font-size:16px}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.footer-columns{display:grid;grid-template-columns:repeat(2,minmax(0,auto));justify-content:start;gap:32px clamp(32px,6vw,96px);margin-top:36px}
.footer-columns h3{margin-bottom:8px;font-family:var(--font-body);font-size:15px;line-height:20px;font-weight:500;letter-spacing:0;color:var(--fg-2)}
.footer-columns a,.footer-meta a,.footer-meta button{position:relative;display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.footer-columns a{display:flex;width:fit-content;font-weight:500}
.footer-columns a::after,.footer-meta a::after,.footer-meta button::after{content:'';position:absolute;inset:auto 0 8px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--hover-out) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .footer-columns a:hover::after,.footer-meta a:hover::after,.footer-meta button:hover::after{transform:scaleX(1);transition-duration:var(--hover-in)}
}
@media (max-width:640px){.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The maker's line: the family mark at text size, and the whole line is the link. */
.footer-labs{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:20px;font-size:15px;line-height:20px;color:var(--fg-2);transition:color var(--hover-out) var(--ease-out)}
.footer-labs .brand-mark{width:22px;height:22px;color:var(--fg)}
.footer-labs strong{font-weight:600;color:var(--fg)}
@media (hover:hover) and (pointer:fine){
  .footer-labs:hover{color:var(--fg);transition-duration:var(--hover-in)}
}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;margin-top:12px;font-size:15px;line-height:20px;color:var(--fg-2)}
.footer-copyright{margin-right:8px}
/* On a phone the copyright takes its own line, so the three links stay together instead of leaving one behind. */
@media (max-width:460px){
  .footer-copyright{flex:0 0 100%;margin:0;padding-block:8px 0}
}
@media (max-width:360px){
  .footer-meta{gap:0 14px}
}
.footer-art{width:clamp(120px,17vw,240px);height:auto}
@media (min-width:1180px){
  .footer-grid{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:'brand links art' 'labs links art' 'meta meta meta';grid-template-rows:auto 1fr auto;gap:0 clamp(40px,6vw,104px);align-items:start}
  .footer-copy{display:contents}
  .footer-copy>.brand{grid-area:brand}
  .footer-columns{grid-area:links;margin-top:0}
  .footer-labs{grid-area:labs;margin-top:16px;white-space:nowrap}
  .footer-art{grid-area:art;align-self:end;width:clamp(200px,19vw,300px);margin-bottom:-8px}
  .footer-meta{grid-area:meta;margin-top:clamp(32px,4vw,56px)}
  .footer-copyright{margin-right:auto}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-art{justify-self:end;margin-top:-16px}
}
@media (min-width:2400px){
  .site-footer,.footer-columns h3,.footer-meta,.footer-labs{font-size:clamp(16px,.66vw,23px);line-height:1.4}
}

/* Legal dialog. */
html:has(dialog[open]){overflow:hidden}
dialog{--fg:var(--ink);--fg-2:var(--muted);width:min(560px,100vw - 32px);max-height:calc(100dvh - 32px);padding:40px;border:0;border-radius:12px;background:var(--paper);color:var(--ink);box-shadow:0 24px 64px rgb(27 43 65 / .4)}
dialog[open]{animation:dialog-in 200ms var(--ease-out)}
dialog::backdrop{background:rgb(27 43 65 / .64);animation:dialog-backdrop-in 200ms var(--ease-out)}
@keyframes dialog-in{from{opacity:0;transform:scale(.97)}}
@keyframes dialog-backdrop-in{from{opacity:0}}
dialog h2{font-size:clamp(36px,5vw,48px);padding-right:44px}
dialog p{margin-top:20px;font-size:16px;line-height:1.6;color:var(--muted)}
.dialog-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;transition:background-color var(--hover-out) var(--ease-out)}
.dialog-close .icon{transform:rotate(45deg)}
.dialog-done{margin-top:28px}
@media (hover:hover) and (pointer:fine){
  .dialog-close:hover{background:var(--paper-soft);transition-duration:var(--hover-in)}
}
@media (max-width:480px){
  dialog{padding:32px 24px 24px}
}

/* A 4K screen at 100% scaling: the art scales with the screen, so the words have to come along or they turn into postage
   stamps. Above 2400px only. A 4K screen at 200% reports 1920 and never gets here. */
@media (min-width:2400px){
  :root{--wrap:2720px;--gutter:clamp(64px,4.5vw,160px);--size-hero:clamp(132px,6.4vw,248px);--size-section:clamp(96px,4.4vw,170px);--size-body:clamp(20px,.917vw,36px)}
  /* Everything grows by the headings' factor (viewport / 2182), so body, buttons and the header keep the proportions they
     have at 1440: a button is 66px with a 20px label at 2560, and 99px with a 30px label at 3840. */
  .button{min-height:clamp(56px,2.566vw,99px);padding-inline:clamp(24px,1.1vw,42px);font-size:clamp(17px,.779vw,30px);line-height:1.42}
  .nav-links{font-size:clamp(16px,.733vw,28px);line-height:1.375}
  .brand{gap:clamp(12px,.55vw,21px)}
  .brand-mark{width:clamp(40px,1.833vw,71px);height:clamp(40px,1.833vw,71px)}
  .brand-name{font-size:clamp(24px,1.1vw,42px);line-height:1}
  .brand-product{font-size:clamp(12px,.55vw,21px);line-height:1.34}
  .masthead{padding-block:max(clamp(16px,.733vw,28px),env(safe-area-inset-top)) clamp(16px,.733vw,28px)}
  .site-header{--cap-h:clamp(76px,3.483vw,134px)}
  :root{--header-clear:calc(clamp(76px,3.483vw,134px) + 80 * var(--art-px))}
  .cta{width:min(100%,clamp(520px,23.83vw,915px))}
  .cta-button svg{width:clamp(20px,.917vw,35px);height:clamp(20px,.917vw,35px)}
  .cta-input{min-height:clamp(56px,2.566vw,99px);padding-inline:clamp(16px,.733vw,28px);font-size:clamp(17px,.779vw,30px)}
  .cta-close{width:clamp(44px,2.016vw,77px)}
  .cta-status{font-size:clamp(16px,.733vw,28px);line-height:1.4}
}

/* Reduced motion: the menu, dialog and press keep their opacity or lose their travel. */
@media (prefers-reduced-motion:reduce){
  .button:active{transform:none}
  .link:hover{animation:none}
  .menu-toggle span{transition:none}
  .masthead{transition:opacity 200ms linear}
  .site-header.is-hidden .masthead{transform:none;opacity:0}
  .site-header.is-hidden .masthead :is(a,button){pointer-events:none}
  .site-header:has(:focus-visible) .masthead{opacity:1}
  dialog[open]{animation:dialog-backdrop-in 200ms linear}
}