/* Stashy website. No build step, no external requests. */

:root {
  --canvas: #ffffff;
  --surface: #f5f5f7;
  --raised: #ffffff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --line: rgba(0, 0, 0, 0.1);
  --blue: #007aff;
  --blue-deep: #0066d6;
  --sky: #5ac8fa;

  /* The app sets its type in SF Rounded. Safari can ask for it by name. */
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
    "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;

  --nav: 52px;
  --gutter: 20px;
  --measure: 1040px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --surface: #1c1c1e;
    --raised: #2c2c2e;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --line: rgba(255, 255, 255, 0.16);
    --blue: #0a84ff;
    --blue-deep: #2b95ff;
  }
}

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

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.47 var(--text);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

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

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 30;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
}

.skip:focus {
  top: 8px;
}

/* ---------- Bar ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--nav);
  padding: 0 max(var(--gutter), calc((100vw - var(--measure)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font: 700 19px/1 var(--display);
  letter-spacing: -0.01em;
}

.brand:hover {
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
}

.nav-links a:not(.button) {
  color: var(--ink-2);
}

.nav-links a:not(.button):hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}

/* ---------- Button ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 980px;
  background: var(--blue);
  color: #fff;
  font: 600 17px/1 var(--display);
  letter-spacing: -0.005em;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.button:hover {
  background: var(--blue-deep);
  text-decoration: none;
}

.button:active {
  transform: scale(0.97);
}

.button.small {
  min-height: 32px;
  padding: 0 15px;
  font-size: 14px;
}

/* ---------- Opening scene ---------- */

/* Read top to bottom, this is the page with motion switched off: headline,
   the icon upright, then what goes into it. `.motion` further down pins the
   same elements to the screen and lets scrolling drive them. */

.scene {
  padding: calc(var(--nav) + 8vh) var(--gutter) 72px;
  text-align: center;
}

.scene-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 44px;
}

.hero-copy h1 {
  font: 700 clamp(40px, 7.4vw, 84px) / 1.04 var(--display);
  letter-spacing: -0.024em;
}

.brandword {
  background: linear-gradient(100deg, var(--sky) 4%, var(--blue) 78%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Keeps the descender of the y inside the clipped box. */
  padding-bottom: 0.12em;
}

.lede {
  margin-top: clamp(10px, 1.6vw, 18px);
  font: 600 clamp(19px, 2.3vw, 28px) / 1.18 var(--display);
  letter-spacing: -0.012em;
}

.hero-copy .button {
  margin-top: clamp(20px, 2.4vw, 28px);
}

.settle-copy h2 {
  font: 700 clamp(30px, 4.6vw, 56px) / 1.06 var(--display);
  letter-spacing: -0.022em;
}

.settle-copy p {
  text-wrap: balance;
  margin: 12px auto 0;
  max-width: 26em;
  color: var(--ink-2);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.35;
}

.tile-wrap {
  width: 200px;
  height: 200px;
}

.tile {
  position: relative;
  width: 100%;
  height: 100%;
}

.tile-face,
.tile-under {
  position: absolute;
  inset: 0;
  border-radius: 22.4%;
}

.tile-face {
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fd 100%);
  box-shadow: 0 0 0 1px rgba(0, 20, 60, 0.06),
    0 0.14em 0.36em -0.1em rgba(0, 60, 150, 0.34);
  /* The shadow is sized in em so it grows with the tile. */
  font-size: 200px;
}

.tile-under {
  display: none;
}

.tile-glow {
  position: absolute;
  inset: 26% 14% 6%;
  border-radius: 40%;
  background: radial-gradient(closest-side, rgba(0, 110, 255, 0.34), rgba(0, 110, 255, 0));
}

.tile-mark {
  position: absolute;
  inset: 9% 8.5% 8%;
  width: 83%;
  height: 83%;
}

.rest {
  display: none;
}

