/* type: collection theme (from prototypes/10-type.html). Loaded by collection.js. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap");
  :root {
    --pad: clamp(16px, 3vw, 48px);
    --top: clamp(104px, 19vh, 210px);
    --bottom: 46vh;
    --out: cubic-bezier(.16, 1, .3, 1);
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: #fff; scrollbar-width: none; -webkit-text-size-adjust: 100%; }
  html::-webkit-scrollbar { display: none; }
  body {
    background: #fff; color: #000; min-height: 100%; overflow-x: hidden;
    font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
  html.fine, html.fine body, html.fine a, html.fine #viewer { cursor: none; }
  html:not(.fine) body { cursor: pointer; }   /* lets iOS deliver taps on empty space (clears a preview) */

  /* ---------- photo behind the list ---------- */
  #stage { position: fixed; inset: 0; z-index: 0; background: #fff; overflow: hidden; pointer-events: none; }
  #stage .si { position: absolute; inset: 0; opacity: 0; }
  .layer { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
  .layer img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    will-change: transform; user-select: none;
  }

  /* ---------- the list of titles ---------- */
  #list {
    position: relative; z-index: 2; list-style: none;
    padding: var(--top) var(--pad) var(--bottom);
    color: #fff; mix-blend-mode: difference;           /* white + difference = black on white, inverted on photos */
    transition: opacity .55s var(--out);
    user-select: none; -webkit-user-select: none;
  }
  html.smooth #list { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }
  #list li { display: block; white-space: nowrap; line-height: .84; font-size: 13vw; }
  .t {
    display: inline-block; vertical-align: top; color: inherit; text-decoration: none; outline: none;
    text-transform: uppercase; letter-spacing: -.012em;
    font-variation-settings: "wdth" 62, "wght" 100;
    -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  }
  .intro #list li { overflow: hidden; }
  .boot #list, .boot #hud, .boot #hud * { transition: none !important; }
  .pre #list, .pre #hud { opacity: 0; }
  .viewing #list { opacity: 0; pointer-events: none; transition-duration: .4s; }

  /* ---------- header ---------- */
  #hud {
    position: fixed; top: 0; left: 0; z-index: 3; display: flex; align-items: center; gap: 1.5em;
    padding: 24px var(--pad); color: #fff; mix-blend-mode: difference;
    font-size: 14px; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
    font-variation-settings: "wdth" 112, "wght" 560; transition: opacity .8s var(--out);
  }
  #hud a {
    color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: font-variation-settings .6s var(--out);
  }
  html.fine #hud a:hover { font-variation-settings: "wdth" 125, "wght" 820; }
  /* a logo in place of the name: the image is a mask, so it takes the header's colour (inverted over photos like the titles) */
  #hud .logo {
    display: block; width: clamp(170px, 17vw, 280px); aspect-ratio: 1400 / 427; background: currentColor;
    -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
    transition: transform .6s var(--out);
  }
  html.fine #hud a:hover .logo { transform: rotate(-4deg) scale(1.04); }
  #hud .fr { display: none; }
  .num { display: inline-flex; }
  .num .d { display: inline-block; height: 1em; overflow: hidden; }
  .num .col { display: block; will-change: transform; }
  .num i { display: block; height: 1em; font-style: normal; text-align: center; }
  .tot { white-space: pre; opacity: 0; }

  /* ---------- focused photo ---------- */
  #viewer { position: fixed; inset: 0; z-index: 1; visibility: hidden; overflow: hidden; outline: none; touch-action: none; }
  .v-open #viewer { visibility: visible; }
  .vbg { position: absolute; inset: 0; background: #000; }
  .vls { position: absolute; inset: 0; z-index: 1; }
  .vl { position: absolute; left: 0; top: 0; overflow: hidden; visibility: hidden; transform-origin: 50% 50%; will-change: transform; }
  .vl img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    user-select: none; -webkit-user-drag: none; will-change: transform;
  }
  .vtitle {
    position: absolute; left: var(--pad); bottom: 58px; z-index: 2; pointer-events: none;
    color: #fff; mix-blend-mode: difference; white-space: nowrap; overflow: hidden;
    text-transform: uppercase; letter-spacing: -.012em; line-height: .86; padding-top: .05em;
    font-variation-settings: "wdth" 125, "wght" 900;
  }
  .vtitle span { display: inline-block; white-space: pre; }

  /* ---------- letters in flight ---------- */
  #fly { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; color: #fff; mix-blend-mode: difference; }
  #fly:empty { display: none; }
  .clone { position: absolute; left: 0; top: 0; line-height: .84; white-space: nowrap; text-transform: uppercase; letter-spacing: -.012em; }
  .clone span { position: absolute; top: 0; white-space: pre; will-change: transform, opacity; }

  /* ---------- cursor (fine pointers only) ---------- */
  #cursor {
    position: fixed; left: 0; top: 0; z-index: 6; width: 80px; height: 80px; margin: -40px 0 0 -40px;
    border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none;
    opacity: 0; transition: opacity .3s; will-change: transform; display: none;
  }
  html.fine #cursor { display: block; }
  #cursor.show { opacity: 1; }
  #cursor svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .25s, transform .4s var(--out); }
  #cursor.prev .ar, #cursor.next .ar { opacity: 1; }
  #cursor.prev .ar { transform: rotate(180deg); }
  #cursor.close .x { opacity: 1; }

  #meas {
    position: fixed; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap;
    font-size: 100px; line-height: 1; text-transform: uppercase; letter-spacing: -.012em;
  }

  @media (max-width: 699px) {
    :root { --top: 112px; --bottom: 40vh; }
    #hud { font-size: 13px; padding: 20px var(--pad); gap: 1.3em; letter-spacing: .14em; }
    .vtitle { bottom: 64px; }
  }
/* long titles that break over two lines */
.t.two { white-space: pre; }