/* iceberg-quantum.com stylesheet.
   Sections: tokens, base, text, layout, nav, buttons and links, tags, lists and cards, filters, home, popups,
   footer, blog, post, product and research, join, 404, figures, maths. Release pages add css/release.css. */

/* ---------- Tokens ---------- */

@font-face { font-family: Geist; src: url("../fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url("../fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Geist; src: url("../fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Geist; src: url("../fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --ink: #041a18;          /* deep teal: text on light, page background on green pages */
  --paper: #f1fcef;        /* mint white: text on dark, light page background */
  --teal: #091f1c;         /* card background on green pages */
  --plum: #1b011c;         /* page background on plum pages, footer */
  --plum-card: #260527;    /* card background on plum pages */
  --magenta: #fe25ff;
  --turquoise: #00e5d0;
  --line: rgba(241, 252, 239, 0.12);   /* hairlines on dark; redefined on light pages */
  --muted: rgba(241, 252, 239, 0.7);
  --ease: 0.6s ease-in-out;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; overflow-y: scroll; scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  font-family: Geist, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  background-color: #fafafa;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding-left: 1.5rem; }
li { margin-bottom: 0.25rem; }
img { max-width: 100%; display: inline-block; vertical-align: middle; border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 2rem 0; }
figcaption { text-align: center; margin-top: 0.25rem; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
code, pre { font-family: monospace; font-size: 1em; }
button { font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
[hidden] { display: none !important; }
[tabindex]:focus-visible { outline: 0.125rem solid #4d65ff; outline-offset: 0.125rem; }
@media (max-width: 767px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
  h3, h4 { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Text ---------- */

/* Headline sizes, independent of heading level. `.is-loose` is the paragraph-like setting used for long titles. */
.title-xl { font-size: 2.25rem; font-weight: 500; line-height: 1.2; }
.title-lg { font-size: 1.75rem; font-weight: 500; line-height: 1.2; }
.title-md { font-size: 1.5rem; font-weight: 500; line-height: 1.2; }
.title-sm { font-size: 1.25rem; font-weight: 500; line-height: 1.2; }
.is-loose { line-height: 1.5; letter-spacing: -0.01em; }
.is-tight { line-height: 1; letter-spacing: -0.03em; }

.text-xl { font-size: 1.5rem; line-height: 1.5; letter-spacing: -0.01em; }
.text-lg { font-size: 1.25rem; line-height: 1.5; letter-spacing: -0.01em; }
.text-md { font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01em; }
.text-base { font-size: 1rem; line-height: 1.5; letter-spacing: -0.01em; }
.text-sm { font-size: 0.875rem; line-height: 1.5; letter-spacing: -0.01em; }
.eyebrow { font-size: 0.875rem; font-weight: 500; line-height: 1.5; letter-spacing: 0.12em; text-transform: uppercase; }
.is-lh1 { line-height: 1; }
.is-medium { font-weight: 500; }
.is-semibold { font-weight: 600; }
.muted { opacity: 0.7; }
.clamp-1, .clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 767px) {
  .title-xl, .title-lg, .title-md { font-size: 1.75rem; }
  .title-lg, .title-md { font-size: 1.25rem; }
  .title-sm { font-size: 1.125rem; }
  .text-xl { font-size: 1.25rem; }
  .eyebrow { font-size: 0.75rem; }
}

/* Rich text from Markdown (post bodies, page blurbs). */
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { margin: 1rem 0; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.5; letter-spacing: -0.01em; }
.prose p { margin-bottom: 1rem; }
.prose ul, .prose ol { margin-bottom: 1.5rem; }
.prose li:last-child { margin-bottom: 0; }
.prose a { transition: color var(--ease); }
.prose a:hover { color: var(--magenta); }
.prose blockquote { margin: 2rem 0; padding: 0 1.25rem; border-left: 0.25rem solid var(--line); font-size: 1.25rem; line-height: 1.5; }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.prose img { display: block; max-width: 100%; height: auto; margin: 1.5rem auto; }
.prose p:has(> img:only-child) { text-align: center; }
/* Inherit the size from a text class instead of the post defaults: <div class="prose is-plain text-base">. */
.prose.is-plain p, .prose.is-plain li { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
.prose.is-plain p { margin-bottom: 0; }

/* ---------- Layout ---------- */

/* Page background and text colour. `--line` follows the background so hairlines and borders need no overrides. */
.theme-black { background-color: #000; color: var(--paper); position: relative; }
.theme-green { background-color: var(--ink); color: var(--paper); position: relative; }
.theme-plum { background-color: var(--plum); color: var(--paper); position: relative; }
.theme-paper { background-color: var(--paper); color: var(--ink); position: relative; --line: rgba(4, 26, 24, 0.12); --muted: rgba(4, 26, 24, 0.7); }
body.is-post { background-color: var(--paper); }

.container { width: 100%; max-width: 90rem; margin: 0 auto; }
.container.is-full { flex: 1; min-height: 100%; }
.gutter { padding-left: 2.25rem; padding-right: 2.25rem; }
.frame { padding-left: 12px; padding-right: 12px; }   /* thin page-colour margin around full-bleed blocks */

/* Page body below the nav. `.is-tall` fills the viewport; `.is-roomy` leaves space above the footer. */
.page { display: flex; flex-direction: column; gap: 60px; padding-top: 170px; padding-bottom: 1rem; }
.page.is-tall { min-height: 100svh; }
.page.is-roomy { padding-bottom: 240px; }
.page-wrap { position: relative; }
.page-main { position: relative; z-index: 5; }
.page-title { max-width: 909px; align-self: center; text-align: center; }

/* Decorative image pinned to the top-right corner of a page, behind the content. */
.page-art { position: absolute; top: 0; right: 0; z-index: 1; pointer-events: none; }
.page-art img { display: block; width: 100%; height: 100%; }
.page-art > * { overflow: hidden; }
.product-art { max-width: 714px; }
.product-art .only-desktop { max-height: 345px; }
.product-art .only-mobile { max-height: 62px; }
.research-art { max-width: 492px; }
.research-art .only-desktop { max-height: 573px; }

.only-mobile { display: none; }

@media (max-width: 991px) {
  .page { gap: 74px; }
  .page.is-roomy { padding-bottom: 1rem; }
  .product-art { max-width: 142px; }
  .research-art { width: 100%; max-width: none; }
  .only-desktop { display: none; }
  .only-mobile { display: block; }
}
@media (max-width: 767px) {
  .gutter { padding-left: 1rem; padding-right: 1rem; }
  .frame { padding-left: 4px; padding-right: 4px; }
}

/* ---------- Nav ---------- */

.nav { position: absolute; inset: 0 0 auto; z-index: 5; overflow: hidden; }
.nav-inner { display: flex; justify-content: center; align-items: center; gap: clamp(16px, 1.667vw, 24px); padding: 24px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.417vw, 6px);
  font-size: clamp(14px, 0.191vw + 13.249px, 16px);
  text-decoration: none;
}
.nav-dot {
  width: 8px;
  height: 8px;
  background-color: var(--magenta);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--ease), transform var(--ease);
}
.nav-link:hover .nav-dot, .nav-link.is-current .nav-dot { opacity: 1; transform: scale(1); }

/* Home only: nav is hidden until the first scroll, and blends over the hero scene. */
.is-home .nav {
  mix-blend-mode: difference;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.is-home .nav.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 767px) {
  .nav-inner { padding-left: clamp(16px, 6.107vw, 24px); padding-right: clamp(16px, 6.107vw, 24px); }
  .nav-link { white-space: nowrap; gap: clamp(3px, 1.02vw, 4px); font-size: clamp(12px, 3.562vw, 14px); }
}

/* ---------- Buttons and links ---------- */

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 0.75rem 1rem;
  min-height: 2.8125rem;
  white-space: nowrap;
  border: 1px solid var(--line);
  line-height: 1.5;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: border-color var(--ease);
}
.button:hover { border-color: currentColor; }
.button-icon { display: flex; width: 15px; height: 12px; }

/* Inline text link: underlined, magenta on hover. `.is-plain` drops the underline. */
.link { display: inline-block; font-weight: 500; text-decoration: underline; transition: color var(--ease), opacity var(--ease); }
.link:hover { color: var(--magenta); opacity: 1; }
.link.is-plain { font-weight: inherit; text-decoration: none; }

/* An item whose whole area is a link: <div class="has-link">…<a class="cover-link">…</a></div> */
.has-link { position: relative; }
.cover-link { position: absolute; inset: 0; }
.row-link { display: block; width: 100%; text-decoration: none; }

/* ---------- Tags ---------- */

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tag { display: flex; align-items: center; gap: 6px; line-height: 1; }
.dot { width: 0.5rem; height: 0.5rem; flex: none; background-color: var(--magenta); }

/* ---------- Lists and cards ---------- */

/* Block of rows (posts, jobs). Rows are separated by a hairline that lights up on hover. */
.list-card { display: flex; flex-direction: column; gap: 24px; padding: 32px 24px 12px; background-color: var(--teal); }
.theme-plum .list-card { background-color: var(--plum-card); }
.list-card > * { position: relative; transition: opacity var(--ease); }
.list-card:has(> :hover) > :not(:hover) { opacity: 0.7; }
.rule { width: 100%; height: 1.25px; margin-top: 24px; background-color: currentColor; opacity: 0.06; transition: opacity var(--ease); }
.list-card > :hover .rule { opacity: 1; }
.list-card > :last-child:not(:hover) .rule { opacity: 0; }
.list-empty { padding: 2rem 0; opacity: 0.7; }
[data-filter-list] .is-filtered-out { display: none; }

/* Grid of cards where hovering one dims the others. */
.dim-siblings > * { transition: opacity var(--ease); }
.dim-siblings:has(> :hover) > :not(:hover) { opacity: 0.7; }

/* Date + title + description row in the Product and Research lists. */
.post-row { display: grid; grid-template-columns: 0.5fr 1fr; gap: 12px; width: 100%; }
.post-row-date { display: flex; align-items: center; gap: 6px; }
.post-row-body { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 767px) {
  .post-row { display: flex; flex-direction: column; gap: 1.5rem; }
  .post-row-body { gap: 1.5rem; }
}

/* ---------- Filters (blog categories, job locations) ---------- */

.filter { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 12px; }
.filter.is-center { justify-content: center; align-items: center; gap: 12px; }
.filter-option { display: flex; align-items: center; gap: 12px; cursor: pointer; line-height: 1; letter-spacing: -0.01em; }
.filter-option input { position: absolute; opacity: 0; z-index: -1; }
.filter-dot { position: relative; width: 0.5rem; height: 0.5rem; flex: none; border: 1.25px solid var(--line); transition: border-color var(--ease); }
.filter-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%);
  transition: background-color var(--ease);
}
.filter-option input:checked + .filter-dot { border-color: var(--filter-accent); }
.filter-option input:checked + .filter-dot::after { background: var(--filter-accent); }
.filter-option input:focus-visible + .filter-dot { outline: 0.125rem solid var(--filter-accent); outline-offset: 0.125rem; }

/* ---------- Home: hero ---------- */

.hero-stage { position: relative; z-index: 1; margin-bottom: -100svh; }
.hero-sticky { position: sticky; top: 0; overflow: hidden; }
.hero-spacer { height: 100svh; }
.hero { display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }
.hero-scene { position: fixed; inset: 0; width: 100%; height: 100%; min-height: 100svh; z-index: 0 !important; pointer-events: auto; }
.hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1201px;
  min-height: 100svh;
  margin: 0 auto;
  padding: 64px 18px 24px;
}
.hero-logo { display: flex; flex-direction: column; justify-content: center; flex: 1; max-width: 1165px; position: relative; }
.hero-logo svg { width: 100%; height: auto; max-height: 188px; }
.hero-logo svg, .hero-logo svg * { mix-blend-mode: difference; position: relative; z-index: 10; }
.hero-arrow-wrap { display: flex; justify-content: center; }
.hero-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 5;
  background-color: var(--paper);
  transition: background-color var(--ease);
}
.hero-arrow:hover { background-color: var(--turquoise); }
.hero-arrow svg { width: 12px; height: 12px; }

/* ---------- Home: mission ---------- */

.mission {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  padding: 24px;
  position: relative;
  z-index: 10;
  background-color: var(--paper);
  color: var(--ink);
  transition: background-color var(--ease);
}
.mission-body { display: flex; flex-direction: column; gap: 38px; margin: 0 auto; }
.mission-title { font-size: 8.75vw; font-weight: 600; line-height: 1; letter-spacing: -0.05em; transition: color var(--ease); }
.mission-green, .mission-plum {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-underline-offset: 10px;
  transition: color var(--ease);
}
.mission-copy { transition: color var(--ease); }
.mission-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; place-items: end stretch; }

/* Background and text recolour while one of the two highlighted words is hovered. */
.mission:has(.mission-green:hover) { background-color: var(--ink); }
.mission:has(.mission-green:hover) .mission-title, .mission:has(.mission-green:hover) .mission-plum { color: rgba(241, 252, 239, 0.12); }
.mission:has(.mission-green:hover) .mission-green { color: var(--turquoise); }
.mission:has(.mission-plum:hover) { background-color: var(--plum); }
.mission:has(.mission-plum:hover) .mission-title, .mission:has(.mission-plum:hover) .mission-green { color: rgba(241, 252, 239, 0.12); }
.mission:has(.mission-plum:hover) .mission-plum { color: var(--magenta); }
.mission:has(.mission-green:hover) .mission-copy, .mission:has(.mission-green:hover) .popup-link,
.mission:has(.mission-plum:hover) .mission-copy, .mission:has(.mission-plum:hover) .popup-link { color: var(--paper); }

@media (max-width: 991px) {
  .mission-foot { grid-template-columns: 1fr; place-items: end center; }
  .mission-foot .popup-menu { justify-content: center; }
}
@media (max-width: 767px) {
  .mission { padding-left: 16px; padding-right: 16px; }
  .mission-green, .mission-plum { text-decoration-thickness: auto; text-underline-offset: auto; }
}
@media (max-width: 479px) { .mission-title { font-size: 9.333vw; } }

/* ---------- Popups (Team / Partners / Investors) ---------- */

/* Team / Partners / Investors menu, under the mission and at the foot of each popup. */
.popup-menu { display: flex; align-items: center; gap: 24px; }
.popup-link {
  display: inline-block;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  transition: color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.popup-link.is-dim { color: rgba(241, 252, 239, 0.4); text-decoration: none; }
.popup-link.is-dim:hover, .popup-link.is-dim.is-active { color: var(--paper); text-decoration: underline; }

.popup {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100svh;
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
  transition: transform 0.65s cubic-bezier(0.33, 1, 0.68, 1), opacity 0s linear 0.65s;
  overscroll-behavior: contain;
}
.popup.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); transition: transform 0.65s cubic-bezier(0.33, 1, 0.68, 1), opacity 0s linear 0s; }
.popup-panel { display: flex; flex-direction: column; justify-content: space-between; height: 100%; background-color: var(--ink); }
.popup-body { display: flex; flex-direction: column; flex: 1; justify-content: center; align-items: center; }
.popup-content { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 0 24px; position: relative; }
.popup-main { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.popup-close { position: absolute; top: 10px; right: 5px; width: 20px; height: 20px; }
.popup-close svg { width: 20px; height: 20px; }
.popup-nav { background-color: var(--ink); border-top: 1px solid rgba(241, 252, 239, 0.06); }
.popup-nav .popup-menu { padding: 24px; }
body.is-popup-open { overflow: hidden; overscroll-behavior: none; touch-action: none; }

.team-grid, .partner-grid, .investors { scrollbar-width: none; }
.team-grid::-webkit-scrollbar, .partner-grid::-webkit-scrollbar, .investors::-webkit-scrollbar { display: none; }

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px 120px;
  place-content: center;
  width: 100%;
  max-width: 900px;
  height: 100%;
  max-height: 400px;
  overflow: auto;
}
.team-link { display: inline-block; text-decoration: none; transition: color var(--ease); }
.team-link:hover { color: var(--magenta); }
.team-link.is-join { color: var(--magenta); text-decoration: underline; }

