/* Oriel brand outline. Same tokens, header, footer and type as the Oriel launch page (../oriel.css).
   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{
  --dial:#F3EEE4;
  --strap:#211C17;
  --seconds:#E2912F;
  --line:#D6CDBB;
  --muted:#6E655A;
  --tint:#EAE3D6;
  --card:#FBF8F2;
  --on-dark:rgba(243,238,228,.74);
  --line-dark:rgba(243,238,228,.18);
  --gutter:16px;
  --beat:62;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dial);color:var(--strap);font-family:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;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-size:12px;line-height:1.3;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* header: the drawn wordmark and one quiet tag, as on the launch page */
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.logo{display:block;height:30px;width:auto;aspect-ratio:182/72;color:var(--strap)}

/* 1. cover: the mark alone, drawn as the page loads */
.cover{height:calc(100vh - 60px);height:calc(100svh - 60px);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-mark{width:min(60vw,290px,38svh);height:auto;overflow:visible;color:var(--strap)}
.cover-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cover h1{font-weight:400;font-size:clamp(44px,13vw,68px);line-height:1.02;letter-spacing:-.03em}
.cover h1 span{display:block}
.cover h1 .l2{font-weight:300;color:var(--muted)}
.cue{flex:none;position:relative;width:1px;height:48px;margin-bottom:8px;background:var(--line);overflow:hidden}
.cue::after{content:"";position:absolute;left:0;top:0;width:1px;height:18px;background:var(--strap);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 .dr,.js:not(.rm) .cover .dot,.js:not(.rm) .cover h1 span,.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 */
.cap{font-weight:400;font-size:clamp(28px,8.2vw,38px);line-height:1.08;letter-spacing:-.026em;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.16 * clamp(28px,8.2vw,38px))}
.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 */
.idea{font-weight:400;font-size:clamp(40px,11.6vw,62px);line-height:1.04;letter-spacing:-.03em;max-width:10.5ch;margin-top:20px}
.js .idea{margin:auto 0;min-height:calc(3 * 1.04em);padding-bottom:6svh}
.caret{display:inline-block;width:.07em;height:.8em;margin-left:.07em;vertical-align:-.04em;background:var(--seconds);animation:blink 1.06s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* 3. the logo */
.lg-vis{flex-direction:column}
.lg{width:100%;max-width:440px;height:auto;max-height:100%;overflow:visible;color:var(--strap)}
.gd{fill:none;stroke:var(--muted);stroke-width:.8;opacity:.75}
.go circle{fill:none;stroke:var(--muted);stroke-width:.8;stroke-dasharray:2.4 3;opacity:.75}
.minsize{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px}
.js .minsize{position:absolute;left:0;right:0;bottom:19%;margin:0}
.minsize .mini{height:24px;width:auto;aspect-ratio:176/64;color:var(--strap)}
.dim{position:relative;flex:none;width:9px;height:24px;border-top:1px solid var(--muted);border-bottom:1px solid var(--muted);transform-origin:50% 50%}
.dim::after{content:"";position:absolute;left:4px;top:0;bottom:0;border-left:1px solid var(--muted)}
html:not(.js) .lg-alone{display:none}

/* 4. color */
.colors{flex-direction:column;align-items:stretch;justify-content:center;gap:10px}
.bar{display:flex;flex-direction:column;justify-content:center;height:clamp(62px,10.5svh,96px);padding:0 18px;border-radius:2px}
.bar b{font-size:21px;font-weight:500;line-height:1.15}
.bar span{font-size:15px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.b-dial{background:var(--dial);box-shadow:inset 0 0 0 1px var(--line)}
.b-strap{background:var(--strap);color:var(--dial)}
.b-sec{background:var(--seconds);width:52%}
.pairs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.pairs li{display:flex;flex-direction:column;justify-content:space-between;height:clamp(86px,13.5svh,116px);padding:10px 12px 11px;border-radius:2px}
.pairs .aa{font-size:clamp(30px,9vw,40px);line-height:1;letter-spacing:-.02em}
.pairs .r{font-size:12px;font-weight:500;letter-spacing:.06em;line-height:1.3}
.p1,.p3{background:var(--dial);box-shadow:inset 0 0 0 1px var(--line)}
.p2{background:var(--seconds)}
.p3 .aa{color:var(--seconds)}

/* 5. type */
.typeset{flex-direction:column;align-items:stretch;justify-content:center}
.jost{padding-left:.05em;font-size:clamp(92px,31vw,156px);font-weight:400;line-height:.9;letter-spacing:-.045em;padding-bottom:clamp(12px,2.4svh,24px)}
.ln{font-size:clamp(26px,7.6vw,36px);line-height:1.15;letter-spacing:-.018em;padding:clamp(10px,1.9svh,16px) 0;border-top:1px solid var(--line)}
.ln:last-child{border-bottom:1px solid var(--line)}
.w3{font-weight:300}
.w4{font-weight:400}
.w5{font-weight:500}
.sp .wd{display:inline-block;white-space:nowrap}
.sp .ch{display:inline-block}

/* 6. voice */
.voice{flex-direction:column;align-items:stretch;justify-content:center}
.lines li{font-size:clamp(24px,7vw,30px);font-weight:300;line-height:1.2;letter-spacing:-.01em;padding:12px 0 13px;border-top:1px solid var(--line);min-height:calc(1.2em + 26px)}
.lines li:last-child{border-bottom:1px solid var(--line)}
.lines .caret{opacity:0}
html:not(.js) .lines .caret{display:none}
.three{display:flex;flex-wrap:wrap;gap:0 .3em;margin-top:clamp(22px,4.6svh,42px);font-size:clamp(38px,11.4vw,56px);line-height:1;letter-spacing:-.035em}
.three span{display:inline-block}
.never{margin-top:clamp(22px,4.6svh,42px)}
.never ul{margin-top:10px;border-top:1px solid var(--line)}
.never li{font-size:17px;line-height:1.35;color:var(--muted);padding:9px 0 10px;border-bottom:1px solid var(--line)}

/* 7. what the logo may never do */
.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(96px,15.5svh,136px);background:var(--tint);border-radius:2px;overflow:hidden}
.wrong{display:flex;align-items:center;justify-content:center}
.wrong .logo{height:clamp(26px,8vw,34px)}
.m-stretch{transform:scaleX(1.6) scaleY(.76)}
.wrong .m-color{color:#3D6FC4}
.m-shadow{filter:drop-shadow(3px 4px 0 rgba(33,28,23,.3)) drop-shadow(0 0 6px rgba(226,145,47,.8))}
.m-type{font-size:clamp(32px,9.6vw,42px);font-weight:400;line-height:1;letter-spacing:-.01em}
.x{position:absolute;left:9%;right:9%;top:50%;height:2px;margin-top:-1px;background:var(--strap);transform:rotate(-27deg)}
.mis .label{margin-top:9px}

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

/* the launch page, in a phone */
.phone{position:relative;flex:none;height:520px;aspect-ratio:9/19.5;padding:8px;border-radius:46px;background:#17130F;box-shadow:inset 0 0 0 1px rgba(243,238,228,.06),0 30px 46px -30px rgba(33,28,23,.6)}
.js .phone{height:min(100%,540px)}
.ph-scr{position:relative;height:100%;border-radius:38px;overflow:hidden;background:var(--dial);padding-top:14%}
.ph-scr picture{display:block}
.ph-scr img{width:100%;height:auto}
.island{position:absolute;top:3%;left:34.5%;width:31%;height:4.2%;border-radius:99px;background:#0B0907}

/* the box, with the mark set on the lid */
.boxshot{position:relative;flex:none;height:440px;max-height:calc((100vw - 32px) * 1.241);aspect-ratio:780/968;border-radius:2px;overflow:hidden;background:#2E241D}
.js .boxshot{height:min(100%,460px,calc((100vw - 32px) * 1.241))}
.boxshot picture{display:block;height:100%}
.boxshot img{width:100%;height:100%;object-fit:cover}
.lidmark{position:absolute;left:9.35%;top:1.95%;width:13%;height:auto;color:var(--dial);opacity:.82;transform:rotate(-31deg) scaleY(.6)}

/* the strap tag, drawn in CSS */
.tagscene{position:relative;flex:none;height:440px;max-height:calc((100vw - 32px) * 1.4375);aspect-ratio:320/460;container-type:size}
.js .tagscene{height:min(100%,470px,calc((100vw - 32px) * 1.4375))}
.strap{position:absolute;left:10%;top:0;width:31%;height:90%;border-radius:0 0 15.5cqw 15.5cqw;background:linear-gradient(90deg,#3A2416 0%,#5A3922 16%,#6A452A 50%,#5A3922 84%,#3A2416 100%);-webkit-mask-image:linear-gradient(transparent,#000 16%);mask-image:linear-gradient(transparent,#000 16%)}
.strap::before{content:"";position:absolute;left:9%;right:9%;top:0;bottom:3.4cqw;border:2px dashed rgba(232,214,182,.6);border-top:0;border-radius:0 0 12.5cqw 12.5cqw}
.hole{position:absolute;left:50%;width:4.2cqw;height:4.2cqw;margin-left:-2.1cqw;border-radius:50%;background:#1E140C;box-shadow:inset 0 1px 1px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.08)}
.keeper{position:absolute;left:7.5%;top:24%;width:36%;height:7%;border-radius:3px;background:linear-gradient(90deg,#2E1C10,#4F331E 50%,#2E1C10);box-shadow:0 3px 4px rgba(0,0,0,.22)}
.string{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.string path{fill:none;stroke:#8F7F66;stroke-width:1.6;stroke-linecap:round}
.hangtag-wrap{position:absolute;left:50%;top:38%;width:42%;height:50%;transform-origin:50% 9%;transform:rotate(4deg);filter:drop-shadow(0 0 .6px rgba(33,28,23,.45)) drop-shadow(0 10px 12px rgba(33,28,23,.16))}
.hangtag{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;background:var(--card);clip-path:polygon(16% 0,84% 0,100% 10%,100% 100%,0 100%,0 10%)}
.eyelet{width:5cqw;height:5cqw;margin-top:4cqw;border-radius:50%;background:var(--dial);box-shadow:inset 0 0 0 .8cqw #B5A68C}
.hangtag .logo{width:28cqw;height:auto;margin-top:9cqw}
.tag-rule{width:26cqw;margin-top:6cqw;border-top:1px solid var(--line)}
.hangtag .label{margin-top:5cqw;font-size:3.6cqw}
.tag-spec{margin-top:1.4cqw;font-size:4.3cqw;line-height:1.3;color:var(--muted)}

/* the email header */
.mail{width:100%;max-width:380px;border-radius:18px;overflow:hidden;background:var(--card);box-shadow:0 0 0 1px rgba(33,28,23,.1),0 26px 40px -30px rgba(33,28,23,.5)}
.m-meta{padding:18px 18px 16px}
.m-subj{font-size:23px;line-height:1.2;letter-spacing:-.015em}
.m-from{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:15px}
.m-from b{font-weight:500}
.av{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--strap);color:var(--dial)}
.av svg{width:58%;height:auto}
.m-head{display:flex;align-items:center;justify-content:center;height:clamp(92px,15svh,124px);background:var(--strap);color:var(--dial)}
.m-logo{height:clamp(30px,5.2svh,42px);width:auto;aspect-ratio:182/72;overflow:visible}
.m-body{padding:20px 18px 26px;background:var(--dial)}
.m-body p{font-size:20px;line-height:1.3;letter-spacing:-.01em}
.sk{display:block;height:9px;margin-top:12px;border-radius:5px;background:#E2DACB}
.m-body p + .sk{margin-top:18px}
.sk.s{width:62%}

/* the launch day text */
.sms{width:100%;max-width:380px;padding:20px 16px 24px;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px rgba(33,28,23,.1),0 26px 40px -30px rgba(33,28,23,.5)}
.s-top{display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.s-top .av{width:48px;height:48px}
.s-top b{font-size:15px;font-weight:500}
.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:#E8E1D5;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:#E8E1D5}
.typing i{width:8px;height:8px;border-radius:50%;background:var(--muted);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}

/* 9. close: the mark, the three colors and the typeface in one lockup */
.on-dark{background:var(--strap);color:var(--dial)}
.close .stage-in{justify-content:center}
.lk-logo{width:min(76%,300px);height:auto;overflow:visible;color:var(--dial)}
.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;gap:8px}
.chips li{width:40px;height:40px;border-radius:50%}
.c1{background:var(--dial)}
.c2{background:var(--strap);box-shadow:inset 0 0 0 1px rgba(243,238,228,.42)}
.c3{background:var(--seconds)}
.lk-type{display:flex;align-items:baseline;gap:10px}
.lk-type .aa{font-size:50px;font-weight:300;line-height:.9;letter-spacing:-.03em}
.lk-type .label{color:var(--on-dark)}
.closing{max-width:19ch;margin-top:clamp(36px,7svh,64px);font-size:clamp(26px,7.4vw,34px);font-weight:400;line-height:1.14;letter-spacing:-.022em;text-wrap:balance}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-top:24px;padding:0 24px;font-size:17px;font-weight:500;letter-spacing:.02em;line-height:1.1;text-align:center;text-decoration:none;color:var(--strap);background:var(--seconds);border:0;border-radius:2px;-webkit-tap-highlight-color:transparent}
.btn:active{filter:brightness(.94)}
.btn:focus-visible{outline:2px solid var(--dial);outline-offset:3px}

/* footer, as on the launch page */
footer{background:var(--strap);color:var(--dial);padding:0 0 calc(40px + env(safe-area-inset-bottom))}
footer .wrap{border-top:1px solid var(--line-dark);padding-top:32px}
footer .logo{color:var(--dial);height:28px}
footer p{font-size:14px;line-height:1.5;color:var(--on-dark);margin-top:18px}
footer .micro{margin-top:6px}
footer .micro a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;color:var(--dial);text-underline-offset:.2em}
footer .micro a:focus-visible{outline:2px solid var(--dial);outline-offset:2px}

@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:84px}
  .logo{height:32px}
  .wrap{max-width:640px}
  .btn{width:auto;display:inline-flex;padding:0 36px}
}