/* Legal pages — same palette and type as the landing page. */

@font-face {
   font-family: 'Cormorant Garamond';
   src: url('../assets/fonts/CormorantGaramond.woff2') format('woff2-variations'),
      url('../assets/fonts/CormorantGaramond.woff2') format('woff2');
   font-weight: 300 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Karla';
   src: url('../assets/fonts/Karla.woff2') format('woff2-variations'),
      url('../assets/fonts/Karla.woff2') format('woff2');
   font-weight: 200 800;
   font-style: normal;
   font-display: swap;
}

:root {
   --ink: #0b0d24;
   --panel: #0d0f28;
   --bright: #e8e4ff;
   --text: #9d98c4;
   --soft: #c9c4e8;
   --dim: #6f6a95;
   --gold: #e9b142;
   --line: rgba(200, 191, 255, .12);
   --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
   --serif: 'Cormorant Garamond', Georgia, serif;
}

*,
*::before,
*::after {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
   background: var(--ink);
}

body {
   position: relative;
   min-height: 100vh;
   font-family: 'Karla', 'Avenir Next', Helvetica, Arial, sans-serif;
   font-size: 16px;
   color: var(--text);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
}

::selection {
   background: rgba(233, 177, 66, .3);
   color: #fff;
}

a {
   color: #c8bfff;
   text-decoration: none;
   border-bottom: 1px solid rgba(200, 191, 255, .28);
}

a:hover {
   color: #fff;
   border-bottom-color: var(--gold);
}

/* Background layers, matched to the landing page. */
@keyframes drift {
   from {
      transform: translate3d(0, 0, 0) scale(1);
   }

   to {
      transform: translate3d(4vw, 4vh, 0) scale(1.14);
   }
}

@keyframes drift2 {
   from {
      transform: translate3d(0, 0, 0) scale(1.06);
   }

   to {
      transform: translate3d(-5vw, -4vh, 0) scale(.94);
   }
}