.partner-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; max-height: 60svh; overflow: auto; }
.partner-card { display: flex; justify-content: center; align-items: center; width: 300px; height: 100px; background-color: var(--teal); }
.partner-card img { height: 32px; object-fit: contain; }

.investors { max-width: 1169px; max-height: 60svh; overflow: auto; }
.investors-intro { max-width: 678px; margin: 0 auto; text-align: center; }
.investors-intro a { text-decoration: none; transition: color var(--ease); }
.investors-intro a:hover { color: var(--magenta); text-decoration: underline; }
.investors-logos { display: flex; justify-content: center; align-items: center; gap: 50px; margin: 102px auto 0; }
.investors-logos a { display: flex; height: 20px; }
.investors-logos img { width: 100%; height: 100%; object-fit: contain; }

@media (min-width: 1280px) { .partner-card { width: 376px; } }
@media (max-width: 991px) {
  .popup { overflow: hidden; }
  .popup-content { justify-content: space-between; }
  .popup-nav { margin-left: -12px; margin-right: -12px; }
  .popup-nav .popup-menu { justify-content: center; }
  .team-grid { grid-template-columns: 1fr; gap: 32px; place-content: stretch; max-width: 200px; max-height: calc(100svh - 85px); padding: 74px 0 77px; }
  /* Keep desktop's column-by-column reading order when the grid collapses to one column. */
  .team-grid > :nth-child(3n + 1) { order: 1; }
  .team-grid > :nth-child(3n + 2) { order: 2; }
  .team-grid > :nth-child(3n + 3) { order: 3; }
  .team-grid > :has(.is-join) { order: 4; }
  .partner-grid { grid-template-columns: 1fr; max-height: calc(100svh - 85px); padding: 53px 0 59px; }
  .partner-card { width: 278px; }
  .investors { max-height: calc(90svh - 85px); padding: 10px 0; }
  .investors-logos { gap: 2rem; margin-top: 60px; }
}
@media (max-width: 767px) { .popup-nav { margin-left: -4px; margin-right: -4px; } }

