/* ============================================================
   MIRRORLESS — ourFIT
   Layered on assets/proj.css + assets/showcase.css. Read the proj.css header
   first: inside a stage 1em is 16 design px, and every --x/--y/--w/--h in
   ourfit.html is a coordinate from the Figma frame "OurFit" (node 97:153,
   "New Mirrorless Website") with the unit swapped to em.

   2026-09-18. The page is the Figma frame, dark, with one thing Figma does not
   have: the live app, set straight under the project description. So the page
   is three blocks in the showcase column:

     stage 1  the dithered hero with the sticker logo   (Figma y 0 – 785)
     flow     title | description + tags, then the live app
     stage 2  everything from the wide phone shot down  (Figma y 1108 on)

   The middle block is in flow, not on a stage, because its height is set by
   the prose and the phone, not by Figma. It keeps the stage's em and the two
   Figma columns (x 62 and x 743, each 625 wide), so it lines up with both.
   ============================================================ */

/* ---------- the intro, in flow ---------- */
.proj--flow {
  height: auto;
  display: grid;
  grid-template-columns: 39.0625em 39.0625em;   /* 625 · 625 */
  column-gap: 3.5em;                            /* 743 - 62 - 625 */
  align-items: start;
  padding: 0 0 4.375em 3.875em;                 /* 70 to the next image · x 62 */
}
.proj--flow .proj__head,
.proj--flow .proj__meta {
  position: static;
  width: auto;
}

/* Figma: Barlow Regular 20 / 1.21, black on cream -> the house sans, paper on
   ink. Regular, not the site's 600 body weight: it is nine lines of prose. */
.proj__desc { margin: 0 0 2.25em; }             /* 36 down to the tags */
.proj__desc p {
  margin: 0;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.21;
  color: var(--paper);
  text-wrap: pretty;
}
.proj__desc p + p { margin-top: 0.8em; }

/* ---------- the live app ---------- */
.of-live {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 39.0625em 39.0625em;
  column-gap: 3.5em;
  align-items: center;
  margin-top: 6em;
}

/* The handset is sized off its own width (a container), so the bezel, the
   radii and the island stay in proportion whether the stage or the viewport
   is what limits it. It never grows past the height of the screen. */
.of-live__phone {
  container-type: inline-size;
  justify-self: center;
  width: min(24.375em, calc((100svh - 150px) * 0.4621));   /* 390 wide · 390/844 */
  margin: 0;
}

.of-device {
  position: relative;
  aspect-ratio: 390 / 844;
  padding: 2.82cqw;                             /* 11 */
  border-radius: 14.36cqw;                      /* 56 */
  background: linear-gradient(145deg,
    #4a4d53 0%, #101113 16%, #2a2c30 46%, #0c0d0e 78%, #52565c 100%);
  box-shadow:
    0 0 0 1px rgba(246, 248, 251, 0.09),
    0 2px 1px rgba(246, 248, 251, 0.14) inset,
    0 40px 90px rgba(0, 0, 0, 0.85),
    0 8px 24px rgba(0, 0, 0, 0.6);
}
/* the two side buttons */
.of-device::before,
.of-device::after {
  content: '';
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, #3a3d42, #17191c);
}
.of-device::before { left: -3px; top: 21%; height: 13%; }
.of-device::after  { right: -3px; top: 27%; height: 11%; }

.of-device-screen {
  position: relative;
  height: 100%;
  border-radius: 11.8cqw;                       /* 46 */
  overflow: hidden;
  background: #0a0a0a;
  isolation: isolate;
}
.of-device-app {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #0a0a0a;
}
/* ourfit.js: the app always lays out at a real phone's 368 x 822 and is
   scaled to whatever size the handset is drawn at */
.of-device-screen.is-scaled .of-device-app {
  inset: auto;
  left: 0; top: 0;
  width: 368px;
  height: 822px;
  transform: scale(var(--k, 1));
  transform-origin: 0 0;
}
/* sits under the iframe — only seen if the embed is refused */
.of-device-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-content: center;
  padding: 2em;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--smoke);
}
.of-device-fallback a { color: var(--accent); text-decoration: underline; }

