/* San Labo: one stylesheet for the home page and the text pages. Light and dark follow the system setting. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dm-mono.ttf) format('truetype')}

:root{
  --ink:#242C5E; --paper:#F3F0EA;
  --bg:var(--paper); --on:var(--ink);
  --mute:color-mix(in srgb,var(--on) 75%,transparent);  /* small text */
  --soft:color-mix(in srgb,var(--on) 70%,transparent);  /* the headline's second line */
  --soon:color-mix(in srgb,var(--on) 55%,transparent);  /* an app that isn't out yet */
  --grain:.05;
  --pad:32px;
  --sans:'Instrument Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,Menlo,monospace;
  --out:cubic-bezier(.16,1,.3,1);
  color-scheme:light dark;
}
/* dark: light text on indigo, and the logo's on-dark drawing (its cuts open a touch wider) */
@media (prefers-color-scheme:dark){
  :root{--bg:var(--ink);--on:var(--paper);--soon:color-mix(in srgb,var(--on) 45%,transparent);--grain:.09}
}
svg .dk{display:none}
@media (prefers-color-scheme:dark){svg .lt{display:none}svg .dk{display:inline}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--on);font:400 17px/1.5 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
p,h1,h2,ul{margin:0}
h1,h2{font-weight:400}
svg{display:block}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}

/* the name in the corner: mark box 1.45x the text, gap 0.32x, Instrument Sans Medium */
.hdr{position:absolute;left:0;top:0;z-index:50;padding:24px var(--pad)}
.lock{display:inline-flex;align-items:center;gap:.32em;min-height:44px;font:500 24px/1 var(--sans);letter-spacing:-.01em;text-decoration:none}
.lock svg{width:1.45em;height:1.45em;flex:none;fill:currentColor}

