/* Work stories: a reading column with figures that break out to the full grid. */
.back { display: inline-flex; gap: .5em; align-items: center; }
.back svg { width: 1em; height: 1em; transition: transform .5s var(--ease); }
.back:hover svg { transform: translateX(-.25em); }

.article-head { padding-block: clamp(48px, 9vw, 120px) 0; row-gap: 28px; }
.article-head > * { grid-column: 1 / -1; min-width: 0; }
/* Title on the left, summary beside it, aligned to the title's last line */
.article-head > .title { grid-column: 1 / span 7; }
.article-head > .lede {
  grid-column: 8 / span 5;
  align-self: end;
  font-size: clamp(1.2rem, 1.75vw, 1.65rem);
}
@media (max-width: 860px) {
  .article-head > .title, .article-head > .lede { grid-column: 1 / -1; }
  .article-head > .lede { font-size: clamp(1.25rem, 3.6vw, 1.6rem); }
}
.eyebrow { margin: 0; }
.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "opsz" 96, "wdth" 85;
  font-size: clamp(3rem, 9.5vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.04em;
  text-wrap: balance;
  max-width: 13ch;
}
.title .m { margin-right: .22em; }
.title .m:last-child { margin-right: 0; }
.lede {
  margin: 0;
  max-width: 34ch;
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "wdth" 92;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  line-height: 1.22;
  letter-spacing: -.012em;
  color: var(--ink-2);
  text-wrap: pretty;
}
.meta {
  margin: clamp(12px, 3vw, 32px) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px var(--gap);
  padding-top: 16px; border-top: 1px solid var(--ink);
}
.meta div { min-width: 0; }
.meta dt { margin-bottom: 6px; }
.meta dd {
  margin: 0;
  font: 400 1rem/1.4 var(--body);
  letter-spacing: 0; text-transform: none;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.meta a { color: var(--accent); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* Body */
.story { padding-block: clamp(56px, 8vw, 112px) 0; row-gap: clamp(36px, 5vw, 64px); }
.story > * { min-width: 0; }
.prose { grid-column: 4 / span 6; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin: 0 0 .5em;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "opsz" 48, "wdth" 90;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.prose p { margin-bottom: 0; font-size: clamp(1.2rem, 1.4vw, 1.32rem); line-height: 1.65; max-width: 64ch; text-wrap: pretty; }
.prose a { color: var(--accent); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.prose blockquote {
  margin: 1.6em 0 0; padding: 0;
  font-family: var(--display);
  font-variation-settings: "opsz" 60, "wdth" 88;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.12; letter-spacing: -.02em;
  text-wrap: balance;
}

.fig { margin: 0; grid-column: 2 / span 10; }
.fig.wide { grid-column: 1 / -1; }
.fig.narrow { grid-column: 4 / span 6; }
/* Small: a phone-shaped figure, shown at about a real phone's size */
.fig.small { grid-column: 4 / span 6; width: 100%; max-width: 390px; justify-self: center; }
/* Screen recordings of a phone: clip to the phone's own rounded outline so no backdrop shows */
.fig .media.phone { clip-path: inset(0.2% 0.9% 0.2% 1.1% round 16% / 7.8%); }
.fig .frame { overflow: hidden; border-radius: 2px; background: var(--surface); }
.fig .frame.plain { background: transparent; }
.fig .media { width: 100%; height: auto; }
.fig figcaption { margin-top: 12px; }
.pair { grid-column: 2 / span 10; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.pair .fig { grid-column: auto; }

/* Next story */
.next { margin-top: clamp(96px, 14vw, 180px); border-top: 1px solid var(--ink); }
.next a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--gap);
  padding-block: 20px clamp(28px, 4vw, 48px);
}
.next .label { grid-column: 1 / -1; }
.next strong {
  font-family: var(--display); font-weight: 700;
  font-variation-settings: "opsz" 96, "wdth" 85;
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: .92; letter-spacing: -.04em;
  transition: transform .7s var(--ease), color .4s var(--ease);
}
.next svg { width: clamp(2rem, 5vw, 4rem); height: auto; transition: transform .7s var(--ease), color .4s var(--ease); }
.next a:hover strong, .next a:focus-visible strong { transform: translateX(.2em); color: var(--accent); }
.next a:hover svg, .next a:focus-visible svg { transform: translateX(.4em); color: var(--accent); }

.article-foot { padding-block: 24px clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: no-preference) {
  .article-head .meta { position: relative; border-top-color: transparent; }
  .article-head .meta::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--ink);
    transform-origin: 0 50%; animation: draw 1.2s var(--ease) .7s both;
  }
}

@media (max-width: 960px) {
  .prose, .fig.narrow, .fig.small { grid-column: 2 / span 10; }
}
@media (max-width: 640px) {
  .prose, .fig, .fig.narrow, .fig.small, .pair { grid-column: 1 / -1; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}