@charset "utf-8";

@layer tokens {
  :root {
    --ap-chalk: #FBFAF6;
    --ap-paper: #FFFFFF;
    --ap-rule: #D3D8CC;
    --ap-shadow: #E8E9E1;
    --ap-viridian: #0B6B4F;
    --ap-evergreen: #24312D;
    --ap-graphite: #59645C;
  }
}

.ap-hero.ap-hero--thin {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
  position: relative;
}

.ap-hero--thin .ap-masthead {
  display: flex;
  inline-size: 100%;
  margin-inline: auto;
  border: 0;
  gap: .65rem;
  padding: 0;
  align-items: center;
}

.ap-core-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  inline-size: 100%;
}

.ap-core-stage { position: relative; aspect-ratio: 960 / 500; }
.ap-core-stage > img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.ap-core-stage[data-core-ready="true"] > img { visibility: hidden; }
.ap-core-stage > img:not(.ap-core-poster--open) { display: none; }

html:not([data-core-nav]) body:has(#silicon:target) .ap-core-poster--open,
html:not([data-core-nav]) body:has(#machines:target) .ap-core-poster--open,
html:not([data-core-nav]) body:has(#systems:target) .ap-core-poster--open,
html[data-selected-path="silicon"] .ap-core-poster--open,
html[data-selected-path="machines"] .ap-core-poster--open,
html[data-selected-path="systems"] .ap-core-poster--open { display: none; }

html:not([data-core-nav]) body:has(#silicon:target) .ap-core-poster--silicon,
html:not([data-core-nav]) body:has(#machines:target) .ap-core-poster--machines,
html:not([data-core-nav]) body:has(#systems:target) .ap-core-poster--systems,
html[data-selected-path="silicon"] .ap-core-poster--silicon,
html[data-selected-path="machines"] .ap-core-poster--machines,
html[data-selected-path="systems"] .ap-core-poster--systems { display: block; }

html[data-core-nav][data-content-path="silicon"] .ap-portfolio:not([data-portfolio="silicon"]),
html[data-core-nav][data-content-path="machines"] .ap-portfolio:not([data-portfolio="machines"]),
html[data-core-nav][data-content-path="systems"] .ap-portfolio:not([data-portfolio="systems"]) { display: none; }

@media (max-width: 44rem) {
  .ap-hero.ap-hero--thin { padding-inline: 1.25rem; }
  .ap-core-stage { aspect-ratio: 4 / 3; overflow: clip; }
  .ap-core-stage > img { inline-size: 140%; max-inline-size: none; inset-inline-start: -20%; }
}

@media (max-width: 24rem) {
  .ap-hero.ap-hero--thin { padding-inline: 1rem; }
}

@media (max-height: 38rem) and (min-width: 45rem) {
  .ap-core-stage { max-inline-size: 42rem; }
}

@media (forced-colors: active) {
  .ap-core-hint svg path { stroke: CanvasText; }
}