/* martinkalanda.com landing page. Built from Figma "MK Landing Page / mk landing page 2". */

:root {
  --black: #000;
  --white: #fff;
  --purple: #6237ff;
  --muted: rgba(255, 255, 255, 0.6);
  --rule: rgba(255, 255, 255, 0.2);
  --mono: "Roboto Mono", ui-monospace, monospace;
  --cond: "Roboto Condensed", "Arial Narrow", sans-serif;
  --gothic: "League Gothic", Impact, sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* 1 design pixel. Mobile designs are 440 wide; desktop overrides below. */
  --u: min(calc(100vw / 440), 1.6px);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--black);
  color: var(--black);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Shared panel pieces ---------- */

.area {
  position: relative;
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: var(--white);
  --bw: calc(15 * var(--u));
  transition: scale 0.5s var(--ease);
  animation: area-in 0.7s var(--ease) both;
}
.area-1 { animation-delay: 0.1s; }
.area-2 { animation-delay: 0.25s; background: var(--black); color: var(--white); }
.area-3 { animation-delay: 0.4s; }

@keyframes area-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* The black frame sits above the content so it can retract on hover. */
.frame {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border: var(--bw) solid var(--black);
  transition: border-width 0.5s var(--ease);
}
.area-3 .frame { border-top-width: 0; }

.title {
  position: absolute; left: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  font-size: calc(24 * var(--u));
  letter-spacing: calc(2.4 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.cta {
  position: absolute; z-index: 6;
  display: flex; align-items: center; gap: calc(40 * var(--u));
  padding: 0 calc(50 * var(--u));
  height: calc(130 * var(--u));
  font-family: var(--cond);
  font-weight: 500;
  font-size: calc(13 * var(--u));
  letter-spacing: calc(1.2 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white);
}
.area-3 .cta { color: var(--black); }
.cta-label {
  position: relative;
  transition: opacity 0.3s var(--ease);
}
.cta-label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-4 * var(--u));
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.35s var(--ease);
}
.arrow {
  width: calc(56 * var(--u)); height: calc(12 * var(--u));
  fill: currentColor;
  transition: transform 0.35s var(--ease);
}

.graphic { position: absolute; left: 50%; top: 50%; z-index: 1; }
.graphic img { width: 100%; height: 100%; object-fit: cover; }

/* Panel 1: Art director / workingprint.com */
.area-1 .block {
  position: absolute; z-index: 0; background: var(--purple);
}
.collage img { width: 100%; height: 100%; object-fit: contain; }
.name {
  position: absolute; z-index: 4; pointer-events: none;
  mix-blend-mode: difference;
}

/* Panel 2: Artist */
.artworks { display: flex; align-items: center; gap: calc(25.317 * var(--u)); transform: translate(-50%, -50%); }
.artworks img {
  width: calc(156 * var(--u)); height: calc(211 * var(--u));
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* Panel 3: Screenwriter laurels */
.laurels { transform: translate(-50%, -50%); }
.laurels img { width: calc(99 * var(--u)); height: calc(65.8 * var(--u)); object-fit: contain; }
.laurels .laurel-main { width: calc(234 * var(--u)); height: calc(155.7 * var(--u)); }

/* ---------- Hover (pointer devices only) ---------- */

@media (hover: hover) {
  .area:hover, .area:focus-visible { scale: 1.015; z-index: 10; }
  .area:hover .frame, .area:focus-visible .frame { --bw: calc(8 * var(--u)); }
  .area:hover .arrow { transform: translateX(calc(6 * var(--u))); }
  .cta:hover .arrow, .area:focus-visible .arrow { transform: translateX(calc(14 * var(--u))); }
  .cta:hover .cta-label::after, .area:focus-visible .cta-label::after { transform: scaleX(1); }
}
.area:focus-visible { outline: none; }

/* ---------- Mobile (designs at 440 wide) ---------- */

.nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  width: calc(440 * var(--u)); height: calc(64 * var(--u));
  margin: 0 auto;
  padding: 0 calc(24 * var(--u));
  background: var(--white); color: var(--black);
  border-bottom: 1px solid var(--black);
}
.wordmark { width: calc(103.87 * var(--u)); height: calc(9.384 * var(--u)); fill: currentColor; }
.menu-toggle { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-right: calc(-4 * var(--u)); }
.menu-toggle svg { fill: currentColor; }
.icon-open { width: calc(32 * var(--u)); height: calc(14.84 * var(--u)); }
.icon-close { width: calc(18.6 * var(--u)); height: calc(18.16 * var(--u)); display: none; }
.menu-open .nav { background: var(--black); color: var(--white); }
.menu-open .icon-open { display: none; }
.menu-open .icon-close { display: block; }

