@font-face {
  font-family: 'Resultary Wordmark';
  src: url('/_next/static/_vinext_fonts/cormorant-garamond-ff796e1d7eed/cormorant-garamond-fe99e303.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --about-paper: #f5f2ea;
  --about-ink: #080f12;
  --about-white: #f5f3eb;
  --about-soft: #b6c4c6;
  --about-rule: #d6d0c4;
  --about-dark-rule: #35464a;
  --about-serif: 'Cormorant Garamond', Georgia, serif;
  --about-mono: 'IBM Plex Mono', monospace;
}

body,
.about-page {
  background: var(--about-paper);
  color: #141a19;
}

.about-masthead {
  height: 80px;
  padding: 0 4.7%;
  border: 0;
  background: linear-gradient(90deg, var(--about-ink) 50%, var(--about-paper) 50%);
}

.about-home { gap: 0; }
.about-home img { display: none; }
.about-home span {
  font-family: 'Resultary Wordmark', var(--about-serif);
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -1px;
}
.about-masthead .about-home span { color: var(--about-white); }
.about-masthead-right { gap: 36px; color: #4d5b5d; }
.about-masthead-right > span {
  color: #697474;
  font: 10px/1.5 var(--about-mono);
  letter-spacing: .19em;
}
.about-masthead-right .text-link {
  color: #18201f;
  font: italic 500 20px/1 var(--about-serif);
  letter-spacing: 0;
}
.about-masthead-right .text-link svg { display: none; }
.about-masthead-right .text-link:hover,
.about-primary-link:hover { color: #a8c4cc; }

.about-hero {
  --visual-lift: clamp(0px, calc(970px - 100svh), 190px);
  width: 100%;
  min-height: 850px;
  margin: 0;
  padding: clamp(78px, 7vw, 138px) 4.7% 130px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(90deg, var(--about-ink) 50%, var(--about-paper) 50%);
}
.about-hero::before,
.about-hero::after { display: none; }
.about-visual {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(90deg, var(--about-ink) 50%, var(--about-paper) 50%);
}
.about-flow {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transform: translateY(calc(10vw - var(--visual-lift)));
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 37%, #000 62%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 37%, #000 62%, #000 100%);
}
.about-diagram {
  --symbol-size: clamp(74px, 8vw, 148px);
  position: absolute;
  left: 50%;
  width: min(48.2%, 760px);
  bottom: calc(max(16.5vw, 29.3%) - 10vw - clamp(37px, 4vw, 74px) + var(--visual-lift));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  justify-items: center;
  height: var(--symbol-size);
}
.about-diagram::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: #a48d5b;
}
.about-diagram-origin {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 2px solid #a48d5b;
  border-radius: 50%;
  background: var(--about-paper);
  z-index: 1;
}
.about-diagram img {
  display: block;
  position: relative;
  z-index: 1;
  width: var(--symbol-size);
  height: var(--symbol-size);
  max-width: 100%;
  min-height: 0;
  object-fit: contain;
  opacity: .88;
  filter: saturate(.55);
}
.about-diagram img:first-of-type { filter: none; opacity: 1; }
.about-diagram img:nth-of-type(1) { transform: scale(.8); }
.about-diagram img:nth-of-type(2) { transform: scale(.85); }
.about-diagram img:nth-of-type(3) { transform: scale(.9); }
.about-diagram img:nth-of-type(4) { transform: scale(1.45); }
.about-coordinate {
  position: absolute;
  left: 4.7%;
  bottom: 38px;
  color: #a6b7ba;
  font: 10px/1.3 var(--about-mono);
  letter-spacing: .16em;
  padding: 0;
}
.about-hero-title {
  grid-column: 1;
  padding: 0 clamp(24px, 4vw, 80px) 0 0;
  position: relative;
  z-index: 1;
}
.about-eyebrow {
  max-width: 390px;
  margin: 0 0 36px;
  color: #b6c3c4;
  font: 10px/1.7 var(--about-mono);
  letter-spacing: .23em;
}
.about-hero h1 {
  max-width: 820px;
  margin: 0;
  color: var(--about-white);
  font: 500 clamp(76px, 6.4vw, 133px)/.87 var(--about-serif);
  letter-spacing: -.055em;
}
.about-hero h1 em {
  color: #a9bdc0;
  font-style: italic;
  font-weight: 400;
}
.about-hero-copy {
  grid-column: 2;
  max-width: 760px;
  padding: 2px 0 0 clamp(36px, 5vw, 110px);
  display: block;
  position: relative;
  z-index: 1;
}
.about-hero-copy > p {
  max-width: 585px;
  margin: 0 0 18px;
  color: #434845;
  font-size: clamp(15px, 1.07vw, 18px);
  line-height: 1.72;
}
.about-hero-copy > p:first-child {
  color: #18201f;
  font: 500 clamp(27px, 2vw, 37px)/1.1 var(--about-serif);
  letter-spacing: -.02em;
  margin-bottom: 24px;
}
.about-hero-copy strong { color: #111918; font-weight: 600; }
.about-hero-copy dl { display: none; }

.about-section,
.about-closing {
  width: 100%;
  margin: 0;
  padding: 108px 5.5% 116px;
  border-top: 1px solid var(--about-rule);
  display: grid;
  grid-template-columns: minmax(90px, .35fr) minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: clamp(26px, 3.8vw, 84px);
  row-gap: 54px;
}
.about-section-index {
  color: #7a7e76;
  font: 10px/1.6 var(--about-mono);
  letter-spacing: .18em;
  margin: 9px 0 0;
}
.about-section-heading h2,
.about-closing h2 {
  color: #141a19;
  font: 500 clamp(54px, 4.7vw, 88px)/.95 var(--about-serif);
  letter-spacing: -.045em;
  margin: 0;
}
.about-section-heading h2 em { color: #8c8575; font-style: italic; }
.about-prose { max-width: 720px; }
.about-prose p,
.about-closing > div:last-child > p {
  color: #545c58;
  font-size: clamp(15px, 1.08vw, 18px);
  line-height: 1.85;
}
.about-prose .about-lead {
  color: #1f2928;
  font: 500 clamp(27px, 2.2vw, 38px)/1.2 var(--about-serif);
  letter-spacing: -.02em;
}
.about-prose-columns { gap: clamp(30px, 4vw, 85px); }
.about-definition {
  color: #a5c2c7;
  font: italic 500 31px/1 var(--about-serif);
}
.about-definition span { color: #90a4a7; font: 10px var(--about-mono); }

.about-finding,
.about-discovery,
.about-principles {
  background: var(--about-ink);
  border-top-color: var(--about-dark-rule);
  color: var(--about-white);
}
.about-finding .about-section-index,
.about-discovery .about-section-index,
.about-principles .about-section-index { color: #8da7ac; }
.about-finding .about-section-heading h2,
.about-discovery .about-section-heading h2,
.about-principles .about-section-heading h2 { color: var(--about-white); }
.about-finding .about-prose p,
.about-discovery .about-prose p,
.about-principles .about-prose p { color: var(--about-soft); }
.about-finding .about-prose .about-lead,
.about-discovery .about-prose .about-lead { color: #f2f1e9; }
.finding-anatomy { border-color: var(--about-dark-rule); }
.finding-anatomy article { border-color: var(--about-dark-rule); }
.finding-anatomy article > span,
.discovery-modes article > span { color: #9ebdc3; }
.finding-anatomy h3 {
  color: var(--about-white);
  font: 500 31px/1.1 var(--about-serif);
  margin-top: 26px;
}
.finding-anatomy p { color: var(--about-soft); font-size: 14px; }
.record-chain {
  border-color: var(--about-rule);
  color: #465a59;
  font-size: 12px;
}
.record-chain svg { color: #8ba3a0; }
.discovery-modes { background: var(--about-dark-rule); border-color: var(--about-dark-rule); }
.discovery-modes article { background: #142229; }
.discovery-modes article:first-child { background: var(--about-paper); }
.discovery-modes article:first-child > span { color: #6d7773; }
.discovery-modes article:first-child h3 { color: #182120; }
.discovery-modes article:first-child p { color: #59645e; }
.discovery-modes article:last-child h3 { color: var(--about-white); }
.discovery-modes article:last-child p { color: var(--about-soft); }
.discovery-modes h3 { font-size: clamp(31px, 2.8vw, 48px); }
.quiet-record { color: #d3d8cf; font-size: clamp(34px, 3.2vw, 55px); }
.about-boundary blockquote {
  background: #122026;
  border: 0;
  padding: clamp(35px, 5vw, 78px);
  margin: 12px 0 0;
}
.about-boundary blockquote p {
  color: var(--about-white);
  font-size: clamp(36px, 3.8vw, 68px);
  line-height: 1.02;
}
.about-boundary blockquote cite { color: #abc0c3; }
.principle-list { border-color: var(--about-dark-rule); }
.principle-list article { border-color: var(--about-dark-rule); }
.principle-list article > span { color: #92abb0; }
.principle-list h3 { color: var(--about-white); font: 500 28px/1 var(--about-serif); }
.principle-list p { color: var(--about-soft); font-size: 14px; }

.about-closing {
  background: var(--about-paper);
  border-color: var(--about-rule);
}
.about-closing > div:first-child {
  grid-column: 1/3;
  grid-template-columns: minmax(90px, .35fr) 1fr;
  column-gap: clamp(26px, 3.8vw, 84px);
}
.about-closing > div:last-child { grid-column: 3; }
.about-primary-link {
  border-color: #646e6b;
  font: italic 500 25px/1 var(--about-serif);
}
.about-footer {
  background: var(--about-ink);
  border-color: var(--about-dark-rule);
  color: var(--about-white);
  padding: 32px 5.5%;
}
.about-footer .about-home span { font-size: 32px; }
.about-footer > span { color: #9baeb1; }

@media (max-width: 1100px) {
  .about-hero {
    min-height: 0;
    padding: 58px 0 0;
    background: var(--about-ink);
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .about-hero-title { order: 1; padding: 0 6%; }
  .about-hero h1 { font-size: clamp(59px, 8.2vw, 93px); }
  .about-visual {
    order: 2;
    position: relative;
    inset: auto;
    width: 100%;
    height: clamp(420px, 56vw, 640px);
    margin-top: 36px;
  }
  .about-flow {
    transform: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .about-diagram { bottom: calc(max(16.5vw, 29.3%) - clamp(37px, 4vw, 74px)); }
  .about-coordinate { display: none; }
  .about-hero-copy {
    order: 3;
    width: 100%;
    max-width: none;
    padding: 48px 6% 62px;
    background: var(--about-paper);
  }
  .about-hero-copy > p { max-width: 720px; }
  .about-section,
  .about-closing { padding: 78px 6% 88px; display: block; }
  .about-section-index { margin: 0 0 25px; }
  .about-section-heading h2,
  .about-closing h2 { max-width: 850px; font-size: clamp(52px, 7vw, 76px); }
  .about-prose { max-width: 850px; margin-top: 34px; }
  .about-prose-columns { display: block; }
  .about-prose-columns p + p { margin-top: 24px; }
  .finding-anatomy,
  .record-chain,
  .discovery-modes,
  .principle-list { margin-top: 44px; }
  .finding-anatomy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finding-anatomy article { min-height: 0; padding: 28px; border-bottom: 1px solid var(--about-dark-rule); }
  .finding-anatomy article:nth-child(2) { border-right: 0; }
  .finding-anatomy article:first-child { padding-left: 28px; }
  .discovery-modes { display: grid; grid-template-columns: 1fr 1fr; }
  .about-closing > div:first-child { display: block; margin-bottom: 30px; }
  .about-closing > div:last-child { display: block; }
}

@media (max-width: 700px) {
  .about-masthead { height: 70px; padding: 0 20px; }
  .about-home span { font-size: 27px; }
  .about-masthead-right > span { display: none; }
  .about-masthead-right .text-link { font-size: 17px; }
  .about-hero { padding-top: 42px; }
  .about-eyebrow { font-size: 8px; letter-spacing: .15em; margin-bottom: 24px; }
  .about-hero h1 { font-size: clamp(52px, 11.5vw, 72px); }
  .about-visual { height: clamp(300px, 75vw, 420px); margin-top: 27px; }
  .about-diagram {
    --symbol-size: clamp(52px, 13vw, 85px);
    right: 1%;
    bottom: calc(max(16.5vw, 29.3%) - clamp(26px, 6.5vw, 42.5px));
  }
  .about-diagram-origin { width: 14px; height: 14px; border-width: 1.5px; }
  .about-hero-copy { padding: 37px 22px 53px; }
  .about-hero-copy > p:first-child { font-size: 30px; }
  .about-hero-copy > p { font-size: 15px; }
  .about-section,
  .about-closing { padding: 65px 24px 74px; }
  .about-section-heading h2,
  .about-closing h2 { font-size: clamp(45px, 10vw, 59px); }
  .about-prose p { font-size: 15px; }
  .about-prose .about-lead { font-size: 27px; }
  .finding-anatomy { display: block; border-bottom: 0; }
  .finding-anatomy article,
  .finding-anatomy article:first-child { border-right: 0; padding: 25px 0; }
  .record-chain { display: flex; gap: 18px; overflow-x: auto; }
  .discovery-modes { display: block; }
  .discovery-modes article { min-height: 0; padding: 30px 27px; }
  .discovery-modes article + article { border-top: 1px solid var(--about-dark-rule); }
  .principle-list article { grid-template-columns: 30px 100px 1fr; gap: 9px; }
  .principle-list h3 { font-size: 24px; }
  .principle-list p { font-size: 12px; }
  .about-boundary blockquote { padding: 30px 27px; }
  .about-boundary blockquote p { font-size: 37px; }
  .about-footer { min-height: 100px; padding: 25px 24px; }
}