.kinds {
  --card: clamp(88px, 9vw, 124px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 600px;
}

/* One saved thing, the way the library draws it: a picture and a name. */
.drop {
  flex: none;
  width: var(--card);
  padding: 6px;
  border-radius: 20px;
  background: var(--raised);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 12px 26px -14px rgba(0, 30, 80, 0.36);
}

.drop.again {
  display: none;
}

.art {
  display: block;
  overflow: hidden;
  aspect-ratio: 120 / 76;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tint) 15%, var(--raised));
  color: var(--ink);
}

.art svg {
  width: 100%;
  height: 100%;
}

.art .t {
  fill: var(--tint);
}

.art .w {
  fill: #fff;
}

.art .i {
  fill: currentColor;
}

.art .s {
  fill: none;
  stroke: var(--tint);
  stroke-width: 3.4;
  stroke-linecap: round;
}

.art.sky {
  background: linear-gradient(180deg, #7cc8ff 0%, #ffe6c7 100%);
}

.again .art.sky {
  background: linear-gradient(180deg, #5b6ee1 0%, #ffb199 100%);
}

.art.screen {
  background: linear-gradient(160deg, #3a3a3c 0%, #1d1d1f 100%);
}

.tag {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 4px 3px;
  font: 600 clamp(11.5px, 1vw, 13.5px) / 1 var(--display);
  white-space: nowrap;
}

.tag svg {
  flex: none;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--tint);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- The same scene, pinned and driven by scroll (see main.js) ----- */

.motion .scene {
  height: 240vh;
  height: 240svh;
  padding: 0;
}

.motion .scene-pin {
  /* Size of the tile lying down, and of the icon once it has stood up.
     main.js refines --S0, and sets --cy and --copy-top, so the headline sits
     in the space above the tile whatever shape the window is. */
  --S0: clamp(300px, 60vw, 880px);
  --S1: min(clamp(140px, 15vw, 200px), 23svh);
  --rest: 77svh;
  --g: 0;
  --t: 0;
  --o: 0;
  --c: 0;
  --dy: 0px;
  --s1: 0.3;

  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.motion .hero-copy {
  position: absolute;
  inset: var(--copy-top, calc(var(--nav) + 9svh)) var(--gutter) auto;
  z-index: 2;
  opacity: calc(1 - var(--o));
  transform: translate3d(0, calc(var(--o) * -52px), 0) scale(calc(1 - var(--o) * 0.04));
}

.motion .hero-copy > * {
  animation: copy-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.motion .hero-copy > :nth-child(2) {
  animation-delay: 0.08s;
}

.motion .hero-copy > :nth-child(3) {
  animation-delay: 0.16s;
}

.motion .scene-pin.past .hero-copy {
  visibility: hidden;
}

.motion .settle-copy {
  position: absolute;
  inset: calc(var(--nav) + 4.5svh) var(--gutter) auto;
  z-index: 4;
  opacity: var(--c);
  transform: translate3d(0, calc((1 - var(--c)) * 30px), 0);
}

.motion .stage {
  position: absolute;
  inset: 0;
  perspective: calc(var(--S0) * 1.3);
  perspective-origin: 50% 26%;
}

.motion .tile-wrap {
  position: absolute;
  left: 50%;
  top: var(--cy, calc(60svh + var(--S0) * 0.3));
  width: var(--S0);
  height: var(--S0);
  margin: calc(var(--S0) / -2) 0 0 calc(var(--S0) / -2);
  transform-style: preserve-3d;
  transform: translate3d(0, calc(var(--dy) * var(--t)), 0)
    scale(calc((1 + (var(--s1) - 1) * var(--t)) * (1 + var(--g))))
    rotateX(calc((1 - var(--t)) * 62deg));
  will-change: transform;
}

.motion .tile {
  transform-style: preserve-3d;
  animation: tile-in 1.25s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

.motion .tile-face {
  font-size: var(--S0);
}

/* Two more sheets below the face give the tile an edge while it is tilted.
   Every depth shrinks to nothing as it stands up, so the icon ends flat. */
.motion .tile-under {
  display: block;
  background: #dfe5ef;
  transform: translateZ(calc(var(--S0) * -0.009 * (1 - var(--t))));
}

.motion .tile-under + .tile-under {
  background: #cfd7e4;
  transform: translateZ(calc(var(--S0) * -0.018 * (1 - var(--t))));
}

.motion .tile-glow {
  filter: blur(calc(var(--S0) * 0.02));
}

.motion .tile-mark {
  transform: translateZ(calc(var(--S0) * 0.055 * (1 - var(--t))));
}

/* Where the icon comes to rest. The box is also what main.js measures. */
.motion .rest {
  position: absolute;
  left: 50%;
  top: var(--rest);
  z-index: 3;
  display: block;
  width: var(--S1);
  height: var(--S1);
  margin: calc(var(--S1) / -2) 0 0 calc(var(--S1) / -2);
  transform: scale(calc(1 + var(--g)));
  pointer-events: none;
}

/* A second copy of the mark, cut down to the folder's front panel and laid
   exactly over the icon once it has landed. Things fall between the two, so
   they go into the folder instead of across it. */
.motion .flap {
  position: absolute;
  inset: 9% 8.5% 8%;
  width: 83%;
  height: 83%;
  clip-path: url(#flap-shape);
  visibility: hidden;
}

.motion .settled .flap {
  visibility: visible;
}

/* The stream. Each card's position is written by main.js every frame. */
.motion .kinds {
  position: absolute;
  inset: var(--stream-top, 30svh) 0 0;
  z-index: 2;
  display: block;
  max-width: none;
  opacity: var(--flow, 0);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 76px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 76px);
  pointer-events: none;
}

.motion .drop,
.motion .drop.again {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
}

@keyframes tile-in {
  from {
    transform: translate3d(0, 42%, 0);
  }
}

/* ---------- Sections ---------- */

.band {
  padding: clamp(72px, 11vw, 148px) var(--gutter);
}

.band + .band {
  padding-top: 0;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
}

.band h2 {
  font: 700 clamp(30px, 4.6vw, 56px) / 1.06 var(--display);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.prose {
  margin-top: 18px;
  max-width: 27em;
  color: var(--ink-2);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.4;
  text-wrap: pretty;
}

.prose + .prose {
  margin-top: 14px;
}

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

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: center;
  gap: clamp(36px, 7vw, 96px);
}

.feature.flip > :first-child {
  order: 2;
}

.card {
  padding: 24px;
  border-radius: 26px;
  background: var(--surface);
}

/* A saved link, with what Stashy wrote about it. */

.save-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

.save-head .glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}

.save-head .glyph svg {
  width: 22px;
  height: 22px;
}

.save-head h3 {
  font: 700 19px/1.2 var(--display);
}

.host {
  color: var(--ink-2);
  font-size: 14px;
}

.read {
  margin-top: 20px;
  display: grid;
  gap: 16px;
}

.read dt {
  margin-bottom: 5px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.read dd {
  font-size: 16px;
  line-height: 1.4;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chips span {
  padding: 5px 11px;
  border-radius: 980px;
  background: var(--raised);
  font-size: 14px;
}

.chips .filed {
  background: color-mix(in srgb, var(--blue) 14%, var(--raised));
  color: var(--blue);
  font-weight: 600;
}

/* Search */

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 980px;
  background: var(--raised);
  color: var(--ink-2);
  font-size: 18px;
}

.field svg {
  flex: none;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.query {
  color: var(--ink);
}

.caret {
  width: 2px;
  height: 22px;
  margin-left: -8px;
  border-radius: 2px;
  background: var(--blue);
  animation: blink 1.1s steps(1) infinite;
}

.results {
  margin-top: 8px;
}

.results li {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 4px;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.results li + li {
  border-top: 1px solid var(--line);
}

.results .glyph {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--tint) 15%, transparent);
  color: var(--tint);
}

.results strong {
  display: block;
  font: 600 16px/1.25 var(--display);
}

.results small {
  color: var(--ink-2);
  font-size: 13px;
}

.search.typing .results li {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
}

.search.found .results li:nth-child(2) {
  transition-delay: 0.09s;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* The rest, as plain text */

.more {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4.4vw, 52px) clamp(36px, 7vw, 96px);
}

.more h3 {
  font: 700 clamp(20px, 2vw, 24px) / 1.2 var(--display);
  letter-spacing: -0.01em;
}

.more p {
  margin-top: 8px;
  max-width: 26em;
  color: var(--ink-2);
}

/* Devices */

.centered {
  text-align: center;
}

.centered .prose {
  margin-left: auto;
  margin-right: auto;
  max-width: 30em;
}

.family {
  --v: 0;
  position: relative;
  margin: clamp(40px, 6vw, 72px) auto 0;
  max-width: 980px;
  aspect-ratio: 980 / 600;
}

.family img {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(0, 20, 60, 0.16));
  will-change: transform;
}

.family .mac {
  left: 1%;
  top: 0;
  width: 59%;
}

.family .ipad {
  right: 0;
  bottom: 2%;
  width: 52%;
  transform: translate3d(calc(var(--v) * 3%), calc(var(--v) * 7%), 0);
}

.family .iphone {
  left: 41%;
  bottom: 0;
  width: 16.5%;
  transform: translate3d(0, calc(var(--v) * 16%), 0);
}

/* Closing */

.closing .icon {
  width: 104px;
  height: 104px;
  margin: 0 auto 26px;
  filter: drop-shadow(0 16px 22px rgba(0, 60, 150, 0.22));
}

.closing .button {
  margin-top: 28px;
}

.fine {
  margin: 18px auto 0;
  max-width: 34em;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.45;
}

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

.footer {
  padding: 28px max(var(--gutter), calc((100vw - var(--measure)) / 2)) 40px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  color: var(--ink-2);
  font-size: 14px;
}

.footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

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

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

/* ---------- Privacy and terms ---------- */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav) + clamp(48px, 9vw, 96px)) var(--gutter) clamp(72px, 10vw, 120px);
}

.doc h1 {
  font: 700 clamp(38px, 6vw, 64px) / 1.05 var(--display);
  letter-spacing: -0.024em;
}

.doc .dated {
  margin-top: 12px;
  color: var(--ink-2);
}

.doc h2 {
  margin-top: 56px;
  font: 700 clamp(23px, 2.6vw, 28px) / 1.2 var(--display);
  letter-spacing: -0.014em;
}

.doc h3 {
  margin-top: 30px;
  font: 700 19px/1.3 var(--display);
}

.doc p,
.doc ul,
.doc address {
  margin-top: 14px;
}

.doc address {
  font-style: normal;
}

.doc ul {
  padding-left: 1.25em;
  list-style: disc;
}

.doc li + li {
  margin-top: 8px;
}

.doc li::marker {
  color: var(--ink-2);
}

.doc strong {
  font-weight: 600;
}

.doc a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent);
  text-underline-offset: 3px;
}

