/* ==========================================================================
   Virtual Gems
   --------------------------------------------------------------------------
   Two systems run the whole page:

   1. Spacing sits on an 8px grid. Every margin, padding, gap, fixed size and
      line-height is a multiple of 8, set through the --s-* tokens
      (--s-N = N × 8px). Hairlines are drawn with shadows or pseudo-elements
      so they never push anything off the grid.

   2. Type uses six sizes and nothing else (the --t-* tokens). Headings share
      one weight, one tracking and one optical size, so every heading reads
      as the same typeface. Sizes and rhythm are modelled on mobbin.com:
      40px section headings, compact body text, and 40 / 80 / 160px steps
      between a heading, its content and the next section.
   ========================================================================== */

:root {
  /* Spacing scale (N × 8px) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-7: 56px;
  --s-8: 64px;
  --s-9: 72px;
  --s-10: 80px;
  --s-11: 88px;
  --s-12: 96px;
  --s-16: 128px;
  --s-17: 136px;
  --s-20: 160px;

  /* Layout: one container for the header, every section and the footer */
  --gutter: var(--s-4);
  --content: 1048px; /* 131 × 8 */
  --section-pad: var(--s-20); /* space above and below each section */
  --stack-content: var(--s-10); /* heading group -> the content under it */
  --stack-action: var(--s-5); /* heading -> its button */
  --stack-copy: var(--s-3); /* heading -> its supporting paragraph */

  /* Type scale: weight size/line-height family. Line-heights are multiples of 8. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-display: 600 72px/72px var(--font); /* hero */
  --t-title: 600 40px/48px var(--font); /* every section heading */
  --t-subtitle: 600 24px/32px var(--font); /* card and list titles */
  --t-lead: 400 18px/24px var(--font); /* supporting paragraphs */
  --t-lead-strong: 550 18px/24px var(--font); /* card labels, footer brand */
  --t-body: 400 15px/24px var(--font); /* default text */
  --t-body-strong: 550 15px/24px var(--font); /* nav, buttons, links */
  --t-caption: 400 13px/16px var(--font); /* small print */
  --t-reading: 400 18px/32px var(--font); /* long-form text in blog posts */
  --track-heading: -0.02em; /* display, title and subtitle */
  --track-lead: -0.01em;

  /* Colour */
  --ink: #111111;
  --ink-soft: #6b6b6b;
  --ink-faint: #808080;
  --paper: #ffffff;
  --mist: #f3f3f3;
  --mist-deep: #ebebeb;
  --line: #e2e2e2;
  --night: #141414;
  --night-raise: #262626;
  --night-soft: #9c9c9c;

  /* Shape and motion */
  --radius-sm: var(--s-3);
  --radius-md: var(--s-4);
  --radius-lg: var(--s-5);
  --radius-pill: 999px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.sprite {
  position: absolute;
}

/* For labels that screen readers need but the design does not show */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* While Lenis smooth scrolling is running (see script.js) it sets the scroll
   position itself, so the browser's own smooth-scroll is switched off. */
html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.skip-link {
  position: absolute;
  top: var(--s-1);
  left: var(--s-1);
  z-index: 10;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font: var(--t-body-strong);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.section--mist {
  background: var(--mist);
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

.display {
  font: var(--t-display);
  letter-spacing: var(--track-heading);
}

.title {
  font: var(--t-title);
  letter-spacing: var(--track-heading);
}

/* All headings use the same optical size, so their letterforms match exactly,
   and balance their lines so no word is left alone on the last one */
.display,
.title,
.accordion__trigger,
.post__title {
  font-variation-settings: "opsz" 32;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Icons and logo
   -------------------------------------------------------------------------- */

.icon {
  flex: none;
  width: var(--s-3);
  height: var(--s-3);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: var(--s-2);
  height: var(--s-2);
  stroke-width: 2.25;
}

.icon--lg {
  width: var(--s-4);
  height: var(--s-4);
  stroke-width: 2.25;
}

.icon--solid {
  fill: currentColor;
  stroke: none;
}

.mark {
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  height: var(--s-6);
  padding-inline: var(--s-3);
  border-radius: var(--radius-pill);
  font: var(--t-body-strong);
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s var(--ease);
}

.btn:active {
  transform: scale(0.98);
}

.btn .icon {
  transition: transform 0.3s var(--ease);
}

.btn:hover .icon {
  transform: translateX(4px);
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover {
  background: #2b2b2b;
}

.btn--secondary {
  background: var(--mist);
}

.btn--secondary:hover {
  background: #e8e8e8;
}

.btn--small {
  height: var(--s-5);
  padding-inline: var(--s-2);
  background: #e6e6e6;
}

.btn--small:hover {
  background: #dcdcdc;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.header {
  display: flex;
  align-items: center;
  height: var(--s-8);
}

.nav,
.nav__group,
.nav__links,
.nav__social {
  display: flex;
  align-items: center;
}

.nav {
  justify-content: space-between;
}

.nav__logo {
  margin-right: var(--s-4);
  padding-block: var(--s-1);
}

.nav__links {
  gap: var(--s-3);
}

.nav__link {
  display: block;
  padding-block: var(--s-1);
  font: var(--t-body-strong);
  transition: color 0.2s ease;
}

.nav__link:hover {
  color: var(--ink-soft);
}

.nav__icon {
  display: grid;
  place-items: center;
  width: var(--s-5);
  height: var(--s-5);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease;
}

.nav__icon:hover {
  background: var(--mist);
}

/* Contact sits after a hairline divider; the line is a pseudo-element so the
   spacing either side of it stays on the grid. */
.nav__contact {
  position: relative;
  margin-left: var(--s-3);
}

.nav__contact::before {
  content: "";
  position: absolute;
  top: var(--s-1);
  left: calc(var(--s-2) * -1);
  width: 1px;
  height: var(--s-3);
  background: var(--line);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  padding-block: var(--section-pad);
  text-align: center;
}

.hero__lead {
  margin-top: var(--stack-copy);
  font: var(--t-lead);
  letter-spacing: var(--track-lead);
  color: var(--ink-soft);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
  margin-top: var(--stack-action);
}

/* --------------------------------------------------------------------------
   Apps
   -------------------------------------------------------------------------- */

.apps {
  display: grid;
  grid-template-columns: minmax(0, 416px) minmax(0, 576px);
  justify-content: space-between;
  gap: var(--s-7);
}

.apps__intro {
  display: flex;
  flex-direction: column;
  padding-block: var(--s-2);
}

/* The list sits midway between the heading and the bottom of the column
   (once the layout stacks on smaller screens, a fixed gap takes over) */
.accordion {
  margin-block: auto;
}

/* Accordion: one item open at a time. Dividers are inset shadows, not borders. */
.accordion__item {
  padding-bottom: var(--s-2);
  box-shadow: inset 0 1px 0 var(--line);
}

.accordion__item:first-child {
  box-shadow: none;
}

.accordion__trigger {
  display: block;
  width: 100%;
  padding-top: var(--s-3);
  font: var(--t-subtitle);
  letter-spacing: var(--track-heading);
  text-align: left;
  color: var(--ink-faint);
  transition: color 0.3s ease;
}

.accordion__trigger:hover,
.accordion__item.is-open .accordion__trigger {
  color: var(--ink);
}

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.45s var(--ease), visibility 0s 0.45s;
}

.accordion__item.is-open .accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.accordion__clip {
  min-height: 0;
  overflow: hidden;
}

.accordion__text {
  max-width: 320px;
  padding-top: var(--s-1);
  color: var(--ink-soft);
}

/* Showcase card: a white square that shows one panel per accordion item */
.showcase {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--paper);
}

/* Every panel fills the card and fades in when its item is opened */
.showcase__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}

.showcase__shot.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* App screens on a white background. The picture is enlarged slightly
   (--shot-scale) so the phones in it sit at a good size; only empty white
   margin is trimmed. */
img.showcase__shot {
  object-fit: contain;
  transform: scale(var(--shot-scale, 1.1));
  /* The picture's background is a hair off pure white (252 to 254 of 255).
     This lifts it to exactly the card's white so no edge can show. */
  filter: brightness(1.012);
}

/* Launch poster: the background picture covers the whole card, with the date
   at the top, the headline in the middle and the logo at the bottom. The text
   uses the site's heading styles, exactly as the hero and section headings do. */
.poster {
  display: grid;
  place-items: center;
  text-align: center;
}

.poster__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.poster__date,
.poster__title,
.poster__logo {
  position: relative;
}

.poster__title {
  max-width: calc(100% - 2 * var(--s-8));
}

.poster__date {
  position: absolute;
  top: var(--s-8);
  right: 0;
  left: 0;
  font: var(--t-subtitle);
  letter-spacing: var(--track-heading);
  font-variation-settings: "opsz" 32;
}

.poster__logo {
  position: absolute;
  bottom: var(--s-8);
  left: 50%;
  width: 104px;
  height: var(--s-7);
  transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

/* Home page: a short, centred introduction that leads to the About page.
   The About page reuses the same centred block for its closing section. */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.about__text {
  max-width: 640px;
  margin-top: var(--stack-copy);
  font: var(--t-lead);
  letter-spacing: var(--track-lead);
  color: var(--ink-soft);
}

.about .btn {
  margin-top: var(--stack-action);
}

/* --------------------------------------------------------------------------
   Blog
   -------------------------------------------------------------------------- */

.blog__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--stack-action);
  text-align: center;
}

.blog__title {
  max-width: 560px;
}

/* Up to three cards per row; a row with fewer cards sits centred */
.posts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--stack-content);
}

