/* VANTA Presentation — editorial environment.
   Tokens below are the real VANTA Design System palette/type/spacing
   scale (see packages/design-system/tokens/*.css), copied in verbatim
   because this file ships standalone with no dependency on the rest of
   the Studio OS. Nothing here introduces a new colour or typeface. */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200;0,300;0,400;0,500;1,300&family=Cormorant+Garamond:ital,wght@0,300;1,300&display=swap');

:root {
  --vanta-black: #0a0a0a;
  --vanta-graphite: #2c2c2c;
  --vanta-steel: #6e6e6e;
  --vanta-silver: #a8a8a8;
  --vanta-stone: #dededd;
  --vanta-paper: #fafaf9;
  --vanta-white: #ffffff;
  --material-brushed-brass: #9c8354;

  --surface-page: var(--vanta-paper);
  --surface-raised: var(--vanta-white);
  --text-primary: var(--vanta-black);
  --text-secondary: var(--vanta-graphite);
  --text-muted: var(--vanta-steel);
  --line-primary: rgba(10, 10, 10, 0.12);
  --line-strong: rgba(10, 10, 10, 0.34);

  --font-sans: 'Jost', 'Neue Haas Grotesk Display', Futura, 'Century Gothic', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', Canela, Ivar, Georgia, serif;

  --type-hero: clamp(48px, 8vw, 108px);
  --type-display: clamp(36px, 5vw, 64px);
  --type-heading: clamp(26px, 3vw, 40px);
  --type-subhead: clamp(19px, 2vw, 23px);
  --type-body: 18px;
  --type-body-sm: 15px;
  --type-caption: 11px;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  --leading-hero: 1.04;
  --leading-heading: 1.14;
  --leading-body: 1.75;

  --tracking-label: 0.24em;
  --tracking-eyebrow: 0.2em;
  --tracking-hero: -0.01em;

  --page-margin: clamp(24px, 6vw, 112px);
  --page-max: 1400px;
  --measure: 62ch;
  --section-gap: clamp(96px, 15vw, 208px);

  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-cinematic: 1100ms;
  --duration-base: 320ms;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-light);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img {
  display: block;
  max-width: 100%;
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  line-height: var(--leading-heading);
}
button {
  font-family: inherit;
  cursor: pointer;
}
.p-loading {
  padding: 40vh 0;
  text-align: center;
  font-family: var(--font-serif);
  letter-spacing: 0.3em;
  color: var(--text-muted);
}

/* ---------- shell ---------- */
.p-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--page-margin);
  mix-blend-mode: difference;
  pointer-events: none;
}
.p-nav * {
  pointer-events: auto;
}
.p-nav .mark {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  letter-spacing: 0.4em;
  font-size: 13px;
  color: var(--vanta-white);
  text-transform: uppercase;
}

.p-section {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-margin);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-cinematic) var(--ease-quiet), transform var(--duration-cinematic) var(--ease-quiet);
}
.p-section.in {
  opacity: 1;
  transform: none;
}
.p-section + .p-section {
  margin-top: var(--section-gap);
}
.p-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.p-title {
  font-size: var(--type-display);
  letter-spacing: -0.01em;
}
.p-measure {
  max-width: var(--measure);
}
.p-body {
  font-size: var(--type-body);
  color: var(--text-secondary);
  white-space: pre-line;
}

/* ---------- title page ----------
   A monograph's title page, not a website hero: name first, nothing
   else competing for attention. Paper, not ink — a gallery-catalogue
   opening rather than a website hero's dark drama, and the same
   --surface-page as the rest of the document, so it reads as one
   continuous pale opening straight into .p-intro and .p-overview below
   rather than a hard cut. No image here — see .p-intro and
   .p-hero-figure below for where the introduction and the render land,
   each on their own quiet beat. The nav bar needs no separate handling:
   .p-nav's mix-blend-mode already keeps it legible against light or
   dark, whichever the page opens on. */
.p-titlepage {
  min-height: 94vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6);
  padding: var(--space-9, 96px) var(--page-margin);
  background: var(--surface-page);
  color: var(--text-primary);
}
.p-titlepage-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.p-titlepage h1 {
  font-size: var(--type-hero);
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  max-width: 20ch;
  color: var(--text-primary);
}
.p-titlepage-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* ---------- hero artwork — centred and contained, never stretched or
   cropped, no overlay. A small quiet caption sits close beneath it,
   not a separate text block. ---------- */
.p-hero-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.p-hero-figure {
  margin: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
.p-hero-figure img {
  max-width: 920px;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
}
.p-hero-caption {
  margin: var(--space-5) 0 0;
  max-width: 46ch;
  text-align: center;
  font-family: var(--font-serif);
  font-size: var(--type-body-sm);
  font-style: italic;
  color: var(--text-secondary);
}

/* ---------- contact ---------- */
.p-contact-email {
  display: inline-block;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--type-subhead);
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: var(--duration-base) var(--ease-quiet);
}
.p-contact-email:hover {
  color: var(--material-brushed-brass);
  border-bottom-color: var(--material-brushed-brass);
}

/* ---------- empty ---------- */
.p-empty {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm);
  color: var(--text-muted);
  border: 1px dashed var(--line-strong);
  padding: var(--space-6);
}

/* ---------- interactive model — part of the normal reading flow, not
   a separate mode; see renderInteractiveModel / mountModelControls.
   Full client-safe explorability lives here so every other section can
   stay simple. ---------- */
.p-stage-shell {
  height: min(78vh, 820px);
  background: var(--vanta-black);
  position: relative;
}
.p-stage-shell three-d-stage {
  width: 100%;
  height: 100%;
}
.p-model-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-6);
}
.p-controlgroup {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.p-controlgroup .gl {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.p-chiprow {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.p-chip {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--duration-base) var(--ease-quiet);
}
.p-chip:hover {
  border-color: var(--text-primary);
}
.p-chip.on {
  background: var(--text-primary);
  color: var(--vanta-white);
  border-color: var(--text-primary);
}

/* ---------- current design — the live spec sheet ---------- */
.p-current-design-spec {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.p-current-design-spec > div {
  display: grid;
  grid-template-columns: minmax(160px, 0.4fr) 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-primary);
}
.p-current-design-spec > div:last-child {
  border-bottom: none;
}
.p-current-design-spec dt {
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.p-current-design-spec dd {
  margin: 0;
  font-size: var(--type-body-sm);
  color: var(--text-primary);
}

.p-footer {
  margin-top: var(--section-gap);
  padding: var(--space-7) var(--page-margin);
  border-top: 1px solid var(--line-primary);
  font-family: var(--font-sans);
  font-size: var(--type-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}