/* Fit With Riley, opening soon. Rides on riley.css: its two faces (bone and ink), Fraunces and Inter, the dusty blue
   for the action, the arc of light that breathes behind the hero. This file only lays out the one screen: the mark and
   the sun and moon at the top, the words and the field in the middle, the links along the bottom, the About block in
   flow below. Nothing is pinned and nothing is fixed but the shared consent bar; the page scrolls to the About block. */
.rc{min-height:100vh;min-height:100svh}
.rc-stage{position:relative;overflow:hidden;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) max(var(--gut),env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(var(--gut),env(safe-area-inset-left))}

/* the arc: riley.css draws it and breathes it; here it rises from below the bottom line */
.rc-arc{--S:min(1500px,150vw);bottom:calc(var(--S) * -.5 - 40px);transform:none}
@media (max-width:720px){.rc-arc{--S:200vw;bottom:calc(var(--S) * -.5 + 10px)}}
@media (max-height:620px) and (min-width:721px){.rc-arc{bottom:calc(var(--S) * -.5 - 180px)}}

/* the top: the name in Fraunces, the appearance switch */
.rc-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px}
.rc-mark{font:400 1.14rem/1 var(--serif);letter-spacing:-.005em;color:var(--ink)}

/* the middle */
.rc-col{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  width:100%;max-width:980px;margin:0 auto;padding:clamp(32px,7vh,72px) 0 clamp(40px,9vh,96px)}
.rc-head{margin:22px auto 0;max-width:15em;font-size:clamp(2.35rem,5.4vw,5rem);padding-inline:.08em}
.rc-head .ln{display:block;text-wrap:balance}
.rc-sub{margin:28px auto 0;max-width:52ch;text-wrap:balance;font-size:clamp(1.02rem,1.3vw,1.16rem)}
.rc-door{width:100%;max-width:520px;margin:36px auto 0}
.rc-row{display:flex;align-items:stretch;gap:8px;padding:6px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line2),0 18px 40px -28px color-mix(in srgb,var(--shade) 45%,transparent);transition:box-shadow .3s}
.rc-row:focus-within{box-shadow:inset 0 0 0 1px var(--blue),0 0 0 3px color-mix(in srgb,var(--blue) 22%,transparent),0 18px 40px -28px color-mix(in srgb,var(--shade) 45%,transparent)}
.rc-row.bad{box-shadow:inset 0 0 0 1px var(--err),0 0 0 3px color-mix(in srgb,var(--err) 18%,transparent)}
.rc-row input{flex:1;min-width:0;min-height:48px;padding:0 8px 0 18px;border:0;border-radius:999px;background:transparent;color:var(--ink);font:400 1rem/1.2 var(--sans);outline:none;-webkit-appearance:none;appearance:none}
.rc-row input::placeholder{color:var(--stone);opacity:1}
.rc-row .rl-btn{min-height:48px;padding:0 24px;flex:none}
.rc-row .rl-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rc-row .rl-btn[disabled]{opacity:.7}
.rc-hp{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}
.rc-note{margin:16px auto 0;max-width:46ch;min-height:2.9em;line-height:1.6}
.rc-note.err{color:var(--err)}
.rc-done{padding:8px 0}
.rc-done-line{font:300 clamp(1.5rem,2.6vw,2rem)/1.2 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.rc-done-sub{margin-top:12px;color:var(--ink2)}
.rc-done.in{animation:rc-in .7s cubic-bezier(.2,.7,.2,1) both}

/* the bottom line: the time in Vancouver, the About and legal links, Instagram */
.rc-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;font-size:.84rem;color:var(--stone)}
.rc-status{font-variant-numeric:tabular-nums}
.rc-links{display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.rc-links a,.rc-ig{display:inline-flex;align-items:center;min-height:44px;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;transition:text-decoration-color .25s,color .25s}
.rc-links a:hover,.rc-ig:hover{color:var(--blue);text-decoration-color:currentColor}
.rc-ig[hidden]{display:none}
@media (max-width:720px){
  .rc-col{padding:20px 0 36px}
  .rc-door{margin-top:28px}
  .rc-sub{margin-top:22px}
  .rc-bottom{flex-direction:column;gap:2px;text-align:center}
  .rc-links{gap:0 14px}
  .rc-row{flex-direction:column;border-radius:28px;padding:6px}
  .rc-row input{min-height:50px;text-align:center;padding:0 12px}
  .rc-row .rl-btn{width:100%;min-height:50px}
}

/* the About block below the screen, on the page's own face (its inline colours are the palette's light ones) */
.rc-flow .nv-about{--a-ink:var(--paper)!important;--a-bone:var(--ink)!important;--a-stone:var(--stone)!important;border-top-color:var(--line)}
.rc-flow .nv-about .nv-copy{border-top-color:var(--line)}
.rc-flow .nv-about .nv-mark{font:400 1.2rem/1.2 var(--serif);letter-spacing:-.005em}
.rc-flow .nv-about a:focus-visible{outline-color:var(--blue)}

/* the arrival: the words rise in turn, once */
.js .rc-up{opacity:0;transform:translate3d(0,14px,0);animation:rc-in .9s cubic-bezier(.2,.7,.2,1) forwards}
.js #eyebrow{animation-delay:.1s}.js #head{animation-delay:.22s}.js #sub{animation-delay:.42s}.js #door{animation-delay:.56s}.js #note{animation-delay:.68s}.js .rc-bottom{animation-delay:.8s}
@keyframes rc-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js .rc-up,.rc-done.in{opacity:1;transform:none;animation:none}
  .rc-row,.rc-links a,.rc-ig{transition:none}
}