/* ---------- home: one screen ---------- */
.screen{position:relative;min-height:100vh;min-height:100svh;overflow:hidden}
.grain{position:absolute;inset:0;filter:url(#grainf);opacity:var(--grain);pointer-events:none;transform:translateZ(0)}
/* phones and tablets: no grain. The live noise filter is slow there, and at 5% it barely shows on a small screen */
@media (hover:none){.grain{display:none}}
.stack{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:76px 20px 104px;text-align:center}

/* the sun: three band layers, one per band, animated with transforms and opacity only (smooth on phones too) */
.mark-box{--sz:min(38vh,380px,66vw);position:relative;flex:none;width:var(--sz);aspect-ratio:1;contain:layout paint}
.sun,.sun .b,.sun .win,.sun .in{position:absolute;inset:0}
.sun{color:var(--on)}
.sun svg{display:block;width:100%;height:100%;overflow:visible;fill:currentColor}
/* the outline, a hairline under the bands, shown while the sun is being drawn */
.sun .ol{position:absolute;inset:0;fill:none;stroke:currentColor;stroke-width:.3;stroke-linejoin:round;opacity:0;will-change:opacity}
.sun .ol path{stroke-dasharray:1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){html.js .mark-box{cursor:pointer}}

/* each band appears left to right behind a rounded front, like a brush tip. The window moves right while the band
   inside moves left by the same amount, so the band stays put and only the edge travels. Windows run along the cuts (4°). */
html .sun .b{transform:rotate(-4deg)}
html .sun .win{inset:auto;left:-14%;width:128%;overflow:hidden}
html .sun .in{inset:auto;left:calc(var(--sz) * .14);width:var(--sz);height:var(--sz);transform:rotate(4deg)}
html .sun .b0 .win{top:0;height:56%;border-radius:0 calc(var(--sz) * .28) calc(var(--sz) * .28) 0}
html .sun .b0 .in{top:0}
html .sun .b1 .win{top:50%;height:25%;border-radius:0 calc(var(--sz) * .125) calc(var(--sz) * .125) 0}
html .sun .b1 .in{top:calc(var(--sz) * -.5)}
html .sun .b2 .win{top:66%;height:34%;border-radius:0 calc(var(--sz) * .17) calc(var(--sz) * .17) 0}
html .sun .b2 .in{top:calc(var(--sz) * -.66)}
@media (prefers-reduced-motion:no-preference){
  html .pre:not(.go) .win{transform:translateX(-100%)}
  html .pre:not(.go) .in{transform:translateX(128%) rotate(4deg)}
  html .pre:not(.go) .ol path{stroke-dashoffset:1}
  html .go .ol{animation:sl-ol 3.55s linear both}
  html .go .ol path{animation:sl-draw .77s cubic-bezier(.65,0,.35,1) .25s both}
  html .go .ol .o1{animation-delay:.43s}
  html .go .ol .o2{animation-delay:.61s}
  html .go .win{animation:sl-win .65s cubic-bezier(.4,0,.6,1) 1.33s both}
  html .go .in{animation:sl-in .65s cubic-bezier(.4,0,.6,1) 1.33s both}
  html .go .b1 :is(.win,.in){animation-duration:.41s;animation-delay:2.08s}
  html .go .b2 :is(.win,.in){animation-duration:.41s;animation-delay:2.55s}


}
/* once written, the turned windows go away so the resting logo is drawn straight (crisp edges) */
html .mark-box.done .sun .ol{display:none}
html .mark-box.done .sun .b,html .mark-box.done .sun .b .win,html .mark-box.done .sun .b .in{inset:0;width:auto;height:auto;transform:none;animation:none;overflow:visible;border-radius:0}
/* the words: the headline follows the ink, and the name in the corner writes itself as the last band lands */
.sig{display:inline-block;overflow:hidden;margin:-.15em -.3em -.2em 0;border-radius:0 .75em .75em 0}
.sig-in{display:inline-block;padding:.15em .3em .2em 0}
@media (prefers-reduced-motion:no-preference){
  html.wait .home .sig{transform:translateX(-100%)}
  html.wait .home .sig-in{transform:translateX(100%)}
  html.wait.sign .home .sig{animation:sl-win .6s cubic-bezier(.4,0,.6,1) 2.8s both}
  html.wait.sign .home .sig-in{animation:sl-sig .6s cubic-bezier(.4,0,.6,1) 2.8s both}
  html.wait .head>.line{transition-delay:1.45s}
  html.wait .head>.mono{transition-delay:1.85s}
}
@keyframes sl-sig{from{transform:translateX(100%)}to{transform:none}}
@keyframes sl-win{from{transform:translateX(-100%)}to{transform:none}}
@keyframes sl-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes sl-ol{0%,83%{opacity:.85}to{opacity:0}}
@keyframes sl-in{from{transform:translateX(128%) rotate(4deg)}to{transform:rotate(4deg)}}

.head{display:flex;flex-direction:column;align-items:center}
.line{display:flex;flex-direction:column;align-items:center;margin-top:clamp(28px,4.4vh,48px);max-width:22em;font:400 clamp(28px,2.8vw,42px)/1.12 var(--sans);letter-spacing:-.015em;text-wrap:balance}
.line .beat{display:block;font-weight:500;letter-spacing:-.022em}
.line .beat+.beat{margin-top:.3em;font-size:.7em;font-weight:400;letter-spacing:-.005em;color:var(--soft)}

.mono{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:clamp(56px,8.4vh,84px);font:400 12.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
@media (hover:none){.mono{margin-top:clamp(24px,3.8vh,38px)}}
.applist{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 40px}
.app{display:inline-flex;align-items:baseline;gap:10px;min-height:44px;padding-top:6px;text-decoration:none}
.app .nm{position:relative;font:500 20px/1.25 var(--sans);letter-spacing:-.01em;text-transform:none}
.app small{font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
/* not out yet: lighter, and nothing happens on hover */
.app.soon{cursor:default}
.app.soon .nm,.app.soon small{color:var(--soon)}
.mrow{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 30px}
.mrow a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none}

/* the app's icon waits under its name and pops up on hover or keyboard focus */
.peek{position:absolute;left:50%;bottom:calc(100% + 10px);width:56px;height:56px;pointer-events:none;opacity:0;
  transform:translate(-50%,14px) scale(.7);transform-origin:50% 100%;transition:transform .26s cubic-bezier(.3,1.35,.5,1),opacity .16s ease}
.peek img{display:block;width:56px;height:56px;border-radius:22.37%;box-shadow:0 0 0 1px color-mix(in srgb,var(--on) 10%,transparent)}
@media (hover:hover){.app:hover .peek{opacity:1;transform:translate(-50%,0) scale(1)}}
.app:focus-visible .peek{opacity:1;transform:translate(-50%,0) scale(1)}

/* links: one faint hairline at rest; on hover a short stroke rises under the word at the logo's 4 degrees */
.lk{position:relative;display:inline-block}
.lk::after,.lk::before{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;pointer-events:none}
.lk::after{bottom:-.24em;opacity:.36;transition:opacity .25s ease}
.lk::before{height:1.5px;bottom:-.34em;transform:rotate(-4deg);clip-path:inset(0 100% 0 0);transition:clip-path .36s cubic-bezier(.65,0,.35,1)}
a:hover .lk::before,a:focus-visible .lk::before{clip-path:inset(0)}
a:hover .lk::after,a:focus-visible .lk::after{opacity:0}

.copy{position:absolute;right:var(--pad);bottom:22px;z-index:1;display:flex;align-items:center;gap:22px;margin:0;font:400 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.copy a{display:inline-flex;align-items:center;min-height:44px;color:var(--on);text-decoration:none}

/* arrival: the words rise in (the page's script adds .wait, so without it nothing is hidden) */
@media (prefers-reduced-motion:no-preference){
  html.wait .head>*{opacity:0;transform:translateY(12px);transition:opacity 1s var(--out),transform 1.2s var(--out)}
  html.wait.arrived .head>*{opacity:1;transform:none}
}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important}}

/* ---------- text pages: privacy, support, not found ---------- */
.doc{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.page{flex:1;width:100%;max-width:38rem;margin:0 auto;padding:clamp(124px,18vh,176px) 24px clamp(72px,12vh,128px)}
.page h1{font:500 clamp(38px,4.4vw,56px)/1.06 var(--sans);letter-spacing:-.025em}
.page .when{margin-top:16px;font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.page .lede{margin-top:clamp(28px,4.4vh,44px);font:400 clamp(20px,1.6vw,23px)/1.45 var(--sans);letter-spacing:-.01em}
.page h2{margin-top:clamp(44px,6vh,60px);font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.page p,.page li{font-size:18px;line-height:1.6}
.page .lede+p,.page h2+p,.page h2+ul{margin-top:14px}
.page p+p{margin-top:14px}
.page ul{padding-left:1.1em}
.page li+li{margin-top:8px}
.page a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,currentColor 36%,transparent);transition:text-decoration-color .2s ease}
.page a:hover,.page a:focus-visible{text-decoration-color:currentColor}
.page.nf{display:flex;flex-direction:column;justify-content:center;text-align:center;padding-top:96px}
.doc .copy{position:static;justify-content:flex-end;padding:0 var(--pad) 22px}

/* ---------- phones ---------- */
@media (max-width:760px){
  :root{--pad:20px}
  .hdr{padding:16px var(--pad)}
  .lock{font-size:20px}
  .stack{padding:70px 16px 96px}
  .mark-box{--sz:min(30vh,60vw)}
  .line{font-size:clamp(25px,7vw,30px)}
  .applist{gap:2px 22px}
  .app .nm{font-size:19px}
  .mrow{gap:2px 18px}
  .copy{left:16px;right:16px;bottom:8px;justify-content:center;text-align:center}
  .page{padding-top:112px}
  .page p,.page li{font-size:17px}
  .doc .copy{justify-content:center;padding-bottom:12px}
}
@media (max-height:640px) and (min-width:761px){.mark-box{--sz:min(32vh,340px)}}