/* The guides: pages to read, in the same colours and faces as the rest of the site. */
:root{
  --plum-900:#190A21; --plum-800:#26112F; --plum-600:#54306A;
  --text:#26112F; --muted:#69597A;
  --apricot:#FFB07C; --apricot-deep:#E8834A; --peach-50:#FFF3EA; --rust:#9A4A16;
  --mist:#F7F3FB; --lilac-100:#EFE8F6; --lilac-200:#E2D7EE; --lilac-300:#CDBDDF; --lilac-400:#AE9DC3;
  --on-dark:#F6EFFB; --on-dark-muted:#BCAACD; --line-dark:rgba(205,189,223,.32);
  --display:"Gloock","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gut:20px;
}
@media (min-width:720px){:root{--gut:40px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--mist);color:var(--text);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,figure{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid #7446CC;outline-offset:3px}
.wrap{width:min(100% - var(--gut)*2,1120px);margin-inline:auto}
.skip{position:absolute;left:12px;top:-64px;z-index:9;padding:10px 14px;border-radius:10px;background:#fff;font-weight:600}
.skip:focus{top:12px}

/* Top bar */
.top{background:var(--plum-800);color:var(--on-dark)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:9px;font:400 1.4rem/1 var(--display);text-decoration:none}
.brand svg{width:30px;height:22px;overflow:visible}
.brand path{fill:none;stroke:var(--lilac-300);stroke-width:1.75;stroke-linecap:round}
.brand circle{fill:var(--apricot)}
.top nav{display:flex;align-items:center;gap:24px}
.navlink{color:var(--on-dark-muted);font-size:.95rem;font-weight:500;text-decoration:none}
.navlink:hover,.navlink[aria-current]{color:var(--on-dark)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 20px;border-radius:99px;background:var(--apricot);color:var(--plum-900);font-size:.95rem;font-weight:600;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .15s,transform .2s}
.btn:hover{background:#FFC6A0}

/* The head of a guide */
.head{padding:clamp(40px,7vw,76px) 0 clamp(36px,6vw,60px);background:radial-gradient(90% 120% at 88% 0%,#472257 0%,rgba(71,34,87,0) 62%) var(--plum-800);color:var(--on-dark)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;color:var(--on-dark-muted);font-size:.875rem;list-style:none;padding:0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--on-dark)}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--lilac-400)}
.head h1{max-width:20ch;margin-top:18px;font:400 clamp(2.3rem,6vw,4rem)/1.03 var(--display);letter-spacing:-.015em;text-wrap:balance;animation:rise .6s ease both}
.head .lead{max-width:40rem;margin-top:20px;color:var(--on-dark-muted);font-size:clamp(1.08rem,1.6vw,1.25rem);line-height:1.6;animation:rise .6s .08s ease both}
.head .meta{margin-top:22px;color:var(--lilac-400);font:400 .8125rem var(--mono);letter-spacing:.06em;text-transform:uppercase}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}

/* The text */
.page{display:grid;grid-template-columns:minmax(0,720px) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start;padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px)}
.prose>*+*{margin-top:1.15em}
.prose h2{margin-top:2.1em;font:400 clamp(1.6rem,3vw,2.05rem)/1.12 var(--display);letter-spacing:-.01em;scroll-margin-top:24px}
.prose h3{margin-top:1.8em;font-size:1.125rem;font-weight:600}
.prose h2+*,.prose h3+*{margin-top:.7em}
.prose a{color:var(--plum-600);text-decoration-color:var(--apricot-deep);text-decoration-thickness:1.5px;text-underline-offset:4px}
.prose a:hover{color:var(--text)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--apricot-deep)}
.prose strong{font-weight:600}
.prose code{padding:1px 6px;border-radius:6px;background:var(--lilac-100);font:400 .9em var(--mono)}
.prose pre{padding:18px 20px;border-radius:16px;background:var(--plum-800);color:var(--on-dark);font:400 .875rem/1.65 var(--mono);overflow-x:auto}
.prose pre code{padding:0;background:none;font-size:inherit}
.prose pre .us{color:var(--apricot)}
.prose pre .them{color:var(--lilac-300)}
/* The answer in a sentence or two, before the explanation. */
.docs .endpoint{margin-top:1.6em;font:500 1rem/1.5 var(--mono);overflow-wrap:anywhere}
.docs .verb{display:inline-block;margin-right:10px;padding:2px 9px;border-radius:7px;background:var(--plum-800);color:#fff;font:500 .75rem/1.6 var(--mono);letter-spacing:.06em;vertical-align:1px}
.docs h3{margin-top:1.8em;font-size:1.1rem;font-weight:600}
.docs pre{white-space:pre;tab-size:2}
.short{padding:20px 24px;border:1px solid var(--lilac-200);border-left:4px solid var(--apricot-deep);border-radius:4px 16px 16px 4px;background:#fff}
.short b{display:block;margin-bottom:4px;color:var(--rust);font:500 .8125rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.note{padding:18px 22px;border-radius:16px;background:var(--peach-50);font-size:1rem}
.tablewrap{border:1px solid var(--lilac-200);border-radius:16px;background:#fff;overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{padding:12px 16px;background:var(--lilac-100);color:var(--muted);font-size:.8125rem;font-weight:600;text-align:left;white-space:nowrap}
td{padding:12px 16px;border-top:1px solid var(--lilac-100);vertical-align:top}
td code{white-space:nowrap}

/* Beside the text: what is on the page, and the other guides */
.side{position:sticky;top:24px;display:grid;gap:22px;font-size:.95rem}
.side h2{color:var(--muted);font:500 .8125rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.side ul{display:grid;gap:9px;margin-top:12px;padding:0;list-style:none}
.side a{color:var(--muted);text-decoration:none}
.side a:hover{color:var(--text)}
.side .box{padding:20px 22px;border:1px solid var(--lilac-200);border-radius:18px;background:#fff}

/* The call at the end */
.cta{position:relative;margin-top:2.6em;padding:30px 30px 32px;border-radius:22px;background:radial-gradient(120% 140% at 100% 0%,#5A2C6E 0%,rgba(90,44,110,0) 60%) var(--plum-800);color:var(--on-dark);overflow:hidden}
.cta h2{margin:0;font:400 1.7rem/1.1 var(--display)}
.cta p{margin-top:8px;color:var(--on-dark-muted)}
.cta .btn{min-height:48px;margin-top:20px;padding:0 26px}
.cta svg{position:absolute;right:-10px;bottom:-6px;width:210px;height:110px;opacity:.5}
.cta svg path{fill:none;stroke:var(--line-dark);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:.1 8}
.cta svg circle{fill:var(--apricot)}

/* The list of guides */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px);list-style:none}
.card{display:flex;flex-direction:column;height:100%;padding:26px 26px 24px;border:1px solid var(--lilac-200);border-radius:22px;background:#fff;text-decoration:none;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);border-color:var(--lilac-400);box-shadow:0 22px 40px -28px rgba(38,17,47,.5)}
.card h2{font:400 1.5rem/1.12 var(--display)}
.card p{flex:1;margin-top:10px;color:var(--muted);font-size:1rem;line-height:1.55}
.card span{margin-top:18px;color:var(--rust);font-weight:600;font-size:.95rem}

.foot{padding:30px 0;background:var(--plum-900);color:var(--on-dark-muted);font-size:.9rem}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--on-dark)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}

@media (max-width:959px){
  .page{grid-template-columns:minmax(0,1fr)}
  .side{position:static}
  .side .toc{display:none}
}
@media (max-width:559px){
  body{font-size:1rem}
  .top nav{gap:14px}
  .top .wide{display:none}
  .cta{padding:26px 22px 28px}
  .cta svg{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}