/* Shared page rhythm and a hero sized by the browser's visible viewport. */
body[data-page] main { padding: var(--intro-space, 128px) 0 var(--closing-space, 140px); }
body[data-page] main > .section { padding: 0; margin: 0; }
body[data-page] main > .section + .section { margin-top: var(--section-space, 152px); }
body[data-page] .section .container { border: 0; padding-bottom: 0; }
body[data-page] main h2 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.35; letter-spacing: normal; color: #d9d9d9; }

body[data-page] .hero {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  max-height: none;
  padding-block: clamp(10px, 3.3svh, 30px) max(12px, env(safe-area-inset-bottom));
}
body[data-page] .site-header {
  position: relative;
  inset: auto;
  margin-inline: max(16px, 3vw);
  gap: 0;
}
body[data-page] .site-header nav {
  width: auto;
  order: initial;
  align-items: center;
  gap: clamp(9px, 1.4vw, 20px);
  padding: 9px clamp(8px, 1.1vw, 16px);
  background: #101713a6;
  border: 0;
}
body[data-page] .site-header nav a { font-size: 16px; font-weight: 400; }
body[data-page] .site-header nav .projects-label {
  max-width: 8ch;
  padding-right: 10px;
  border-right: 1px solid #f0eee359;
  line-height: 1.1;
}
.site-header .language { padding-inline: 9px; background: #ffffff26; }
body[data-page] .hero-copy {
  position: relative;
  inset: auto;
  width: min(1140px, calc(100% - 100px));
  margin-inline: auto;
  align-self: center;
  padding: 0;
  transform: none;
}
body[data-page] .hero h1 {
  font-size: clamp(36px, min(5.8vw, 8.2svh), 60.5px);
  line-height: 1.05785;
  color: #f0eee3;
  overflow-wrap: normal;
  text-wrap: initial;
}
body[data-page] .hero-description { margin-top: clamp(14px, 4svh, 38px); }
body[data-page] .hero-description p { font-size: clamp(16px, 2.5svh, 22px); line-height: 1.4545; }
body[data-page] .hero-bottom {
  position: relative;
  inset: auto;
  margin-inline: max(16px, 3vw);
}
body[data-page] .scroll-cue {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 20px;
  text-shadow: 0 1px 8px #000;
}
body[data-page=unpattern] .hero-description { max-width: 940px; }
body[data-page=anomaly] .hero-description { max-width: 1120px; }

body[data-page] .site-banner {
  min-height: 246px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
body[data-page] .site-banner > .container {
  min-height: 0;
  padding-block: 22px;
  align-items: center;
}
body[data-page] .site-banner h2 {
  font: 400 clamp(28px, 3.7vw, 40px)/1.175 Georgia, 'Times New Roman', serif;
  margin: 0 0 16px;
  letter-spacing: normal;
  color: #f0eee3;
  max-width: 100%;
}
body[data-page] .site-banner > .closing-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .6;
  z-index: 0;
  pointer-events: none;
}
body[data-page] .site-banner::after {
  background: linear-gradient(90deg, #0004, #0002 44%, transparent 78%);
}
.site-banner .closing-copy { max-width: 534px; }
.site-banner .actions { gap: 12px 24px; }
.site-banner .button {
  color: #101710;
  white-space: nowrap;
  min-height: 38px;
  padding: 4px 9px 4px 13px;
  gap: 9px;
  font-size: 15px;
  line-height: 21px;
  background: #d9d9d9;
  border-color: #d9d9d9;
}
@media (pointer: coarse), (max-width: 800px) {
  .site-banner .button { min-height: 44px; }
}

@media (max-width: 800px) {
  body[data-page] main { padding: 86px 0 96px; }
  body[data-page] main > .section + .section { margin-top: 104px; }
  body[data-page] .hero-copy { width: calc(100% - 48px); }
  body[data-page] .site-banner > .container { padding-block: 28px; }
}
@media (max-width: 600px) {
  body[data-page] .site-header { row-gap: 8px; }
  body[data-page] .site-header nav { order: 3; width: 100%; justify-content: flex-start; }
  body[data-page] .site-header nav .projects-label { max-width: none; }
  body[data-page] .hero h1 { font-size: clamp(30px, 8.6vw, 42px); }
  body[data-page=peripheric] .hero h1 strong { margin-top: 12px; }
}
@media (max-height: 520px) {
  body[data-page] .hero { padding-block: 8px; }
  body[data-page] .hero h1 { font-size: clamp(24px, min(7.5vw, 8.4svh), 38px); }
  body[data-page=peripheric] .hero h1 strong { margin-top: 8px; }
  body[data-page] .hero-description { margin-top: 10px; }
  body[data-page] .hero-description p { font-size: 15px; }
  body[data-page] .scroll-cue { min-height: 32px; }
}
@media (min-width: 801px) and (min-height: 680px) {
  body[data-page] .hero-copy { transform: translateY(-5.5svh); }
}
@media (max-width: 1079px) {
  body[data-page] .hero h1 .headline-break { display: none; }
}
@media (max-width: 600px) {
  .site-banner .banner-break { display: none; }
}

/* Typography from the 1440px Figma frames. Body copy keeps its reading size
   while display text and columns adapt to the available viewport. */
body[data-page] .wordmark { font-weight: 700; }
body[data-page] .site-header nav a[aria-current="page"] { color: #d0e7b7; font-weight: 700; border-bottom-color: transparent; }
body[data-page] main p { color: #c5cbbf; line-height: 26px; }
body[data-page] .step { color: #d3e69d; letter-spacing: 1.8px; }
body[data-page] .hero h1 { letter-spacing: normal; }
body[data-page=anomaly] .hero h1 { letter-spacing: -.035em; }
body[data-page=anomaly] .hero-description p:first-child { font-size: clamp(16px, 2.4svh, 21px); line-height: 1.524; }
body[data-page=anomaly] .scroll-cue { font-size: clamp(20px, 3svh, 26px); }
body[data-page=peripheric] .scroll-cue { color: #c5cbbf; }
body[data-page=unpattern] .hero-description p { line-height: 1.4773; }
body[data-page=peripheric] .hero h1 strong { line-height: 1.025; }
body[data-page=peripheric] .perspective h2 { line-height: 1.36575; }
body[data-page=peripheric] .challenge-section h2 {
  font-size: clamp(30px, 3.6vw, 40px) !important;
  line-height: 1.35 !important;
}
.perspective-copy .prose strong, .perspective-copy > p > strong {
  font-size: 22px;
  line-height: 26px;
  color: #d9d9d9;
}
body[data-page=peripheric] .conservation-statement { background: #768a79; color: #292d25; }
body[data-page=peripheric] .conservation-statement p { color: inherit; }
.challenge-row h3 {
  font-size: 28px;
  line-height: 34.44px;
  font-weight: 700;
  color: #d9d9d9;
  letter-spacing: normal;
}
.challenge-row:last-child h3 { letter-spacing: -.7px; }
.challenge-stat { font-size: 22px; line-height: 28px; color: #d9d9d9; }
.response-intro { color: #c5cbbf; line-height: 26px; }
.challenge-row:nth-child(n+2) .challenge-details[open] .challenge-stat { font-size: 20.8px; }
body[data-page=peripheric] .method-section h2 { max-width: 660px; }
body[data-page=peripheric] .method-section .method-intro { line-height: 28px; }
.method-pillar h3 { font-size: 22px; line-height: 34.44px; color: #1e201d; letter-spacing: normal; }
body[data-page=peripheric] .method-pillar .pillar-copy p {
  font: 400 16px/26px Arial, Helvetica, sans-serif !important;
  color: #292d25;
}

body[data-page=anomaly] .anomaly-intro .intro-lead {
  max-width: 880px;
  font: 400 clamp(19px, 2.4vw, 22px)/28px Georgia, 'Times New Roman', serif;
  color: #c5cbbf;
  letter-spacing: normal;
}
.anomaly-card h3 { font-size: 22px; line-height: 27px; letter-spacing: normal; color: #d9d9d9; }
body[data-page=anomaly] .anomaly-card p { font-size: 16px; }
body[data-page=anomaly] .research-lead p {
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 26px;
  color: #e2e2d6;
}
.research-lead strong { color: #d9d9d9; }
body[data-page=anomaly] .research-lead p + p { margin-top: 22px; }
.intro-break, .encoder-break, .goal-break { display: none; }

@media (min-width: 1100px) {
  .intro-break { display: initial; }
  .anomaly-intro h2 { max-width: none; }
}
@media (min-width: 900px) {
  .encoder-break { display: initial; }
}
@media (min-width: 1000px) {
  .goal-break { display: initial; }
}
.anomaly-goal .goal-heading h3 { line-height: 34px; letter-spacing: normal; color: #2d2d2d; }
body[data-page=anomaly] .goal-heading .step { color: #080808; }

body[data-page=unpattern] .unpattern-intro h2 { max-width: 850px; }
body[data-page=unpattern] .edge-grid p { line-height: 26px; }
.edge-grid strong { color: #d9d9d9; }
.edge-grid p:first-child strong { font-size: 22px; }
body[data-page=unpattern] .edge-grid .prose { max-width: min(660px, 100%); }
body[data-page=unpattern] .edge-grid p:first-child { max-width: 600px; }
@media (min-width: 780px) {
  body[data-page=unpattern] .edge-grid p:first-child strong { white-space: nowrap; }
}
body[data-page=unpattern] :is(.control, .knowledge) h2 { letter-spacing: -.04155em; }
body[data-page=unpattern] .semantic-card summary p { line-height: 23px; }
.semantic-card h3 { color: #d9d9d9; }
.track-main h3 { font-size: 28px; line-height: 1.5; letter-spacing: normal; color: #d9d9d9; }
body[data-page=unpattern] .track-detail { max-width: 1026px; }
.track-summary .disclosure { color: #e5a27b; }

@media (min-width: 1001px) {
  body[data-page=peripheric] { --intro-space: 112px; --section-space: 186px; --closing-space: 112px; }
  body[data-page=peripheric] .hero-copy { max-width: 1140px; }
  .anomaly-cards { max-width: 1011px; gap: 21px; }
  .anomaly-card summary { padding-inline: clamp(24px, 3.47vw, 50px); }
  .anomaly-card .card-detail { padding-inline: 28px; }
  .method-pillars { max-width: 1000px; }
  .knowledge-tracks { max-width: 1079px; margin-inline: auto; }
}
@media (max-width: 800px) {
  .track-main h3 { font-size: 24px; line-height: 1.3; }
  body[data-page] .site-header nav a { font-size: clamp(13px, 2.8vw, 16px); }
}
@media (max-width: 600px) {
  body[data-page] .hero h1 .statement-break { display: initial; }
  body[data-page=peripheric] .hero h1 strong { display: block; }
  body[data-page] .site-header nav a { min-height: 32px; display: inline-flex; align-items: center; }
  body[data-page] .site-header nav { padding-block: 3px; }
  .challenge-row h3, .anomaly-goal .goal-heading h3 { font-size: 25px; line-height: 1.24; }
}
@media (max-height: 520px) {
  body[data-page=anomaly] .hero-description p:first-child { font-size: 15px; }
}

@media (max-width: 600px) {
  body[data-page] .site-header { gap: 6px; }
  body[data-page] .site-header nav { order: initial; width: auto; gap: 7px; }
  body[data-page] .site-header nav .projects-label { max-width: 8ch; padding-right: 5px; }
  body[data-page] .wordmark { font-size: clamp(20px, 5.6vw, 25px); }
  body[data-page] .language { margin-left: auto; }
}

.signup-preview label { display: block; margin-bottom: 8px; }
.signup-preview input[type="email"] { display: block; margin-bottom: 16px; opacity: 1; }
.signup-preview .button:disabled { background: #d9d9d9; color: #253126; border-color: #d9d9d9; cursor: default; filter: none; }
.signup-preview .preview-note { margin-top: 14px; font-size: 14px; }

/* A short project notice anchored to its trigger. */
.project-note-anchor { position: relative; display: inline-block; max-width: 100%; }
.project-note {
  position: absolute;
  z-index: 4;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  padding: 6px 10px;
  border: 1px solid #81906d;
  background: #172018;
  color: var(--ink);
  font: 14px/1.3 Arial, sans-serif;
  white-space: nowrap;
}