@font-face {
  font-family: 'Neue Haas Unica Pro';
  src: url('../fonts/NeueHaasUnicaPro-Regular.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Haas Unica Pro';
  src: url('../fonts/NeueHaasUnicaPro-Italic.ttf') format('truetype');
  font-weight: normal; font-style: italic; font-display: swap;
}

* { box-sizing: border-box; }
:root { color-scheme: light; }
html { background-color: #ffffff; }
body {
  margin: 0;
  background-color: #ffffff;
  color: #000;
  font-family: 'Neue Haas Unica Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.4;
}

/* Header */
header { position: static; }
/* No label/box — just the word. js/main.js sets a solid black or white colour
   for maximum contrast with whatever image/background is behind the button. */
.info-trigger {
  position: fixed; top: 10px; right: 10px; z-index: 20; padding: 6px;
  background: transparent; border: none; font-family: inherit; font-size: inherit;
  line-height: 1.4; cursor: pointer; color: #000;
  touch-action: manipulation;
  /* iOS: no grey/black square flashing over the tap area when tapped */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  outline: none;
}
.info-trigger:focus { outline: none; }
.info-trigger:focus-visible { outline: 1px dotted currentColor; outline-offset: 2px; }

/* Info overlay */
.info-overlay {
  position: fixed; inset: 0; z-index: 10; background-color: #ccff00;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 16px; font-size: 16px; font-family: 'Times New Roman', Times, serif; line-height: 1.33; opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.info-overlay.visible { opacity: 1; pointer-events: auto; }
/* El scroll del panel no se encadena al de la pagina que hay detras */
.info-overlay { overscroll-behavior: contain; }
/* Con el panel abierto la pagina queda congelada: sin este bloqueo, al hacer
   scroll el sitio se movia por detras y asomaba por debajo del overlay. */
body.info-open { position: fixed; left: 0; width: 100%; overflow: hidden; }
.info-bio { max-width: 700px; }
.info-bio p { margin: 0; }
.info-bio p + p { margin-top: 1em; }
.info-bio a { color: inherit; }
.info-projects { display: flex; gap: 48px; }
.info-projects-col { display: flex; flex-direction: column; }
.info-projects-col span { display: block; line-height: 1.33; }
.col-names { column-count: 2; column-gap: 40px; }
.col-names span { break-inside: avoid; white-space: nowrap; }
.info-projects-col p { max-width: 17em; margin: 0 0 12px; line-height: 1.33; }
.info-projects-col .col-heading { margin-bottom: 6px; }

/* Each project fills exactly one screen (height:100vh inline; Salmon 200vh).
   Figures: left/width are % of screen width, top/height are % of screen height. */
.screen { position: relative; width: 100%; }
.screen > figure { position: absolute; margin: 0; }
/* Images fill their box exactly; shared edges are snapped to equal values
   in the generator so neighbours touch with no gap and no overlap. */
.screen > figure img,
.screen > figure video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A figure marked .contain shows its media complete (no cropping) */
.screen > figure.contain img,
.screen > figure.contain video { object-fit: contain; object-position: left top; }

/* Project descriptions — placed at the same position as in the PDF */
.screen > .caption { position: absolute; margin: 0; width: 22vw; line-height: 1.3; color: #000; z-index: 5; }

@media only screen and (max-width: 800px) {
  /* Bigger, more forgiving tap target for "?"; glyph stays visually at 16px */
  .info-trigger { top: 0; right: 0; padding: 16px; font-size: 16px; }

  /* Mobile: stack each piece full width, in document order */
  .screen { height: auto !important; display: flex; flex-direction: column; }
  .screen > figure {
    position: static !important; width: 100% !important; height: auto !important;
    left: auto; top: auto;
  }
  .screen > figure img,
  .screen > figure video { height: auto; }
  /* Captions span the full width (margin to margin), never the 22vw PC column */
  .screen > .caption {
    position: static !important; left: auto !important; top: auto !important; bottom: auto !important;
    width: auto !important; max-width: none; font-size: 13px; padding: 10px 12px; order: 99;
  }

  /* Sign-off flows after the last image instead of being absolutely placed.
     transform needs !important: the base .footer-sign rule sits later in the
     file, so its translateX(-50%) would otherwise push this off-screen. */
  .footer-sign {
    position: static !important; left: auto; bottom: auto;
    transform: rotate(-16deg) !important; transform-origin: center;
    width: 100%; text-align: center; margin: 72px auto 40px !important; order: 100;
  }

  /* Info page: full width, single column margin-to-margin, scrollable */
  .info-overlay { justify-content: flex-start; overflow-y: auto; gap: 56px; padding: 14px; }
  .info-bio { max-width: none; }
  .info-projects { display: block; }
  .col-names { column-count: 1; column-gap: 0; }
  .col-names span { white-space: normal; }
}

/* Sign-off footer at the very end (last screen) */
.footer-sign { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%) rotate(-16deg); margin: 0; font-family: 'Times New Roman', Times, serif; font-size: 16px; line-height: 1.3; text-align: center; color: rgb(255, 0, 0); z-index: 5; }