.sky {
   position: fixed;
   inset: 0;
   z-index: 0;
   overflow: hidden;
   pointer-events: none;
   background: linear-gradient(178deg, #0b0d24 0%, #12142f 40%, #171a3d 100%);
}

.sky__glow {
   position: absolute;
   width: 70vmax;
   height: 46vmax;
   top: -26vmax;
   left: -14vmax;
   border-radius: 50%;
   filter: blur(90px);
   opacity: .42;
   background: radial-gradient(closest-side, rgba(125, 55, 255, .6), rgba(125, 55, 255, 0));
   animation: drift 40s cubic-bezier(.22, .61, .36, 1) infinite alternate;
}

.sky__glow--gold {
   width: 56vmax;
   height: 38vmax;
   top: 52vh;
   left: auto;
   right: -20vmax;
   opacity: .3;
   background: radial-gradient(closest-side, rgba(233, 177, 66, .32), rgba(233, 177, 66, 0));
   animation: drift2 52s cubic-bezier(.22, .61, .36, 1) infinite alternate;
}

.sky__stars {
   position: absolute;
   inset: 0;
   opacity: .7;
   background-repeat: no-repeat;
   background-image:
      radial-gradient(1px 1px at 11% 14%, rgba(232, 228, 255, .55), transparent),
      radial-gradient(1px 1px at 29% 58%, rgba(232, 228, 255, .4), transparent),
      radial-gradient(1.3px 1.3px at 44% 8%, rgba(232, 228, 255, .5), transparent),
      radial-gradient(1px 1px at 58% 31%, rgba(232, 228, 255, .35), transparent),
      radial-gradient(1.2px 1.2px at 71% 72%, rgba(232, 228, 255, .45), transparent),
      radial-gradient(1px 1px at 83% 19%, rgba(232, 228, 255, .4), transparent),
      radial-gradient(1.4px 1.4px at 92% 61%, rgba(232, 228, 255, .4), transparent),
      radial-gradient(1px 1px at 17% 88%, rgba(232, 228, 255, .35), transparent),
      radial-gradient(1.1px 1.1px at 63% 94%, rgba(232, 228, 255, .4), transparent);
}

.sky__grid {
   position: absolute;
   inset: 0;
   max-width: 1280px;
   margin: 0 auto;
   opacity: .4;
   background-image: linear-gradient(to right, rgba(200, 191, 255, .055) 1px, transparent 1px);
   background-size: calc(100% / 12) 100%;
}

.sky__noise {
   position: absolute;
   inset: 0;
   opacity: .28;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* Header */
.masthead {
   position: relative;
   z-index: 5;
   border-bottom: 1px solid var(--line);
}

.masthead__inner {
   max-width: 1280px;
   margin: 0 auto;
   padding: 20px clamp(20px, 3.6vw, 44px);
   display: flex;
   align-items: center;
   gap: 28px;
}

.brand {
   display: inline-flex;
   align-items: baseline;
   gap: 11px;
   margin-right: auto;
   border: 0;
}

.brand img {
   width: 34px;
   height: 34px;
   border-radius: 8px;
   align-self: center;
   border: 1px solid rgba(200, 191, 255, .18);
}

.brand__name {
   font-family: var(--serif);
   font-weight: 400;
   font-size: 26px;
   letter-spacing: .02em;
   color: var(--bright);
}

.brand__tag {
   font-family: var(--mono);
   font-size: 9.5px;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--dim);
   white-space: nowrap;
}

.store {
   display: inline-flex;
   align-items: center;
   gap: 9px;
   flex: none;
   padding: 9px 16px 9px 13px;
   border: 0;
   border-radius: 3px;
   background: var(--bright);
   color: var(--ink);
   font-family: var(--mono);
   font-size: 10px;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 600;
   white-space: nowrap;
}

.store:hover {
   background: var(--gold);
   color: var(--ink);
}

.store svg {
   width: 14px;
   height: 17px;
   flex: none;
}

/* Document */
.legal {
   position: relative;
   z-index: 4;
   max-width: 1280px;
   margin: 0 auto;
   padding: clamp(40px, 6vw, 72px) clamp(20px, 3.6vw, 44px) clamp(56px, 8vw, 96px);
}

.legal__back {
   display: inline-block;
   margin-bottom: clamp(28px, 4vw, 44px);
   border: 0;
   font-family: var(--mono);
   font-size: 10.5px;
   letter-spacing: .2em;
   text-transform: uppercase;
   color: var(--dim);
}

.legal__back:hover {
   color: var(--gold);
}

.legal__head {
   padding-bottom: clamp(28px, 4vw, 44px);
   border-bottom: 1px solid rgba(200, 191, 255, .22);
}

.legal h1 {
   margin: 0;
   font-family: var(--serif);
   font-weight: 300;
   font-size: clamp(3rem, 6vw, 5.4rem);
   line-height: 1;
   letter-spacing: -.018em;
   color: var(--bright);
}

/* Footnote, not a headline: the date has to be findable, not loud. */
.legal .legal__updated {
   margin: clamp(36px, 4vw, 52px) 0 0;
   padding-top: 14px;
   border-top: 1px solid var(--line);
   font-family: var(--mono);
   font-size: 9.5px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: #57537a;
}

.legal__body {
   margin-top: clamp(32px, 4vw, 52px);
   counter-reset: section;
}

/* Section rules, the same device the landing page uses: gold number, label,
   hairline running to the right margin. */
.legal h2 {
   display: flex;
   align-items: baseline;
   gap: 20px;
   margin: clamp(44px, 5vw, 68px) 0 20px;
   font-family: var(--mono);
   font-size: 10.5px;
   font-weight: 400;
   letter-spacing: .24em;
   text-transform: uppercase;
   color: var(--soft);
   white-space: nowrap;
}

.legal h2::before {
   counter-increment: section;
   content: counter(section, decimal-leading-zero);
   letter-spacing: .2em;
   color: var(--gold);
}

.legal h2::after {
   content: "";
   flex: 1;
   height: 1px;
   background: rgba(200, 191, 255, .14);
}

.legal h2+p,
.legal h2+ul,
.legal p,
.legal ul {
   max-width: 68ch;
}

.legal p,
.legal li {
   font-size: 17px;
   line-height: 1.62;
   color: var(--text);
   text-wrap: pretty;
}

.legal p {
   margin: 0 0 14px;
}

.legal ul {
   margin: 0 0 14px;
   padding-left: 20px;
}

.legal li {
   margin-bottom: 8px;
}

.legal strong {
   color: var(--soft);
   font-weight: 600;
}

.legal .lede {
   max-width: 30ch;
   font-family: var(--serif);
   font-weight: 300;
   font-size: clamp(1.9rem, 3.2vw, 2.9rem);
   line-height: 1.24;
   color: var(--bright);
   margin-bottom: 28px;
}

/* Support page: the contact button and the three one-line answers under it. */
.mailto {
   display: inline-flex;
   align-items: center;
   padding: 15px 26px;
   border: 0;
   border-radius: 3px;
   background: var(--bright);
   color: var(--ink);
   font-family: var(--mono);
   font-size: 11px;
   letter-spacing: .18em;
   text-transform: uppercase;
   font-weight: 600;
}

.mailto:hover {
   background: var(--gold);
   color: var(--ink);
}

.legal .mailto__addr {
   margin: 14px 0 0;
   font-family: var(--mono);
   font-size: 12px;
   letter-spacing: .08em;
   color: var(--dim);
}

.quick {
   max-width: 68ch;
   margin: clamp(40px, 5vw, 60px) 0 0;
   border-top: 1px solid var(--line);
}

.quick dt {
   padding-top: 18px;
   font-size: 16.5px;
   color: var(--bright);
}

.quick dd {
   margin: 6px 0 0;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--line);
   font-size: 16.5px;
   line-height: 1.6;
   color: var(--text);
}