.short {
  margin-top: 36px;
  padding: 26px 28px 28px;
  border-radius: 26px;
  background: var(--surface);
}

.doc .short h2 {
  margin-top: 0;
}

.doc .contents {
  margin-top: 40px;
  padding-left: 0;
  list-style: none;
  columns: 2;
  column-gap: 40px;
  font-size: 15px;
}

.doc .contents li {
  margin: 0 0 8px;
  break-inside: avoid;
}

/* ---------- Questions ---------- */

.qa {
  margin-top: clamp(24px, 3.4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.qa details {
  border-top: 1px solid var(--line);
}

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font: 600 clamp(18px, 1.8vw, 21px) / 1.3 var(--display);
  letter-spacing: -0.01em;
}

.qa summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a cross when the answer is open. */
.qa summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) center / 100% 2px no-repeat,
    linear-gradient(var(--ink-2), var(--ink-2)) center / 2px 100% no-repeat;
  transition: transform 0.25s ease;
}

.qa details[open] summary::after {
  transform: rotate(45deg);
}

.qa details p {
  max-width: 42em;
  padding: 0 0 22px;
  color: var(--ink-2);
}

/* ---------- Articles ---------- */

/* A list of articles: on the landing page, on the index and under each one. */
.index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(36px, 7vw, 96px);
}

