/* ---------- Fonts ---------- */
@font-face {
  font-family: "Arial Rounded MT Bold";
  src: url("fonts/Arial_Rounded_Bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MX Sans";
  src: url("fonts/MXSans-VF.ttf") format("truetype");
  font-weight: 100 900; /* variable font: Regular/Medium/Bold live on this axis */
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: #ffffff;
  color: #000;
  font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
  padding-bottom: 72px; /* room for the fixed footer nav */
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

/* ---------- Layout ---------- */
#entries {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0px;
  max-width: 1648px;
  margin: 0 auto;
  padding: 40px 16px 0;
}

.entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* Two consistent widths: every landscape item shares one width, every
   portrait item shares another — portrait is exactly 2/3 of landscape. */
.entry--landscape { max-width: 1150px; }
.entry--portrait { max-width: 767px; }

.media {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.media__img {
  width: 100%;
  object-fit: cover;
}

.media__img--blur { filter: blur(12px); transform: scale(1.1); }
.media__video--blur { filter: blur(12px); transform: scale(1.1); }
.media__img--rotate { transform: rotate(5deg); }

.media__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.media__video {
  width: 100%;
  object-fit: cover;
  display: block;
}

/* Landscape-shot source footage placed in a portrait slot gets center-cropped
   to a portrait frame, rather than displaying at its native wide aspect. */
.entry--portrait .media__video {
  aspect-ratio: 4 / 5;
  height: auto;
}

/* ---------- Captions ---------- */
.caption {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: 10px;
  letter-spacing: -0.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
}

.caption-left, .caption-right { display: flex; gap: 12px; align-items: center; }
.caption-right { flex-shrink: 0; }
.label { color: #b0b0b0; }
.label-solo { color: #b0b0b0; }

/* ---------- Footer nav ---------- */
#nav {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  z-index: 10;
}

.nav-name {
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: -1px;
  color: #f40000;
  padding: 10px;
}

.nav-links { display: flex; }

.nav-link {
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: -1px;
  padding: 10px;
}

.nav-link--contact { color: #00bff4; }
.nav-link--instagram { color: #34bd43; }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  #entries { gap: 0px; padding-top: 24px; }
  .caption { font-size: 9px; }
  #nav { left: 8px; right: 8px; bottom: 8px; }

  /* Landscape goes full-width; portrait stays visibly narrower at 2/3. */
  .entry--landscape { width: 100%; }
  .entry--portrait { width: 66%; max-width: none; }
}