/* Near North Life Inc. — built from the Figma frames "Desktop - 1" (1440 wide)
   and "iPhone 16 & 17 Pro - 1" (402 wide).

   --u is one artboard pixel. Every measurement below is the Figma value times
   --u, so the page scales as a whole. The phone block redefines --u from the
   402 frame and restates only what differs. */

@font-face {
  font-family: 'Nunito Sans';
  src: url('/assets/nunito-sans-latin.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --u: clamp(.7px, calc(100vw / 1440), 1.25px);
  --rule: #d9d9d9;
  --ink: #000;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --fs-body: calc(20 * var(--u));
  --lh-body: calc(27 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  /* Figma rounds Nunito Sans's natural line height to whole pixels. Optical sizing
     is what makes the 9-11px phone text as wide as the frame draws it. */
  font: 600 var(--fs-body) / var(--lh-body) 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }
h1, h2, p, address { margin: 0; font: inherit; }
a { color: inherit; text-decoration: none; }

.page {
  width: calc(936 * var(--u));
  margin-inline: auto;
  padding: calc(62 * var(--u)) 0 calc(60 * var(--u));
}

/* ---- Header --------------------------------------------------------------- */

.brand {
  position: relative;
  left: calc(3.5 * var(--u));
  width: calc(557.065 * var(--u));
  margin-inline: auto;
}
.brand img { width: 100%; height: auto; }

.intro {
  width: calc(970 * var(--u));
  margin-top: calc(65 * var(--u));
}

/* ---- Portfolio ------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(2, calc(360 * var(--u)));
  justify-content: center;
  column-gap: calc(24 * var(--u));
  row-gap: calc(48 * var(--u));
  margin-top: calc(84 * var(--u));
}

.card__link { display: block; }

.card__label {
  margin-bottom: calc(14 * var(--u));
  font-weight: 800;
}

.card__img {
  background: var(--rule);
  transition: translate .45s var(--ease), box-shadow .45s var(--ease);
}
.card__img img { width: 100%; height: auto; }

/* Hover offsets use the independent translate property, never transform, so they
   cannot collide with the reveal animation's transform. */
@media (hover: hover) {
  .card__link:hover .card__img {
    translate: 0 calc(-6 * var(--u));
    box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, .16);
  }
}

.card__link:focus-visible,
.foot__address a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

/* ---- Footer --------------------------------------------------------------- */

.rule {
  height: 1px;
  margin-top: calc(102 * var(--u));
  background: var(--rule);
}

.foot {
  display: grid;
  grid-template-columns: calc(480 * var(--u)) calc(115 * var(--u)) 1fr;
  align-items: start;
  margin-top: calc(62 * var(--u));
}

.foot__address { margin-top: calc(1 * var(--u)); font-style: normal; }

@media (hover: hover) {
  .foot__address a:hover { text-decoration: underline; }
}

/* The mark's source image has margin around it; the frame crops it as Figma does. */
.foot__mark {
  position: relative;
  width: calc(115 * var(--u));
  height: calc(110 * var(--u));
  overflow: hidden;
}
.foot__mark img {
  position: absolute;
  top: -2.5%;
  left: -24.6%;
  width: 150%;
  height: 105%;
  max-width: none;
}

.foot__partner {
  justify-self: end;
  width: calc(263 * var(--u));
  height: auto;
  margin-top: calc(8 * var(--u));
}

.copy {
  margin-top: calc(62 * var(--u));
  text-align: center;
}

/* ---- Phone: the 402 frame -------------------------------------------------- */

@media (max-width: 720px) {
  :root {
    --u: min(calc(100vw / 402), 1.25px);
    --fs-body: calc(11 * var(--u));
    --lh-body: calc(15 * var(--u));
  }

  .page {
    width: calc(338 * var(--u));
    padding: calc(34 * var(--u)) 0 calc(33 * var(--u));
  }

  .brand {
    left: calc(.5 * var(--u));
    width: calc(165 * var(--u));
  }

  .intro {
    width: calc(280 * var(--u));
    margin: calc(34.86 * var(--u)) auto 0;
    text-align: center;
  }

  .cards {
    grid-template-columns: calc(280 * var(--u));
    row-gap: calc(25 * var(--u));
    margin-top: calc(40 * var(--u));
  }

  .card__label {
    margin-bottom: calc(10 * var(--u));
    font-size: calc(10 * var(--u));
    line-height: calc(14 * var(--u));
  }

  .rule { margin-top: calc(63 * var(--u)); }

  .foot {
    grid-template-columns: auto auto;
    justify-content: space-between;
    width: calc(280 * var(--u));
    margin: calc(20 * var(--u)) auto 0;
  }

  .foot__address {
    grid-column: 1 / -1;
    margin: 0 0 calc(31 * var(--u));
  }

  .foot__mark {
    width: calc(73 * var(--u));
    height: calc(71 * var(--u));
  }
  .foot__mark img {
    top: -1.51%;
    left: -26.03%;
    width: 151.42%;
    height: 103.01%;
  }

  .foot__partner { width: calc(158 * var(--u)); }

  .copy {
    position: relative;
    left: calc(.5 * var(--u));
    margin-top: calc(44 * var(--u));
    font-size: calc(9 * var(--u));
    line-height: calc(12 * var(--u));
  }
}

/* ---- Scroll reveals -------------------------------------------------------- */
/* app.js only marks elements that start below the fold. */

.reveal-pending {
  opacity: 0;
  transform: translateY(calc(20 * var(--u)));
}
.reveal-pending.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--ease) var(--rd, 0ms),
    transform .8s var(--ease) var(--rd, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .card__img { transition: none; }
  .card__link:hover .card__img { translate: none; }
}

@media print {
  .reveal-pending { opacity: 1; transform: none; }
}

/* ---- 404 ------------------------------------------------------------------- */

.missing {
  margin-top: calc(65 * var(--u));
  text-align: center;
}
.missing a { text-decoration: underline; }