/* From Below Studios - one stylesheet for the three pages.
   Everything is served from this site: no fonts, scripts or trackers from anywhere else. */

@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/DMMono-300.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/DMMono-400.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300;font-display:swap;src:url(fonts/Fraunces-300i.woff2) format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/Fraunces-300.woff2) format('woff2')}

:root{
  --abyss:#04090e; --deep:#0a1a24; --water:#12414e; --window:#7fa9ae; --foam:#d6e4e2;
  --ink:#c9d6d6; --ink-2:rgba(201,214,214,.62); --ink-3:rgba(201,214,214,.36);
  --hair:rgba(201,214,214,.16); --hair-2:rgba(201,214,214,.08);
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--abyss); color:var(--ink);
  font-family:var(--serif); font-weight:300; font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
  /* the light coming down through the water, drawn with a gradient rather than an image */
  background-image:radial-gradient(120% 70% at 50% -10%, rgba(18,65,78,.55) 0%, rgba(10,26,36,.35) 38%, rgba(4,9,14,0) 72%);
  background-repeat:no-repeat;
}

.wrap{max-width:64ch; margin:0 auto; padding:clamp(40px,8vw,88px) 22px 72px}

/* the studio line at the top of every page */
.brand{display:flex; flex-wrap:wrap; gap:14px 22px; align-items:baseline; justify-content:space-between; margin-bottom:clamp(40px,7vw,68px)}
.brand a, nav a{font-family:var(--mono); font-size:10.5px; font-weight:300; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); text-decoration:none}
.brand a.home{color:var(--ink-2)}
.brand a:hover, nav a:hover{color:var(--window)}
nav{display:flex; gap:20px}

h1{
  font-family:var(--serif); font-weight:300; font-variation-settings:"opsz" 144,"SOFT" 60;
  font-size:clamp(34px,6.4vw,54px); line-height:1.04; letter-spacing:-.015em;
  margin:0 0 6px; color:var(--foam); text-wrap:balance;
}
h1 em{font-style:italic; color:var(--window)}
h2{
  font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-3); margin:52px 0 14px; padding-top:22px; border-top:1px solid var(--hair-2);
}
h3{font-family:var(--serif); font-weight:300; font-size:20px; color:var(--foam); margin:34px 0 6px; letter-spacing:-.01em}

p{margin:0 0 18px; color:var(--ink)}
.lede{font-size:19.5px; color:var(--foam); margin-bottom:26px}
.meta{font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--ink-3); margin-bottom:34px}
.fine{font-family:var(--mono); font-size:11.5px; line-height:1.8; color:var(--ink-3)}

a{color:var(--window); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:rgba(127,169,174,.45)}
a:hover{text-decoration-color:var(--window)}

ul{margin:0 0 18px; padding-left:20px}
li{margin-bottom:9px}

/* the facts panel on the home page, same shape as the card in the app */
dl.rows{margin:0 0 30px; border-top:1px solid var(--hair-2)}
dl.rows div{display:grid; grid-template-columns:108px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--hair-2)}
dl.rows dt{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0; padding-top:5px}
dl.rows dd{margin:0; font-size:16px; color:var(--ink); line-height:1.6}

.pill{
  display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid var(--hair); border-radius:999px; padding:9px 16px; text-decoration:none;
}
.pill:hover{color:var(--foam); border-color:rgba(201,214,214,.34)}

footer{margin-top:64px; padding-top:22px; border-top:1px solid var(--hair-2)}
footer p{margin:0 0 6px}

@media (max-width:480px){
  body{font-size:16.5px}
  dl.rows div{grid-template-columns:1fr; gap:3px}
  dl.rows dt{padding-top:0}
  nav{gap:16px}
}

/* the changelog: the lead words of each item, picked out by colour rather than weight (only the 300 weights ship) */
li strong, p strong{font-weight:400; color:var(--foam)}