:root{
  --violet:#5433D6; --lilac:#9B84F5; --warm:#FCFBF4; --dim:#B4B4B4; --mute:#8C8C8C;
  --rule:rgba(255,255,255,0.12);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#000;color:var(--warm);font-family:'Outfit',system-ui,-apple-system,sans-serif;
  font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.fr{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;font-weight:400}
img,svg{display:block}
a{color:var(--lilac)}
a:hover{color:#C3B4FF}

/* the arch: fixed behind the page, black by the foot of the screen */
.arch{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000;pointer-events:none}
.arch i{position:absolute;left:50%;top:36px;margin-left:-235px;width:470px;height:104vh;
  border-radius:235px 235px 0 0;
  background:radial-gradient(ellipse 66% 66% at 50% 46%,#000 0%,#000 54%,var(--violet) 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 72%,rgba(0,0,0,0) 92%);
  mask-image:linear-gradient(180deg,#000 0%,#000 46%,rgba(0,0,0,.45) 72%,rgba(0,0,0,0) 92%)}

.page{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}

/* header */
.top{border-bottom:1px solid var(--rule);padding:0 24px;min-height:126px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px}
.top .mark svg{width:104px;height:17px}
.top nav{width:100%;display:flex;align-items:center;justify-content:space-between}
.top .nav-l,.top .nav-r{display:flex;gap:16px}
.top nav a{font-size:10px;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  color:#C4C1BB;transition:color .24s ease}
.top nav a:hover{color:#fff}
.top nav a[aria-current="page"]{color:#fff;font-weight:500}

/* the reading column */
main{flex:1 0 auto;padding:52px 24px 0;display:flex;flex-direction:column;align-items:center}
.col{width:100%;max-width:342px}
h1{margin:0;font-size:34px;line-height:1.08;color:var(--warm);text-align:center}
h2{margin:40px 0 0;font-size:23px;line-height:1.2;color:var(--warm)}
p{margin:16px 0 0;font-size:16px;line-height:1.68;color:var(--dim)}
.lead{margin-top:32px}
ul,ol{margin:12px 0 0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:10px;
  font-size:16px;line-height:1.6;color:var(--dim)}
li{margin:0;padding-left:4px}
li::marker{color:var(--lilac)}
strong{font-weight:500;color:var(--warm)}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;padding:1px 6px;
  border-radius:5px;background:rgba(255,255,255,.09);color:#D8D4CC}
.lg-link{color:var(--lilac);text-decoration:underline;text-underline-offset:3px}

/* the facts card */
dl{margin:30px 0 0;padding:20px 22px 8px;background:rgba(255,255,255,.045);
  border:1px solid var(--rule);border-radius:14px;
  display:grid;grid-template-columns:auto;gap:3px 0;align-items:baseline}
dt{margin:0;font-size:10px;line-height:1.5;letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
dd{margin:0 0 12px;font-size:15px;line-height:1.5;color:var(--warm)}

/* the bar */
.foot{flex:0 0 auto;margin-top:64px;background:#141414;padding:24px 24px 16px;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#B6B6B6}
.foot .mark svg{width:115px;height:19px}
.foot .links{display:flex;align-items:center;gap:16px}
.foot a{color:#B6B6B6;text-decoration:none;transition:color .26s ease}
.foot a:hover{color:#fff}
.foot .pigsel svg{width:80px;height:20px}

@media (min-width:900px){
  .arch i{top:-6px;margin-left:-700px;width:1400px;border-radius:700px 700px 0 0}
  .top{padding:0 44px;min-height:104px;flex-direction:row;gap:0}
  .top .mark{order:2}
  .top .mark svg{width:124px;height:21px}
  .top nav{order:1;display:contents}
  .top .nav-l,.top .nav-r{gap:26px;flex:1 1 0}
  .top .nav-l{order:1}
  .top .mark{order:2}
  .top .nav-r{order:3;justify-content:flex-end}
  .top nav a{font-size:11px}
  main{padding:96px 44px 0}
  .col{max-width:720px}
  h1{font-size:54px}
  h2{margin-top:54px;font-size:28px}
  p{margin-top:18px;font-size:17px;line-height:1.75}
  .lead{margin-top:36px}
  ul,ol{margin-top:14px;padding-left:24px;font-size:17px}
  dl{margin-top:40px;padding:26px 30px;grid-template-columns:max-content minmax(0,1fr);gap:12px 26px}
  dt{font-size:11px}
  dd{margin-bottom:0;font-size:16px}
  .foot{margin-top:88px;padding:0 44px;min-height:56px;flex-direction:row;justify-content:space-between;gap:32px;
    font-size:11px;letter-spacing:.12em;white-space:nowrap}
  .foot .mark{order:1}
  .foot .mark svg{width:88px;height:15px}
  .foot .links{order:2;margin-right:auto;margin-left:-6px}
  .foot .copy{order:3;display:flex;align-items:center;gap:10px}
  .foot .pigsel svg{width:86px;height:21px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}