/* Altius Venue landing page (/venue/).
   Port of the Claude Design file "Venue Landing Page.dc.html"
   (project bcbb3484-3003-4649-9ca5-72bea8ab4133, revised 2026-10-20 afternoon).
   Tokens, heading resets and .ds-btn come from /assets/product/product.css;
   every rule here is scoped under .page-venue. */

/* ---------- Shared bits ---------- */
.page-venue .venue-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
}
.page-venue .venue-h2 {
  font-weight: 500;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.page-venue .venue-wordmark {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--altius-white);
}
.page-venue .venue-wordmark span { color: var(--altius-orange); }
/* hyphenated words wrapped by the nw() macro in venue.njk */
.page-venue .venue-nw { white-space: nowrap; }
/* mono labels never hyphenate or break mid-word */
.page-venue .venue-eyebrow,
.page-venue .venue-dl { hyphens: none; overflow-wrap: normal; }

/* ---------- 01 Hero ---------- */
.page-venue .venue-hero {
  position: relative;
  background: var(--altius-black);
  color: var(--altius-white);
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  /* design: 88px top with an absolutely placed wordmark; here the wordmark sits
     in flow just under the fixed site nav */
  padding: var(--nav-clearance) 48px 40px;
  display: flex;
  flex-direction: column;
}
.page-venue .venue-hero__body {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 40px;
}
.page-venue .venue-hero__grid {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 72px;
  align-items: center;
}
.page-venue .venue-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.page-venue .venue-eyebrow--inverse { color: var(--text-inverse-muted); }
.page-venue .venue-hero__title {
  font-weight: 500;
  font-size: clamp(44px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--altius-white);
  text-wrap: balance;
}
.page-venue .venue-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(247, 246, 255, 0.78);
  max-width: 58ch;
  text-wrap: pretty;
}
.page-venue .venue-hero__cta { margin-top: 8px; }
.page-venue .venue-hero__cta .ds-btn { padding: 16px 24px; }
.page-venue .venue-hero__art {
  min-width: 0;
  aspect-ratio: 4 / 3;
}
.page-venue .venue-hero__art picture {
  display: block;
  width: 100%;
  height: 100%;
}
.page-venue .venue-hero__art img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ---------- 02 Machine ---------- */
.page-venue .venue-machine {
  position: relative;
  background: var(--altius-black);
  color: var(--altius-white);
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  padding: 48px 48px 64px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.page-venue .venue-machine__inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.page-venue .venue-machine__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* header row: section wordmark in flow beside the eyebrow (stacks at <=899px) */
.page-venue .venue-machine__hrow {
  display: flex;
  align-items: baseline;
  gap: 24px;
  min-width: 0;
}
.page-venue .venue-machine__head .venue-eyebrow {
  color: rgba(247, 246, 255, 0.7);
  line-height: 1;
  white-space: nowrap;
}
.page-venue .venue-machine__head .venue-h2 { color: var(--altius-white); text-wrap: balance; }

/* Diagram + captions are laid out against their own container (container queries),
   matching the design: wide drawing above 760px, stacked drawing at or below. */
.page-venue .venue-machine__wrap {
  container: venue-s2 / inline-size;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.page-venue .venue-machine__dwrap {
  container: venue-s2d / inline-size;
  width: 100%;
}
.page-venue .venue-drawing {
  position: relative;
  width: 100%;
}
.page-venue .venue-drawing--h { aspect-ratio: 1280 / 214; }
.page-venue .venue-drawing--v { display: none; aspect-ratio: 560 / 652; max-width: 560px; }
.page-venue .venue-drawing svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.page-venue .venue-drawing rect,
.page-venue .venue-drawing path {
  fill: none;
  stroke: var(--altius-white);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.page-venue .venue-drawing rect[stroke-width="2"] { stroke-width: 2; }
.page-venue .venue-drawing rect[stroke-width="2.5"] { stroke-width: 2.5; }
.page-venue .venue-drawing .venue-settle {
  stroke: var(--altius-orange);
  stroke-width: 3;
  stroke-linecap: square;
}

/* Diagram labels, positioned in % of the drawing box */
.page-venue .venue-dl {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--altius-white);
  line-height: 1;
  white-space: nowrap;
}
.page-venue .venue-dl--c { transform: translate(-50%, -50%); }
.page-venue .venue-dl--sm { font-size: 10px; letter-spacing: 0.08em; }
@container venue-s2d (max-width: 520px) {
  .page-venue .venue-dl { font-size: 10px; letter-spacing: 0.08em; }
}
/* wide drawing (viewBox 1280 × 214) */
.page-venue .venue-dl--h-hpec { left: 1.25%; top: 17.757%; }
.page-venue .venue-dl--h-ob1 { left: 10.469%; top: 50.467%; }
.page-venue .venue-dl--h-ob2 { left: 30.156%; top: 50.467%; }
.page-venue .venue-dl--h-matching { left: 4.727%; top: 93.458%; }
.page-venue .venue-dl--h-margin { left: 15.117%; top: 93.458%; }
.page-venue .venue-dl--h-funding { left: 25.508%; top: 93.458%; }
.page-venue .venue-dl--h-liquidation { left: 35.898%; top: 93.458%; }
.page-venue .venue-dl--h-l1 { left: 59.375%; bottom: calc(88.785% + 12px); }
.page-venue .venue-dl--h-custody { left: 79.688%; top: 25.701%; }
.page-venue .venue-dl--h-vaults { left: 79.688%; top: 46.262%; }
.page-venue .venue-dl--h-contracts { left: 79.688%; top: 66.822%; }
.page-venue .venue-dl--h-settles { left: 41.875%; bottom: calc(71.963% + 12px); }
/* stacked drawing (viewBox 560 × 652) */
.page-venue .venue-dl--v-hpec { left: 3.571%; top: 8.282%; }
.page-venue .venue-dl--v-ob1 { left: 25.893%; top: 20.552%; }
.page-venue .venue-dl--v-ob2 { left: 74.107%; top: 20.552%; }
.page-venue .venue-dl--v-matching { left: 18.929%; top: 35.583%; }
.page-venue .venue-dl--v-margin { left: 59.643%; top: 35.583%; }
.page-venue .venue-dl--v-funding { left: 18.929%; top: 41.718%; }
.page-venue .venue-dl--v-liquidation { left: 59.643%; top: 41.718%; }
.page-venue .venue-dl--v-l1 { left: 0; bottom: calc(41.718% + 12px); }
.page-venue .venue-dl--v-settles { right: 12.857%; bottom: calc(41.718% + 12px); }
.page-venue .venue-dl--v-custody { left: 50%; top: 69.018%; }
.page-venue .venue-dl--v-vaults { left: 50%; top: 80.675%; }
.page-venue .venue-dl--v-contracts { left: 50%; top: 92.331%; }

/* Captions under the diagram */
.page-venue .venue-machine__caps {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 0;
  align-items: flex-start;
}
.page-venue .venue-machine__cap {
  flex: 0 1 300px;
  min-width: 260px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(247, 246, 255, 0.16);
  padding-top: 20px;
}
.page-venue .venue-machine__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(247, 246, 255, 0.5);
  line-height: 1;
}
.page-venue .venue-machine__cap-title {
  margin-top: 12px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--altius-white);
  text-wrap: balance;
}
.page-venue .venue-machine__cap-body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(247, 246, 255, 0.62);
  text-wrap: pretty;
}
.page-venue .venue-machine__cap-body strong {
  font-weight: 600;
  color: var(--altius-white);
}

