/* ---------------------------------------------------------------------------
   The blog
   ---------------------------------------------------------------------------
   The front page is a magazine (sketch A on the design canvas): a headline,
   the topics, one post large and the rest in a grid. A post is a guide with
   rails (sketch B): what is on the page down the left, the text in the middle,
   and a demo down the right.

   Every post wears a cover: one colour per kind of post, a label, a short
   title, and the systems it is about on white tiles. The same drawing is used
   on the card, in the post's header and — drawn by Chrome at 1200 by 630 — as
   the image a link shows when it is shared, so it is sized throughout in
   container units and only its text has a floor. The pages around it are
   written in the tokens from shared.css, so they are dark at night like
   everything else; the covers are the same colour in both.
   --------------------------------------------------------------------------- */

.blog-body .wrap-wide {
  max-width: 1240px;
}

/* site.css sets every section's padding and caps every h2 at 20ch, which suit
   the marketing pages' big statements. The blog sets its own spacing, and its
   headings are titles that must not wrap after three words. The dark close
   sits right on the footer, so the footer's gap above it goes too. */
.blog-body h2 {
  max-width: none;
}

.blog-body footer.site {
  margin-top: 0;
}

/* --- covers ---------------------------------------------------------------- */

.cover {
  container-type: inline-size;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  color: #fff;
  isolation: isolate;
}

.cover-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 2.2cqw, 26px);
  padding: clamp(14px, 4.4cqw, 52px) clamp(14px, 5cqw, 80px) 0;
  text-align: center;
}

.cover-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.35em 0.9em;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font: 600 clamp(11px, 1.85cqw, 22px) / 1.2 var(--sans);
  white-space: nowrap;
}

.cover-pill .ico {
  stroke-width: 2.2;
}

.cover-title {
  max-width: 88%;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 6cqw, 72px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cover-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3cqw, 40px);
  width: clamp(232px, 64%, 760px);
  height: 40%;
  margin-top: auto;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-bottom: 0;
  border-radius: clamp(14px, 2.6cqw, 30px) clamp(14px, 2.6cqw, 30px) 0 0;
  background: rgba(255, 255, 255, 0.15);
}

.tile {
  --t: clamp(42px, 11cqw, 132px);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--t) * 0.04);
  width: var(--t);
  height: var(--t);
  border-radius: calc(var(--t) * 0.24);
  background: #fff;
  color: #1b1f1e;
  box-shadow: 0 1.2cqw 2.6cqw -1cqw rgba(0, 0, 0, 0.5);
}

.tile img {
  display: block;
  width: 56%;
  height: 56%;
  object-fit: contain;
}

/* A wordmark gets room rather than being squeezed into a square. */
.tile-wide {
  width: calc(var(--t) * 1.8);
}

.tile-wide img {
  width: 80%;
  height: 50%;
}

/* A brand's name in our type, where its logo is not ours to use — the way the
   home page's logo strip sets Microsoft and Oracle. */
.tile-word span {
  font: 650 clamp(11px, 2cqw, 24px) / 1 var(--sans);
  letter-spacing: -0.01em;
}

.tile .ico {
  width: 48%;
  height: 48%;
  stroke-width: 1.9;
}

.tile b {
  font: 700 clamp(9px, 1.3cqw, 15px) / 1 var(--sans);
}

/* Tiles step down and up. Only our own may tilt: a brand's mark is never
   rotated (blog/logos/README.md), so .tile-tilt is never put on a logo. */
.tile-low {
  translate: 0 14%;
}

.tile-tilt {
  rotate: -7deg;
}

.tile-tilt.tile-low {
  rotate: 6deg;
}

.tile-mark {
  overflow: hidden;
  background: none;
}

.tile-mark img {
  width: 100%;
  height: 100%;
}

/* A spreadsheet: three ruled lines and its extension. Sized from the tile, not
   in percentages: a padding percentage is of the parent's width, and would
   blow the tile up to the size of the glass. */
.tile-file {
  width: calc(var(--t) * 0.8);
  align-items: stretch;
  justify-content: flex-start;
  gap: calc(var(--t) * 0.07);
  padding: calc(var(--t) * 0.16) calc(var(--t) * 0.12) calc(var(--t) * 0.1);
}

.tile-file i {
  height: calc(var(--t) * 0.045);
  min-height: 2px;
  border-radius: 2px;
  background: #9fceb0;
}

.tile-file i:nth-of-type(3) {
  width: 60%;
}

.tile-file b {
  margin-top: auto;
  text-align: center;
  color: #134a29;
  font-family: var(--mono);
}

.cover-chip {
  flex: none;
  padding: 0.45em 0.95em;
  border-radius: 999px;
  background: #fff;
  color: #1b1f1e;
  font: 700 clamp(11px, 2.1cqw, 26px) / 1.1 var(--sans);
  white-space: nowrap;
}

/* One flat colour for each kind of post, from the site's and the films'
   palette. Flat since mockup D: the site keeps its one gradient for the stage
   the home page's real screens stand on. */