.of-device-island {
  position: absolute;
  z-index: 2;
  top: 2.31cqw;                                 /* 9 */
  left: 50%;
  translate: -50% 0;
  width: 24.6cqw;                               /* 96 */
  height: 6.92cqw;                              /* 27 */
  border-radius: 999px;
  background: #000;
  pointer-events: none;
}
.of-device-island::after {
  content: '';
  position: absolute;
  right: 2.31cqw; top: 50%;
  translate: 0 -50%;
  width: 2.05cqw; height: 2.05cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #1d2733, #05070a 70%);
}

.of-device-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 1.25em;
  font-size: 0.8125em;
  letter-spacing: 0.06em;
  color: var(--smoke);
}
.of-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #39FF14;
  box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.6);
  animation: of-pulse 2.4s var(--ease-io) infinite;
}
@keyframes of-pulse {
  70%  { box-shadow: 0 0 0 7px rgba(57, 255, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0); }
}

/* the copy beside the handset, in the stage's own type: an underlined kicker
   like PROJECT, a title in the same sans, the description's size for the lead */
.of-live__copy { max-width: 36em; }
.of-live__kicker {
  margin: 0 0 1em;
  font-size: 1em;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--smoke);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.of-live__h {
  margin: 0;
  font-weight: 400;
  font-size: 2.5em;                             /* 40 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.of-live__lead {
  margin: 0.9em 0 0;
  font-weight: 400;
  font-size: 1.25em;
  line-height: 1.21;
  color: var(--dim);
}
.of-live__lead strong { color: var(--paper); font-weight: 600; }

.of-live__list {
  display: grid;
  gap: 0.7em;
  margin: 1.75em 0 0;
  padding: 0;
  list-style: none;
}
.of-live__list li {
  position: relative;
  font-weight: 400;
  padding-left: 1.25em;
  font-size: 1em;
  line-height: 1.5;
  color: var(--dim);
}
.of-live__list li::before {
  content: '';
  position: absolute; left: 0; top: 0.72em;
  width: 0.5em; height: 1px;
  background: var(--accent);
}
.of-live__list b { color: var(--paper); font-weight: 600; }

.of-live__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-top: 2.25em;
  padding: 0.8em 1.4em;
  border-radius: 999px;
  font-size: 0.9375em;
  line-height: 1;
  text-decoration: none;
  background: var(--accent);
  color: #0F0E0E;          /* literal: the footer scrub walks --ink to off-white */
  transition: gap var(--fast) var(--ease), filter var(--fast) var(--ease);
}
.of-live__btn:hover { gap: 0.9em; filter: brightness(1.1); }
.of-live__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* ---------- stage 2: a photo placed inside its frame the way Figma crops it ---------- */
.card--proj > .card__crop {
  position: absolute;
  left: var(--ix); top: var(--iy);
  width: var(--iw); height: var(--ih);
  max-width: none;
  object-fit: cover;
}

/* ---------- below 900px everything goes to one column (proj.css) ---------- */
@media (max-width: 900px) {
  .proj--flow {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    gap: 16px;
    padding: 8px 20px 24px;
  }
  .proj__desc { margin-bottom: 20px; }
  /* matches the other showcases' phone body (proj.css, 2026-09-26) */
  .proj__desc p {
    font-size: 15.5px;
    line-height: 1.6;
    letter-spacing: -0.003em;
    color: color-mix(in srgb, var(--paper) 84%, transparent);
    -webkit-font-smoothing: antialiased;
  }

  .of-live {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    margin-top: 40px;
  }
  .of-live__phone { width: min(78vw, 360px, calc((100svh - 150px) * 0.4621)); }
  .of-live__copy { max-width: none; }
  .of-live__h { font-size: clamp(28px, 8vw, 40px); }
  .of-live__lead { font-size: 17px; line-height: 1.45; }
  .of-live__list li { font-size: 15px; }
  .of-live__btn { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .of-dot { animation: none; }
  .of-live__btn { transition: none; }
}