@container venue-s2 (max-width: 1039px) {
  .page-venue .venue-machine__caps { flex-direction: column; row-gap: 32px; max-width: 560px; }
  .page-venue .venue-machine__cap { flex: 0 0 auto; width: 100%; min-width: 0; }
}
@container venue-s2 (max-width: 760px) {
  .page-venue .venue-drawing--h { display: none; }
  .page-venue .venue-drawing--v { display: block; }
}

/* Reveal: parts fade in staggered, then the orange settle line sweeps
   (armed/played by the inline script in venue.njk; vertical sweep on the stacked drawing). */
.page-venue .s2-armed .venue-a { opacity: 0; }
.page-venue .s2-armed .venue-settle { opacity: 1; clip-path: inset(0 100% 0 0); }
.page-venue .s2-armed.s2-vertical .venue-settle { clip-path: inset(0 0 100% 0); }
.page-venue .s2-play .venue-a { animation: venue-s2-fade 240ms cubic-bezier(0.2, 0, 0, 1) forwards; }
.page-venue .s2-play .venue-a[data-d="120"] { animation-delay: 120ms; }
.page-venue .s2-play .venue-a[data-d="240"] { animation-delay: 240ms; }
.page-venue .s2-play .venue-a[data-d="360"] { animation-delay: 360ms; }
.page-venue .s2-play .venue-settle { animation: venue-s2-sweep 600ms cubic-bezier(0.2, 0, 0, 1) 640ms forwards; }
@keyframes venue-s2-fade { to { opacity: 1; } }
@keyframes venue-s2-sweep { to { clip-path: inset(0 0 0 0); } }

