/* 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;
  --mineral-deep:#6B93A6;
  --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,.type-section{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,.type-section{font-size:var(--size-section)}
.type-body{font-size:var(--size-body);line-height:1.55}
.type-2nd{color:var(--fg-2)}
.type-mono{font-family:var(--font-mono);font-weight:400}

/* 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}
}

/* 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)}

/* Stubs only. Goes away with the last stub. */
.stub{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px;min-height:100svh;padding-block:120px 200px}

/* 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((100vw - 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;justify-content:center;min-width:44px;min-height:44px}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)!important}
.mobile-menu a[aria-current="page"]{color:var(--mineral)}
.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:10px}
  .masthead{padding-top:max(10px,env(safe-area-inset-top))}
  /* 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}

/* Footer. */
.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(3,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{display:flex;align-items:center;min-height:44px;font-weight:500;width:fit-content}
@media (max-width:640px){.footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
.footer-columns a,.footer-meta a{position:relative;display:inline-flex;align-items:center;min-width:44px;min-height:44px}
.footer-columns a{position:relative;display:flex}
.footer-columns a::after,.footer-meta a::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{transform:scaleX(1);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}
.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-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}
  .footer-copyright{flex-basis:100%;margin:0 0 4px}
}

/* Dialogs. */
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)}
  /* Height, padding and label keep the 56 : 24 : 17 proportion of the base button. */
  .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}
  .masthead .brand-mark,.site-footer .brand>.brand-mark{width:clamp(40px,1.7vw,62px);height:clamp(40px,1.7vw,62px)}
  .brand-name{font-size:clamp(24px,1vw,37px);line-height:1}
  .brand-product{font-size:clamp(12px,.5vw,18px);line-height:1.35}
  .site-footer,.footer-columns h3,.footer-meta,.footer-labs{font-size:clamp(16px,.66vw,23px);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}
  .store-flyout,.mobile-download:is(:hover,:focus-within,.is-open) .store-flyout,.mobile-download.is-dismissed .store-flyout{transform:none}
  .mobile-trigger>.icon,.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}
}