/* ---------- Footer and latest news ---------- */

.footer-wrap { padding: 186px 0.75rem 0.75rem; }
.footer-home { position: relative; z-index: 5; overflow: hidden; background-color: var(--plum); }
.footer-home-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 100svh;
  padding: 1.5rem 1.5rem 0.75rem;
}
.footer { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; }
.footer-logo { display: block; width: 448px; height: 73px; }
.footer-social { display: flex; justify-content: flex-end; align-items: center; }
.footer-icon { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; }
.footer-icon svg { width: 20px; }

.news { display: flex; flex-direction: column; gap: 3rem; }
.news-head { display: flex; justify-content: space-between; align-items: center; }
.news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.news-card { display: flex; flex-direction: column; gap: 24px; height: 100%; padding: 1.5rem; background-color: var(--plum-card); }
.news-card-body { display: flex; flex-direction: column; gap: 8px; }
.news-card-title { max-width: 20rem; }

@media (max-width: 991px) {
  .footer-wrap { padding-top: 0; padding-bottom: 0; }
  .footer-home-inner { padding-bottom: 0; }
  .footer { flex-direction: column; justify-content: center; gap: 1.75rem; padding-top: 4.5rem; padding-bottom: 5.5rem; }
  .footer-logo { width: auto; height: 47px; }
  .footer-social { gap: 12px; }
  .news-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .footer-wrap { padding-left: 1rem; padding-right: 1rem; }
  .footer-home-inner { padding-left: 1rem; padding-right: 1rem; }
  .news-head { align-items: flex-end; }
}

