body.project-detail {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #100f10;
  color: #f0efeb;
}

body.page-projects.project-detail {
  overflow-x: hidden;
  overflow-y: auto;
}

body.project-detail {
  --shared-header-bg: #100f10;
}

body.project-detail .concepts-shell__header::before {
  background: #100f10;
}

.project-one {
  --project-detail-margin: 130px;
  --project-detail-max-viewport: 2440px;
  --project-detail-max-content-width: 1640px;
  --project-detail-content-width: min(
    calc(100vw - var(--project-detail-margin) * 2),
    var(--project-detail-max-content-width)
  );
  --project-detail-cover-width: 620px;
  --project-detail-cover-ratio: 0.851613;
  --project-detail-hero-gap: 40px;
  width: 100%;
  min-height: 100dvh;
  padding: 108px 0 120px;
  background: #100f10;
}

.project-one__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: var(--project-detail-content-width);
  margin: 0 auto;
}

.project-one__reveal {
  --reveal-delay: 0ms;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(30px) scale(0.985);
  transform-origin: center;
}

.project-one__reveal.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
  animation: project-one-block-reveal 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay) backwards;
}

@keyframes project-one-block-reveal {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(30px) scale(0.985);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

.project-one__hero {
  display: flex;
  align-items: center;
  gap: var(--project-detail-hero-gap);
  width: 100%;
  min-height: calc(var(--project-detail-cover-width) * var(--project-detail-cover-ratio) + 32px);
  padding: 16px;
  background: linear-gradient(
    127.45deg,
    var(--project-detail-gradient-start, #32848d) 28.52%,
    var(--project-detail-gradient-end, #2c7ecc) 87.8%
  );
}

.project-one__back {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  height: 40px;
  border: 0;
  border-radius: 44px;
  padding: 0 16px 0 12px;
  color: #f0efeb;
  background: rgba(240, 239, 235, 0.1);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.project-one__back:hover,
.project-one__back:focus-visible {
  background: rgba(240, 239, 235, 0.2);
}

.project-one__back svg {
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__back:hover svg,
.project-one__back:focus-visible svg {
  transform: rotate(45deg) scale(1.14);
}

.project-one__cover {
  width: var(--project-detail-cover-width);
  height: calc(var(--project-detail-cover-width) * var(--project-detail-cover-ratio));
  flex: 0 0 var(--project-detail-cover-width);
  object-fit: cover;
}

.project-one__hero-copy {
  --project-hero-copy-width: auto;
  display: flex;
  min-width: 0;
  width: var(--project-hero-copy-width);
  max-width: calc(100% - var(--project-detail-cover-width) - var(--project-detail-hero-gap));
  flex: 0 1 auto;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}

.project-one__hero-copy h1 {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #e2e8f0;
  font-family: "Roboto Flex", "Inter", sans-serif;
  font-size: 36px;
  font-weight: 700;
  font-variation-settings: "opsz" 96, "wght" 700, "wdth" 100, "slnt" 0;
  line-height: 42px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.project-one__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.project-one__meta span,
.project-one__meta a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: 40px;
  border: 1px solid #f0efeb;
  border-radius: 44px;
  padding: 0 12px 0 16px;
  color: #f0efeb;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  white-space: nowrap;
}

.project-one__meta-fill {
  background: var(--project-detail-gradient-start, #32848d);
}

.project-one__meta > span {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
}

.project-one__support {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 2px 0 -4px;
  color: #f0efeb;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.project-one__support::before {
  content: "\1F44B";
  display: inline-block;
  transform-origin: 70% 70%;
  animation: project-support-wave 1800ms ease-in-out infinite;
}

@keyframes project-support-wave {
  0%,
  52%,
  100% {
    transform: rotate(0deg);
  }

  10%,
  30% {
    transform: rotate(14deg);
  }

  20%,
  40% {
    transform: rotate(-8deg);
  }
}

.project-one__meta a {
  width: 100%;
  justify-content: flex-start;
  gap: 16px;
  text-decoration: none;
  background: rgba(240, 239, 235, 0.1);
  transition:
    background-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__meta a:hover,
.project-one__meta a:focus-visible {
  background: rgba(240, 239, 235, 0.2);
}

.project-one__meta a svg {
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__meta a:hover svg,
.project-one__meta a:focus-visible svg {
  transform: rotate(45deg) scale(1.14);
}

.project-one__meta a.is-press-animated svg,
.project-one__meta a.is-auto-animated svg {
  transform: rotate(45deg) scale(1.14);
}

.project-one__meta a[hidden] {
  display: none;
}

.project-one__meta a span {
  width: auto;
  height: auto;
  border: 0;
  padding: 0;
}

body[data-project-slug="entyx"] .project-one__hero-copy h1 {
  color: #100f10;
}

body[data-project-slug="entyx"] .project-one__back {
  color: #100f10;
  background: rgba(16, 15, 16, 0.1);
}

body[data-project-slug="entyx"] .project-one__back:hover,
body[data-project-slug="entyx"] .project-one__back:focus-visible {
  background: rgba(16, 15, 16, 0.18);
}

body[data-project-slug="entyx"] .project-one__meta span,
body[data-project-slug="entyx"] .project-one__meta a {
  border-color: #100f10;
  color: #100f10;
}

body[data-project-slug="entyx"] .project-one__support {
  color: #100f10;
}

body[data-project-slug="entyx"] .project-one__meta > span {
  width: 100%;
  flex-basis: 100%;
}

body[data-project-slug="entyx"] .project-one__meta-fill {
  border-color: #100f10;
  color: #100f10;
  background: var(--project-detail-gradient-start, #77ff61);
}

body[data-project-slug="entyx"] .project-one__meta a {
  background: rgba(16, 15, 16, 0.1);
}

body[data-project-slug="entyx"] .project-one__meta a:hover,
body[data-project-slug="entyx"] .project-one__meta a:focus-visible {
  background: rgba(16, 15, 16, 0.12);
}

/* Citizen runs a five-neutral palette with no accent colour, so its hero plate
   is a soft grey gradation and everything on it has to read dark. */
body[data-project-slug="citizen"] .project-one__hero-copy h1 {
  color: #100f10;
}

body[data-project-slug="citizen"] .project-one__back {
  color: #100f10;
  background: rgba(16, 15, 16, 0.1);
}

body[data-project-slug="citizen"] .project-one__back:hover,
body[data-project-slug="citizen"] .project-one__back:focus-visible {
  background: rgba(16, 15, 16, 0.18);
}

body[data-project-slug="citizen"] .project-one__meta span,
body[data-project-slug="citizen"] .project-one__meta a {
  border-color: #100f10;
  color: #100f10;
}

body[data-project-slug="citizen"] .project-one__support {
  color: #100f10;
}

body[data-project-slug="citizen"] .project-one__meta-fill {
  border-color: #100f10;
  color: #100f10;
  /* the hero behind it is a light grey, so this lifts off it instead of
     sinking into it - the outline carries the shape either way */
  background: rgba(240, 239, 235, 0.38);
}

body[data-project-slug="citizen"] .project-one__meta a {
  background: rgba(16, 15, 16, 0.1);
}

body[data-project-slug="citizen"] .project-one__meta a:hover,
body[data-project-slug="citizen"] .project-one__meta a:focus-visible {
  background: rgba(16, 15, 16, 0.16);
}

.project-one__text-block {
  --project-read-gap: 0px;
  --project-read-padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--project-read-gap);
  width: 100%;
  min-height: 0;
  padding: 16px 16px var(--project-read-padding-bottom);
  border: 1px solid #f0efeb;
  border-radius: 30px;
  background: #100f10;
  cursor: pointer;
  transition:
    gap 460ms cubic-bezier(0.2, 0.8, 0.2, 1),
    padding-bottom 460ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 260ms ease,
    background-color 260ms ease;
}

.project-one__text-block.is-open {
  --project-read-gap: 28px;
  --project-read-padding-bottom: 40px;
}

.project-one__text-block:not(.is-open):not(.is-closing):hover {
  --project-read-gap: 14px;
  --project-read-padding-bottom: 28px;
  background: #151314;
}

.project-one__text-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  text-align: left;
  transition: opacity 220ms ease;
}

.project-one__text-head:hover,
.project-one__text-head:focus-visible {
  opacity: 0.78;
}

.project-one__text-title {
  display: flex;
  align-items: center;
  gap: 20px;
}

.project-one__text-title h2 {
  margin: 0;
  color: #f0efeb;
  font-family: "Roboto Flex", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 600;
  font-variation-settings: "opsz" 96, "wght" 600, "wdth" 100, "slnt" 0;
  line-height: 28px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-one__text-icon {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.project-one__text-icon::before,
.project-one__text-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 16px;
  height: 1px;
  background: #f0efeb;
}

.project-one__text-icon::before {
  top: 8px;
  box-shadow: 0 4px 0 #f0efeb;
}

.project-one__text-icon::after {
  top: 16px;
  width: 10px;
}

.project-one__text-arrow {
  position: relative;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

.project-one__text-arrow::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-right: 1px solid #f0efeb;
  border-bottom: 1px solid #f0efeb;
  transform: rotate(45deg);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__text-block.is-open .project-one__text-arrow::before {
  transform: translateY(4px) rotate(225deg);
}

.project-one__paragraphs {
  --project-read-height: 0px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: min(1104px, calc(100% - 44px));
  max-height: var(--project-read-height);
  opacity: 0;
  overflow: hidden;
  padding: 0 44px;
  transform: translateY(-14px);
  transition:
    max-height 560ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms ease,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: max-height, opacity, transform;
}

.project-one__text-block.is-open .project-one__paragraphs {
  opacity: 1;
  transform: translateY(0);
}

.project-one__text-block:not(.is-open):not(.is-closing):hover .project-one__paragraphs {
  max-height: 66px;
  opacity: 0.48;
  transform: translateY(0);
}

.project-one__text-block.is-closing .project-one__paragraphs {
  opacity: 0;
  transform: translateY(-10px);
}

.project-one__paragraphs article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.project-one__paragraphs h3,
.project-one__paragraphs p,
.project-one__paragraphs ul {
  margin: 0;
  color: #f0efeb;
  font-family: "Inter", sans-serif;
  letter-spacing: 0;
}

.project-one__paragraphs h3 {
  font-family: "Roboto Flex", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 500;
  font-variation-settings: "opsz" 96, "wght" 500, "wdth" 100, "slnt" 0;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-one__paragraphs p,
.project-one__paragraphs li {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.project-one__text-mark {
  display: inline-block;
  position: relative;
  line-height: 1;
  padding: 0.08em 0.32em;
  transform-origin: 50% 60%;
  transition: transform 340ms cubic-bezier(0.2, 0.8, 0.2, 1);
  color: #fffaf0;
  font-weight: inherit;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--project-detail-gradient-start, #32848d) 16%, transparent) 0%,
    color-mix(in srgb, var(--project-detail-gradient-start, #32848d) 16%, transparent) 100%,
    transparent 100%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.project-one__text-mark.is-tilted {
  z-index: 2;
  transform: rotate(var(--mark-tilt, 3deg));
}

@media (prefers-reduced-motion: reduce) {
  .project-one__text-mark {
    transition: none;
  }

  .project-one__text-mark.is-tilted {
    transform: none;
  }
}

.project-one__paragraphs ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.project-one__paragraphs li {
  position: relative;
  padding-left: 18px;
}

.project-one__paragraphs li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- project map ----------------------------------------------------
   A verbatim reproduction of the Figma frame (3810x2210): every block keeps
   its design coordinates and the frame scales as ONE unit, so the composition
   never re-flows. --map-unit is derived from the container width, so the whole
   map always fits the block exactly. */
.project-one__sitemap {
  cursor: pointer;
}

.project-one__sitemap-body {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* outranks the (0,4,0) peek rules that clamp .project-one__paragraphs to 66px */
.project-one__text-block.project-one__sitemap.is-open .project-one__paragraphs.project-one__sitemap-body,
.project-one__text-block.project-one__sitemap.is-closing .project-one__paragraphs.project-one__sitemap-body {
  max-height: var(--project-read-height);
  opacity: 1;
  transform: translateY(0);
}

.project-one__text-block.project-one__sitemap:not(.is-open):not(.is-closing) .project-one__paragraphs.project-one__sitemap-body {
  max-height: 0;
  opacity: 0;
}

/* and it leans out on hover the way the text block does - the (0,5,0) rule
   above would otherwise pin it shut */
.project-one__text-block.project-one__sitemap:not(.is-open):not(.is-closing):hover .project-one__paragraphs.project-one__sitemap-body {
  max-height: 66px;
  opacity: 0.48;
  transform: translateY(0);
}

/* a map is artwork, not copy: it sits the same distance from the block's
   bottom edge as it does from the sides, at every width */
.project-one__text-block.project-one__sitemap.is-open,
.project-one__text-block.project-one__sitemap.is-closing {
  --project-read-padding-bottom: 16px;
}

@media (max-width: 640px) {
  .project-one__text-block.project-one__sitemap.is-open,
  .project-one__text-block.project-one__sitemap.is-closing {
    --project-read-padding-bottom: 14px;
  }
}

.project-sitemap__canvas {
  /* the parent is a flex column - without this the canvas shrinks to the
     collapsed height and scrollHeight can never see the real content */
  flex: 0 0 auto;
  container-type: inline-size;
  width: 100%;
}

.project-sitemap__stage {
  /* one unit of the Figma frame, expressed as a share of the block width */
  --map-unit: calc(100cqw / var(--map-frame-w));
  position: relative;
  width: 100%;
  height: calc(var(--map-frame-h) * var(--map-unit));
  overflow: hidden;
  /* no backdrop of its own - the map reads straight off the page. A frame that
     wants one sets `sitemap.background`, painted center/cover from its own
     aspect ratio. */
  background-color: transparent;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.project-sitemap__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.project-sitemap__wires--stacked {
  display: none;
}

.project-sitemap__wire {
  fill: none;
  stroke: rgba(240, 239, 235, 0.34);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition:
    stroke 440ms ease,
    stroke-width 440ms ease,
    stroke-dashoffset var(--wire-draw, 950ms) cubic-bezier(0.33, 0.9, 0.26, 1);
}

.project-sitemap__wire.is-lit {
  stroke: #3889d2;
  stroke-width: 1.6;
}

.project-sitemap__block {
  position: absolute;
  left: calc(var(--bx) * var(--map-unit));
  top: calc(var(--by) * var(--map-unit));
  width: calc(var(--bw) * var(--map-unit));
  display: flex;
  flex-direction: column;
  outline: none;
  transition: opacity 400ms ease;
}

.project-sitemap__block.is-lit .project-sitemap__pill {
  transform: scale(1.045);
}

.project-sitemap__items {
  display: flex;
  flex-direction: column;
  margin-top: calc(var(--bstem) * var(--map-unit));
  gap: calc(var(--map-item-gap, 20) * var(--map-unit));
}

/* exact Figma values: 338x74 pill, radius 40, Murecho 28/49 */
.project-sitemap__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(74 * var(--map-unit));
  padding: calc(10 * var(--map-unit));
  border-radius: calc(40 * var(--map-unit));
  color: #fff;
  font-family: "Murecho", "Inter", sans-serif;
  font-size: calc(28 * var(--map-unit));
  line-height: calc(38 * var(--map-unit));
  text-align: center;
  /* The block carries the delay, but the green ring lives on the pill, and a
     delay on an ancestor does nothing for a descendant's own transition - so
     the block hands it down as a custom property and the pill spends it here.
     Without this the whole map's rings appeared at once no matter what the
     timeline said, and only the block opacity was ever staggered. */
  transition:
    background-color 360ms ease var(--lit-delay, 0ms),
    box-shadow 360ms ease var(--lit-delay, 0ms),
    color 360ms ease var(--lit-delay, 0ms),
    transform 540ms cubic-bezier(0.34, 1.56, 0.64, 1) var(--lit-delay, 0ms);
}

.project-sitemap__pill--head {
  font-weight: 500;
  background: transparent;
  box-shadow: inset 0 0 0 3px #3889d2;
}

.project-sitemap__pill--item {
  font-weight: 400;
  background: rgba(20, 24, 32, 0.55);
}

.project-sitemap__pill--page {
  font-weight: 600;
  background: rgba(56, 137, 210, 0.4);
  box-shadow: inset 0 0 0 3px #3889d2;
}

/* ---- sectioned map -------------------------------------------------- */
/* Entyx's frame is 444 pills across eight branches. One canvas cannot hold it
   at a readable size, so the branches become sections: a rail that is always
   on the left, and a pane under it that swaps. */
.project-sitemap__canvas--sections {
  display: grid;
  grid-template-columns: minmax(186px, 232px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  container-type: normal;
}

.project-sitemap__rail {
  position: sticky;
  top: 18px;
}

.project-sitemap__rail-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-sitemap__rail-list li::before {
  content: none;
}

.project-sitemap__rail-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(240, 239, 235, 0.14);
  border-radius: 10px;
  background: transparent;
  color: rgba(240, 239, 235, 0.62);
  font-family: "Actor", "Inter", sans-serif;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 300ms ease,
    border-color 300ms ease,
    color 300ms ease,
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-sitemap__rail-item:hover {
  border-color: rgba(128, 250, 106, 0.4);
  color: #f0efeb;
  transform: translateX(3px);
}

.project-sitemap__rail-item.is-active {
  border-color: #80fa6a;
  background: rgba(128, 250, 106, 0.12);
  color: #f0efeb;
}

.project-sitemap__rail-index {
  font-size: 10px;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.project-sitemap__rail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-sitemap__rail-count {
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(240, 239, 235, 0.1);
  font-size: 10px;
  opacity: 0.72;
}

.project-sitemap__rail-item.is-active .project-sitemap__rail-count {
  background: rgba(128, 250, 106, 0.22);
  opacity: 1;
}

.project-sitemap__panes {
  position: relative;
  overflow: hidden;
  transition: height 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-sitemap__pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px);
  transition:
    opacity 360ms ease,
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 480ms;
}

.project-sitemap__pane.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 380ms ease 90ms,
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1) 90ms,
    visibility 0s;
}

.project-sitemap__pane.is-leaving {
  visibility: visible;
  transform: translateX(-22px);
}

/* wide sections keep their scale and run sideways - the deep chains are meant
   to be read left to right */
.project-sitemap__scroller {
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* Chrome drops every `::-webkit-scrollbar` rule on an element that also sets
   `scrollbar-width` or `scrollbar-color`, so the standard properties are kept
   behind a support query - see assets/css/scrollbar.css */
@supports not selector(::-webkit-scrollbar) {
  .project-sitemap__scroller {
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 250, 106, 0.62) rgba(240, 239, 235, 0.07);
  }
}

.project-sitemap__scroller::-webkit-scrollbar,
.project-sitemap__rail-list::-webkit-scrollbar {
  height: 8px;
}

.project-sitemap__scroller::-webkit-scrollbar-button,
.project-sitemap__rail-list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.project-sitemap__scroller::-webkit-scrollbar-track,
.project-sitemap__rail-list::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(240, 239, 235, 0.07);
}

.project-sitemap__scroller::-webkit-scrollbar-thumb,
.project-sitemap__rail-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(128, 250, 106, 0.62);
  transition: background-color 240ms ease;
}

.project-sitemap__scroller::-webkit-scrollbar-thumb:hover,
.project-sitemap__rail-list::-webkit-scrollbar-thumb:hover {
  background: #80fa6a;
}

.project-sitemap__block--pill {
  height: calc(var(--map-pill-h, 16.473) * var(--map-unit));
}

/* ---- Entyx frame ---------------------------------------------------- */
.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__block {
  cursor: pointer;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__pill {
  height: calc(16.473 * var(--map-unit));
  min-height: 0;
  padding: 0 calc(21.993 * var(--map-unit));
  border: 0;
  border-radius: calc(12 * var(--map-unit));
  color: #000;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: calc(8.38 * var(--map-unit));
  line-height: 1;
  letter-spacing: calc(-0.3352 * var(--map-unit));
  white-space: nowrap;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__pill--spine {
  background: #80fa6a;
  font-weight: 600;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__pill--head {
  background: #cdffc4;
  box-shadow: inset 0 0 0 calc(1.047 * var(--map-unit)) #80fa6a;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__pill--plain {
  background: #fff;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__pill--leaf {
  background: #bdbdbd;
}

/* The grey connector holds still and never recolours: the green arrives as a
   second copy laid over it, drawn from one end to the other. Lighting the line
   itself was two-tone for as long as it ran, and a dash reveal on it had to
   hide the line before uncovering it - on a long horizontal both read as a
   break rather than as movement. */
.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__wire--trunk {
  transition:
    stroke 460ms ease,
    stroke-width 460ms ease;
}

/* The generic rule turns any lit wire blue. Here the grey line is scenery for
   the green to run along, so it keeps its resting colour and only the copy on
   top carries the highlight. */
.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__wire--trunk.is-lit {
  stroke: rgba(240, 239, 235, 0.34);
  stroke-width: 1;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__wire--trace {
  stroke: #80fa6a;
  stroke-width: 1.8;
  opacity: 0;
  transition:
    opacity 140ms ease,
    stroke-dashoffset var(--wire-draw, 700ms) cubic-bezier(0.33, 0.9, 0.26, 1);
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__wire--trace.is-lit {
  opacity: 1;
}

/* the copy is only for this map; everywhere else it must not paint at all */
.project-sitemap__wire--trace {
  opacity: 0;
  pointer-events: none;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__block.is-lit .project-sitemap__pill {
  box-shadow: 0 0 0 2px rgba(128, 250, 106, 0.75);
}

/* the shared lit rules are Talnexa's blue and would leak in through the
   variant names, so this frame restates its own fills */
.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__block.is-lit .project-sitemap__pill--spine {
  background: #80fa6a;
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__block.is-lit .project-sitemap__pill--head {
  background: #cdffc4;
  box-shadow:
    inset 0 0 0 calc(1.047 * var(--map-unit)) #80fa6a,
    0 0 0 2px rgba(128, 250, 106, 0.75);
}

.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__block.is-lit .project-sitemap__pill--plain {
  background: transparent;
  box-shadow: inset 0 0 0 2px #80fa6a;
  color: #f0efeb;
}

/* a grey pill the chain reaches empties out and keeps only its outline, so
   the lit branch reads as a line of green rather than a line of grey */
.project-sitemap__stage[data-map-theme="entyx"] .project-sitemap__block.is-lit .project-sitemap__pill--leaf {
  background: transparent;
  box-shadow: inset 0 0 0 2px #80fa6a;
  color: #f0efeb;
}

@media (max-width: 1100px) {
  .project-sitemap__canvas--sections {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .project-sitemap__rail {
    position: static;
  }

  .project-sitemap__rail-list {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .project-sitemap__rail-item {
    width: auto;
    white-space: nowrap;
  }
}

/* decorative artwork that belongs to the frame itself */
.project-sitemap__decor {
  position: absolute;
  left: calc(var(--bx) * var(--map-unit));
  top: calc(var(--by) * var(--map-unit));
  width: calc(var(--bw) * var(--map-unit));
  height: calc(var(--bh) * var(--map-unit));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  transform: rotate(var(--brot, 0deg));
}

.project-sitemap__decor--dash-v {
  border-left: calc(2.2 * var(--map-unit)) dashed rgba(255, 255, 255, 0.42);
}

.project-sitemap__decor--dash-h {
  border-top: calc(2.2 * var(--map-unit)) dashed rgba(255, 255, 255, 0.42);
}

.project-sitemap__decor--label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--map-font, "Murecho", "Inter", sans-serif);
  font-size: calc(26.608 * var(--map-unit));
  font-style: italic;
  white-space: nowrap;
}

/* ---- Solaryn frame ------------------------------------------------- */
.project-sitemap__stage[data-map-theme="solaryn"] {
  /* Nexa in the design - commercial, not shipped with the project. Jost is
     geometric and near Nexa's width, so the nowrap labels still fit. */
  --map-font: "Jost", "Inter", sans-serif;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill {
  /* the frame fixes every pill at 66.519 - let borders or line-height push it
     and the error compounds down the column, so the height is set outright */
  height: calc(var(--map-pill-h) * var(--map-unit));
  min-height: 0;
  padding: 0 calc(19.956 * var(--map-unit));
  border-radius: calc(3.326 * var(--map-unit));
  font-family: var(--map-font);
  /* the design is Nexa Bold; carried at 500 so the map reads lighter, which
     also buys back the width Jost was over and lets the sizes stay exact */
  font-weight: 500;
  font-size: calc(26.608 * var(--map-unit));
  line-height: 1;
  letter-spacing: calc(0.5322 * var(--map-unit));
  text-transform: uppercase;
  white-space: nowrap;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill--gold,
.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill--header {
  font-size: calc(29.934 * var(--map-unit));
  letter-spacing: calc(0.5987 * var(--map-unit));
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill--gold {
  background: #e9ba68;
  color: #131510;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill--white {
  background: #fff;
  color: #131510;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill--muted {
  background: #fff;
  color: #131510;
  opacity: 0.29;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill--header {
  background: #fff;
  border: calc(1.663 * var(--map-unit)) solid #e9ba68;
  color: #131510;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__pill--outline {
  background: #131510;
  border: calc(3.326 * var(--map-unit)) solid #e9ba68;
  color: #fff;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__wire {
  stroke: rgba(255, 255, 255, 0.72);
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__wire.is-lit {
  stroke: #e9ba68;
}

.project-sitemap__stage[data-map-theme="solaryn"] .project-sitemap__block.is-lit .project-sitemap__pill {
  box-shadow: 0 0 0 calc(3 * var(--map-unit)) rgba(233, 186, 104, 0.55);
}

.project-sitemap__stage.is-focused .project-sitemap__block {
  opacity: 0.3;
}

.project-sitemap__stage.is-focused .project-sitemap__block.is-lit {
  opacity: 1;
}

.project-sitemap__block.is-lit .project-sitemap__pill--head {
  background: rgba(56, 137, 210, 0.3);
  box-shadow: inset 0 0 0 3px #3889d2;
}

.project-sitemap__block.is-lit .project-sitemap__pill--item {
  background: rgba(56, 137, 210, 0.24);
}

.project-sitemap__block.is-lit .project-sitemap__pill--page {
  background: rgba(56, 137, 210, 0.66);
  box-shadow:
    inset 0 0 0 3px #3889d2,
    0 0 calc(24 * var(--map-unit)) rgba(56, 137, 210, 0.34);
}

.project-sitemap__block:focus-visible .project-sitemap__pill--head,
.project-sitemap__block:focus-visible .project-sitemap__pill--page {
  box-shadow:
    inset 0 0 0 3px #3889d2,
    0 0 0 2px rgba(240, 239, 235, 0.88);
}


/* Under 1100px the frame cannot stay a scaled canvas - the type would drop to
   a couple of pixels. The blocks re-lay as one full-width column instead, at a
   readable size. Same pills, same colours, same backdrop; the connectors are
   dropped because their routing only means anything in the frame's own grid,
   and with no wires there is no hover story either. */
@media (max-width: 1100px) {
  .project-sitemap__stage {
    --map-unit: 0.6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 26px;
    height: auto;
    padding: 20px 3px;
  }

  .project-sitemap__block {
    position: static;
    width: 100%;
  }

  .project-sitemap__items {
    margin-top: 18px;
  }

  /* the frame's wires assume the frame's grid; the stacked column draws its own */
  .project-sitemap__wires--frame {
    display: none;
  }

  .project-sitemap__wires--stacked {
    display: block;
  }

  .project-sitemap__block,
  .project-sitemap__pill {
    opacity: 1;
    transform: none;
  }

  /* static here - no hover, so nothing should ease */
  .project-sitemap__wire {
    transition: none;
  }
}

@media (max-width: 640px) {
  .project-sitemap__stage {
    --map-unit: 0.52px;
    gap: 18px;
    padding: 14px 0;
  }

  .project-sitemap__items {
    margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-sitemap__wire,
  .project-sitemap__pill,
  .project-sitemap__block {
    transition: none;
  }
}

/* ---- accordion gallery ------------------------------------------------ */
/* Ported from React Bits' Accordion Gallery. There it animates with GSAP at
   `power3.out` over 0.6s; every property it touches - flex-grow, transform,
   filter, opacity - transitions in CSS, and power3.out is easeOutCubic, so the
   motion is the same without pulling the library in. */
.accordion-gallery {
  --ag-gap: 10px;
  --ag-radius: 16px;
  --ag-media-size: 320px;
  --ag-overlay: 5, 5, 5;
  --ag-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --ag-duration: 600ms;
  display: flex;
  flex-direction: row;
  gap: var(--ag-gap);
  width: 100%;
  max-width: 100%;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}

.accordion-gallery--vertical {
  flex-direction: column;
}

.ag-panel {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--ag-radius);
  background: #100f10;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8);
  outline: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: flex-grow, transform;
  -webkit-tap-highlight-color: transparent;
  transition:
    flex-grow var(--ag-duration) var(--ag-ease),
    transform var(--ag-duration) var(--ag-ease);
}

.ag-panel:focus-visible {
  box-shadow:
    0 0 0 2px #f0efeb,
    0 10px 30px -18px rgba(0, 0, 0, 0.8);
}

.ag-panel__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

/* the media is wider than its panel and centred, so it drifts instead of
   squashing while the panel resizes */
.ag-panel__media {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ag-media-size);
  height: 100%;
  filter: grayscale(1);
  will-change: transform, filter;
  transition:
    width var(--ag-duration) var(--ag-ease),
    height var(--ag-duration) var(--ag-ease),
    transform var(--ag-duration) var(--ag-ease),
    filter var(--ag-duration) var(--ag-ease);
}

.accordion-gallery--vertical .ag-panel__media {
  width: 100%;
  height: var(--ag-media-size);
}

.ag-panel__media img,
.ag-panel__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* A collapsed panel is a crop - the media is deliberately wider than the panel
   so it can drift. The open one has to show the whole photo, so its media
   shrinks to the panel exactly and switches to contain. The panel is 16:9 and
   most of the art is too, in which case cover and contain agree and the switch
   is invisible; the few off-ratio images letterbox instead of being cut. */
.ag-panel.is-open .ag-panel__media,
.accordion-gallery--vertical .ag-panel.is-open .ag-panel__media {
  width: 100%;
  height: 100%;
}

.ag-panel.is-open .ag-panel__media img,
.ag-panel.is-open .ag-panel__media video {
  object-fit: contain;
}

.ag-panel__dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgb(var(--ag-overlay));
  opacity: 0.35;
  transition: opacity var(--ag-duration) var(--ag-ease);
}

.ag-panel__overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(var(--ag-overlay), 0.78) 100%);
}

/* the first paint must not animate itself into place */
.accordion-gallery.is-settling .ag-panel,
.accordion-gallery.is-settling .ag-panel__media,
.accordion-gallery.is-settling .ag-panel__dim {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ag-panel,
  .ag-panel__media,
  .ag-panel__dim {
    transition: none;
    will-change: auto;
  }
}

.project-one__gallery,
.project-one__other {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.project-one__other {
  margin-top: 36px;
}

.project-one__gallery-main {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #100f10;
}

.project-one__gallery-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #100f10;
}

/* only one of the two is on screen at a time */
.project-one__gallery-main:not(.is-showing-clip) .project-one__gallery-clip,
.project-one__gallery-main.is-showing-clip img {
  display: none;
}

.project-one__thumb video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

/* a small play glyph so a clip reads as a clip in the strip */
.project-one__thumb--clip::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='black'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

.project-one__thumb--clip::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.project-one__gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 220ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-one__gallery-main img.is-changing {
  opacity: 0.2;
  transform: scale(0.985);
}

.project-one__gallery-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: #f0efeb;
  opacity: 0;
  cursor: pointer;
  pointer-events: none;
  transform: translateY(-50%) scale(0.82);
  transform-origin: center;
  transition:
    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 220ms ease;
}

.project-one__gallery-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  background: rgba(16, 15, 16, 0.3);
  transform: scale(1);
  transition:
    background-color 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__gallery-arrow--prev {
  left: 24px;
}

.project-one__gallery-arrow--next {
  right: 24px;
}

.project-one__gallery-arrow span {
  position: relative;
  z-index: 1;
  display: block;
  width: 13px;
  height: 13px;
  border-top: 2.1px solid currentColor;
  border-right: 2.1px solid currentColor;
  border-radius: 2px 2px 2px 0;
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__gallery-arrow--prev span {
  transform: translateX(3px) rotate(-135deg) scale(1);
}

.project-one__gallery-arrow--next span {
  transform: translateX(-3px) rotate(45deg) scale(1);
}

.project-one__gallery-main:hover .project-one__gallery-arrow,
.project-one__gallery-main:focus-within .project-one__gallery-arrow {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.project-one__gallery-arrow:hover,
.project-one__gallery-arrow:focus-visible {
  transform: translateY(-50%) scale(1.12);
}

.project-one__gallery-arrow:hover::before,
.project-one__gallery-arrow:focus-visible::before {
  background: rgba(16, 15, 16, 0.38);
}

.project-one__gallery-arrow--prev:hover span,
.project-one__gallery-arrow--prev:focus-visible span {
  transform: translateX(3px) rotate(-135deg) scale(1.12);
}

.project-one__gallery-arrow--next:hover span,
.project-one__gallery-arrow--next:focus-visible span {
  transform: translateX(-3px) rotate(45deg) scale(1.12);
}

.project-one__gallery-arrow:active {
  transform: translateY(-50%) scale(0.92);
}

.project-one__gallery-arrow--prev:active span {
  transform: translateX(3px) rotate(-135deg) scale(0.9);
}

.project-one__gallery-arrow--next:active span {
  transform: translateX(-3px) rotate(45deg) scale(0.9);
}

.project-one__gallery-arrow.is-press-animated {
  transform: translateY(-50%) scale(1.12);
}

.project-one__gallery-arrow.is-press-animated::before {
  background: rgba(16, 15, 16, 0.38);
}

.project-one__gallery-arrow--prev.is-press-animated span {
  transform: translateX(3px) rotate(-135deg) scale(1.12);
}

.project-one__gallery-arrow--next.is-press-animated span {
  transform: translateX(-3px) rotate(45deg) scale(1.12);
}

.project-one__thumbs {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  /* scrolls at every width now; the vertical padding (cancelled by the equal
     negative margin) leaves room for the 1.08 hover scale so overflow-y
     clipping never bites into it */
  padding: 10px 8px;
  margin: -10px -8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}

.project-one__thumbs::-webkit-scrollbar {
  display: none;
}

.project-one__thumbs-progress {
  display: none;
  width: 100%;
  height: 4px;
  margin-top: 0;
  overflow: hidden;
  border-radius: 999px;
  background: #282725;
}

.project-one__thumbs-progress span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #f0efeb;
  margin-left: 0;
  transition:
    width 180ms ease,
    margin-left 180ms ease;
}

.project-one__thumbs-progress.is-visible {
  display: block;
}

.project-one__thumb {
  position: relative;
  display: block;
  width: 160px;
  flex: 0 0 160px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: center;
  transition:
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 260ms ease;
  will-change: transform;
}

.project-one__thumb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16, 15, 16, 0.3);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
  transition:
    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__thumb::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: #f0efeb;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/g%3E%3C/svg%3E") center / 20px 20px no-repeat;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
  transition:
    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-one__thumb img {
  position: relative;
  z-index: 0;
}

.project-one__thumb:hover,
.project-one__thumb:focus-visible {
  transform: scale(1.08);
  filter: saturate(1.05) brightness(1.04);
}

/* the open one always sits a touch proud of the row */
.project-one__thumb.is-active {
  cursor: default;
  transform: scale(1.05);
}

.project-one__thumb.is-active img {
  outline: 2px solid #f0efeb;
  outline-offset: 3px;
}

.project-one__thumb:not(.is-active) img {
  opacity: 0.62;
  transition: opacity 240ms ease;
}

.project-one__thumb:not(.is-active):hover img,
.project-one__thumb:not(.is-active):focus-visible img {
  opacity: 1;
}

.project-one__thumb.is-active:hover,
.project-one__thumb.is-active:focus-visible {
  transform: scale(1.11);
  filter: saturate(1.06) brightness(1.05);
}

.project-one__thumb.is-active::before,
.project-one__thumb.is-active::after {
  display: none;
}

/* the picture in flight from a thumbnail to the frame; below the fixed
   header (z-index 120) so it never flies over the navigation */
.project-one__gallery-fly {
  position: fixed;
  z-index: 100;
  margin: 0;
  object-fit: cover;
  pointer-events: none;
  will-change: left, top, width, height;
}

.project-one__thumb:hover::before,
.project-one__thumb:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.project-one__thumb:hover::after,
.project-one__thumb:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.project-one__thumb:active {
  transform: scale(0.94);
}

.project-one__thumb img,
.project-one__thumbs > img {
  width: 160px;
  flex: 0 0 160px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #100f10;
}

.project-one__other h2 {
  margin: 0;
  color: #e2e8f0;
  font-family: "Roboto Flex", "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  font-variation-settings: "opsz" 96, "wght" 700, "wdth" 100, "slnt" 0;
  line-height: 28px;
  letter-spacing: 0;
}

.project-one__other-grid {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 100%;
}

.project-one__other-grid a,
.project-one__other-grid > img {
  display: block;
  min-width: 0;
  flex: 1 1 0;
  border-radius: 0;
  overflow: hidden;
  transform-origin: center;
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 260ms ease;
  will-change: transform;
}

.project-one__other-grid:hover a,
.project-one__other-grid:focus-within a,
.project-one__other-grid:hover > img {
  transform: scale(0.992);
}

.project-one__other-grid a:hover,
.project-one__other-grid a:focus-visible,
.project-one__other-grid > img:hover {
  transform: scale(1.018);
  filter: saturate(1.05) brightness(1.03);
}

.project-one__other-grid img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 380 / 352;
  border-radius: 0;
  object-fit: cover;
}

@media (min-width: 2200px) {
  .project-one {
    --project-detail-margin: 400px;
    --project-detail-cover-width: 862px;
    --project-detail-hero-gap: 56px;
    padding-top: 112px;
  }

  .project-one__content {
    gap: 32px;
  }

  .project-one__hero {
    padding: 20px;
  }

  .project-one__hero-copy h1 {
    font-size: 44px;
    line-height: 50px;
  }

  .project-one__meta span,
  .project-one__meta a,
  .project-one__support,
  .project-one__back {
    height: 48px;
    font-size: 15px;
    line-height: 22px;
  }

  .project-one__support {
    height: auto;
  }

  .project-one__paragraphs p,
  .project-one__paragraphs li {
    font-size: 15px;
    line-height: 22px;
  }

  .project-one__thumb,
  .project-one__thumb img,
  .project-one__thumbs > img {
    width: 184px;
    flex-basis: 184px;
  }
}

@media (min-width: 1800px) and (max-width: 2199px) {
  .project-one {
    --project-detail-margin: 220px;
    --project-detail-cover-width: 779px;
    --project-detail-hero-gap: 52px;
    padding-top: 112px;
  }

  .project-one__content {
    gap: 28px;
  }
}

@media (min-width: 1360px) and (max-width: 1799px) {
  .project-one {
    --project-detail-margin: 130px;
    --project-detail-cover-width: 620px;
  }
}

@media (min-width: 1101px) and (max-width: 1359px) {
  .project-one {
    --project-detail-margin: 130px;
    /* Fluid rather than fixed, and carried all the way down to 1101. There was
       no rule between 1180 and 1100, so the cover fell back to its 620px base
       and grew as the window narrowed - crushing the copy beside it. */
    --project-detail-cover-width: clamp(430px, calc(540px - (1360px - 100vw) * 0.42), 540px);
  }
}

@media (max-width: 1199px) {
  .project-one__back:hover,
  .project-one__meta a:hover {
    background: rgba(240, 239, 235, 0.1);
  }

  .project-one__back:hover svg,
  .project-one__meta a:hover svg {
    transform: none;
  }

  body[data-project-slug="entyx"] .project-one__back:hover,
  body[data-project-slug="entyx"] .project-one__meta a:hover {
    background: rgba(16, 15, 16, 0.1);
  }

  .project-one__meta a.is-press-animated {
    background: rgba(240, 239, 235, 0.2);
  }

  body[data-project-slug="entyx"] .project-one__meta a.is-press-animated {
    background: rgba(16, 15, 16, 0.12);
  }

  .project-one__meta a.is-press-animated svg,
  .project-one__meta a.is-auto-animated svg {
    transform: rotate(45deg) scale(1.14);
  }

  .project-one__gallery-arrow,
  .project-one__gallery-main:hover .project-one__gallery-arrow {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

  .project-one__gallery-arrow:hover {
    transform: translateY(-50%) scale(1);
  }

  .project-one__gallery-arrow:hover::before {
    background: rgba(16, 15, 16, 0.3);
  }

  .project-one__gallery-arrow--prev:hover span {
    transform: translateX(3px) rotate(-135deg) scale(1);
  }

  .project-one__gallery-arrow--next:hover span {
    transform: translateX(-3px) rotate(45deg) scale(1);
  }

  .project-one__gallery-arrow.is-press-animated {
    transform: translateY(-50%) scale(1.12);
  }

  .project-one__gallery-arrow.is-press-animated::before {
    background: rgba(16, 15, 16, 0.38);
  }

  .project-one__gallery-arrow--prev.is-press-animated span {
    transform: translateX(3px) rotate(-135deg) scale(1.12);
  }

  .project-one__gallery-arrow--next.is-press-animated span {
    transform: translateX(-3px) rotate(45deg) scale(1.12);
  }
}

@media (max-width: 1100px) {
  .project-one {
    --project-detail-margin: 24px;
    --project-detail-content-width: min(
      calc(100vw - var(--project-detail-margin) * 2),
      var(--project-detail-max-content-width)
    );
    --project-detail-cover-width: 100%;
    padding: 104px 0 150px;
  }

  .project-one__hero {
    align-items: flex-start;
    flex-direction: column;
    min-height: 0;
    gap: 28px;
    padding: 16px 16px 28px;
  }

  .project-one__hero-copy {
    --project-hero-copy-width: 100%;
    width: 100%;
    max-width: 100%;
    flex-basis: auto;
  }

  .project-one__cover {
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: 0 0 auto;
    aspect-ratio: 620 / 528;
  }

  /* the block's own padding carries the whole inset now - stacking the
     wrapper's on top of it pushed the content 33px (text) / 52px (map) in */
  .project-one__paragraphs {
    width: 100%;
    padding: 0;
  }

  .project-one__text-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  .project-one__text-block:not(.is-open):not(.is-closing) {
    --project-read-gap: 14px;
    --project-read-padding-bottom: 28px;
    background: #151314;
  }

  .project-one__text-block:not(.is-open):not(.is-closing) .project-one__paragraphs {
    max-height: 66px;
    opacity: 0.48;
    transform: translateY(0);
  }

  .project-one__gallery-main {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .project-one__gallery-arrow {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
  }

  .project-one__thumbs {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  .project-one__thumbs::-webkit-scrollbar {
    display: none;
  }

  .project-one__thumbs-progress.is-visible {
    display: block;
  }

  .project-one__thumb,
  .project-one__thumb img,
  .project-one__thumbs > img {
    flex: 0 0 160px;
  }

}

@media (max-width: 900px) {
  .project-one {
    padding: 96px 0 142px;
  }
}

@media (max-width: 649px) {
  .project-one__thumbs {
    gap: 12px;
  }

  .project-one__thumb,
  .project-one__thumb img,
  .project-one__thumbs > img {
    width: calc((100vw - 32px - 30px) / 3.5);
    flex: 0 0 calc((100vw - 32px - 30px) / 3.5);
  }

  .project-one__thumb::before {
    width: 34px;
    height: 34px;
  }

  .project-one__thumb::after {
    width: 17px;
    height: 17px;
    mask-size: 17px 17px;
  }
}

@media (max-width: 760px) {
  .project-one__content {
    gap: 24px;
  }

  .project-one__hero-copy h1 {
    font-size: 30px;
    line-height: 34px;
  }

  .project-one__other h2 {
    font-size: 24px;
    line-height: 28px;
  }

  .project-one__text-block {
    border-radius: 22px;
  }

  .project-one__text-head {
    gap: 16px;
  }

  .project-one__text-title h2 {
    white-space: normal;
  }

  .project-one__other-grid {
    flex-direction: row;
    gap: 20px;
  }

  .project-one__other-grid a,
  .project-one__other-grid > img {
    width: auto;
    flex: 1 1 0;
  }

  .project-one__other-grid:hover a,
  .project-one__other-grid:focus-within a,
  .project-one__other-grid:hover > img,
  .project-one__other-grid a:hover,
  .project-one__other-grid a:focus-visible,
  .project-one__other-grid > img:hover {
    transform: none;
  }

  .project-one__other-grid img {
    height: auto;
    aspect-ratio: 380 / 352;
  }
}

@media (max-width: 620px) {
  .project-one {
    --project-detail-margin: 16px;
    --project-detail-content-width: min(
      calc(100vw - var(--project-detail-margin) * 2),
      var(--project-detail-max-content-width)
    );
    padding: 92px 0 126px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-one__support::before {
    animation: none;
  }
}

/* the user asked for 20px from the block edge to its content, 14px on phones */
@media (max-width: 640px) {
  .project-one__text-block {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* ---- the sitemap is a desktop-only thing for now -------------------------
   It is a wide diagram that has to be read across; under 1440 there is not
   enough width for it to be anything but a smudge. */
@media (max-width: 1440px) {
  .project-one__sitemap {
    display: none;
  }
}