@font-face {
  font-family: "Geist Pixel Square";
  src: url("fonts/GeistPixel-Square.9beedebce3c0.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --c0: #0b0f1f;
  --c1: #13182d;
  --c2: #1c223c;
  --rule: rgb(255 255 255 / 0.09);
  --ink: #f4f1ea;
  --muted: #9198b3;
  --dim: #666d8a;
  --cream: #f3ecdf;
  --cream-edge: #b3a88f;
  --pink: #ff6b7a;
  --amber: #ffb454;
  --tint: #14110c;
  --label: "Geist Pixel Square", ui-monospace, monospace;
  --reading: var(--label);
  --gutter: 32px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  color-scheme: dark;
  background: var(--c0);
}

body {
  min-height: 100vh;
  background: var(--c0) url("ground.d353bf48d0f2.svg") top center / 1536px auto repeat-x;
  color: var(--ink);
  font-family: var(--reading);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* art fills whatever frame it sits in */
.cover img,
.featured-shot img,
.wide-shot img,
.box-hero img,
.preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--pink);
  flex: none;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 12px;
  font-family: var(--label);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.btn-cream {
  background: var(--cream);
  color: #1b1509;
  box-shadow: 0 3px 0 var(--cream-edge);
}

.btn-cream:hover {
  background: #fff;
}

.btn-cream:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cream-edge);
}

.btn-dark {
  background: var(--c2);
  border: 1px solid var(--rule);
  color: var(--ink);
}

.btn-dark:hover {
  background: #262d4d;
}

.link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- frame ---------- */

.site {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1;
  padding: 0 var(--gutter);
}

.header {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 28px;
  min-height: 84px;
  padding: 20px var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 32px;
  height: 32px;
}

.wordmark {
  font-family: var(--label);
  font-size: 20px;
  letter-spacing: 0.14em;
}

.nav {
  display: flex;
  gap: 22px;
  font-family: var(--label);
  font-size: 14px;
  color: var(--muted);
}

.nav a {
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a.active {
  color: var(--ink);
}

.nav a.active {
  border-bottom-color: var(--ink);
}

.search {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 420px);
  padding: 0 10px 0 14px;
  height: 36px;
  background: rgb(8 11 24 / 0.75);
  border: 1px solid var(--rule);
  color: var(--muted);
}

.search:focus-within {
  border-color: rgb(255 255 255 / 0.3);
}

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

.search input {
  flex: 1;
  min-width: 0;
  font-family: var(--label);
  font-size: 13px;
  color: var(--ink);
  outline: none;
}

.search input::placeholder {
  color: var(--muted);
}

.search input::-webkit-search-cancel-button {
  display: none;
}

.search kbd {
  font-family: var(--label);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--c2);
  color: var(--muted);
}

.footer {
  padding: 96px var(--gutter) 28px;
  text-align: center;
  font-family: var(--label);
  font-size: 12px;
  color: var(--dim);
}

.footer-mark {
  letter-spacing: 0.4em;
  margin-bottom: 10px;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
}

.footer a:hover {
  color: var(--ink);
}

/* ---------- strip under the header ---------- */

.strip {
  margin-top: 16px;
}

.strip-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-size: 15px;
  color: var(--muted);
}

.strip-head b {
  color: var(--ink);
  font-weight: inherit;
}

.strip-head em {
  font-style: normal;
  color: var(--dim);
}

/* One row of whole cards: as many as fit the width, never a cut-off one
   (cards that would wrap get zero-height rows and are clipped). The whole
   shelf is listed below. On phones it becomes a swipeable row instead
   (see the 700px breakpoint). */
.strip-track {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 0;
  column-gap: 12px;
  row-gap: 0;
  overflow: hidden;
  margin-top: 14px;
}

.strip-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px 8px 14px;
  border: 1px solid var(--rule);
  background: rgb(11 15 31 / 0.5);
}

.strip-card:hover {
  background: var(--c1);
}

.strip-text {
  display: grid;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
}

.strip-note {
  font-family: var(--label);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- filters ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
}

.tabs {
  display: flex;
  background: rgb(8 11 24 / 0.8);
  font-family: var(--label);
  font-size: 12px;
}

.tabs a {
  padding: 8px 14px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
}

.tabs a:hover {
  color: var(--ink);
}

.tabs a[aria-current] {
  background: var(--c2);
  color: var(--ink);
  border-bottom-color: var(--cream);
}

.chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 32px;
  background: var(--c2);
  font-family: var(--label);
  font-size: 12px;
}

