/* Approved open typography: shared by the preview and WordPress homepage. */
body.open-field {
  --field-gutter: clamp(28px, 5.4vw, 104px);
  color: #fff;
}
.open-field .header,
.open-field .header.scrolled {
  height: 100px;
  padding-inline: var(--field-gutter);
  background: linear-gradient(180deg, #02050860, transparent);
}
.open-field .header .brand { width: 32px; }
.open-field .header-actions { gap: 30px; font-size: 11px; letter-spacing: .08em; }
.open-field .header #menu-open { background: none; padding: 0; }
.open-field .header .menu-icon { width: 20px; height: 6px; margin-left: 12px; }
.open-field .installation { isolation: isolate; }
.open-field .installation::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #0204061a, transparent 38%, #02040622 68%, #02040677);
}
.open-field .installation-wordmark {
  width: min(60vw, 1060px); top: 50%; opacity: .95;
  transition: opacity .65s;
}
.open-field .installation-caption {
  inset: auto; top: 35%; left: 50%; transform: translateX(-50%);
  writing-mode: horizontal-tb; transition: opacity .4s;
}
.open-field .installation-caption p {
  font-size: 17px; line-height: 1.7; letter-spacing: .28em;
  white-space: nowrap; text-shadow: 0 1px 22px #0009;
}
.open-field .installation-caption button { min-height: 44px; padding-inline: 14px; }
.open-field .field-side { display: none; }

