/* The two pages an OAuth provider insists on, in the same clothes as the
   holding page: the icon's palette, the same two self-hosted faces, and no
   third-party request of any kind - which the site's own CSP would refuse
   anyway.

   Where the front page is a centred card, these are documents: a reading
   column, ranged left, sized so a line lands near sixty-five characters. */

@font-face{
  font-family:"Schibsted Grotesk";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("/fonts/schibsted-grotesk-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ground-top:#F5F3FD;
  --ground-bottom:#E4E2F7;
  --ink:#292455;
  --ink-2:#4A4477;
  --ink-3:#7C77A4;
  --accent:#5A55C7;
  --glow:rgba(135,147,245,.42);
  --rule:rgba(41,36,85,.16);
  --code:rgba(41,36,85,.07);
  --logo-shadow:rgba(62,60,145,.42);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground-top:#1B1930;
    --ground-bottom:#111019;
    --ink:#EDEBF7;
    --ink-2:#C4C0DC;
    --ink-3:#847EA8;
    --accent:#9A94F0;
    --glow:rgba(135,147,245,.26);
    --rule:rgba(237,235,247,.18);
    --code:rgba(237,235,247,.09);
    --logo-shadow:rgba(0,0,0,.65);
  }
}

*{box-sizing:border-box}
html{background:var(--ground-bottom)}

body{
  margin:0;
  min-height:100svh;
  background:var(--ground-top);
  background-image:linear-gradient(170deg,var(--ground-top) 0%,var(--ground-bottom) 100%);
  background-attachment:fixed;
  color:var(--ink-2);
  font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  padding:56px 26px 96px;
}

.page{max-width:660px;margin:0 auto;position:relative}

/* The same light the front page throws, kept behind the masthead only - a
   glow running the length of a long document would be a distraction. */
.page::before{
  content:"";
  position:absolute;
  top:-190px;
  left:50%;
  width:520px;
  height:420px;
  margin-left:-260px;
  border-radius:50%;
  background:radial-gradient(circle,var(--glow) 0%,transparent 68%);
  pointer-events:none;
  z-index:0;
}
.masthead,.body,.foot{position:relative;z-index:1}

.masthead{margin-bottom:40px}

.home{display:inline-block;line-height:0}
.logo{
  width:60px;
  height:auto;
  filter:drop-shadow(0 10px 22px var(--logo-shadow));
}

h1{
  margin:26px 0 0;
  font-size:clamp(30px,5.4vw,42px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.032em;
  color:var(--ink);
  text-wrap:balance;
}

.updated{
  margin:16px 0 0;
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--accent);
}

.lede{
  margin:26px 0 0;
  font-size:19px;
  line-height:1.5;
  color:var(--ink);
}

h2{
  margin:44px 0 0;
  font-size:15px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--ink);
}

p{margin:14px 0 0}
ul{margin:14px 0 0;padding-left:22px}
li{margin-top:7px}
li::marker{color:var(--ink-3)}

strong{color:var(--ink);font-weight:600}

a{color:var(--accent);text-underline-offset:2px;text-decoration-thickness:1px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

code{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.84em;
  background:var(--code);
  padding:2px 5px;
  border-radius:3px;
  word-break:break-all;
}

.foot{
  margin-top:56px;
  padding-top:22px;
  border-top:1px solid var(--rule);
  font-size:14.5px;
  color:var(--ink-3);
}
.foot a{color:var(--ink-3)}
.foot a:hover{color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}