/* ---------- Blog index ---------- */

.blog-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature-card { display: flex; flex-direction: column; justify-content: space-between; height: 100%; background-color: var(--paper); color: var(--ink); }
.feature-card-body { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 165px; padding: 24px; }
.feature-card-head { display: flex; flex-direction: column; gap: 24px; }
.feature-card-text { display: flex; flex-direction: column; gap: 8px; }
.feature-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.feature-card-img { height: 152px; background-color: #000; }
.feature-card-img img { width: 100%; height: 100%; object-fit: cover; }

.post-cards { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 100%; }
.post-card { display: flex; flex-direction: column; gap: 24px; padding: 24px; background-color: var(--teal); border: 1px solid var(--line); transition: border-color var(--ease); }
.has-link:hover > .post-card { border-color: currentColor; }
.post-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.post-card-body { display: flex; flex-direction: column; gap: 8px; }

.blog-list-section { padding: 45px 0 1rem; }
.blog-list { display: flex; flex-direction: column; gap: 36px; }
.blog-row { display: grid; grid-template-columns: 0.5fr 1fr 0.5fr 0.75fr; gap: 1rem; align-items: center; width: 100%; }

@media (max-width: 991px) {
  .blog-hero { grid-template-columns: 1fr; }
  .feature-card-body { gap: 116px; }
  .blog-list-section { padding-top: 44px; }
  .blog-row { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; }
}

/* ---------- Blog post ---------- */

.post-layout { display: grid; grid-template-columns: 130px 1fr; align-items: start; position: relative; }
.post-back { position: sticky; top: 180px; }
.post { display: flex; flex-direction: column; gap: 48px; width: 100%; max-width: 678px; margin: 0 auto; }
.post-head { display: flex; flex-direction: column; gap: 48px; }
.post-title { display: flex; flex-direction: column; gap: 24px; }
.post-meta { display: flex; flex-direction: column; gap: 8px; }
.post-meta > * { display: flex; align-items: center; gap: 4px; }
.post-body { padding-top: 48px; border-top: 1px solid var(--line); }

@media (max-width: 991px) {
  .post-layout { display: flex; flex-direction: column; gap: 4rem; }
  .post-back { position: static; }
  .post { max-width: none; }
}

/* ---------- Product and Research ---------- */

.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6875rem; align-items: start; position: relative; }
.product-intro { display: flex; flex-direction: column; gap: 3rem; position: sticky; top: 170px; }
.product-copy { display: flex; flex-direction: column; gap: 36px; }
.product-blurb { opacity: 0.8; font-weight: 500; }
.product-list { display: flex; flex-direction: column; gap: 3rem; }