.index li {
  border-top: 1px solid var(--line);
}

.index a {
  display: block;
  height: 100%;
  padding: 20px 0 22px;
  color: var(--ink);
}

.index a:hover {
  text-decoration: none;
}

.index h3 {
  font: 700 clamp(18px, 1.7vw, 20px) / 1.25 var(--display);
  letter-spacing: -0.01em;
  transition: color 0.15s ease;
}

.index a:hover h3 {
  color: var(--blue);
}

.index p {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}

.band .index {
  margin-top: clamp(24px, 3.4vw, 40px);
}

.all {
  margin-top: 26px;
  font: 600 17px/1 var(--display);
}

.hub {
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(var(--nav) + clamp(48px, 9vw, 96px)) var(--gutter) clamp(72px, 10vw, 120px);
}

.hub h1 {
  font: 700 clamp(38px, 6vw, 64px) / 1.05 var(--display);
  letter-spacing: -0.024em;
}

.hub .lead {
  margin-top: 16px;
  max-width: 34em;
  color: var(--ink-2);
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.4;
}

.hub section {
  margin-top: clamp(48px, 7vw, 80px);
}

.hub h2 {
  font: 700 clamp(24px, 3vw, 34px) / 1.15 var(--display);
  letter-spacing: -0.018em;
}