.cover-compared {
  background: #5a46d2;
}

.cover-pair {
  background: #c7491c;
}

.cover-sync {
  background: #9a5a00;
}

.cover-howto {
  background: #26292a;
}

.cover-template {
  background: #2c864d;
}

.cover-retail {
  background: #a63a12;
}

/* The charcoal cover would sink into the night page without an edge. */
:root[data-theme='dark'] .cover-howto {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* The share image: the cover alone, at the size a link preview asks for. */
body.share {
  position: relative;
  width: 1200px;
  height: 630px;
  margin: 0;
  overflow: hidden;
}

body.share .cover {
  width: 1200px;
  height: 630px;
  aspect-ratio: auto;
  border-radius: 0;
}

.share-site {
  position: absolute;
  right: 36px;
  bottom: 28px;
  z-index: 2;
  font: 500 20px var(--sans);
  color: rgba(255, 255, 255, 0.88);
}

/* --- the front page ------------------------------------------------------------ */

.blog-hero {
  padding-block: 68px 30px;
}

.blog-hero .eyebrow a {
  color: inherit;
  text-decoration: none;
}

.blog-hero h1 {
  max-width: 920px;
  font-size: clamp(40px, 6vw, 62px);
}

.blog-hero .lede {
  max-width: 600px;
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.55;
}

.blog-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 40px;
}

.blog-topics a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
}

.blog-topics a:hover {
  border-color: var(--text-dim);
}

.blog-topics a[aria-current] {
  border-color: transparent;
  background: var(--btn);
  color: var(--btn-text);
}

.blog-topics .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.blog-feature {
  padding-block: 0 72px;
}

.feature-card {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.feature-card .cover {
  border-radius: 18px;
}

.feature-text .eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--text-dim);
}

.feature-text h2 {
  font-size: clamp(30px, 3.6vw, 40px);
}

.feature-text p {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-soft);
}

.feature-card:hover h2 {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.post-meta {
  font-size: 13.5px;
  color: var(--text-dim);
}

.feature-text .post-meta {
  font-size: 14px;
}

.blog-latest {
  padding-block: 0 80px;
}

.blog-latest-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.blog-latest-head h2 {
  font-size: 32px;
}

.blog-latest-head a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  color: var(--text-soft);
  text-decoration: none;
}