.chip select {
  appearance: none;
  outline: none;
  cursor: pointer;
  padding-right: 18px;
  margin-right: -18px;
  position: relative;
  z-index: 1;
}

.chip:focus-within {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.chip option {
  background: var(--c1);
}

/* ---------- rows ---------- */

.row {
  margin-top: 28px;
}

.row + .row {
  margin-top: 56px;
}

.row-head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 24px;
  margin-bottom: 20px;
}

.row-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--label);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* little pixel zig-zag after each shelf label */
.squiggle {
  width: 48px;
  height: 8px;
  opacity: 0.55;
  background:
    conic-gradient(currentColor 25%, transparent 0 50%, currentColor 0 75%, transparent 0) 0 0 / 8px 8px;
}

.row-aside {
  margin-left: auto;
  font-family: var(--label);
  font-size: 12px;
  color: var(--muted);
}

.arrows {
  margin-left: auto;
  display: flex;
  gap: 14px;
  color: var(--muted);
}

.arrows button {
  padding: 2px 6px;
}

.arrows button:hover {
  color: var(--ink);
}

.scroller {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.scroller::-webkit-scrollbar {
  display: none;
}

.scroller > * {
  scroll-snap-align: start;
}

.empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  color: var(--muted);
}

/* a game's title-scene loop: hidden over its picture until it is actually playing */
.preview {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.preview.on {
  opacity: 1;
}

/* ---------- box art ---------- */

.cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: var(--c2);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.12),
    0 10px 24px rgb(0 0 0 / 0.45);
}

/* A cover drawn as a boxed game (games/_box.html): a nerdi strip across the top and the box turned
   a little so its left side shows. Sizes are in cqi (share of the box's width) so every size matches.
   The strip and side are painted from the cover art itself, so their colours always suit the game. */
.cover.boxed {
  --band: 12.5cqi;   /* the strip; with the 2 / 3.25 box, the art below it stays exactly 2:3 */
  --depth: 14cqi;    /* how deep the box is */
  --turn: 18deg;
  aspect-ratio: 2 / 3.25;
  container-type: inline-size;
  transform: perspective(1000px) rotateY(var(--turn));
  transform-origin: left center;  /* the front face stays in its slot; only the side shows in the gap */
  transform-style: preserve-3d;
  background: #0b0f1f;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1),
    10px 12px 26px rgb(0 0 0 / 0.5);
}

/* the box's left side */
.cover.boxed::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--depth);
  transform-origin: left center;
  transform: rotateY(90deg);
  background:
    linear-gradient(rgb(0 0 0 / 0.2) 0 var(--band), transparent 0),
    linear-gradient(90deg, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.3)),
    var(--art) left bottom / auto calc(100% - var(--band)) no-repeat,
    #0b0f1f;
}

.box-band {
  position: absolute;
  inset: 0 0 auto;
  height: var(--band);
  display: flex;
  align-items: center;
  gap: 2.4cqi;
  padding: 0 5cqi;
  overflow: hidden;
  isolation: isolate;
  font-family: var(--label);
  font-size: 5.4cqi;
  line-height: 1;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
}

/* the strip's colour: the top of the cover art, blurred into a wash */
.box-band::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: linear-gradient(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.18)), var(--art) center 0 / 100% auto;
  filter: blur(5cqi) saturate(1.5);
}

.cover .box-band img {
  position: static;
  width: 6.6cqi;
  height: 6.6cqi;
  image-rendering: pixelated;
}

.cover .box-art {
  top: var(--band);
  height: calc(100% - var(--band));
}

.notch {
  position: absolute;
  inset: auto 0 0;
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--tint) 0 14px, transparent 0 28px);
}

/* ---------- start here ---------- */

.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.featured {
  display: flex;
  flex-direction: column;
  background: var(--tint);
  border: 1px solid var(--rule);
  transition: transform 0.12s steps(3);
}

.featured:hover {
  transform: translateY(-4px);
}

.featured-shot {
  position: relative;
  aspect-ratio: 16 / 8.4;
}

.featured-body {
  position: relative;
  display: grid;
  grid-template-columns: 30% 1fr;
  gap: 22px;
  padding: 0 20px;
}

.featured-body .cover {
  margin-top: -64%;
}

.featured-text {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 28px;
  min-width: 0;
}

