@font-face {
  font-family: "ABC Diatype";
  src: url("assets/fonts/abc-diatype-bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  font-family: "ABC Diatype", Arial, sans-serif;
  font-weight: 700;
  font-synthesis: none;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0;
  color: #181818;
  color-scheme: light;
  --page-background: #DCDCDC;
  --information-colour: #181818;
  --footer-colour: #181818;
  --edge: clamp(16px, 1.35vw, 26px);
  --fade: 360ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --panel-ratio: 690 / 1672;
  --six-x: 76.231884%;
  --six-y: 64.174641%;
  --viewport-height: 100vh;
  --viewport-width: 100vw;
  background: var(--page-background);
}
@supports (height: 100dvh) { :root { --viewport-height: 100dvh; } }
:root[data-theme="dark"] { color-scheme: dark; color: #aaa; --page-background: #0b0b0b; --information-colour: #aaa; --footer-colour: #aaa; }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; overscroll-behavior-x: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body { -webkit-font-smoothing: antialiased; background: var(--page-background); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; border: 0; background: transparent; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.landing { min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; }
.elevator-stage { display: grid; place-items: center; padding: 16px var(--edge) 0; }
.elevator {
  position: relative;
  height: clamp(240px, calc((100vh - 80px) * .787), 945px);
  height: clamp(240px, calc((100svh - 80px) * .787), 945px);
  aspect-ratio: var(--panel-ratio);
}
.elevator-image { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The photographic components and video share a 690 × 1672 coordinate system. */
.elevator-video {
  position: absolute;
  left: 25.797101%;
  top: 15.490431%;
  width: 49.130435%;
  height: 12.500000%;
  pointer-events: none;
  object-fit: fill;
  opacity: 0;
  transition: opacity 200ms ease;
}
.panel-button {
  position: absolute;
  left: var(--button-x);
  top: var(--button-y);
  width: 11.014493%;
  height: 4.545455%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.button-six { --button-x: var(--six-x); --button-y: var(--six-y); }
.button-theme { --button-x: 50.144928%; --button-y: 50.119617%; width: 12.173913%; height: 5.023923%; }
/* Invisible targets expand into free space; script keeps neighbouring controls separate. */
.panel-button::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--hit-width, max(32px, 100%)); height: var(--hit-height, max(32px, 100%)); transform: translate(-50%, -50%); border-radius: 4px; }
.button-theme::before { width: var(--hit-width, max(44px, 100%)); height: var(--hit-height, max(44px, 100%)); }
.panel-button::after {
  content: "";
  position: absolute;
  inset: 2%;
  border: 2px solid #fa405b;
  border-radius: 50%;
  box-shadow: 0 0 4px #f53a5370, inset 0 0 2px #ff96a6;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
@media (hover: hover) { .button-six:hover::after { opacity: .7; } }
.panel-button.is-lit::after, .panel-button:active::after { opacity: 1; transition: none; }
.panel-button:focus-visible { outline: 1px solid #e52b45; outline-offset: 1px; }
.panel-button:disabled { pointer-events: none; }
body.is-loading .button-six::after { opacity: .7; }
body.video-visible .elevator-video { opacity: 1; }
body.video-visible .button-six::after { opacity: 1; transition: none; }
.site-header {
  min-height: 56px;
  padding: 0 max(var(--edge), env(safe-area-inset-right)) 0 max(var(--edge), env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: center;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
.wordmark { justify-self: start; white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
.site-header nav { justify-self: start; }
#information-toggle { min-height: 44px; min-width: 64px; text-align: left; text-transform: none; letter-spacing: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.site-time { justify-self: end; display: flex; align-items: baseline; gap: clamp(16px, 1.5vw, 28px); white-space: nowrap; font-variant-numeric: tabular-nums; }
#local-time { min-width: 80px; }
.information { display: block; color: var(--information-colour); }
/* Layers exist only for the short transform/opacity transition. */
body.is-info-transition main { will-change: transform; }
body.is-info-transition .information { will-change: transform, opacity; }
.information-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  padding: 12px var(--edge) 44px;
  line-height: 1.25;
  letter-spacing: 0;
}
.studio-description { grid-column: 1; max-width: min(58ch, 90%); }
.studio-contact { grid-column: 2 / -1; }
.information p { margin: 0 0 1.25em; text-wrap: pretty; }
.information .studio-clients { margin-top: 1.25em; margin-bottom: 0; }
.keep-together { white-space: nowrap; }
.studio-contact .studio-location { margin: 0; }
.studio-contact address { font-style: normal; margin: 0 0 1.25em; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.contact-links a { text-decoration: none; padding-block: 0; }
.site-footer { display: flex; justify-content: space-between; padding: 0 var(--edge) max(24px, env(safe-area-inset-bottom)); font-size: 10.5px; letter-spacing: 0; color: var(--footer-colour); }
@media (max-width: 1024px) {
  :root {
    --edge: clamp(14px, 3.5vw, 20px);
    --mobile-side-space: max(var(--edge), env(safe-area-inset-left), env(safe-area-inset-right));
    --mobile-top-space: max(env(safe-area-inset-top), clamp(12px, calc(var(--viewport-height) * .02), 24px));
    --mobile-font-size: 13px;
    /* The 44px touch row already supplies half of the visible bottom margin. */
    --mobile-menu-inset: calc((44px - var(--mobile-font-size) * 1.25) / 2);
    --mobile-bottom-space: calc(env(safe-area-inset-bottom) + max(0px, var(--edge) - var(--mobile-menu-inset)));
    /* Keep the approved artwork size independent of the menu's outer spacing. */
    --mobile-panel-bottom-reserve: calc(env(safe-area-inset-bottom) + clamp(18px, calc(var(--viewport-height) * .03), 28px));
    --mobile-menu-gap: clamp(8px, calc(var(--viewport-height) * .022), 20px);
    --mobile-panel-height: min(calc((var(--viewport-height) - var(--mobile-top-space) - var(--mobile-panel-bottom-reserve) - var(--mobile-menu-gap) - 44px) * .787), calc((var(--viewport-width) - var(--mobile-side-space) * 2) * 2.4231884058), 870px);
  }
  html { scrollbar-gutter: auto; }
  html, body { min-height: 0; }
  .landing {
    height: var(--viewport-height);
    min-height: 0;
    padding-block: var(--mobile-top-space) var(--mobile-bottom-space);
    grid-template-rows: minmax(0, 1fr) 44px;
    row-gap: var(--mobile-menu-gap);
  }
  .elevator-stage { min-height: 0; padding: 0 var(--mobile-side-space); }
  .elevator {
    height: var(--mobile-panel-height);
    width: calc(var(--mobile-panel-height) * .41267942584);
  }
  .site-header { min-height: 44px; padding: 0 var(--mobile-side-space); grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr); font-size: var(--mobile-font-size); scroll-margin-top: var(--mobile-top-space); }
  .site-header nav { justify-self: center; }
  #information-toggle { min-width: 44px; text-align: center; }
  .site-time { gap: 0; }
  .local-date, .clock-location { display: none; }
  #local-time { min-width: 0; }
  .information { margin-top: calc(-1 * var(--mobile-bottom-space) + 8px); padding-bottom: var(--mobile-bottom-space); }
  .information-grid { grid-template-columns: 1fr; gap: 24px; padding: 0 var(--mobile-side-space) 28px; font-size: var(--mobile-font-size); line-height: 1.25; }
  .studio-description, .studio-contact { grid-column: 1; max-width: 58ch; }
  .information p { margin-bottom: 1.25em; }
  .information .studio-clients { margin-top: 1.25em; margin-bottom: 0; }
  .studio-contact address { margin-bottom: 1.25em; }
  .contact-links { gap: 0; }
  .contact-links a { padding-block: 0; }
  .site-footer { gap: 16px; padding: 0 var(--mobile-side-space); }
}
@media (prefers-reduced-motion: reduce) {
  :root { --fade: 0ms; }
  .information, .elevator-video, .panel-button::after { transition: none; }
}

html:has(.presentation-dialog[open]) { scrollbar-gutter: auto; overflow: hidden; }
body.is-presentation { overflow: hidden; }
.presentation-dialog {
  --page-background: #000000;
  color-scheme: dark;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: var(--viewport-height);
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: #aaa;
  background: var(--page-background);
  overflow: hidden;
}
.presentation-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
/* A full-size, inaccessible offscreen frame can warm up without changing the landing. */
.presentation-dialog.is-preloading:not([open]) {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-200%);
}
.presentation-dialog::backdrop { background: #000000; }
.presentation-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: env(safe-area-inset-top) max(var(--edge), env(safe-area-inset-right)) 0 max(var(--edge), env(safe-area-inset-left));
}
#presentation-close {
  position: absolute;
  z-index: 1;
  bottom: env(safe-area-inset-bottom, 0px);
  right: max(var(--edge), env(safe-area-inset-right, 0px));
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 44px;
  min-height: 44px;
  padding-bottom: 10px;
  font-size: 8pt;
  line-height: 1.25;
}
#presentation-close:focus { outline: none; }
#presentation-close:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
.presentation-gate { display: grid; place-items: center; padding: 24px var(--edge) max(24px, env(safe-area-inset-bottom)); overflow: auto; }
.presentation-gate form { width: min(100%, 300px); }
.password-row { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid currentColor; margin-top: 16px; padding-bottom: 8px; }
.password-row input { min-width: 0; width: 100%; height: 32px; min-height: 32px; padding: 4px 6px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; }
.password-row input:focus-visible { outline: 1px solid currentColor; outline-offset: 0; }
.password-row button { min-height: 44px; flex-shrink: 0; }
#password-error { min-height: 2.5em; margin: 12px 0 0; }
.presentation-viewer { position: absolute; inset: 0; opacity: 1; transition: opacity 180ms ease; }
.presentation-dialog:not(.is-viewing) .presentation-viewer { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .presentation-viewer { transition: none; } }
.presentation-dialog.is-viewing .presentation-header {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0;
  pointer-events: none;
}
.presentation-dialog.is-viewing #presentation-title { display: none; }
/* Scale the label with the cover's 16px metadata. */
.presentation-dialog.is-viewing #presentation-close {
  --viewer-gutter: clamp(16px, 3.5vw, 48px);
  --slide-width: min(
    calc(var(--viewport-width) - 2 * var(--viewer-gutter)),
    calc((var(--viewport-height) - 2 * var(--viewer-gutter)) * 16 / 9)
  );
  pointer-events: auto;
  align-items: center;
  padding-bottom: 6px;
  color: #939393;
  font-size: max(11px, calc(var(--slide-width) / 120));
}
.presentation-dialog.is-viewing #presentation-close:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.presentation-viewer iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--page-background); }



/* Presentation password prompt is centred at every viewport size. */
.presentation-gate form > label { display: block; text-align: left; }
/* Mobile: retain a simple rectangular input and remove the row underline. */
@media (max-width: 767px) {
  .presentation-gate .password-row { border-bottom: none; }
  .presentation-gate .password-row input { border: 1px solid currentColor; border-radius: 0; }
}

/* Keep the password heading flush with the left edge of its input. */
.presentation-dialog .presentation-gate form label[for="presentation-password"] {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}