.posts > li {
  flex: 0 0 calc((100% - 2 * var(--s-2)) / 3);
  min-width: 0;
}

.post {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  height: 416px;
  padding: var(--s-5);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--paper);
  transition: background-color 0.3s ease;
}

.post:hover,
.post:focus-visible {
  background: var(--mist-deep);
}

.post__tag {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  font: var(--t-body-strong);
}

/* The body rests one meta-row lower, then lifts on hover to reveal the meta */
.post__body {
  display: block;
  transform: translateY(var(--s-4));
  transition: transform 0.45s var(--ease);
}

.post__title {
  font: var(--t-subtitle);
  letter-spacing: var(--track-heading);
}

.post__meta {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-1);
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.post:hover .post__body,
.post:focus-visible .post__body {
  transform: none;
}

.post:hover .post__meta,
.post:focus-visible .post__meta {
  opacity: 1;
}

@media (hover: none) {
  .post__body {
    transform: none;
  }

  .post__meta {
    opacity: 1;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-7) var(--s-17);
  background: var(--night);
  color: var(--paper);
}

.footer__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-6) var(--s-8);
}

.footer__brand {
  grid-row: span 2;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font: var(--t-lead-strong);
  letter-spacing: var(--track-lead);
  white-space: nowrap;
}

.footer__copy {
  margin-top: var(--s-2);
  font: var(--t-caption);
  color: var(--night-soft);
}

