/* DiPhyx blog. Layout, type and spacing follow stripe.com/blog; colours are DiPhyx's. */

:root {
  --title: #0a2540;
  --text: #425466;
  --muted: #727f96;
  --accent: #ac5f04;            /* DiPhyx orange that reads on white; Stripe uses #635bff here */
  --knockout: #ffffff;
  --paper: #ffffff;
  --paper-2: #f6f9fc;
  --line: #e6ebf1;
  --gradient: linear-gradient(90deg, #ff8a00 0%, #ffcf1a 45%, #00c2ff 100%);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --layout: 1080px;
  --pad: 16px;
  --shadow-xs: 0 2px 5px -1px rgba(50, 50, 93, 0.25), 0 1px 3px -1px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 6px 12px -2px rgba(50, 50, 93, 0.25), 0 3px 7px -3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
  --radius: 8px;
  --angle: -6deg;
  --hover: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.6 var(--font);
  letter-spacing: 0.2px;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--hover), opacity var(--hover); }
a:hover { color: var(--title); }
h1, h2, h3, h4 { margin: 0; color: var(--title); }
p { margin: 0; }
time { color: var(--text); }

.wrap { width: 100%; max-width: var(--layout); margin: 0 auto; padding: 0 var(--pad); }

.section { position: relative; }
.section > .wrap { position: relative; }

/* Arrow used after "Read more" and on buttons (Stripe's HoverArrow) */
.arrow { position: relative; top: 1px; margin-left: 5px; stroke-width: 2px; fill: none; stroke: currentColor; }
.arrow .line { opacity: 0; transition: opacity var(--hover); }
.arrow .tip { transition: transform var(--hover); }
a:hover .arrow .line { opacity: 1; }
a:hover .arrow .tip { transform: translateX(3px); }

/* Accent anchor bar at the left of a label, like CopyTitle:before */
.anchored { position: relative; padding-left: var(--pad); }
.anchored::before {
  content: ""; position: absolute; left: 0; top: calc(0.5px + 1.6em / 2 - 0.5em);
  width: 1px; height: 1em; background: var(--accent);
}

.cta-font, .button, .read-more, .pill { font: 500 15px/1.6 var(--font); letter-spacing: 0.2px; }
.button {
  display: inline-flex; align-items: center;
  padding: 3px 12px 3px 16px; border-radius: 16.5px;
  background: var(--title); color: var(--knockout);
  white-space: nowrap; transition: background-color var(--hover), opacity var(--hover);
}
.button:hover { color: var(--knockout); opacity: 0.85; }
.button .arrow { top: 0; }
.read-more { display: inline-flex; align-items: center; color: var(--accent); }
.read-more:hover { color: var(--title); }

/* ---------------------------------------------------------------- header */

.site-header { position: relative; z-index: 5; }
.site-header .wrap { display: flex; align-items: center; height: 60px; gap: 8px; }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--title); flex: none; }
.header-crumbs { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--text); min-width: 0; flex: 1 1 auto; }
.header-crumbs .sep { color: #c2ccd9; font-weight: 400; }
.header-crumbs a { color: var(--title); }
.header-crumbs a:hover { opacity: 0.6; }
.header-crumbs span:not(.sep) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand:hover { color: var(--title); opacity: 0.7; }
.brand .mark { width: 26px; height: 26px; }
.brand-name { font-weight: 600; font-size: 19px; letter-spacing: -0.2px; }
.header-right { margin-left: auto; display: flex; align-items: center; flex: none; }
@media (max-width: 520px) { .header-crumbs span:nth-child(3), .header-crumbs span:nth-child(4) { display: none; } }
/* Same button as the Workspace button on diphyx.com: honey gradient, dark text, 6px radius */
.button-workspace {
  padding: 6px 12px 6px 14px; border-radius: 6px;
  background: linear-gradient(135deg, #ffc93d, #ffb800); color: #161a2e;
  font-weight: 500; box-shadow: none;
}
.button-workspace:hover { color: #161a2e; opacity: 1; filter: brightness(0.95); }
.button-workspace:active { filter: brightness(0.9); }

/* ---------------------------------------------------------------- angled light band (index top, CTA) */

.band { position: relative; isolation: isolate; }
.band--bottom { overflow: clip; }
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: -600px; bottom: 0;
  background: var(--paper-2);
  transform: skewY(var(--angle)); transform-origin: 0 100%;
  z-index: -2;
}
.band .stripe {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100px;
  background: linear-gradient(90deg, #ff8a00 0%, #ffb800 30%, #ffe600 55%, #3dd0ff 80%, #00c2ff 100%); opacity: 0.92;
  transform: skewY(var(--angle)); transform-origin: 0 100%;
  border-radius: 2px; z-index: -1;
  filter: saturate(1.05);
}
.band .stripe::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35) 50%, transparent);
  mix-blend-mode: soft-light;
}
.band--bottom::before { top: 0; bottom: -600px; transform-origin: 100% 0; }