/* The closing meta line already draws a rule; two in a row read as a mistake. */
.quick dd:last-of-type {
   border-bottom: 0;
}

.note {
   max-width: 72ch;
   margin: 0 0 clamp(28px, 3vw, 40px);
   padding: clamp(20px, 2.4vw, 28px);
   border: 1px solid rgba(233, 177, 66, .3);
   border-radius: 4px;
   background: rgba(233, 177, 66, .06);
}

.note p:last-child {
   margin-bottom: 0;
}

.note strong {
   color: var(--gold);
}

.todo {
   color: var(--gold);
   font-family: var(--mono);
   font-size: 13px;
}

/* Footer */
.footer {
   position: relative;
   z-index: 4;
   border-top: 1px solid var(--line);
}

.footer__inner {
   max-width: 1280px;
   margin: 0 auto;
   padding: 32px clamp(20px, 3.6vw, 44px) 48px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 20px 32px;
}

.footer__brand {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-right: auto;
}

.footer__brand img {
   width: 44px;
   height: 44px;
   border-radius: 9px;
}

.footer__name {
   margin: 0;
   font-family: var(--serif);
   font-size: 19px;
   color: var(--bright);
}

.footer__sub {
   margin: 0;
   font-family: var(--mono);
   font-size: 9.5px;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--dim);
}

.footer__links {
   display: flex;
   flex-wrap: wrap;
   gap: 26px;
   font-family: var(--mono);
   font-size: 10px;
   letter-spacing: .18em;
   text-transform: uppercase;
}

.footer__links a {
   color: var(--text);
   border: 0;
}

.footer__links a:hover {
   color: var(--gold);
}

.footer__legal {
   flex: 1 1 100%;
   margin: 0;
   font-size: 12.5px;
   color: #57537a;
}

@media (max-width:860px) {
   .legal__head {
      grid-template-columns: minmax(0, 1fr);
      align-items: start;
      gap: 18px;
   }

   .brand__tag {
      display: none;
   }
}

@media (max-width:620px) {
   .legal h2 {
      flex-wrap: wrap;
      gap: 10px 16px;
      white-space: normal;
   }

   .legal h2::after {
      display: none;
   }
}

@media (prefers-reduced-motion:reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
   }
}