/* Tiny Vinyl brand outline. Same structure and motion as the Oriel outline, in the Tiny Vinyl identity:
   Frost ground, Sleeve white, Obsidian ink and bands, Label Red for buttons and one dot, Fraunces and Instrument Sans,
   one 14 px radius. The identity is written down in the demo copy's BRAND.md.
   Phone first. Each screen is a sticky stage inside a tall section, and brand.js moves it on one beat at a time.
   With scripts off every screen sits in normal flow and reads in full. */
:root{
  --frost:#EEEDE8;
  --sleeve:#FFFFFF;
  --ink:#161414;
  --red:#D2381F;
  --smoke:#66635E;
  --haze:#D6D4CD;
  --on-dark:rgba(238,237,232,.72);
  --line-dark:rgba(238,237,232,.16);
  --r:14px;
  --shadow:0 28px 48px -28px rgba(22,20,20,.45);
  --display:'Fraunces',Georgia,'Times New Roman',serif;
  --body:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:20px;
  --beat:62;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--frost);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased}
main{overflow-x:clip}
p,h1,h2,h3,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{width:100%;max-width:520px;margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.label{font-family:var(--body);font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke)}

/* the lockup: the record mark beside the wordmark in Fraunces 600, soft cut */
.wm{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:22px;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.lockup-s{display:inline-flex;align-items:center;gap:9px}
.mk-s{flex:none;width:26px;height:26px}
.wmt{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:100px;letter-spacing:-2px;fill:currentColor;stroke:currentColor;stroke-width:0}

/* header */
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}

/* 1. cover: the record mark draws itself, then the wordmark traces on */
.cover{height:calc(100vh - 64px);height:calc(100svh - 64px);min-height:440px}
.cover-in{height:100%;display:flex;flex-direction:column;padding-bottom:clamp(28px,6svh,52px)}
.cover-art{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.cover-rec{width:min(54vw,240px,32svh);height:auto;overflow:visible}
.cover-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cover h1{font-family:var(--display);font-optical-sizing:auto;font-weight:400;font-size:clamp(44px,13vw,68px);line-height:1.04;letter-spacing:-.03em}
.cover h1 > span{display:block}
.wmh{height:1.06em;width:auto;aspect-ratio:424/106;overflow:visible;color:var(--ink)}
.cover h1 .l2{color:var(--smoke)}
.cue{flex:none;position:relative;width:1px;height:48px;margin-bottom:8px;background:var(--haze);overflow:hidden}
.cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:18px;background:var(--ink);animation:cue 2.4s cubic-bezier(.45,0,.2,1) infinite}
@keyframes cue{from{transform:translateY(-18px)}to{transform:translateY(48px)}}
/* held back for the first paint, then drawn by brand.js */
.js:not(.rm) .cover .sq,.js:not(.rm) .cover .dr,.js:not(.rm) .cover .dot,.js:not(.rm) .cover .wmt,.js:not(.rm) .cover .l2,.js:not(.rm) .cue{opacity:0}

/* stages */
.stage-in{display:flex;flex-direction:column;padding-top:clamp(56px,9svh,88px);padding-bottom:clamp(40px,7svh,72px)}
.js .scr{position:relative;height:calc((var(--n) * var(--beat) + 60) * 1vh);height:calc((var(--n) * var(--beat) + 60) * 1svh)}
.js .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.js .stage-in{height:100%;padding-top:clamp(22px,4.5svh,44px);padding-bottom:clamp(20px,4svh,40px)}
.js .scr--flat{height:auto}
.js .scr--flat .stage{position:relative;height:auto;min-height:100vh;min-height:100svh}
.js .scr--flat .stage-in{height:auto;min-height:100vh;min-height:100svh}

/* the words that change while the picture holds still: Fraunces, as the page headlines are */
.cap{font-family:var(--display);font-optical-sizing:auto;font-weight:400;font-size:clamp(29px,8.4vw,40px);line-height:1.06;letter-spacing:-.028em;max-width:15ch;text-wrap:balance}
.caps{margin-top:12px}
.caps .cap + .cap{margin-top:14px}
.cap.static{margin-top:12px}
.js .caps{position:relative;height:calc(2.12 * clamp(29px,8.4vw,40px))}
.js .caps .cap{position:absolute;left:0;top:0;right:0;margin:0}
.vis{position:relative;display:flex;align-items:center;justify-content:center;margin-top:28px}
.js .vis{flex:1;min-height:0;margin-top:clamp(14px,3svh,28px)}