/* Four entrances above the wordmark, four below. The letters are the objects. */
.open-field .spatial-nav { inset: 0; display: block; border: 0; }
.open-field .spatial-nav :is(button,a):nth-child(n) {
  display: flex; align-items: baseline; justify-content: flex-start;
  position: absolute; gap: 17px; min-height: 56px; width: max-content;
  padding: 12px 6px; margin: 0; border: 0; border-radius: 0;
  background: transparent; backdrop-filter: none; box-shadow: none;
  color: #fff; text-align: left; text-shadow: 0 2px 25px #000b;
  transition: opacity .4s, transform .55s cubic-bezier(.2,.7,.2,1);
}
.open-field .spatial-nav :is(button,a)>span {
  align-self: flex-start; padding-top: 2px;
  font: 400 11px/1.6 var(--sans); letter-spacing: .06em; opacity: .68;
}
.open-field .spatial-nav :is(button,a)>strong {
  position: relative; font: 400 clamp(21px,2vw,32px)/1.5 var(--sans);
  letter-spacing: .08em; white-space: nowrap;
}
.open-field .spatial-nav :is(a,[data-room=works],[data-room=newsletter])>strong {
  font-family: var(--sans); font-weight: 400; letter-spacing: .08em;
}
.open-field .spatial-nav :is(button,a)::after {
  content: '↗'; position: static; display: block; width: auto; height: auto;
  margin-left: 5px; background: none; font: 400 16px/1 var(--sans);
  opacity: .58; transform: none; transition: transform .4s, opacity .4s;
}
.open-field .spatial-nav strong::after {
  content: ''; position: absolute; left: 0; right: .1em; bottom: -8px;
  height: 1px; background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.open-field .spatial-nav :is(button,a):nth-child(1) { left: 8%; top: 21%; right: auto; }
.open-field .spatial-nav :is(button,a):nth-child(2) { left: 30%; top: 18%; right: auto; }
.open-field .spatial-nav :is(button,a):nth-child(3) { left: 52%; top: 23%; right: auto; }
.open-field .spatial-nav :is(button,a):nth-child(4) { left: 76%; top: 20%; right: auto; }
.open-field .spatial-nav :is(button,a):nth-child(5) { left: 8%; top: 73%; right: auto; }
.open-field .spatial-nav :is(button,a):nth-child(6) { left: 30%; top: 77%; right: auto; }
.open-field .spatial-nav :is(button,a):nth-child(7) { left: 52%; top: 72%; right: auto; }
.open-field .spatial-nav :is(button,a):nth-child(8) { left: 76%; top: 78%; right: auto; }
.open-field .spatial-nav :is(button,a):hover,
.open-field .spatial-nav :is(button,a):focus-visible {
  color: #fff; background: transparent; transform: translateY(-3px);
}
.open-field .spatial-nav :is(button,a):focus-visible { outline: 1px dashed #ffffffe0; outline-offset: 8px; }
.open-field .spatial-nav :is(button,a):is(:hover,:focus-visible)::after { transform: translate(3px,-3px); opacity: 1; }
.open-field .spatial-nav :is(button,a):is(:hover,:focus-visible)>strong::after { transform: scaleX(1); }
.open-field[data-field-hover] .installation-wordmark { opacity: .45; }
.open-field.people-previewing .installation-wordmark { opacity: .06; }
.open-field.people-previewing .installation-caption { opacity: 0; }
.open-field .people-preview { width: min(76vw,1140px); top: 50%; }
.open-field .people-preview figure { background: none; }
.open-field .people-preview figcaption { color: #fff; text-shadow: 0 2px 15px #000; }
.open-field .experience-bottom {
  inset: auto var(--field-gutter) 24px; display: flex; flex-direction: row;
  justify-content: flex-start; align-items: center;
}
.open-field .phase-picker {
  position: static; transform: none; gap: 15px; border: 0; padding: 0;
  background: none; backdrop-filter: none;
}
.open-field .phase-picker button { min-height: 44px; font-size: 12px; color: #b7bcc0; }
.open-field .phase-picker button[aria-pressed=true] { color: #fff; }
.open-field .phase-picker>span { color: #d8dce052; }
#design-compare {
  position: fixed; z-index: 10; right: clamp(24px,5.4vw,104px); bottom: 24px;
  display: flex; align-items: center; gap: 16px; min-height: 44px;
  color: #c1c7ca; font: 11px/1.5 var(--sans); letter-spacing: .045em;
  background: none; border: 0; text-shadow: 0 1px 15px #000;
}
#design-compare span { font-size: 18px; }
#design-compare:hover { color: #fff; }
.locked #design-compare { visibility: hidden; }

@media (min-width:761px) and (max-width:1100px) {
  .open-field .people-preview { width: 82vw; grid-template-columns: repeat(7,minmax(0,1fr)); }
  .open-field .people-preview figcaption { font-size: 10px; }
  .open-field .spatial-nav :is(button,a):nth-child(n) { gap: 8px; }
  .open-field .spatial-nav :is(button,a)>span { font-size: 10px; }
  .open-field .spatial-nav [data-room=newsletter]>strong { font-size: 15px; letter-spacing: .02em; }
  .open-field .spatial-nav :is(button,a)::after { font-size: 12px; margin-left: 0; }
  .open-field .spatial-nav :is(button,a)>strong { font-size: 18px; letter-spacing: .04em; }
}

/* On a phone: a quiet rain opening, then a two-column typographic index. */
@media (max-width:760px) {
  .open-field { --field-gutter: 26px; }
  .open-field .header,.open-field .header.scrolled { height: 78px; padding-inline: var(--field-gutter); }
  .open-field .header .brand { width: 27px; }
  .open-field .header-actions { gap: 20px; font-size: 11px; }
  .open-field .header #motion { position: static; padding: 0; font-size: 10px; background: none; border: 0; }
  .open-field .header #sound-text { display: none; }
  .open-field .installation-wordmark { top: 28%; width: min(84vw,550px); }
  .open-field .installation-caption { top: calc(28% - 100px); left: 50%; }
  .open-field .installation-caption p { font-size: 15px; letter-spacing: .22em; }
  .open-field .spatial-nav {
    position: absolute; inset: auto var(--field-gutter) 94px;
    display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 20px;
  }
  .open-field .spatial-nav :is(button,a):nth-child(n) {
    position: relative; inset: auto; width: 100%; min-width: 0;
    min-height: 48px; padding: 7px 0; gap: 10px; align-items: center;
  }
  .open-field .spatial-nav :is(button,a)>span { font-size: 10px; align-self: center; padding: 0; }
  .open-field .spatial-nav :is(button,a)>strong { font-size: clamp(17px,4.65vw,23px); letter-spacing: .055em; }
  .open-field .spatial-nav :is(button,a)::after { font-size: 12px; margin-left: auto; opacity: .55; }
  .open-field .spatial-nav [data-room=newsletter]>strong { font-size: clamp(14px,3.75vw,20px); letter-spacing: .025em; }
  .open-field .spatial-nav :is(button,a):hover { transform: none; }
  .open-field .experience-bottom { inset: auto var(--field-gutter) max(22px,env(safe-area-inset-bottom)); }
  .open-field .phase-picker { gap: 13px; }
  .open-field .phase-picker button { min-height: 44px; font-size: 11px; }
  #design-compare { right: 26px; bottom: max(22px,env(safe-area-inset-bottom)); font-size: 10px; gap: 11px; }
  .open-field .people-preview { top: 28%; width: 78vw; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .open-field .people-preview img { max-height: none; object-fit: cover; }
  .open-field .people-preview figcaption { font-size: 9px; padding: 3px 0; }
}
@media (max-width:380px) {
  .open-field { --field-gutter: 20px; }
  .open-field .header-actions { gap: 14px; }
  .open-field .spatial-nav { column-gap: 17px; }
  .open-field .spatial-nav :is(button,a):nth-child(n) { gap: 7px; }
  .open-field .spatial-nav :is(button,a)>strong { font-size: 16px; letter-spacing: .02em; }
  .open-field .spatial-nav :is(button,a)::after { font-size: 11px; }
  #design-compare { right: 20px; }
}
@media (max-width:760px) and (max-height:700px) {
  .open-field .installation-wordmark { top: 27%; width: 76vw; max-width: 400px; }
  .open-field .installation-caption { top: calc(27% - 80px); }
  .open-field .installation-caption p { font-size: 13px; }
  .open-field .spatial-nav { bottom: 78px; row-gap: 7px; }
  .open-field .experience-bottom { bottom: max(12px,env(safe-area-inset-bottom)); }
  #design-compare { bottom: max(12px,env(safe-area-inset-bottom)); }
}
@media (orientation:landscape) and (max-height:540px) {
  .open-field .header,.open-field .header.scrolled { height: 62px; }
  .open-field .installation-wordmark { top: 36%; width: min(39vw,calc((100svh - 210px)*3.17)); }
  .open-field .installation-caption { top: 21%; left: 7%; transform: none; }
  .open-field .installation-caption p { font-size: 14px; }
  .open-field .spatial-nav {
    position: absolute; inset: auto 5% 71px; display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px 22px;
  }
  .open-field .spatial-nav :is(button,a):nth-child(n) {
    position: relative; inset: auto; grid-column: auto; width: 100%;
    min-height: 44px; padding: 4px 0; gap: 8px; align-items: center;
  }
  .open-field .spatial-nav :is(button,a)>strong { font-size: 16px; letter-spacing: .03em; }
  .open-field .spatial-nav :is(button,a)>span { font-size: 9px; align-self: center; padding: 0; }
  .open-field .spatial-nav :is(button,a)::after { font-size: 11px; margin-left: auto; }
  .open-field .experience-bottom { bottom: 12px; }
  #design-compare { bottom: 12px; }
  .open-field .people-preview { top: 33%; width: 53vw; grid-template-columns: repeat(7,minmax(0,1fr)); }
  .open-field .people-preview img { max-height: none; object-fit: cover; }
  .open-field .people-preview figcaption { font-size: 8px; }
}
@media (prefers-reduced-motion:reduce) {
  .open-field .spatial-nav :is(button,a):nth-child(n),
  .open-field .spatial-nav strong::after,
  .open-field .spatial-nav :is(button,a)::after { transition: none; transform: none; }
}