/* Social icons sit under the logo. Each has a 40px tap area, so the row is
   pulled left by 8px to line the first icon up with the logo above it. */
.footer__social {
  display: flex;
  margin: var(--s-3) 0 0 calc(var(--s-1) * -1);
}

.footer__icon {
  display: grid;
  place-items: center;
  width: var(--s-5);
  height: var(--s-5);
  border-radius: var(--radius-pill);
  transition: background-color 0.2s ease;
}

.footer__icon:hover {
  background: var(--night-raise);
}

.footer__nav {
  display: grid;
  grid-template-columns: 160px 160px auto;
  gap: var(--s-4) var(--s-2);
}

.footer__heading {
  font: var(--t-caption);
  color: var(--night-soft);
}

.footer__list {
  display: grid;
  margin-top: var(--s-2);
}

.footer__list li {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}

.footer__link {
  display: block;
  font: var(--t-body-strong);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.footer__link:hover {
  color: var(--night-soft);
}

.footer__link--quiet {
  font: var(--t-caption);
  color: var(--night-soft);
}

.footer__link--quiet:hover {
  color: var(--paper);
}

.badge {
  height: var(--s-2);
  padding-inline: var(--s-1);
  border-radius: var(--radius-pill);
  background: #2e2e2e;
  font: 700 11px/16px var(--font);
}

.footer__legal {
  grid-column: 2;
  justify-self: end;
  display: flex;
  gap: var(--s-2);
}

.footer__watermark {
  position: absolute;
  bottom: 0;
  left: 0;
  color: var(--night-raise);
}

/* --------------------------------------------------------------------------
   Policy pages (privacy.html, terms.html)
   A contents list that stays in view on the left, the document on the right.
   Built from the same type and spacing tokens as the home page.
   -------------------------------------------------------------------------- */

.policy {
  display: grid;
  grid-template-columns: 240px minmax(0, 640px);
  justify-content: space-between;
  row-gap: var(--stack-content);
  padding-block: var(--section-pad);
}

.policy__header {
  grid-column: 1 / -1;
}

.policy__meta {
  margin-top: var(--stack-copy);
  font: var(--t-lead);
  letter-spacing: var(--track-lead);
  color: var(--ink-soft);
}

.toc {
  position: sticky;
  top: var(--s-4);
  align-self: start;
  max-height: calc(100vh - var(--s-8));
  overflow-y: auto;
}

.toc__title {
  font: var(--t-caption);
  color: var(--ink-soft);
}

.toc__list {
  display: grid;
  gap: var(--s-1);
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}

.toc__link {
  display: flex;
  gap: var(--s-1);
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

.toc__num {
  flex: none;
  width: var(--s-3);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.toc__link:hover,
.toc__link[aria-current] {
  color: var(--ink);
}

.prose__section {
  scroll-margin-top: var(--s-4);
}

.prose__section + .prose__section {
  margin-top: var(--s-8);
}

.prose h2 {
  font: var(--t-subtitle);
  letter-spacing: var(--track-heading);
  font-variation-settings: "opsz" 32;
  text-wrap: balance;
}

.prose h3 {
  margin-top: var(--s-4);
  font: var(--t-lead-strong);
  letter-spacing: var(--track-lead);
}

.prose h2 + h3 {
  margin-top: var(--s-3);
}

.prose p,
.prose ul,
.prose ol {
  margin: var(--s-2) 0 0;
}

.prose ul,
.prose ol {
  padding-left: var(--s-3);
}

.prose ul {
  list-style: disc;
}

.prose li + li {
  margin-top: var(--s-1);
}

.prose li::marker {
  color: var(--ink-faint);
}

.prose strong {
  font-weight: 550;
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s ease;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

/* The facts list and the tables sit in the same soft card as the rest of the site.
   Row dividers are inset shadows, so they take up no space. */
.facts,
.table-card {
  margin: var(--s-3) 0 0;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--radius-sm);
  background: var(--mist);
}

.prose .facts + p,
.prose .table-card + p {
  margin-top: var(--s-3);
}

.facts__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-2);
  box-shadow: inset 0 -1px 0 var(--line);
}

.facts__row:last-child {
  box-shadow: none;
}

.facts dt {
  color: var(--ink-soft);
}

.facts dd {
  margin: 0;
}

.table-card {
  overflow-x: auto;
}

.table-card table {
  width: 100%;
  border-spacing: 0;
}

.table-card th,
.table-card td {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  text-align: left;
  vertical-align: top;
  box-shadow: inset 0 -1px 0 var(--line);
}

.table-card th {
  font: var(--t-caption);
  color: var(--ink-soft);
}

.table-card th:last-child,
.table-card td:last-child {
  padding-right: 0;
}

.table-card tbody tr:last-child td {
  box-shadow: none;
}

.table-card td:first-child {
  font-weight: 550;
}

.table-card--narrow td:first-child {
  width: 40%;
}

/* Details from the draft that still need filling in. They show highlighted so
   none are missed; delete this rule once every one is completed. */
.todo {
  border-radius: 4px;
  background: #ffe9a8;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.footer__link[aria-current="page"] {
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   Blog pages (blog/index.html and the post pages beside it)
   -------------------------------------------------------------------------- */

/* Index: title, search and topic chips, then every post as a card */
.blog-hero,
.page-hero {
  text-align: center;
}

.blog-hero__lead,
.page-hero__lead {
  margin-top: var(--stack-copy);
  font: var(--t-lead);
  letter-spacing: var(--track-lead);
  color: var(--ink-soft);
}

.page-hero__lead {
  max-width: 640px;
  margin-inline: auto;
}

.search {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  width: 100%;
  max-width: 480px;
  height: var(--s-6);
  margin: var(--stack-action) auto 0;
  padding-inline: var(--s-2) var(--s-3);
  border-radius: var(--radius-pill);
  background: var(--mist);
  color: var(--ink-soft);
  transition: box-shadow 0.2s ease;
}

.search:focus-within {
  box-shadow: 0 0 0 2px var(--ink);
}

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}

.search__input::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1);
  margin-top: var(--s-2);
}