.research-list { display: flex; flex-direction: column; gap: 36px; }
.research-head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }

@media (max-width: 991px) {
  .product-grid { display: flex; flex-direction: column; gap: 6.25rem; }
  .product-intro { position: static; }
  .research-list { gap: 32px; }
}

/* ---------- Join ---------- */

.join-section { position: relative; padding: 104px 0 48px; }
.join-stack { display: flex; flex-direction: column; gap: 48px; }
.join-column { display: flex; flex-direction: column; gap: 36px; max-width: 906px; margin: 0 auto; position: relative; z-index: 2; }
.join-filter { padding: 10px 0; background-color: var(--plum); }
.join-list { justify-content: center; min-height: 180px; }
.job-row { display: grid; grid-template-columns: 1fr 0.25fr; gap: 1rem; width: 100%; }
.job-meta { display: flex; align-items: center; gap: 8px; }
.job-apply { display: flex; justify-content: flex-end; align-items: flex-start; padding-top: 7px; }
.join-bg { position: absolute; inset: auto 0 50%; z-index: 1; transform: translateY(50%); }
.join-bg img { width: 100%; height: 100%; object-fit: cover; }
.join-bg-desktop { aspect-ratio: 1440 / 175; width: 100%; max-height: 175px; background-color: #000; }
.join-bg-mobile { display: none; aspect-ratio: 393 / 367; width: 100%; max-height: 393px; background-color: #000; }

@media (max-width: 991px) {
  .join-section { padding-top: 60px; }
  .job-row { display: flex; flex-direction: column; gap: 1.5rem; }
  .job-info { display: flex; flex-direction: column; gap: 1rem; }
  .job-meta { flex-wrap: wrap; }
  .job-apply { justify-content: flex-start; }
}
@media (max-width: 767px) {
  .join-list { min-height: 402px; }
  .join-bg-desktop { display: none; }
  .join-bg-mobile { display: block; }
}

/* ---------- 404 ---------- */

.not-found { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem; min-height: 60vh; padding: 6rem 0; }
.not-found-img { width: 8rem; }

/* ---------- Figures (Iceberg figure library, static/figures/lib) ---------- */

@font-face { font-family: 'Geist Mono'; src: url("../fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url("../fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
/* panel rows run past the text column to the window edge without scrolling the page sideways */
body.is-post { overflow-x: clip; }

/* inline maths: <span class="math">*d*<sub>*t*</sub>/2</span>. Variables in Geist italic, as in the figures */
.math { white-space: nowrap; }
.math :is(em, i) { font-style: italic; }
.math :is(em, i):not(:has(+ :is(sub, sup))) { margin-right: 0.05em; }   /* clear the lean, except before a sub/sup */
.math :is(sub, sup) { position: relative; font-size: 0.72em; line-height: 0; vertical-align: baseline; bottom: auto; margin-right: 0.1em; }
.math sub { top: 0.24em; }
.math sup { top: -0.42em; }
.math :is(sub, sup) :is(em, i) { margin-right: 0; }