.blog-latest-head a:hover {
  color: var(--text);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 44px 28px;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.post-card .cover {
  transition: translate 0.2s ease;
}

.post-card:hover .cover {
  translate: 0 -3px;
}

.post-card h3 {
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.post-card:hover h3 {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 4px;
}

.post-card p {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.post-card .post-meta {
  font-size: 13px;
  color: var(--text-dim);
}

/* The close: a demo, on the dark ground in both themes. */
.blog-close {
  padding-block: 0;
  background: var(--ink);
  color: var(--ink-text);
}

.blog-close-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.blog-close h2 {
  font-size: clamp(30px, 3.6vw, 38px);
}

.blog-close p {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.blog-close-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-close .btn {
  background: var(--ink-text);
  color: #111;
}

.blog-close .btn.ghost {
  background: transparent;
  color: var(--ink-text);
}

/* --- a post -------------------------------------------------------------------- */

.post-head {
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.post-head-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 44px;
  align-items: center;
  padding-top: 44px;
  padding-bottom: 44px;
}

.post-head h1 {
  margin-top: 14px;
  font-size: clamp(34px, 4.4vw, 48px);
}

.post-dek {
  max-width: 640px;
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--text-soft);
}

.post-actions {
  margin-top: 22px;
}

.post-byline {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
}

.post-author {
  font-weight: 600;
  color: var(--text);
}

.post-shell {
  display: grid;
  grid-template-columns: 190px minmax(0, 660px) 264px;
  justify-content: space-between;
  align-items: start;
  gap: 44px;
  padding-top: 40px;
  padding-bottom: 72px;
}

.post-toc,
.post-rail {
  position: sticky;
  top: 80px;
}

.post-toc-title {
  margin-bottom: 10px;
  font: 500 11px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.post-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.post-toc a {
  display: block;
  padding: 6px 0 6px 14px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-soft);
  text-decoration: none;
}

.post-toc a:hover {
  color: var(--text);
}

.post-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rail-card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.rail-title {
  font: 500 21px / 1.2 var(--serif);
  letter-spacing: -0.015em;
}

.rail-note {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

.rail-card .btn {
  width: 100%;
  margin-top: 14px;
}

.rail-card .link {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
}

.rail-file {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.file-badge {
  flex: none;
  padding: 3px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ok) 14%, var(--panel));
  color: var(--ok);
  font: 600 10.5px var(--mono);
}

.post-next {
  border-top: 1px solid var(--line);
  padding: 56px 0 80px;
}

.post-next h2 {
  margin-bottom: 26px;
  font-size: 30px;
}

/* --- the text of a post ---------------------------------------------------------- */

.post-body {
  font-size: 17px;
  line-height: 1.7;
}

.post-body > :first-child {
  margin-top: 0;
}

.post-body h2,
.post-body h3,
.post-body h4 {
  position: relative;
  scroll-margin-top: 80px;
}

.post-body h2 {
  margin: 52px 0 12px;
  font-size: clamp(26px, 3vw, 31px);
  line-height: 1.15;
}

.post-body h3 {
  margin: 30px 0 8px;
  font-size: 18px;
}

.post-body h4 {
  margin: 22px 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.post-body .anchor {
  position: absolute;
  left: -1em;
  color: var(--text-dim);
  font-weight: 400;
  text-decoration: none;
  opacity: 0;
}

.post-body h2:hover .anchor,
.post-body h3:hover .anchor,
.post-body .anchor:focus-visible {
  opacity: 1;
}

.post-body p,
.post-body ul,
.post-body ol {
  margin: 0 0 16px;
}

.post-body ul,
.post-body ol {
  padding-left: 24px;
}

.post-body li {
  margin-bottom: 6px;
}

.post-body ol > li::marker {
  font-weight: 600;
  color: var(--text-soft);
}

.post-body strong {
  font-weight: 600;
}

.post-body a:not(.btn, .anchor) {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
}

.post-body a:not(.btn, .anchor):hover {
  text-decoration-color: currentColor;
}

.post-body code {
  padding: 2px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: var(--card);
  font-family: var(--mono);
  font-size: 0.86em;
  overflow-wrap: anywhere;
}

.post-body .code {
  margin: 20px 0 22px;
  border-radius: 12px;
  background: var(--ink);
  overflow: hidden;
}

.post-body .code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  color: var(--ink-text);
  font: 400 14.5px / 1.65 var(--mono);
}

.post-body .code pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal;
}

.post-body .table-scroll {
  margin: 20px 0 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

/* Tight enough that a seven-column table of short values fits the measure
   without breaking "Store 014" or a SKU over two lines. The first column is
   the row's name, so it never wraps; a wide table scrolls in its box. */
.post-body th,
.post-body td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}

.post-body td:first-child {
  white-space: nowrap;
}

.post-body th {
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}

.post-body tr:last-child td {
  border-bottom: 0;
}

.post-body .table-scroll + p {
  font-size: 14px;
  color: var(--text-dim);
}

.post-body blockquote {
  margin: 0 0 16px;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--line);
  color: var(--text-soft);
}

/* The short answer: the paragraph a search result is most likely to quote. */
.post-body .callout {
  margin: 0 0 24px;
  padding: 20px 22px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  font-size: 16px;
  line-height: 1.6;
}

.post-body .callout-label {
  margin-bottom: 8px;
  font: 500 11.5px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.post-body .callout ul {
  padding-left: 20px;
}

/* A warning is an amber note, with no border (the site's rule for warnings). */
.post-body .callout-warning,
.post-body .callout-important {
  border-color: transparent;
  background: color-mix(in srgb, var(--warn) 11%, var(--panel));
}

.post-body .callout-warning .callout-label,
.post-body .callout-important .callout-label {
  color: var(--warn);
}

.post-body .shot {
  margin: 26px 0 30px;
}

.post-body .shot-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 30px 60px -40px rgba(17, 17, 17, 0.4);
}

/* No display here: site.css shows the shot that matches the theme by
   switching display, and a rule of equal weight loaded after it would win. */
.post-body .shot img {
  width: 100%;
  height: auto;
  vertical-align: top;
}

.post-body figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* A demo, where the text has earned it. */
.post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin: 32px 0;
  padding: 24px;
  border-radius: 16px;
  background: var(--ink);
  color: var(--ink-text);
}

.post-cta > div {
  flex: 1 1 320px;
}

.post-body .post-cta p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.post-body .post-cta .post-cta-title {
  margin-bottom: 6px;
  font: 500 24px / 1.2 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ink-text);
}

.post-cta .btn {
  background: var(--ink-text);
  color: #111;
}

/* At night the page is nearly ink itself, so the ink pieces step up a shade
   and the close gets an edge, or they read as holes in the page. */
:root[data-theme='dark'] .blog-close,
:root[data-theme='dark'] .post-cta,
:root[data-theme='dark'] .post-body .code {
  background: var(--ink-raised);
}

:root[data-theme='dark'] .blog-close {
  border-top: 1px solid var(--ink-line);
}

/* --- narrower ------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .post-shell {
    grid-template-columns: minmax(0, 1fr) 264px;
  }

  .post-toc {
    display: none;
  }
}

@media (max-width: 900px) {
  .post-head-in,
  .feature-card {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .post-head .cover {
    max-width: 520px;
  }

  .post-shell {
    /* minmax(0, …): a plain 1fr is as wide as the widest table or code block, and the page with it. */
    grid-template-columns: minmax(0, 1fr);
  }

  .post-rail {
    position: static;
  }
}

@media (max-width: 640px) {
  .blog-hero {
    padding-top: 44px;
  }

  .post-head-in {
    padding-top: 28px;
    padding-bottom: 32px;
  }

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