.search[hidden],
.chips[hidden] {
  display: none;
}

.chip {
  height: var(--s-5);
  padding-inline: var(--s-2);
  border-radius: var(--radius-pill);
  font: var(--t-body-strong);
  color: var(--ink-soft);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover {
  background: var(--mist);
  color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

/* On the white index page the cards take the soft grey instead */
.blog-index .post {
  background: var(--mist);
}

.blog-index .post:hover,
.blog-index .post:focus-visible {
  background: var(--mist-deep);
}

.blog-index__empty {
  font: var(--t-lead);
  letter-spacing: var(--track-lead);
  text-align: center;
  color: var(--ink-soft);
}

/* Post: centred heading, then a comfortable reading column */
.article {
  padding-block: var(--section-pad);
}

.article__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 880px;
  margin-inline: auto;
  text-align: center;
}

.article__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font: var(--t-body-strong);
  color: var(--ink-soft);
  transition: color 0.2s ease;
}

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

.article__back .icon {
  transform: rotate(180deg);
}

.article__meta {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  margin-top: var(--s-5);
  color: var(--ink-soft);
}

.article__meta .post__tag {
  color: var(--ink);
}

.article__header .display {
  margin-top: var(--s-3);
}

.article__byline {
  margin-top: var(--stack-copy);
  font: var(--t-lead);
  letter-spacing: var(--track-lead);
  color: var(--ink-soft);
}