/* ---------------------------------------------------------------- featured card */

.featured-wrap { padding: 24px 0 120px; }
.featured {
  display: grid; gap: 16px 0; align-items: start;
  padding: 24px 16px 16px; border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-xl);
  grid-template-areas: "category" "title" "authors" "body" "more" "image";
}
.featured .category { grid-area: category; }
.featured .title { grid-area: title; }
.featured .authors { grid-area: authors; }
.featured .excerpt { grid-area: body; }
.featured .read-more { grid-area: more; }
.featured .figure { grid-area: image; }
.category { font: 500 15px/1.6 var(--font); color: var(--accent); }
.category a { color: inherit; }
.category a:hover { color: var(--title); }
.featured .title { font: 600 26px/1.3 var(--font); letter-spacing: -0.2px; padding-right: 16px; }
.featured .title a { color: var(--title); }
.featured .title a:hover { opacity: 0.7; }
.excerpt { font: 400 15px/1.6 var(--font); letter-spacing: 0.2px; color: var(--text); }
.figure { display: block; border-radius: 4px; overflow: hidden; background: var(--paper-2); }
.figure img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 900px) {
  .featured-wrap { padding: 40px 0 160px; }
  .band .stripe { height: 140px; }
  .featured {
    grid-template-columns: 1fr 1fr; gap: 16px 0; padding: 24px 0 24px 16px;
    grid-template-areas: "category image" "title image" "authors image" "body image" "more image";
  }
  .featured > :not(.figure) { padding-right: 32px; }
  .featured .title { font-size: 34px; line-height: 1.294; letter-spacing: -0.1px; }
  .featured .figure { align-self: stretch; margin: -8px 16px 0 16px; }
  .featured .figure img { height: 100%; }
}

/* ---------------------------------------------------------------- authors */

.authors { display: flex; flex-wrap: wrap; gap: 16px 32px; }
.author { display: flex; align-items: center; }
.avatar {
  flex: none; width: 48px; height: 48px; margin-right: 16px; border-radius: 50%;
  border: 1px solid #e6ecf2; background: var(--paper-2);
  display: grid; place-items: center; font: 600 15px/1 var(--font); color: var(--title); object-fit: cover;
}
.author-text { display: flex; flex-direction: column; }
.author-name { font: 500 15px/1.6 var(--font); letter-spacing: 0.2px; color: var(--title); }
a.author-name:hover { color: var(--title); opacity: 0.6; }
.author-role { font: 400 15px/1.6 var(--font); letter-spacing: 0.2px; color: var(--text); }

/* ---------------------------------------------------------------- filter pills */

.filters-wrap { padding: 72px 0 0; }
.filters { display: flex; gap: 0; flex-wrap: wrap; padding: 0 var(--pad); }
.pill {
  height: 32px; padding: 3px 16px 6px; border-radius: 16.5px; border: 0;
  background: transparent; color: var(--title); cursor: pointer; white-space: nowrap;
  transition: opacity var(--hover);
}
.pill:not([aria-current]):hover { opacity: 0.65; color: var(--title); }
.pill[aria-current="page"] { background: var(--accent); color: var(--knockout); }

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

.posts-wrap { padding: 56px 0 72px; display: grid; row-gap: clamp(60px, 8vw, 112px); }
.post-row {
  display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px 0;
  justify-items: start; align-items: start;
  grid-template-areas: "category" "title" "authors" "date" "image" "body" "more";
}
.post-row > * { padding: 0 var(--pad); max-width: 100%; }
.post-row .category { grid-area: category; }
.post-row .title { grid-area: title; }
.post-row .authors { grid-area: authors; }
.post-row .date { grid-area: date; }
.post-row .figure-cell { grid-area: image; width: 100%; }
.post-row .excerpt { grid-area: body; }
.post-row .read-more { grid-area: more; }
.post-row .title { font: 600 34px/1.294 var(--font); letter-spacing: -0.1px; }
.post-row .title a { color: var(--title); }
.post-row .title a:hover { opacity: 0.7; }
.post-row .date { font: 400 15px/1.6 var(--font); color: var(--text); }
/* Stripe's BlogImageCard: small shadow on phones, large on desktop */
.post-row .figure { box-shadow: var(--shadow-sm); border-radius: var(--radius); margin: 8px 0; }
.posts-empty { padding: 0 var(--pad); color: var(--muted); }
@media (min-width: 600px) {
  .post-row {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "category date" "title title" "authors authors" "image image" "body body" "more more";
  }
}
@media (min-width: 900px) {
  .post-row {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "category category category date"
      "title    title    title    authors"
      "body     body     image    image"
      "more     more     image    image"
      ".        .        image    image";
  }
  .post-row .title { font-size: 38px; line-height: 1.263; letter-spacing: -0.2px; padding-right: 64px; }
  .post-row .excerpt { padding-right: 32px; }
  .post-row .figure-cell { padding-right: 0; }
  .post-row .figure { box-shadow: var(--shadow-lg); }
}