.hub .about {
  margin: 6px 0 18px;
  color: var(--ink-2);
}

.crumbs {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: 15px;
}

.doc .crumbs {
  margin-top: 0;
}

.doc .crumbs a {
  text-decoration: none;
}

.doc ol {
  margin-top: 14px;
  padding-left: 1.4em;
  list-style: decimal;
}

.doc code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface);
  font: 0.9em ui-monospace, "SF Mono", Menlo, monospace;
}

.article h2 {
  margin-top: 44px;
}

.get {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 56px;
  padding: 22px 26px;
  border-radius: 26px;
  background: var(--surface);
}

.get img {
  flex: none;
  width: 72px;
  height: 72px;
}

.get div {
  flex: 1;
}

.doc .get h2 {
  margin: 0;
  font-size: 20px;
}

.doc .get p {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.4;
}

.doc .get .button {
  flex: none;
  color: #fff;
  text-decoration: none;
}

.related {
  margin-top: 56px;
}

.doc .related h2 {
  margin: 0 0 14px;
}

.doc .index {
  margin-top: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: minmax(0, 1fr);
}

.doc .index li + li {
  margin-top: 0;
}

.doc .index a {
  text-decoration: none;
}

.doc .index p {
  margin-top: 6px;
}

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .motion .scene-pin {
    --S0: 104vw;
    --S1: min(36vw, 20svh);
    --rest: 78svh;
  }

  .kinds {
    --card: clamp(74px, 23vw, 96px);
    gap: 9px;
  }

  .drop {
    padding: 5px;
    border-radius: 16px;
  }

  .art {
    border-radius: 11px;
  }

  .tag {
    padding: 6px 3px 2px;
    font-size: 11.5px;
  }

  .tag svg {
    width: 12px;
    height: 12px;
  }

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

  .feature.flip > :first-child {
    order: 0;
  }

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

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

  .get {
    flex-wrap: wrap;
  }

  .get .button {
    width: 100%;
  }

  .family {
    margin-left: -8px;
    margin-right: -8px;
  }

  .nav-links .optional {
    display: none;
  }

  .doc .contents {
    columns: 1;
  }
}

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