/* 2. the idea, typed on, in the headline face */
.idea{font-family:var(--display);font-optical-sizing:auto;font-weight:400;font-size:clamp(40px,12.4vw,66px);line-height:1.02;letter-spacing:-.03em;max-width:10ch;margin-top:20px}
.js .idea{margin:auto 0;min-height:calc(3 * 1.02em);padding-bottom:6svh}
.caret{display:inline-block;width:.07em;height:.74em;margin-left:.06em;vertical-align:-.02em;background:var(--red);animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* 3. the mark */
.lg-vis{flex-direction:column}
.lg{width:100%;max-width:460px;height:auto;max-height:100%;overflow:visible;color:var(--ink)}
.gd{fill:none;stroke:var(--smoke);stroke-width:1.7;opacity:.7}
.go rect{fill:rgba(210,56,31,.08);stroke:var(--red);stroke-width:1.7;stroke-dasharray:4 5;opacity:.85}
.minsize,.ondark{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.js .minsize,.js .ondark{position:absolute;left:0;right:0;bottom:12%;margin:0}
.minsize .lockup-s{gap:8px}
.minsize .mk-s{width:24px;height:24px}
.minsize .wm{font-size:20px}
.dim{position:relative;flex:none;width:9px;height:24px;border-top:1px solid var(--smoke);border-bottom:1px solid var(--smoke);transform-origin:50% 50%}
.dim::after{content:"";position:absolute;left:4px;top:0;bottom:0;border-left:1px solid var(--smoke)}
.ondark{min-height:84px;padding:0 24px;border-radius:var(--r);background:var(--ink);color:var(--frost)}
.js .ondark{left:0;right:0}

/* 4. color: each bar shaped like the thing it paints */
.colors{flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
.bar{position:relative;display:flex;flex-direction:column;justify-content:center;height:clamp(76px,12.4svh,110px);padding:0 18px;border-radius:var(--r)}
.bar b{font-family:var(--display);font-optical-sizing:auto;font-size:24px;font-weight:400;line-height:1.1;letter-spacing:-.02em}
.bar span{font-size:15px;line-height:1.4;letter-spacing:.04em;font-variant-numeric:tabular-nums;font-weight:500}
.bar em{font-style:normal;font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.b-frost{background:var(--frost);box-shadow:inset 0 0 0 1px var(--haze)}
.b-sleeve{background:var(--sleeve);box-shadow:inset 0 0 0 1px var(--haze);width:86%}
.b-obsidian{background:var(--ink);color:var(--frost)}
.b-red{background:var(--red);color:#fff;width:68%}

/* 5. type */
.typeset{flex-direction:column;align-items:stretch;justify-content:center}
.tname{font-family:var(--display);font-optical-sizing:auto;font-size:clamp(70px,22vw,118px);font-weight:400;line-height:.92;letter-spacing:-.04em}
.tname2{font-family:var(--body);font-size:clamp(26px,7.6vw,38px);font-weight:500;line-height:1.1;letter-spacing:-.01em;color:var(--smoke);margin-top:6px;padding-bottom:clamp(14px,2.6svh,26px)}
.ln{font-size:clamp(21px,6.4vw,32px);line-height:1.15;padding:clamp(10px,1.8svh,15px) 0;border-top:1px solid var(--haze)}
.ln:last-child{border-bottom:1px solid var(--haze)}
.f4{font-family:var(--display);font-optical-sizing:auto;font-weight:400;letter-spacing:-.025em}
.fi{font-family:var(--display);font-optical-sizing:auto;font-weight:400;font-style:italic;letter-spacing:-.02em;color:var(--red)}
.s6{font-family:var(--body);font-weight:600;letter-spacing:.005em}
.lb{font-family:var(--body);font-weight:600;font-size:clamp(13px,3.6vw,15px);letter-spacing:.14em;text-transform:uppercase;color:var(--smoke);padding-top:clamp(14px,2.4svh,20px);padding-bottom:clamp(14px,2.4svh,20px)}
.sp .wd{display:inline-block;white-space:nowrap}
.sp .ch{display:inline-block}

/* 6. components, at the size they are on the page */
.parts{flex-direction:column;align-items:stretch;justify-content:center;gap:22px}
.part .spec{margin-top:9px}
.c-btn{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:var(--r);background:var(--red);color:#fff;font-size:17px;font-weight:600;letter-spacing:.01em}
.c-btn--s{min-height:56px;padding:0 20px;flex:none}
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.c-badge{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:var(--r);background:var(--ink);color:var(--frost);font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.c-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.c-badge--red{height:24px;padding:0 10px;background:var(--red);color:#fff;font-size:12px;letter-spacing:.04em}
.c-badge--red::before{display:none}
.c-field{display:flex;align-items:center;min-height:56px;padding:0 16px;border:1px solid var(--haze);border-radius:var(--r);background:var(--sleeve);color:var(--smoke);font-size:17px}
.c-field--s{flex:1;min-width:0}
.c-card{padding:16px;border:1px solid var(--haze);border-radius:var(--r);background:var(--sleeve)}
.cc-t{font-size:15px;font-weight:600;line-height:1.3}
.cc-row{display:flex;gap:8px;margin-top:12px}

/* 7. voice */
.voice{flex-direction:column;align-items:stretch;justify-content:center}
.lines li{font-family:var(--display);font-optical-sizing:auto;font-size:clamp(23px,6.6vw,30px);font-weight:400;line-height:1.2;letter-spacing:-.02em;padding:12px 0 13px;border-top:1px solid var(--haze);min-height:calc(1.2em + 26px)}
.lines li:last-child{border-bottom:1px solid var(--haze)}
.lines .caret{opacity:0}
html:not(.js) .lines .caret{display:none}
.three{display:flex;flex-wrap:wrap;gap:0 .26em;margin-top:clamp(22px,4.6svh,42px);font-family:var(--display);font-optical-sizing:auto;font-size:clamp(38px,11.4vw,58px);font-weight:400;font-style:italic;line-height:1;letter-spacing:-.03em}
.three span{display:inline-block}
.never{margin-top:clamp(22px,4.6svh,42px)}
.never ul{margin-top:10px;border-top:1px solid var(--haze)}
.never li{font-size:17px;line-height:1.35;color:var(--smoke);padding:9px 0 10px;border-bottom:1px solid var(--haze)}

/* 8. what the brand may never do: the old page's green badge and purple box, a recolored mark, a retyped wordmark */
.mis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;width:100%}
.tile{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(104px,16.5svh,146px);background:var(--sleeve);border:1px solid var(--haze);border-radius:var(--r);overflow:hidden}
.wrong{display:flex;align-items:center;justify-content:center}
.old-badge{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:99px;background:linear-gradient(90deg,#00c950,#009966);color:#fff;font-family:'Segoe UI',system-ui,sans-serif;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 8px 14px -4px rgba(0,201,80,.35)}
.old-badge svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.old-box{display:flex;flex-direction:column;gap:7px;width:132px;padding:9px 10px;border:1px solid #e9d4ff;border-radius:10px;background:#faf5ff;color:#6e11b0;font-family:'Segoe UI',system-ui,sans-serif}
.old-box b{font-size:10.5px;line-height:1.2;font-weight:700}
.ob-row{display:flex;gap:5px}
.ob-row i{flex:1;height:20px;border:1px solid #e5e7eb;border-radius:5px;background:#fff}
.ob-row em{display:flex;align-items:center;padding:0 8px;border-radius:5px;background:#9810fa;color:#fff;font-style:normal;font-size:10px;font-weight:600}
.m-mark{width:56px;height:56px;transform:scaleX(1.35)}
.m-type{font-family:'Inter','Segoe UI',system-ui,sans-serif;font-size:clamp(21px,6vw,26px);font-weight:700;line-height:1;letter-spacing:-.025em}
.x{position:absolute;left:9%;right:9%;top:50%;height:2px;margin-top:-1px;background:var(--red);transform:rotate(-27deg)}
.mis .label{margin-top:9px}

/* 9. the brand on real things, one per screen */
.things{flex-direction:column}
.thing{display:flex;align-items:center;justify-content:center;width:100%}
.thing + .thing{margin-top:40px}
.js .thing{position:absolute;inset:0;margin:0}

/* a screen of the launch page, in a phone: a status bar (54 of 844, so 14.4% of the width), then the page at 390 by 790 */
.phone{position:relative;flex:none;height:520px;aspect-ratio:9/19.5;padding:8px;border-radius:46px;background:#141313;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),var(--shadow)}
.js .phone{height:min(100%,540px)}
.ph-scr{position:relative;height:100%;border-radius:38px;overflow:hidden;background:var(--frost);padding-top:14.4%}
.ph-dim{background:#52504F}
.ph-scr picture{display:block;height:100%}
.ph-scr img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.island{position:absolute;top:3%;left:34.5%;width:31%;height:4.2%;border-radius:99px;background:#050505}

/* the email band, directly under the hero */
.band{width:100%;max-width:380px;padding:26px 20px 22px;border-radius:var(--r);background:var(--ink);color:var(--frost);box-shadow:var(--shadow)}
.b-lede{font-family:var(--display);font-optical-sizing:auto;font-size:25px;line-height:1.12;letter-spacing:-.025em}
.b-field{display:flex;align-items:center;height:56px;margin-top:20px;padding:0 16px;border-radius:var(--r);background:var(--frost);color:var(--smoke);font-size:17px}
.b-btn{display:flex;align-items:center;justify-content:center;height:56px;margin-top:10px;border-radius:var(--r);background:var(--red);color:#fff;font-size:17px;font-weight:600}

/* the launch day text */
.sms{width:100%;max-width:380px;padding:20px 16px 24px;border-radius:var(--r);background:var(--sleeve);box-shadow:0 0 0 1px var(--haze),var(--shadow)}
.s-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--haze)}
.s-top .av{width:48px;height:48px}
.s-top b{font-family:var(--display);font-optical-sizing:auto;font-size:17px;font-weight:600;letter-spacing:-.01em}
.s-when{margin-top:14px;text-align:center}
.s-thread{position:relative;margin-top:12px}
.bubble{max-width:88%;padding:11px 14px 12px;border-radius:20px 20px 20px 6px;background:#ECEBE6;font-size:17px;line-height:1.38}
.lnk{text-decoration:underline;text-underline-offset:.16em}
.typing{position:absolute;left:0;bottom:0;display:flex;gap:5px;padding:15px 16px;border-radius:20px 20px 20px 6px;background:#ECEBE6}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--smoke);opacity:.35;animation:dots 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes dots{30%{opacity:.9}60%,100%{opacity:.35}}
html:not(.js) .typing{display:none}

/* 10. close: the lockup, the four colors and the two faces */
.on-dark{background:var(--ink);color:var(--frost)}
.close .stage-in{justify-content:center}
.lk-logo{width:min(88%,360px);height:auto;overflow:visible;color:var(--frost)}
.lk-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:clamp(32px,7svh,64px);padding-top:16px;border-top:1px solid var(--line-dark)}
.chips{display:flex}
.chips li{width:38px;height:38px;border-radius:50%;box-shadow:0 0 0 2px var(--ink)}
.chips li + li{margin-left:-6px}
.c1{background:var(--frost)}
.c2{background:var(--sleeve)}
.chips .c3{background:var(--ink);box-shadow:0 0 0 2px var(--ink),inset 0 0 0 1px rgba(238,237,232,.42)}
.c4{background:var(--red)}
.lk-type{display:flex;align-items:flex-end;gap:10px}
.lk-type .aa{font-family:var(--display);font-optical-sizing:auto;font-size:50px;font-weight:400;line-height:.9;letter-spacing:-.03em}
.lk-type .label{color:var(--on-dark);line-height:1.45}
.closing{max-width:17ch;margin-top:clamp(36px,7svh,64px);font-family:var(--display);font-optical-sizing:auto;font-size:clamp(28px,7.8vw,38px);font-weight:400;line-height:1.08;letter-spacing:-.028em;text-wrap:balance}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:24px;padding:0 24px;font-family:var(--body);font-size:17px;font-weight:600;line-height:1.1;letter-spacing:.01em;text-align:center;text-decoration:none;color:#fff;background:var(--red);border:0;border-radius:var(--r);-webkit-tap-highlight-color:transparent}
.btn:active{filter:brightness(.92)}
.btn:focus-visible{outline:2px solid var(--frost);outline-offset:3px}
.back{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;margin-top:12px;font-size:15px;font-weight:500;color:var(--frost);text-underline-offset:.2em;-webkit-tap-highlight-color:transparent}
.back:focus-visible{outline:2px solid var(--frost);outline-offset:2px}

/* footer, Obsidian as on the launch page */
footer{background:var(--ink);color:var(--frost);padding:0 0 calc(40px + env(safe-area-inset-bottom))}
footer .wrap{border-top:1px solid var(--line-dark);padding-top:32px}

@media (prefers-reduced-motion:reduce){
  .caret,.cue::after,.typing i{animation:none}
}

@media (min-width:600px){
  :root{--gutter:24px}
  .wrap{max-width:600px}
}

@media (min-width:900px){
  :root{--gutter:40px}
  .top .wrap{min-height:88px}
  .wrap{max-width:640px}
  .btn{width:auto;display:inline-flex;align-self:flex-start;padding:0 36px}
}