/* ---------------------------------------------------------------- article: placement after distill.pub */
.d-title, .d-byline, .d-article {
  display: grid; column-gap: 32px; justify-items: stretch;
  grid-template-columns:
    [screen-start] 1fr [page-start] 60px [middle-start] 60px [text-start] repeat(8, 60px)
    [text-end] 60px [middle-end] 60px [page-end] 1fr [screen-end];
}
.d-title > *, .d-byline > *, .d-article > .d-text { grid-column: text; }
.d-title { padding: 2rem 0 1.5rem; }
.d-title h1 { font-size: 50px; line-height: 1.1; font-weight: 700; letter-spacing: -0.5px; margin: 0 0 0.5rem; color: var(--title); }
.d-title p { font-size: 20px; line-height: 1.55; font-weight: 400; color: var(--text); margin: 0; }
.d-byline { border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 1.5rem 0; font-size: 13px; line-height: 1.8; }
.d-byline .byline { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 16px; }
.d-byline h5 { font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.5); margin: 0 0 4px; }
.d-byline p { margin: 0; color: var(--title); }
.d-byline a { color: var(--title); border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.d-byline a:hover { color: var(--accent); border-bottom-color: currentColor; }
.d-article { padding: 2rem 0 4rem; }
.d-contents {
  grid-column: 1 / 4; grid-row: 1; justify-self: end; align-self: start;
  padding: 0 3em 0.5em 2em; border-right: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 13px; line-height: 1.6;
}
.d-contents h3 { font-size: 16px; font-weight: 600; margin: 0 0 1em; color: var(--title); }
.d-contents ul { list-style: none; margin: 0; padding: 0; }
.d-contents li { margin-bottom: 0.4em; font-weight: 600; }
.d-contents a { color: rgba(0, 0, 0, 0.8); }
.d-contents a:hover { color: var(--accent); }
.d-text { grid-row: 1; min-width: 0; }
.d-text p, .d-text ul, .d-text ol { font: 400 18px/28px var(--font); letter-spacing: 0.2px; color: var(--text); margin: 0 0 1em; }
.d-text ul, .d-text ol { padding-left: 1.5em; }
.d-text li + li { margin-top: 6px; }
.d-text strong { font-weight: 500; color: var(--title); }
.d-text a { color: var(--accent); }
.d-text a:hover { color: var(--title); }
.d-text h2 {
  font: 600 34px/1.25 var(--font); letter-spacing: -0.1px; color: var(--title);
  margin: 2rem 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.d-text h3 { font: 600 20px/1.4 var(--font); margin: 1.5rem 0 1rem; color: var(--title); }
.d-text pre { margin: 0 0 20px; padding: 16px 20px; border-radius: 6px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; font: 500 14px/1.714 var(--mono); }
.d-text pre code { font: inherit; }
.d-text :not(pre) > code { font: 500 0.85em/1.4 var(--mono); color: var(--title); background: var(--paper-2); border: 1px solid var(--line); border-radius: 4px; padding: 0.1em 0.35em; }
.d-text blockquote { margin: 0 0 1em; padding: 0 0 0 1.25em; border-left: 2px solid rgba(0, 0, 0, 0.15); color: var(--title); }
.d-text .table { overflow-x: auto; margin: 0 0 1.5em; }
.d-text table { width: 100%; border-collapse: collapse; font: 400 15px/1.6 var(--font); }
.d-text th, .d-text td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.d-text th { font-weight: 500; color: var(--title); }
.d-text figure { margin: 1.5em 0 2em; }
.d-text figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.d-text figure.shot { margin: 1em 0 1.5em; }
.d-text figure.shot img { aspect-ratio: auto; object-fit: contain; border-radius: 8px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; }
.d-text figcaption { margin-top: 12px; font-size: 13px; line-height: 1.6; color: rgba(0, 0, 0, 0.6); text-align: center; }
/* figures may break out to the page width: two columns and two gaps each side */
.d-text .l-page { margin-left: -184px; margin-right: -184px; }
.d-text em { color: var(--text); }

@media (max-width: 1179px) {
  .d-title, .d-byline, .d-article { display: block; max-width: 736px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
  .d-title { padding-top: 2rem; padding-bottom: 1.5rem; }
  .d-byline { padding-top: 1.5rem; padding-bottom: 1.5rem; max-width: none; }
  .d-byline .byline { max-width: 704px; margin: 0 auto; }
  .d-article { padding-top: 2rem; padding-bottom: 4rem; }
  .d-contents { border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 0 0 1em; margin-bottom: 2em; }
  .d-text .l-page { margin-left: 0; margin-right: 0; }
}
@media (max-width: 640px) {
  .d-title h1 { font-size: 34px; }
  .d-byline .byline { grid-template-columns: 1fr 1fr; row-gap: 12px; }
}

/* highlight.js, light */
.hljs { color: var(--title); }
.hljs-comment, .hljs-quote { color: var(--muted); font-style: italic; }
.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name { color: #0a5db5; }
.hljs-string, .hljs-attr, .hljs-attribute, .hljs-template-variable { color: #0d7a4d; }
.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet { color: var(--accent); }
.hljs-title, .hljs-section, .hljs-function .hljs-title { color: #6c3fc4; }
.hljs-meta, .hljs-variable { color: #b2470e; }
.hljs-type, .hljs-class .hljs-title { color: #0b5972; }

/* ---------------------------------------------------------------- more stories */

.more-wrap { padding: 72px 0; }
.more-wrap h2 { font: 600 24px/1.333 var(--font); letter-spacing: 0.1px; padding: 0 var(--pad); margin-bottom: 24px; }
.more-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 32px 0; }
.more-card { display: flex; flex-direction: column; gap: 8px; padding: 0 var(--pad); color: var(--title); }
.more-card .figure { box-shadow: var(--shadow-xs); margin-bottom: 8px; }
.more-card .category { font-size: 15px; }
.more-title { font: 600 18px/28px var(--font); letter-spacing: 0.2px; color: var(--title); transition: opacity var(--hover); }
.more-card:hover .more-title { opacity: 0.7; }
.more-card time { font-size: 15px; }
@media (min-width: 600px) { .more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .more-grid { grid-template-columns: repeat(4, 1fr); } .more-card { grid-column: span 1; } }

/* ---------------------------------------------------------------- CTA band */

/* The band top is skewed 6°; its rise is tan(6°) × the viewport width, so pad past it. */
.cta-wrap { padding: calc(100vw * 0.105 + 72px) 0 80px; }
.cta { display: grid; gap: 24px 0; grid-template-columns: repeat(1, 1fr); align-items: end; }
.cta > * { padding: 0 var(--pad); }
.cta h2 { font: 600 34px/1.294 var(--font); letter-spacing: -0.1px; }
.cta p { margin-top: 12px; font: 400 18px/28px var(--font); letter-spacing: 0.2px; max-width: 520px; }
.cta .actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta .link { display: inline-flex; align-items: center; color: var(--accent); font-weight: 500; }
.cta .link:hover { color: var(--title); }
@media (min-width: 900px) {
  .cta { grid-template-columns: repeat(4, 1fr); }
  .cta .copy { grid-column: 1 / span 2; }
  .cta .actions { grid-column: 3 / span 2; justify-self: end; }
}

/* ---------------------------------------------------------------- footer */

.site-footer { padding: 64px 0 48px; }
.footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
.footer-grid > * { padding: 0 var(--pad); }
.footer-brand { grid-column: 1 / -1; }
.footer-brand p { margin-top: 8px; max-width: 320px; font-size: 15px; }
.footer-col h4 { font: 500 15px/1.6 var(--font); letter-spacing: 0.2px; color: var(--title); margin-bottom: 8px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-col a { color: var(--text); font-size: 15px; }
.footer-col a:hover { color: var(--title); }
.footer-base {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 48px var(--pad) 0;
  color: var(--muted); font-size: 15px;
}
.footer-base a { color: var(--muted); }
.footer-base a:hover { color: var(--title); }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: repeat(4, 1fr); }
  .footer-brand { grid-column: auto; }
}

/* ---------------------------------------------------------------- misc */

.plain-page { padding: 96px 0; }
.plain-page h1 { font: 600 48px/1.2 var(--font); letter-spacing: -0.21px; padding: 0 var(--pad); }
.plain-page p { padding: 0 var(--pad); margin-top: 16px; font: 400 18px/28px var(--font); }

@media (prefers-reduced-motion: reduce) {
  .arrow .line, .arrow .tip, a, .button, .pill, .more-title { transition: none; }
}