.featured-title {
  font-size: 23px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.featured-tagline {
  color: rgb(244 241 234 / 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.featured-meta {
  padding: 14px 20px 18px;
  font-family: var(--label);
  font-size: 13px;
  color: rgb(244 241 234 / 0.6);
}

/* ---------- cover grid ---------- */

.cover-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 28px 24px;
}

.cover-card {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cover-card .cover {
  margin-bottom: 12px;
  transition: transform 0.12s steps(3);
}

.cover-card:hover .cover {
  transform: translateY(-4px);
}

.cover-card:hover .cover.boxed {
  transform: perspective(1000px) translateY(-4px) rotateY(calc(var(--turn) - 6deg));
}

.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  min-width: 0;
}

.card-meta {
  font-family: var(--label);
  font-size: 12px;
  color: var(--muted);
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--label);
  font-size: 12px;
  color: var(--pink);
  white-space: nowrap;
}

.soon i {
  width: 5px;
  height: 5px;
  background: currentColor;
}

/* ---------- wide cards ---------- */

.wide-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 72px) / 4);
  gap: 24px;
}

.wide {
  min-width: 0;
}

.wide-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--rule);
  background: var(--c1);
}

.wide-body {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  padding: 0 0 0 12px;
}

.wide-body .cover {
  margin-top: -34px;
}

.wide-text {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  min-width: 0;
}

/* ---------- game page ---------- */

.box {
  margin: 0 calc(var(--gutter) * -1);
  background: var(--tint);
}

.box-hero {
  position: relative;
  height: min(58vh, 560px);
  min-height: 260px;
}

.box-close {
  position: absolute;
  top: 20px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: #15110c;
  border: 1px solid rgb(255 255 255 / 0.2);
}

.box-inner {
  max-width: 1056px;
  margin: 0 auto;
  padding: 0 var(--gutter) 72px;
}

.box-top {
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 36px;
}

.box-top .cover {
  margin-top: -84px;
}

.box-info {
  padding-top: 40px;
  max-width: 520px;
}

.box-info h1 {
  font-size: 38px;
  font-weight: 400;
  line-height: 1.15;
}

.box-tags {
  margin-top: 8px;
  font-family: var(--label);
  font-size: 14px;
  color: rgb(244 241 234 / 0.6);
}

.box-desc {
  margin-top: 14px;
  color: rgb(244 241 234 / 0.85);
}

.box-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.btn-play {
  min-width: 230px;
  height: 48px;
  font-size: 16px;
}

.heart {
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgb(255 255 255 / 0.08);
}

.heart path {
  fill: none;
}

.heart.on {
  color: var(--pink);
}

.heart.on path {
  fill: currentColor;
}

.box-note {
  margin-top: 18px;
  font-family: var(--label);
  font-size: 14px;
  color: rgb(244 241 234 / 0.6);
}

.box-columns {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  margin-top: 64px;
}

.box-columns h2 {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 18px;
}

.learn {
  list-style: none;
  display: grid;
  gap: 10px;
}

.learn li {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 14px 16px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.07);
}

.learn li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--amber);
}

.panel {
  align-self: start;
  padding: 22px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.07);
}

.panel-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--label);
  font-size: 13px;
  color: var(--pink);
}

.panel dl {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.panel dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.panel dt {
  font-family: var(--label);
  font-size: 13px;
  color: rgb(244 241 234 / 0.6);
}

.panel-foot {
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 14px;
  color: rgb(244 241 234 / 0.7);
}

/* ---------- player ---------- */

.player {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #05060c;
}

.player-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
}

.player-title {
  flex: 1;
  text-align: center;
  font-family: var(--label);
  font-size: 13px;
  color: var(--muted);
}

.player-stage {
  flex: 1;
  min-height: 0;
  background: #000;
}

.player-stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- reading pages ---------- */

.prose {
  max-width: 660px;
  margin: 40px auto 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgb(244 241 234 / 0.86);
}

.prose h1 {
  margin: 20px 0 28px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.prose h2 {
  margin: 40px 0 12px;
  font-family: var(--label);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--amber);
}

.prose p + p {
  margin-top: 16px;
}

.prose ul {
  list-style: none;
  display: grid;
  gap: 8px;
}

.prose li {
  padding-left: 22px;
  background: linear-gradient(var(--muted) 0 0) 0 0.65em / 7px 7px no-repeat;
}

.prose .btn {
  margin-top: 24px;
}

.lost {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 20vh var(--gutter);
  text-align: center;
}

.lost h1 {
  font-size: 30px;
  font-weight: 400;
}

.lost p {
  color: var(--muted);
}