.menu {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; justify-content: space-between;
  width: calc(440 * var(--u)); margin: 0 auto;
  padding: calc(89 * var(--u)) calc(24 * var(--u)) calc(25 * var(--u));
  background: var(--black); color: var(--white);
  overflow-y: auto;
  animation: menu-in 0.35s var(--ease) both;
}
.menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; } to { opacity: 1; } }
.menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.menu li { border-bottom: 1px solid var(--rule); }
.menu a { display: flex; flex-direction: column; gap: calc(10 * var(--u)); padding: calc(50 * var(--u)) calc(50 * var(--u)); }
.menu-title {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--gothic); font-size: calc(34 * var(--u)); line-height: 0.92; text-transform: uppercase;
}
.menu-url, .menu-foot {
  font-size: calc(12 * var(--u)); letter-spacing: calc(0.6 * var(--u)); text-transform: uppercase; color: var(--muted);
}
.menu-foot { margin: 0; }
.menu a:active .arrow, .menu a:hover .arrow { transform: translateX(calc(8 * var(--u))); }

.stage { width: calc(440 * var(--u)); margin: 0 auto; }

.area-1 { height: calc(600 * var(--u)); }
.area-2, .area-3 { height: calc(540 * var(--u)); }
.area-1 .title { top: calc(72.5 * var(--u)); margin-left: calc(6.5 * var(--u)); }
.area-2 .title, .area-3 .title { top: calc(61 * var(--u)); }

.area-1 .block { left: calc(121 * var(--u)); top: calc(444 * var(--u)); width: calc(304 * var(--u)); height: calc(104 * var(--u)); }
.area-1 .cta { left: calc(125.5 * var(--u)); top: calc(452 * var(--u)); height: calc(133 * var(--u)); }
.collage { left: calc(-53.5 * var(--u)); top: calc(115 * var(--u)); width: calc(547 * var(--u)); height: calc(399.7 * var(--u)); }
.area-1 .name { display: none; }

.area-2 .cta, .area-3 .cta { left: 50%; bottom: 0; transform: translateX(-50%); }
.artworks { margin-top: calc(0 * var(--u)); }

.laurels {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: calc(12.5 * var(--u)); row-gap: calc(10 * var(--u));
  width: calc(234 * var(--u));
  margin-top: calc(-0.2 * var(--u));
}
.laurel-col { display: contents; }
.laurels .laurel-main { grid-column: 1 / -1; order: 0; }
.laurels .laurel-col img { width: 100%; height: calc(65.8 * var(--u)); }
.laurel-col-b img:nth-child(2) { order: 1; }  /* Austin */
.laurel-col-b img:nth-child(1) { order: 2; }  /* Terror in the Bay */
.laurel-col-a img:nth-child(2) { order: 3; }  /* Hollywood */
.laurel-col-a img:nth-child(1) { order: 4; }  /* LA */

/* ---------- Desktop: full screen, 1920x1080 design ---------- */

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  :root { --u: min(calc(100vw / 1920), calc(100vh / 1080)); }
  @supports (height: 100dvh) {
    :root { --u: min(calc(100vw / 1920), calc(100dvh / 1080)); }
  }
  html, body { height: 100%; overflow: hidden; }
  .nav, .menu { display: none !important; }

  .stage {
    width: 100vw; height: 100vh; height: 100dvh;
    display: grid;
    grid-template-columns: 65.625fr 34.375fr;
    grid-template-rows: 1fr 1fr;
  }
  .area { height: auto; }
  .area-1 { grid-row: 1 / 3; }
  .area-1 .frame { border-right-width: 0; }
  .area-2 { grid-column: 2; grid-row: 1; }
  .area-3 { grid-column: 2; grid-row: 2; }

  .area-1 .title { top: calc(72.5 * var(--u)); margin-left: calc(-0.5 * var(--u)); }
  .area-1 .block { left: auto; top: auto; right: 0; bottom: 0; width: calc(325 * var(--u)); height: calc(662 * var(--u)); }
  .area-1 .cta { left: auto; top: auto; right: 0; bottom: 0; height: calc(130 * var(--u)); }
  .collage {
    left: calc(50% - 1.5 * var(--u)); top: calc(50% - 28.5 * var(--u));
    width: calc(1003 * var(--u)); height: calc(733 * var(--u));
    transform: translate(-50%, -50%);
  }
  .area-1 .name { display: block; left: calc(17 * var(--u)); bottom: calc(-5 * var(--u)); width: calc(828 * var(--u)); height: calc(336 * var(--u)); }

  .laurels {
    display: flex; align-items: center; gap: calc(10 * var(--u));
    width: auto; margin-top: 0;
  }
  .laurel-col { display: flex; flex-direction: column; gap: calc(12.487 * var(--u)); }
  .laurels .laurel-col img { width: calc(99 * var(--u)); height: calc(65.8 * var(--u)); order: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .area, .menu { animation: none; }
  .area, .frame, .arrow, .cta-label::after { transition: none; }
}