/* DeltaWave inner pages (every page but the front; the class keeps its first name). home.css supplies
   the header, footer, buttons and the two themes' base colours (data-theme on <html>: dark first, light
   when the reader picks it); this file adds the pages' own colours for each theme and holds the parts
   the pages share: the quiet page top, the lead block (heading left, text right), hairline lists, the
   logo wall and the articles. */
.dark-site {
  --soft: #59615d; --body: #4a524f; --text: #2a3134; --purple: #6a4cff;
  --paper-rgb: 242, 242, 237; --ink-rgb: 13, 18, 21;
  --col: min(1280px, calc(100vw - 48px));
  color: var(--ink);
  background: var(--paper);
}
[data-theme="dark"] .dark-site {
  --soft: #939ca2; --body: #a3abb1; --text: #bcc3c8; --purple: #9582ff;
  --paper-rgb: 13, 18, 21; --ink-rgb: 228, 232, 235;
}
.dark-site ::selection { color: #fff; background: #6a4cff; }

/* header and mobile menu: home.css colours them for each theme. Here the phone header is always
   solid and its two buttons are outlined */
.dark-site .site-nav > a:not(.button) { color: var(--ink); }
.dark-site .site-nav > a.active { color: var(--purple); }
@media (max-width: 800px) {
  .dark-site .site-header, .dark-site .site-header.scrolled { background: rgba(var(--paper-rgb), .96); border-color: var(--line); }
  .dark-site .menu-toggle, .dark-site .theme-toggle-bar { background: transparent; border-color: var(--line-strong); }
  .dark-site .menu-toggle span:not(.sr-only) { background: var(--ink); }
  .dark-site .site-nav { height: 100dvh; background: rgba(var(--paper-rgb), .98); }
}

/* things that rise in once, as they arrive */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .rise.is-in { opacity: 1; transform: none; }

/* the quiet page top: one centred headline on plain dark */
.page-top { display: grid; place-items: center; min-height: 56vh; min-height: 56svh; padding: 128px 24px 72px; text-align: center; }
.page-top h1 { max-width: 22ch; margin: 0 auto; font-size: clamp(38px, 5vw, 76px); font-weight: 500; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
.page-top h1 span { color: inherit; }
.page-top .dek { max-width: 560px; margin: 28px auto 0; color: var(--body); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.page-top .kicker { margin: 0 0 20px; color: var(--soft); font-size: 13px; letter-spacing: .02em; }
.page-top .hero-actions { justify-content: center; margin-top: 40px; }
.dark-site .button-light { color: var(--ink); background: transparent; border-color: rgba(var(--ink-rgb), .24); }
.dark-site .button-light:hover { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.list-intro + .button { margin-top: -16px; }

/* lead block: a centred heading on the left, level with the text on the right. Titled blocks sit
   64px apart; plain paragraphs follow each other closely */
.lead { display: grid; grid-template-columns: 384px 1fr; width: var(--col); margin: 0 auto; padding: 40px 0 160px; }
.lead-head { align-self: start; justify-self: center; max-width: 340px; margin-top: -4px; text-align: center; }
.lead-head p { margin: 0 0 12px; color: var(--soft); font-size: 13px; letter-spacing: .02em; }
.lead h2 { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -.01em; line-height: 1.22; text-wrap: balance; }
.lead-head.wide { max-width: 384px; }   /* a heading set in two given lines (careers) */
.lead-body > * { max-width: 620px; }
.lead-body p { margin: 0; color: var(--body); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.lead-body h3 { margin: 0 0 12px; font-size: 17px; font-weight: 500; letter-spacing: 0; line-height: 1.35; }
.lead-body > * + * { margin-top: 64px; }
.lead-body > p + p { margin-top: 18px; }

/* list sections: the heading on the left, the rows on the right from the 96px line */
.list { display: grid; grid-template-columns: 240px 1fr; gap: 48px; width: var(--col); margin: 0 auto; padding: 200px 0 0; scroll-margin-top: 40px; }
.list:last-child { padding-bottom: 200px; }
.lead + .list, .page-top + .list { padding-top: 40px; }
.list-head { align-self: start; }
.list-head p { margin: 0 0 12px; color: var(--soft); font-size: 13px; letter-spacing: .02em; }
.list-head h2 { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; }
.list-body { min-width: 0; padding-left: 96px; }
.list-intro { max-width: 560px; margin: 4px 0 48px; color: var(--soft); font-size: 15px; line-height: 1.6; }

/* hairline rows: lead (year, date) · title and summary · meta · arrow */
.rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.rows > li { border-bottom: 1px solid var(--line); }
.row { display: grid; grid-template-columns: var(--lead-w, 56px) minmax(0, 1fr) minmax(150px, 230px) 14px; grid-template-areas: "l t m a"; align-items: baseline; gap: 24px; padding: 26px 0; color: inherit; text-decoration: none; }
/* index pages (blog, news): the date leads the row */
.feed { --lead-w: 124px; }
.rows.no-lead .row { grid-template-columns: minmax(0, 1fr) minmax(150px, 230px) 14px; grid-template-areas: "t m a"; }
.row-lead { grid-area: l; color: var(--soft); font-size: 13px; font-variant-numeric: tabular-nums; transition: color .2s ease; }
.row-main { grid-area: t; min-width: 0; }
.row-main strong { display: block; font-size: 18px; font-weight: 400; line-height: 1.4; }
.row-main span { display: block; max-width: 560px; margin-top: 6px; color: var(--soft); font-size: 14px; line-height: 1.55; }
.row-meta { grid-area: m; color: var(--soft); font-size: 13px; font-style: normal; line-height: 1.4; }
.row > svg { grid-area: a; align-self: start; margin-top: 7px; color: var(--soft); transition: color .2s ease, transform .2s ease; }
a.row:hover .row-lead, a.row:focus-visible .row-lead { color: var(--purple); }
a.row:hover > svg, a.row:focus-visible > svg { color: var(--purple); transform: translate(2px, -2px); }
a.row:hover > svg.go, a.row:focus-visible > svg.go { transform: translateX(3px); }   /* a page on this site: a plain arrow, moving forward */
a.row:focus-visible { outline: 1px solid var(--purple); outline-offset: 6px; }

/* logo wall: one-colour marks, no boxes (black on light, white on dark) */
.logo-wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 56px 40px; align-items: center; margin: 0; padding: 8px 0 0; list-style: none; }
.logo-wall li { display: grid; place-items: center start; height: 52px; }
.logo-wall img { max-width: 100%; max-height: var(--h, 30px); object-fit: contain; filter: brightness(0); opacity: .62; transition: opacity .2s ease; }
.logo-wall li:hover img { opacity: 1; }
[data-theme="dark"] .logo-wall img { filter: brightness(0) invert(1); }
[data-theme="dark"] .logo-wall img.knockout { filter: none; }

/* articles (blog and news): a back link on the left, a quiet centred header, then one reading
   column; the references close the column in small type */
.article-page { padding: 120px 0 176px; }
.article-content { width: var(--col); margin: 0 auto; }
.article-back { display: inline-flex; align-items: center; gap: 10px; color: var(--soft); font-size: 13px; letter-spacing: .02em; text-decoration: none; transition: color .2s ease; }
.article-back::before { content: "←"; transition: transform .2s ease; }
.article-back:hover, .article-back:focus-visible { color: var(--ink); }
.article-back:hover::before, .article-back:focus-visible::before { transform: translateX(-3px); }
.article-kicker { margin: 88px 0 20px; color: var(--soft); font-size: 13px; letter-spacing: .02em; text-align: center; }
.article-title { max-width: 21ch; margin: 0 auto; font-size: clamp(36px, 4.4vw, 64px); font-weight: 500; letter-spacing: -.02em; line-height: 1.06; text-align: center; text-wrap: balance; }
.article-dek { max-width: 620px; margin: 28px auto 0; color: var(--body); font-size: 18px; line-height: 1.55; text-align: center; text-wrap: pretty; }
.article-byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 24px 0 0; color: var(--soft); font-size: 13px; }
.article-byline span + span { position: relative; }
.article-byline span + span::before { content: ""; position: absolute; top: 50%; left: -12px; width: 2px; height: 2px; background: currentColor; border-radius: 50%; }
.article-body { max-width: 680px; margin: 88px auto 0; padding-top: 64px; border-top: 1px solid var(--line); }
/* a lead image sits between the header and the text, as wide as the reading column; it replaces the hairline */
.article-figure { max-width: 680px; margin: 72px auto 0; }
.article-figure img { display: block; width: 100%; height: auto; border-radius: 8px; }
.article-figure + .article-body { margin-top: 64px; padding-top: 0; border-top: 0; }
.article-body > p { margin: 0 0 1.35em; color: var(--text); font-size: 17px; line-height: 1.75; text-wrap: pretty; }
.article-body > p:last-child { margin-bottom: 0; }
.article-body > h2 { margin: 2.4em 0 .75em; font-size: 24px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; text-wrap: balance; }
.article-body > h2:first-child { margin-top: 0; }
.article-body a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--purple) 55%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; transition: color .2s ease; }
.article-body a:hover, .article-body a:focus-visible { color: var(--purple); }
.article-references { margin-top: 88px; padding-top: 40px; border-top: 1px solid var(--line); }
.article-references h2 { margin: 0 0 24px; color: var(--soft); font-size: 13px; font-weight: 500; letter-spacing: .02em; }
.article-references ol { display: grid; gap: 14px; margin: 0; padding-left: 1.8em; color: var(--soft); font-size: 13px; line-height: 1.6; }
.article-references li { padding-left: 6px; scroll-margin-top: 96px; overflow-wrap: anywhere; }
.article-references li::marker { font-variant-numeric: tabular-nums; }
.article-references li:target { color: var(--ink); }
.article-references a { color: inherit; text-decoration-color: var(--line); }

@media (max-width: 900px) {
  .lead { grid-template-columns: 1fr; gap: 24px; padding-bottom: 120px; }
  .lead-head { justify-self: start; max-width: none; text-align: left; }
  .lead-body > * + * { margin-top: 48px; }
  .lead-body > p + p { margin-top: 16px; }
  .list { grid-template-columns: 1fr; gap: 32px; padding-top: 140px; }
  .list:last-child { padding-bottom: 140px; }
  .lead + .list, .page-top + .list { padding-top: 20px; }
  .list-body { padding-left: 0; }
  .row { grid-template-columns: auto minmax(0, 1fr) 14px; grid-template-areas: "l m a" "t t a"; gap: 6px 14px; padding: 22px 0; }
  .rows.no-lead .row { grid-template-columns: minmax(0, 1fr) 14px; grid-template-areas: "m a" "t a"; }
  .row-main strong { font-size: 17px; }
  .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .article-page { padding: 104px 0 128px; }
  .article-kicker { margin-top: 64px; }
  .article-dek { font-size: 17px; }
  .article-body { margin-top: 64px; padding-top: 48px; }
  .article-figure { margin-top: 56px; }
  .article-figure + .article-body { margin-top: 48px; padding-top: 0; }
  .article-body > h2 { font-size: 22px; }
}
@media (max-width: 600px) {
  /* too narrow for one byline: stacked, no dots */
  .article-byline { flex-direction: column; align-items: center; gap: 2px; }
  .article-byline span + span::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
  .row-lead, .row > svg, .logo-wall img, .article-back, .article-back::before, .article-body a { transition: none; }
}