/* 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: an outline draws itself, the ink writes the three bands, then the outline steps back */
/* its own layer: drawing the sun repaints only the sun, not the page behind it */
.mark-box{--sz:min(38vh,380px,66vw);position:relative;flex:none;width:var(--sz);aspect-ratio:1;contain:layout paint;will-change:transform}
.sun{width:100%;height:100%;overflow:visible;color:var(--on)}
.sun .bd{fill:currentColor}
.sun .ol{opacity:0;transition:opacity .6s ease}
.sun.drawing .ol{opacity:.85;transition:none}
.sun .ol path{fill:none;stroke:currentColor;stroke-width:.3;stroke-linejoin:round;stroke-dasharray:1}
.brush{fill:none;stroke:#fff;stroke-linecap:round;stroke-dasharray:1 1}
@media (prefers-reduced-motion:no-preference){html.js .mark-box{cursor:pointer}}
/* touchscreens: three strips the colour of the page, tilted with the cuts, slide off to the right one after another.
   Only transforms move, so the phone never repaints the sun while it is written. The strips meet in the middle of each cut. */
.covers{display:none}
@media (hover:none) and (prefers-reduced-motion:no-preference){
  html.js .covers{display:block;position:absolute;inset:0;transform:rotate(-4deg);pointer-events:none}
  html.js .covers i{position:absolute;left:-14%;width:128%;background:linear-gradient(90deg,transparent,var(--bg) 8%);will-change:transform}
  html.js .covers i:nth-child(1){top:-20%;height:74.58%}
  html.js .covers i:nth-child(2){top:54.58%;height:16%}
  html.js .covers i:nth-child(3){top:70.58%;height:49.42%}
  html.js .writing .covers i{animation:wipe .7s cubic-bezier(.5,0,.3,1) .25s both}
  html.js .writing .covers i:nth-child(2){animation-duration:.45s;animation-delay:.97s}
  html.js .writing .covers i:nth-child(3){animation-duration:.45s;animation-delay:1.37s}
}
@keyframes wipe{to{transform:translateX(100%)}}

.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 while the sun is written */
@keyframes show{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html.js .head>*{opacity:0;transform:translateY(12px);transition:opacity 1s var(--out),transform 1.2s var(--out)}
  html.js .head>.mono{transition-delay:.25s}
  html.js.arrived .head>*{opacity:1;transform:none}
  html.js:not(.arrived) .head>*{animation:show 0s 4s both}
}
@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)}}