/* ---- type ---------------------------------------------------------------- */
/* Both faces are declared once here rather than inside each page. They used to
   live in the embeds' own style blocks, which meant the MagicListr, privacy and
   404 pages -- the three written for this site rather than imported -- silently
   fell back to the body serif for their headings. */
@import url('https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif:opsz@12..24&display=swap');
@font-face{font-family:'aether';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/aether-400.woff2') format('woff2');}
@font-face{font-family:'aether';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/aether-700.woff2') format('woff2');}

/* ---- shared chrome ------------------------------------------------------ */
:root{
  --site:#1980A2; --site-dk:#0F5E78; --ink:#13121A; --paper:#FFFFFF;
  --head:'aether','Hedvig Letters Serif',Georgia,'Times New Roman',serif;
  --body:'Hedvig Letters Serif',Georgia,'Times New Roman',serif;
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
/* Column layout so the page is exactly as tall as the window when its content
   is shorter, and simply grows when it isn't. The home page is one screen; the
   app pages are several. Neither should leave a strip of background showing. */
body{margin:0; background:#000; color:#fff; font-family:var(--body); font-size:17px;
  line-height:1.5; -webkit-font-smoothing:antialiased;
  min-height:100svh; display:flex; flex-direction:column;}
main{flex:1 0 auto; display:flex; flex-direction:column;}
main > *{flex:1 0 auto;}
img{max-width:100%; height:auto;}

/* Skip link: WCAG 2.4.1. Visible the moment it takes focus. */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:#fff; color:#000;
  padding:12px 18px; border-radius:0 0 10px 0; font-size:15px;}
.skip:focus{left:0;}

/* Focus ring everywhere: WCAG 2.4.7, and 3:1 against both the black bar and white page. */
a:focus-visible,button:focus-visible{outline:3px solid #FFD166; outline-offset:3px; border-radius:4px;}

/* ---- top bar ------------------------------------------------------------ */
/* A floating glass pill, as on the Wix site: the bar rides above the page with
   the logo welded to its left end and Contact us to its right. The glass sits
   at 72% white rather than something thinner, because translucency over a dark
   hero is where contrast quietly dies -- at 72% the worst case backdrop (pure
   black) still renders the bar at #B8B8B8, and the ink on it at 9.4:1. */
/* Fixed, not sticky. Sticky kept the bar in normal flow, so it reserved its own
   height at the top of the page and that strip showed as black above the hero.
   Every page already reserves top padding to clear a floating nav -- 132px on
   the hero, 104-120px on the app pages -- because the Wix site had one too. */
.sitebar{position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 22px 0;}
.sitebar .in{max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  gap:18px; padding:5px; border-radius:100px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
          backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 14px 40px -14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.7);}
/* Without backdrop-filter the bar goes opaque rather than washed out, so the
   ink never lands on a background nobody predicted. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sitebar .in{background:rgba(244,243,245,.97);}
}
.sitebar .brand{display:flex; align-items:center; gap:4px; flex:none; text-decoration:none;
  background:#000; color:#fff; border-radius:100px; padding:9px 22px 9px 13px;}
/* The mark is a black disc with the dots punched out, so on the black pill only
   the dots show. It sits left of the B, fading in from the outside edge. */
.sitebar .brand .dust{width:30px; height:30px; display:block; flex:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 2%,#000 70%);
          mask-image:linear-gradient(90deg,transparent 2%,#000 70%);}
/* The wordmark is the serif, not Aether. Aether is the heading face and it is
   a sans -- the logo's letterforms are the high-contrast serif, with Bubby in
   white and Studio a step down in grey, as on the current site. */
.sitebar .brand .word{font-family:'Hedvig Letters Serif',Georgia,'Times New Roman',serif;
  font-size:21px; font-weight:400; color:#B9B9BE; letter-spacing:.005em;
  white-space:nowrap; line-height:1;}
.sitebar .brand .word b{font-weight:400; color:#FFFFFF;}
.sitenav{display:flex; align-items:center; gap:24px; margin:0 auto; flex-wrap:wrap;
  justify-content:center;}
.sitenav a{color:#1A1822; text-decoration:none; font-size:13.5px; letter-spacing:.11em;
  text-transform:uppercase; padding:6px 0; white-space:nowrap;
  border-bottom:1px solid transparent;}
.sitenav a:hover{border-bottom-color:#1A1822;}
.sitenav a[aria-current="page"]{border-bottom-color:#1A1822;}
.sitebar .pill{flex:none; background:#000; color:#fff; border-radius:100px;
  padding:12px 24px; text-decoration:none; font-size:13.5px; letter-spacing:.11em;
  text-transform:uppercase; white-space:nowrap;}
.sitebar .pill:hover{background:#2A2833;}
/* The page-wide focus ring is tuned for black; on the light bar it needs its own. */
.sitebar a:focus-visible{outline:3px solid #1A1822; outline-offset:3px; border-radius:6px;}

/* ---- footer ------------------------------------------------------------- */
.sitefoot{background:#000; color:rgba(255,255,255,.72); font-size:14px;}
.sitefoot .in{max-width:var(--maxw); margin:0 auto; padding:34px 22px;
  display:flex; flex-wrap:wrap; gap:18px 30px; align-items:center;}
.sitefoot a{color:rgba(255,255,255,.82);}
.sitefoot a:hover{color:#fff;}
.sitefoot .right{margin-left:auto; display:flex; align-items:center; gap:18px;}
.sitefoot .soc{display:flex; gap:14px;}
.sitefoot .soc a{display:inline-flex; width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3); align-items:center; justify-content:center;}
.sitefoot .soc svg{width:17px; height:17px; fill:currentColor;}

@media (max-width:760px){
  /* Still every destination visible, just tighter: hiding navigation behind a
     menu costs 39%+ on task time (NN/g), so the answer is smaller, not hidden. */
  .sitebar{padding:10px 14px 0;}
  /* Wrapped over two rows the bar is far taller than the pages' own top
     padding allows for, so reserve the difference here rather than editing
     four separate page sources. */
  main{padding-top:86px;}
  .sitebar .in{flex-wrap:wrap; gap:8px; padding:8px; border-radius:26px;}
  .sitebar .brand{padding:7px 18px 7px 10px;}
  .sitebar .brand .word{font-size:18px;}
  .sitenav{margin:0; width:100%; gap:6px 14px; justify-content:flex-start; padding:0 6px 2px;}
  .sitenav a{font-size:11.5px; letter-spacing:.08em; padding:3px 0;}
  .sitebar .pill{padding:9px 18px; font-size:11.5px; margin-left:auto;}
  .sitefoot .right{margin-left:0; width:100%;}
}

/* ---- home hero --------------------------------------------------------- */
/* The embed filled a Wix element whose height was typed into the editor. Here it
   fills whatever the window leaves after the bar and the footer, with a floor so
   it still reads as a hero on a short window. */
.bh{min-height:560px;}

/* ---- loading state ------------------------------------------------------ */
/* NN/g response-time limits: under a second needs no indicator, so the bar only
   appears after 1s and only while something is still loading. The page itself is
   never blank -- chrome and copy are in the HTML and paint immediately. */
.loadbar{position:fixed; inset:0 0 auto 0; height:3px; z-index:300;
  background:linear-gradient(90deg,#1980A2,#7B68C4,#FC3054); transform-origin:0 50%;
  transform:scaleX(0); opacity:0; transition:transform .45s ease, opacity .25s ease;}
.loadbar.on{opacity:1; transform:scaleX(.72);}
.loadbar.done{transform:scaleX(1); opacity:0; transition:transform .2s ease, opacity .45s ease .15s;}
/* Skeleton: matches the real layout rather than a spinner over nothing. */
.shot{position:relative; background:rgba(255,255,255,.06); border-radius:14px; overflow:hidden;}
.shot::after{content:''; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
  animation:sweep 1.25s linear infinite;}
.shot.ready{background:none;}
.shot.ready::after{display:none; animation:none;}
@keyframes sweep{to{transform:translateX(100%);}}
@media (prefers-reduced-motion:reduce){
  .shot::after{animation:none;}
  .loadbar{transition:opacity .2s ease;}
}