/* ---------- small screens ---------- */

@media (max-width: 1100px) {
  .wide-grid {
    grid-auto-columns: calc((100% - 24px) / 2);
  }

  .box-columns {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 900px) {
  .featured-grid {
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: min(78%, 420px);
    gap: 16px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 4px;
  }
}

@media (max-width: 700px) {
  :root {
    --gutter: 16px;
  }

  .header {
    grid-template-columns: auto 1fr auto;
    gap: 14px 16px;
  }

  .wordmark {
    display: none;
  }

  .search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
  }

  .search kbd {
    display: none;
  }

  .cover-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 24px 16px;
  }

  .wide-grid {
    grid-auto-columns: 72%;
    gap: 16px;
  }

  .strip-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    overflow-x: auto;
    scroll-padding-inline: 0;
  }

  .tabs {
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }

  .box-top {
    grid-template-columns: 112px 1fr;
    gap: 18px;
  }

  .box-top .cover {
    margin-top: -48px;
  }

  .box-info {
    padding-top: 20px;
    display: contents;
  }

  .box-info h1 {
    font-size: 26px;
    align-self: end;
    padding-top: 20px;
  }

  .box-info > :not(h1) {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .btn-play {
    flex: 1;
    min-width: 0;
  }

  .prose h1 {
    font-size: 28px;
  }
}

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

/* ---------- sign-in, paywall, account ---------- */

.gate {
  max-width: 520px;
  margin: 40px auto 0;
  color: rgb(244 241 234 / 0.86);
}

.gate h1 {
  margin: 20px 0 16px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--ink);
}

.gate-lede {
  font-size: 18px;
  line-height: 1.6;
}

.gate-card {
  display: grid;
  gap: 12px;
  margin-top: 28px;
  padding: 24px;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.07);
}

.gate-card form {
  display: grid;
}

.btn-provider {
  width: 100%;
  height: 48px;
  font-size: 15px;
}

.gate-note {
  font-size: 15px;
  color: var(--amber);
}

.gate-fine {
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  font-size: 14px;
  color: rgb(244 241 234 / 0.6);
}

.gate-back {
  margin-top: 20px;
  font-size: 14px;
}

.plan-price {
  font-family: var(--label);
  font-size: 15px;
  color: var(--muted);
}

.plan-price b {
  font-size: 32px;
  font-weight: 400;
  color: var(--ink);
}

.plan-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.plan-option {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 18px;
  border: 1px solid rgb(255 255 255 / 0.1);
}

.plan-option.plan-best {
  border-color: var(--amber);
  background: rgb(255 180 84 / 0.06);
}

.plan-name {
  font-family: var(--label);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-note {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
}

.plan-best .plan-note {
  color: var(--amber);
}

.plan-perks {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 16px;
}

.plan-perks li {
  padding-left: 22px;
  background: linear-gradient(var(--amber) 0 0) 0 0.55em / 7px 7px no-repeat;
}

.account-facts {
  display: grid;
  gap: 10px;
  margin-bottom: 8px;
}

.account-facts div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.account-facts dt {
  font-family: var(--label);
  font-size: 13px;
  color: rgb(244 241 234 / 0.6);
}

.account-facts dd {
  text-align: right;
  overflow-wrap: anywhere;
}

.flash {
  max-width: 520px;
  margin: 20px auto 0;
  padding: 12px 16px;
  background: var(--c2);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--amber);
  font-size: 15px;
}

.flash-error {
  border-left-color: var(--pink);
}

.free-tag {
  font-family: var(--label);
  font-size: 12px;
  color: var(--amber);
}

/* ---------- blog ---------- */

.article {
  --read: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  max-width: 760px;
  margin: 28px auto 0;
  color: rgb(244 241 234 / 0.88);
  font-family: var(--read);
  -webkit-font-smoothing: antialiased;
}

.crumbs {
  display: flex;
  gap: 8px;
  font-family: var(--label);
  font-size: 13px;
  color: var(--muted);
  -webkit-font-smoothing: none;
}

.crumbs a:hover {
  color: var(--ink);
}

.article .row-label {
  margin-top: 18px;
}

.article h1 {
  margin: 14px 0 14px;
  font-family: var(--label);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink);
  -webkit-font-smoothing: none;
}

.article-dek {
  font-size: 20px;
  line-height: 1.5;
  color: rgb(244 241 234 / 0.78);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--label);
  font-size: 13px;
  color: var(--muted);
  -webkit-font-smoothing: none;
}

