/*
  Hila Weiss — portfolio
  Every measurement is in Figma pixels (a 1440 × 1024 frame) times a unit:
    --ux  horizontal positions/widths   (window width / 1440)
    --uy  vertical positions/heights    (window height / 1024)
    --u   type, line weight, blur       (the smaller of the two, so nothing distorts)
  The frame always fills the window exactly: no margins, no page scroll.
  Photos fill their frames with object-fit: cover, so they are never stretched.

  Font: Narkiss Tam (Semibold / Bold / Heavy), served from /fonts.
*/
@font-face { font-family: "Narkiss Tam Web"; font-weight: 600; font-display: swap; src: url("fonts/NarkissTam-Semibold.otf") format("opentype"); }
@font-face { font-family: "Narkiss Tam Web"; font-weight: 700; font-display: swap; src: url("fonts/NarkissTam-Bold.otf") format("opentype"); }
@font-face { font-family: "Narkiss Tam Web"; font-weight: 900; font-display: swap; src: url("fonts/NarkissTam-Heavy.otf") format("opentype"); }

:root {
  --ux: calc(100vw / 1440);
  --uy: calc(100vh / 1024);
  --u: min(var(--ux), var(--uy));
  --t: max(2px, calc(3 * var(--u)));          /* line thickness */
  --ink: #000;              /* titles, arrows, nav: 100% black (Figma update) */
  --ink-strong: #000;
  --ink-muted: rgba(0, 0, 0, 0.72);
  --outline: rgba(40, 0, 20, 0.62);
  --font: "Narkiss Tam Web", "Narkiss Tam", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #1e1e1e; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { font-family: var(--font); color: #000; -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; }

/* ---------- shared helpers ---------- */
.frame {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overflow: clip;          /* clip, not a scroll box: focus/hover can never shift the composition */
  background: #fff;
}
.abs {
  position: absolute;
  left: calc(var(--x) * var(--ux));
  top: calc(var(--y) * var(--uy));
}
.label {
  font-weight: 700;
  font-size: calc(36 * var(--u));
  letter-spacing: calc(-1.8 * var(--u));
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
}
/* links (back arrow, nav) always sit above the large titles and images */
a.abs, .abs a { z-index: 5; }
/* bigger click area for the back arrow, without moving it */
a.back { padding: calc(6 * var(--u)) calc(14 * var(--u)); margin: calc(-6 * var(--u)) calc(-14 * var(--u)); }
a.label { transition: filter .2s; }
a.label:hover, a.label:focus-visible { filter: blur(calc(1.15 * var(--u))); outline: none; }
.body-text {
  width: calc(var(--w) * var(--ux));
  font-weight: 600;
  font-size: calc(24 * var(--u));
  line-height: calc(26 * var(--u));
  letter-spacing: calc(-1.2 * var(--u));
}
.body-text.bold { font-weight: 700; }
.body-text.muted { font-weight: 700; color: var(--ink-muted); }
.body-text strong { font-weight: 700; }

/* outlined, slightly blurred display type */
.outline {
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: max(1px, calc(2.2 * var(--u))) var(--outline);
  filter: blur(calc(1.3 * var(--u)));
  letter-spacing: -0.05em;
  white-space: nowrap;
}

/* lines (Figma strokes, 3px) */
.ln { position: absolute; background: #000; }
/* Figma draws a 3px stroke on one side of the line: horizontal → above (or .below), vertical → right (or .left) */
.ln.h { left: calc(var(--x) * var(--ux)); top: calc(var(--y) * var(--uy) - var(--t)); width: calc(var(--l) * var(--ux)); height: var(--t); }
.ln.v { left: calc(var(--x) * var(--ux)); top: calc(var(--y) * var(--uy)); width: var(--t); height: calc(var(--l) * var(--uy)); }
.ln.h.below { top: calc(var(--y) * var(--uy)); }
.ln.v.left { left: calc(var(--x) * var(--ux) - var(--t)); }

/* pink paper background (work / about / contact) */
.paper {
  background-color: #ff2fa8;
  background-image: url("assets/home-bg.jpg");
  background-repeat: no-repeat;
  background-size: calc(3244.5 * var(--ux)) calc(4589.3 * var(--uy));
  background-position: calc(-859.1 * var(--ux)) calc(-138 * var(--uy));
}

/* ---------- home (frame "1") ---------- */
.home .nav { display: flex; flex-direction: column; }
.home .nav .label { color: var(--ink-strong); line-height: calc(31 * var(--u)); }
/* HILA WEISS (117:107): Figma's own vector (outline + 2px blur + grain), 200px type.
   Bottom-left, keeps its Figma distance from the bottom of the window; letters scale with the type unit. */
.home .name-box {
  position: absolute; margin: 0;
  left: calc(50.35 * var(--ux));
  top: calc(100vh - 278.99 * var(--u));
  width: calc(558.765 * var(--u)); height: calc(467.456 * var(--u));
  display: flex; align-items: center; justify-content: center;
}
.nb-rot {
  position: relative; flex: none;
  width: calc(551.587 * var(--u)); height: calc(458.8 * var(--u));
  /* exactly horizontal: parallel to the bottom of the page (the inner 0.39° turn is cancelled) */
  transform: rotate(-0.39deg);
  display: flex; align-items: center; justify-content: center;
}
.nb-text {
  position: relative; flex: none;
  width: calc(551.04 * var(--u)); height: calc(443.84 * var(--u));
  transform: rotate(0.39deg);
}
.nb-text .hw { position: absolute; left: calc(-0.17 * var(--u)); top: calc(-5.1 * var(--u)); width: calc(510.122 * var(--u)); height: calc(229.8 * var(--u)); }
/* starts filled (#080808), turns into the outline on hover — blur and grain stay in both states */
.hw-fill, .hw-outline { transition: opacity .25s; }
.hw-outline { opacity: 0; }
.name-box:hover .hw-fill { opacity: 0; }
.name-box:hover .hw-outline { opacity: 1; }

/* ---------- work ---------- */
.work-list { list-style: none; }
.work-list li { position: absolute; left: calc(var(--x) * var(--ux)); top: calc(var(--y) * var(--uy)); }
.work-list a {
  display: block;
  font-size: calc(160 * var(--u));
  line-height: calc(168 * var(--u));
  transition: color .25s, -webkit-text-stroke-color .25s;
}
/* first row (N1N2DEEPSLEEPREM): 155px type in a 130px row, as in Figma */
.work-list li.first a { font-size: calc(155 * var(--u)); line-height: calc(130 * var(--u)); }
.work-list a:hover, .work-list a:focus-visible {
  color: #080808;
  -webkit-text-stroke-color: #080808;
  outline: none;
}

/* ---------- project pages ---------- */
.collage {
  position: absolute;
  left: calc(var(--x) * var(--ux));
  top: calc(var(--y) * var(--uy));
  width: calc(var(--w) * var(--ux));
  height: calc(var(--h) * var(--uy));
}
.collage.scroll { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.collage.scroll::-webkit-scrollbar { display: none; }
.collage .inner { position: relative; width: 100%; height: calc(var(--ih) * var(--uy)); overflow: hidden; }
.collage.black { background: #000; }

.ci {
  position: absolute;
  left: calc(var(--x) * var(--ux));
  top: calc(var(--y) * var(--uy));
  width: calc(var(--w) * var(--ux));
  height: calc(var(--h) * var(--uy));
  overflow: hidden;
}
.ci img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* whole pieces that must never be trimmed (map, cut-outs, postcards): shown complete, on the page/black background */
.ci.contain img, .ci.contain .rot img { object-fit: contain; }
/* image rotated ±90° in Figma: the box is (w × h); .rot is the picture's own (h × w) frame, turned */
.ci.turn .rot {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(var(--h) * var(--uy));
  height: calc(var(--w) * var(--ux));
  transform: translate(-50%, -50%) rotate(var(--r));
  overflow: hidden;
}
/* exact Figma image crop (the picture's frame is sized/offset in % of the box), filled with cover inside it:
   identical to Figma at the design size, and the photo is never stretched on other screen shapes */
.crop img {
  position: absolute;
  left: var(--cl, 0%); top: var(--ct, 0%);
  width: var(--cw, 100%); height: var(--ch, 100%);
  max-width: none;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.ci.flip img { transform: rotate(180deg); }
.ci.video { background: #000; }
/* videos fill their frame like a photo (object-fit: cover): the player is kept at the video's own
   proportions (--ar) and made just big enough to cover the box, so no bars ever show; a little is trimmed */
.ci.video iframe {
  position: absolute; left: 50%; top: 50%; border: 0;
  width:  calc(max(var(--w) * var(--ux), var(--h) * var(--uy) * var(--ar)) * 1.01);
  height: calc(max(var(--h) * var(--uy), var(--w) * var(--ux) / var(--ar)) * 1.01);
  transform: translate(-50%, -50%);
}

.arrow {
  position: absolute;
  left: calc(var(--x) * var(--ux) - 117 * var(--uy));
  top: calc(var(--y) * var(--uy) + 117 * var(--uy));
  width: calc(236 * var(--uy));
  transform: rotate(90deg);
  pointer-events: none;
}