/* ---------- 03 Engine ---------- */
.page-venue .venue-engine {
  position: relative;
  background: var(--altius-white);
  color: var(--altius-black);
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  padding: 50px 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-venue .venue-engine__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.page-venue .venue-engine__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.page-venue .venue-engine__head .venue-h2 { text-wrap: balance; }
.page-venue .venue-engine__lede {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(25, 5, 1, 0.7);
  max-width: 60ch;
  text-wrap: pretty;
}
.page-venue .venue-engine__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

/* Headline numbers panel */
.page-venue .venue-stats {
  margin: 0;
  border: 2px solid var(--altius-black);
  display: grid;
  grid-auto-rows: 1fr;
}
.page-venue .venue-stats__row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 24px 24px 28px;
  border-bottom: 1px solid rgba(25, 5, 1, 0.16);
  color: var(--altius-black);
}
.page-venue .venue-stats__row:last-child { border-bottom: 0; }
.page-venue .venue-stats__row.is-highlight::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--altius-orange);
}
.page-venue .venue-stats dt {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
}
.page-venue .venue-stats dd {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: right;
}

/* Numbered points */
.page-venue .venue-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.page-venue .venue-point {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid rgba(25, 5, 1, 0.16);
}
.page-venue .venue-point:first-child { padding-top: 0; border-top: 0; }
.page-venue .venue-point:last-child { padding-bottom: 0; }
.page-venue .venue-point__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(25, 5, 1, 0.7);
  padding-top: 6px;
}
.page-venue .venue-point__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.page-venue .venue-point__text h3 {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.page-venue .venue-point__text p {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(25, 5, 1, 0.7);
  text-wrap: pretty;
}

.page-venue .venue-engine__cta {
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid rgba(25, 5, 1, 0.16);
  padding-top: 32px;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .page-venue .venue-hero { min-height: 0; padding-bottom: 72px; }
  .page-venue .venue-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .page-venue .venue-machine,
  .page-venue .venue-engine { min-height: 0; padding-top: 96px; padding-bottom: 88px; }
  .page-venue .venue-engine__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

@media (max-width: 899px) {
  .page-venue .venue-machine__hrow { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* design: hero and section 03 grow with content from the top, one column */
  .page-venue .venue-hero,
  .page-venue .venue-engine { min-height: 100vh; min-height: 100svh; justify-content: flex-start; padding-bottom: 48px; }
  .page-venue .venue-hero__body { align-items: flex-start; }
  .page-venue .venue-hero__grid,
  .page-venue .venue-engine__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* cropped hero art (the <source> in venue.njk serves an 820 x 800 svgView) */
  .page-venue .venue-hero__art { aspect-ratio: 820 / 800; }
}

@media (max-width: 600px) {
  /* design: hero and sections 02/03 drop to 24px side padding at 600px */
  .page-venue .venue-hero,
  .page-venue .venue-machine,
  .page-venue .venue-engine { padding-left: 24px; padding-right: 24px; }
  /* stat rows stack: label above value */
  .page-venue .venue-stats__row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .page-venue .venue-stats dd { text-align: left; }
}

@media (max-width: 520px) {
  .page-venue .venue-eyebrow { font-size: 10px; letter-spacing: 0.08em; }
}

/* Hover only with a hover-capable fine pointer (design 2026-10-20 pm). The shared
   .ds-btn hovers live in product.css, so they are undone here for touch/coarse input. */
@media (hover: none), (pointer: coarse), (pointer: none) {
  .page-venue .venue .ds-btn--light:hover { background: var(--altius-white); border-color: var(--altius-white); color: var(--altius-black); }
  .page-venue .venue .ds-btn--primary:hover { background: var(--altius-black); border-color: var(--altius-black); color: var(--altius-white); }
}

@media (max-width: 479px) {
  .page-venue .venue-machine { padding-top: 72px; padding-bottom: 72px; }
  .page-venue .venue-engine { padding-top: 72px; }
  .page-venue .venue-hero__body { padding-top: 32px; }
  .page-venue .venue-hero__lede,
  .page-venue .venue-engine__lede { font-size: 17px; }
  .page-venue .venue-stats__row { padding: 20px 18px 20px 22px; }
  .page-venue .venue-stats dd { font-size: 26px; }
  .page-venue .venue-point { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
}