/* kalllandarov.com, plain HTML port of the Figma Sites version.
   Source of truth: the Figma frames; every page is a 1280 px wide canvas
   with absolute positions taken 1:1 from the frame. */

/* the same Helvetica Neue file Figma Sites served, so text renders alike on every OS */
@font-face { font-family: "HN"; src: url(assets/helvetica-neue-regular.woff) format("woff"); font-weight: 400; font-style: normal; font-display: block; }

* { box-sizing: border-box; }
html, body { margin: 0; background: #fff; }
body {
  font: 16px/24px "HN", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #000;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* canvas */
.page { position: relative; width: 1280px; margin: 0 auto; }
.abs { position: absolute; }
.t { position: absolute; white-space: normal; }
.t.nowrap { white-space: nowrap; }
.dim { opacity: .3; }
.u { text-decoration-line: underline; text-decoration-skip-ink: none; text-underline-position: from-font; text-decoration-thickness: from-font; }
.right { text-align: right; }

/* tiles: frames that clip their content, like Figma */
.tile { position: absolute; overflow: hidden; }
.tile > * { position: absolute; }
.tile img, .tile video { display: block; }
.g04 { background: rgba(0, 0, 0, .04); }
.g05 { background: rgba(0, 0, 0, .05); }
.cover { object-fit: cover; }
.contain { object-fit: contain; }

/* contact pill, fixed at the bottom of the viewport */
.contact {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  display: flex; gap: 16px; padding: 12px 20px;
  background: #000; border-radius: 100px; z-index: 10;
}
.contact a { color: #fff; text-decoration: underline 8%; text-decoration-skip-ink: none; text-underline-offset: 10%; white-space: nowrap; }

/* the whole case page background is a link back to the works list */
.back { position: fixed; inset: 0; } /* whole window, side margins included, like live */

/* below 1280 px the site shows one line, as on Figma Sites */
.mobile { display: none; }
@media (max-width: 1279px) {
  .page, .contact, .intro { display: none !important; }
  .mobile {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; text-align: center; padding: 0 16px;
  }
}

/* custom cursor (cursor.js): the system cursor is hidden like on Figma Sites,
   real links keep the pointer */
.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; visibility: hidden; will-change: transform; background: no-repeat center / contain; }
.cursor.on { visibility: visible; }
.cursor[data-kind="dot"] { width: 20px; height: 20px; background-image: url(assets/cursor-dot.png); }
.cursor[data-kind="read"] { width: 137px; height: 48px; background-image: url(assets/cursor-read-case.png); }
.cursor[data-kind="back"] { width: 75px; height: 48px; background-image: url(assets/cursor-back.png); }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor .page a:not(.tile):not(.back), .has-cursor .contact a { cursor: pointer !important; }
.page a.tile:hover { opacity: .4; }