.prose--article {
  max-width: 640px;
  margin: var(--stack-content) auto 0;
}

.prose--article > :first-child {
  margin-top: 0;
}

.prose--article p,
.prose--article li {
  font: var(--t-reading);
}

.prose--article p,
.prose--article ul,
.prose--article ol {
  margin-top: var(--s-3);
}

.prose--article h2 {
  margin-top: var(--s-6);
}

.prose--article blockquote {
  margin: var(--s-5) 0 0;
  padding-left: var(--s-3);
  box-shadow: inset 2px 0 0 var(--ink);
  font: var(--t-subtitle);
  letter-spacing: var(--track-heading);
  font-variation-settings: "opsz" 32;
  text-wrap: balance;
}

.figure {
  margin: var(--s-5) 0 0;
}

.figure__media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--mist);
  font: var(--t-caption);
  font-weight: 550;
  color: var(--ink-soft);
}

.figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
}

.figure figcaption {
  margin-top: var(--s-2);
  font: var(--t-caption);
  text-align: center;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

.br-md {
  display: none;
}

@media (min-width: 640px) {
  .br-md {
    display: inline;
  }
}

@media (max-width: 1199px) {
  :root {
    --section-pad: var(--s-16);
    --t-display: 600 64px/64px var(--font);
  }
}

@media (max-width: 1023px) {
  .apps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-8);
  }

  .apps__intro {
    gap: var(--s-5);
    padding-block: 0;
  }

  .showcase {
    justify-self: center;
    width: 100%;
    max-width: 576px;
  }


  .policy {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-6);
  }

  .toc {
    position: static;
    max-height: none;
    padding: var(--s-3);
    border-radius: var(--radius-sm);
    background: var(--mist);
  }

  .toc__list {
    grid-auto-flow: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--toc-rows, 8), auto);
    column-gap: var(--s-3);
  }

  .prose {
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .posts > li {
    flex-basis: 100%;
  }

  .post {
    height: auto;
    min-height: 280px;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer__brand {
    grid-row: auto;
  }

  .footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer__legal {
    grid-column: auto;
    justify-self: start;
  }
}

@media (max-width: 639px) {
  :root {
    --gutter: var(--s-3);
    --section-pad: var(--s-12);
    --stack-content: var(--s-6);
    --stack-action: var(--s-4);
    --t-display: 600 40px/48px var(--font);
    --t-title: 600 32px/40px var(--font);
  }

  .nav__logo {
    margin-right: var(--s-3);
  }

  .nav__links {
    gap: var(--s-2);
  }

  .nav__social,
  .nav__contact::before {
    display: none;
  }

  .nav__contact {
    margin-left: var(--s-2);
  }

  .showcase {
    aspect-ratio: 8 / 9;
    border-radius: var(--radius-sm);
  }

  .poster__title {
    max-width: calc(100% - 2 * var(--s-5));
  }

  .poster__date {
    top: var(--s-5);
  }

  .poster__logo {
    bottom: var(--s-5);
    width: 88px;
    height: var(--s-6);
  }

  .post {
    padding: var(--s-4);
    border-radius: var(--radius-sm);
  }

  .footer__list {
    gap: var(--s-1);
  }

  .toc__list {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .table-card table {
    min-width: 560px;
  }

  .table-card--narrow table {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}