.article-hero {
  margin: 28px 0;
}

.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--rule), 0 20px 50px rgb(0 0 0 / 0.35);
}

.takeaways {
  margin: 0 0 36px;
  padding: 22px 24px;
  background: rgb(255 180 84 / 0.08);
  border: 1px solid rgb(255 180 84 / 0.28);
  border-left: 4px solid var(--amber);
}

.takeaways h2,
.faq h2,
.sources h2,
.article-body h2,
.article-foot h2 {
  font-family: var(--label);
  font-weight: 400;
  color: var(--ink);
  -webkit-font-smoothing: none;
}

.takeaways h2 {
  font-size: 16px;
  letter-spacing: 0.08em;
  color: var(--amber);
}

.takeaways ul,
.article-body ul,
.article-body ol,
.sources ol {
  margin: 12px 0 0 1.2em;
  display: grid;
  gap: 10px;
}

.takeaways li,
.article-body li {
  font-size: 17px;
  line-height: 1.6;
}

.article-body {
  font-size: 18px;
  line-height: 1.75;
}

.article-body .lede {
  font-size: 20px;
  line-height: 1.65;
  color: var(--ink);
}

.article-body h2 {
  margin: 46px 0 14px;
  font-size: 26px;
  line-height: 1.25;
  scroll-margin-top: 20px;
}

.article-body h3 {
  margin: 30px 0 8px;
  font-size: 20px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
}

.article-body p + p,
.article-body ul + p,
.article-body ol + p,
.article-body p + ul,
.article-body p + ol {
  margin-top: 16px;
}

.article-body a,
.faq a,
.sources a,
.more a {
  color: var(--amber);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.article-body strong {
  color: var(--ink);
}

.article-body sup {
  font-size: 0.7em;
  line-height: 0;
  margin-left: 1px;
}

.article-body sup a {
  text-decoration: none;
  padding: 0 2px;
}

/* comparison tables; they scroll sideways on narrow phones rather than squash */
.table-wrap {
  margin: 20px 0 8px;
  overflow-x: auto;
  border: 1px solid var(--rule);
}

.article-body table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.article-body th,
.article-body td {
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
}

.article-body thead th {
  border-top: 0;
  background: var(--c1);
  font-family: var(--label);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--amber);
}

.article-body tbody th {
  width: 22%;
  font-weight: 600;
  color: var(--ink);
}

.article-body td {
  color: rgb(244 241 234 / 0.85);
}

.faq,
.sources {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 1px solid var(--rule);
}

.faq h2,
.sources h2 {
  font-size: 24px;
}

.faq-item {
  margin-top: 22px;
}

.faq-item h3 {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 650;
  color: var(--ink);
}

.faq-item p {
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.65;
}

.sources ol {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.sources li {
  overflow-wrap: anywhere;
  scroll-margin-top: 20px;
}

.sources li:target {
  color: var(--ink);
  background: rgb(255 180 84 / 0.12);
}

.article-foot {
  margin: 50px 0 20px;
  padding: 28px;
  text-align: center;
  background: var(--c1);
  border: 1px solid var(--rule);
}

.article-foot p {
  font-size: 18px;
  margin-bottom: 14px;
}

.article-foot h2 {
  margin-top: 28px;
  font-size: 18px;
}

.more {
  list-style: none;
  margin-top: 10px;
}

/* the blog's front page */

.post-list {
  display: grid;
  gap: 22px;
  margin-top: 30px;
}

.post-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: center;
  padding: 16px;
  background: var(--c1);
  border: 1px solid var(--rule);
  transition: border-color 0.15s, transform 0.15s;
}

.post-card:hover {
  border-color: rgb(255 180 84 / 0.5);
  transform: translateY(-2px);
}

.post-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.post-card-text {
  display: grid;
  gap: 8px;
}

.post-card-title {
  font-family: var(--label);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  -webkit-font-smoothing: none;
}

.post-card-dek {
  font-size: 16px;
  line-height: 1.55;
  color: rgb(244 241 234 / 0.75);
}

@media (max-width: 700px) {
  .article {
    margin-top: 16px;
  }

  .article-body {
    font-size: 17px;
  }

  .post-card {
    grid-template-columns: 1fr;
  }

  .takeaways {
    padding: 18px;
  }
}

/* ---------- terms and privacy ---------- */

.legal-date {
  margin: -16px 0 24px;
  font-family: var(--label);
  font-size: 12px;
  color: var(--dim);
}

.legal a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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