/* ============================================================
   MIRRORLESS — project stage
   A faithful port of the project-page layout from Keisar's portfolio
   (~/Desktop/Kesar Portfolio/css/style.css), turned dark.

   WHY THIS EXISTS, 2026-09-15
   An earlier pass rebuilt these two projects on the fluid Mirrorless case
   grid and wrote fresh prose to fill it. Aurobind's note: recreate the
   original layout exactly, dark, and do not add your own text. So the stage
   is back — the same absolute placements, the same turning rings, the same
   rising stickers, off the same numbers.

   HOW THE UNIT WORKS
   The source is a 1440px Figma canvas driven by `html{font-size:calc(100vw/90)}`
   — 1rem == 16 design px at 1440, scaling with the viewport. We cannot touch
   the root font-size here: site.css and pillnav.css are sized off it. So the
   stage carries its own unit instead — `.proj-canvas` is a query container and
   `.proj` sets `font-size:1.1111cqw`, which makes 1em == 16 design px inside
   the stage and nowhere else. Every value below is the original's rem value
   with the unit swapped to em. cqw rather than vw because it excludes the
   scrollbar, which is what the original's JS was correcting for by hand.

   WHAT CHANGED IN THE PORT
   - Dark. The source is cream (#FFF9EA) on near-black ink; this is the
     Mirrorless ink ground with paper type. Positions, sizes, radii, timings
     and casing are untouched.
   - Type is the Mirrorless sans, not the source's Barlow. The layout is what
     was asked for; pulling in a second typeface for two pages would read as a
     different site. One line to revert if that call is wrong.
   - Below 900px the source reflows to a single stacked column. That is kept
     as-is, down to the same breakpoint.
   ============================================================ */

.proj-main { padding-top: clamp(24px, 4vh, 48px); }

.proj-canvas {
  container-type: inline-size;
  width: 100%;
}

/* ---------- side padding (2026-09-26, Aurobind) ----------
   At 1440 the Figma frames put the cards 62px from the screen edge, and on a
   wider screen they grew with it, so the pictures ran nearly edge to edge.
   The canvas now has padding either side and never gets wider than 1360px.
   Everything on the stage is sized off the canvas (1em = its width / 90), so
   the whole layout shrinks into the column together: at 1440 the cards start
   ~154px in, at 1920 ~340px in. The rows that run on their own (Nati's launch
   run and menu ring, the Cop&Drop strip) still cross the whole screen; they
   step out of the column with .proj-bleed. Phones stack at the site's 20px
   gutter (2026-09-26 mobile sweep; it was 16px, 4px tighter than every
   other page, so the text and cards sat nearer the glass than the footer). */
@media (min-width: 901px) {
  .proj-main { --pad: max(7vw, (100vw - 1360px) / 2); }
  .proj-canvas { padding-inline: var(--pad); box-sizing: border-box; }
  .proj-bleed { margin-inline: calc(var(--pad) * -1); }
}

.proj {
  position: relative;
  width: 100%;
  height: var(--stage);
  /* 100 / 90 — 1em is 16 design px for everything inside the stage */
  font-size: 1.1111cqw;
  font-family: var(--sans);
}

/* ---------- the head block ---------- */
.proj__head {
  position: absolute;
  left: 3.875em; top: 49.0625em;          /* 62 · 785 */
  width: 39.0625em;                        /* 625 */
  margin: 0;
}
.proj__kicker {
  margin: 0 0 1.25em;                      /* 20 */
  font-size: 1.5em;
  line-height: 1;
  color: var(--smoke);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.proj__title {
  margin: 0;
  font-weight: 400;
  font-size: 4em;                          /* 64 */
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper);
}

.proj__meta {
  position: absolute;
  left: 46.4375em; top: 49.0625em;         /* 743 · 785 */
  width: 39.0625em;
}
.proj__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 2026-09-26 (Aurobind): the services under the goal run across and wrap,
   on every showcase (they used to stack down). 13px type in the pills, not
   16, so Nati's eight fit two rows of the 625px column; the rest follow so
   every page's pills match. */
.proj__tags li {
  display: flex;
  align-items: center;
  height: 1.9231em;                        /* 25 */
  padding: 0 0.6em;
  border: 0.0769em solid var(--smoke);    /* 1 design px; follows the page: light on dark, dark on cream */
  border-radius: 0.7308em;                 /* 9.5 */
  font-size: 0.8125em;                     /* 13 */
  line-height: 1;
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* ---------- the first screen (2026-09-24, Aurobind) ----------
   The stages are Figma frames, and a frame keeps ~145-200px of its own
   header room above the hero. Under the site's sticky nav that read as a
   200px+ hole before the project starts. Each page sets --lead on its
   first stage (the hero's --y less 1em) and the stage is pulled up by it
   and 2em more, so the hero sits ~40px under the nav. Phones stack the stage and keep
   their own top padding. */
@media (min-width: 901px) {
  .proj-canvas > .proj:first-child { margin-top: calc(var(--lead, -2em) * -1 - 2em); }
}

/* ---------- text injections: goal / challenge / result ----------
   2026-09-24 (Aurobind): every project gets three text boxes styled like the
   intro block. The goal sits in the intro itself (.proj__meta, over the tags);
   the challenge comes a few slides in and the result after the last image,
   right above Back / Next. Those two are .proj-note: a band of their own,
   between stages, with the intro's two columns (62 · 743, 625 wide each). */
/* p only: ourfit.html's intro is a div.proj__desc of <p>s, styled in ourfit.css */
p.proj__desc {
  margin: 0 0 2.25em;                      /* 36, desc to tags */
  font-size: 1.25em;                       /* 20, as the Figma intro */
  font-weight: 400;
  line-height: 1.3;
  color: var(--paper);
  text-wrap: pretty;
}
.proj-note__label {
  margin: 0 0 0.9em;
  font-size: 0.875em;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--smoke);
}
.proj-note {
  font-size: 1.1111cqw;                    /* the stage unit, 1em = 16 design px */
  font-family: var(--sans);
  display: grid;
  grid-template-columns: 39.0625em 39.0625em;
  column-gap: 3.5em;
  align-items: start;
  padding: 5.8125em 3.875em 5em;          /* 93 above, as Figma spaces it */
}
.proj-note p.proj__desc { margin: 0; padding-top: 0.2em; }
/* paragraph breaks in the long bodies (2026-09-26, Aurobind: on a phone they
   read as one fat block). Inline on the desktop stage, whose Figma boxes are
   sized for one run of text; a paragraph of its own on a phone. */
.proj__para { display: inline; }
.proj-note--last { padding-bottom: 2em; }

/* ---------- the cards ---------- */
.card--proj {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w); height: var(--h);
  border-radius: 0.6em;
  overflow: hidden;
  background: var(--ink-3);
  transform: translateZ(0);
}
.card--proj > img,
.card--proj > video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Layered cards: a still with drawn parts moving over it. The card's rounded,
   clipped frame keeps them inside; each part sits at its Figma placement as a
   percentage of the card (--lx, --ly, --lw). */
.card--proj > .layer {
  position: absolute;
  left: var(--lx); top: var(--ly);
  right: auto; bottom: auto;
  display: block;
  width: var(--lw); height: auto;
  pointer-events: none;
}
/* the rings turn about their own centre — each file is centred on its circle */
.layer--spin {
  animation: proj-spin var(--turn, 40s) linear infinite;
  will-change: transform;
}
.layer--ccw { animation-direction: reverse; }
@keyframes proj-spin { to { transform: rotate(360deg); } }

/* proj.js raises these with `translate` as the card climbs the screen. The
   drawing inside drifts on three clocks at once — sideways, up and down, and
   tilt — each sticker with its own periods (--fx/--fy/--fr) and head start
   (--fa). The periods never line up, so the wander never visibly repeats. */
.layer--rise { will-change: translate; }
.layer--rise > img {
  width: 100%; height: auto;
  animation:
    proj-driftX var(--fx, 7s) ease-in-out var(--fa, 0s) infinite,
    proj-driftY var(--fy, 5s) ease-in-out var(--fa, 0s) infinite,
    proj-sway   var(--fr, 9s) ease-in-out var(--fa, 0s) infinite;
}
@keyframes proj-driftX {
  0%, 100% { translate: 0 0; }
  18% { translate: 6% 0; }
  39% { translate: -3% 0; }
  58% { translate: 4% 0; }
  79% { translate: -7% 0; }
}
@keyframes proj-driftY {
  0%, 100% { transform: translateY(0); }
  22% { transform: translateY(-8%); }
  47% { transform: translateY(4%); }
  66% { transform: translateY(-5%); }
  86% { transform: translateY(7%); }
}
@keyframes proj-sway {
  0%, 100% { rotate: 0deg; }
  25% { rotate: -6deg; }
  51% { rotate: 4deg; }
  73% { rotate: -3deg; }
  89% { rotate: 6deg; }
}

/* ---------- back / next, right above the footer ---------- */
.proj-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(24px, 4vw, 56px) var(--gutter) clamp(48px, 8vw, 104px);
  max-width: var(--maxw);
  margin-inline: auto;
}
/* in line with the cards: the canvas padding plus the cards' own 62/1440 */
@media (min-width: 901px) {
  .proj-nav {
    max-width: none;
    padding-inline: calc(var(--pad) + (100vw - 2 * var(--pad)) * 0.04306);
  }
}
/* 2026-09-18 mobile pass: on a touch screen the 20px line is too small a
   target, so it gets 12px of padding each way (the row's spacing is unchanged,
   the negative margin gives it back) */
@media (pointer: coarse) {
  .proj-nav__link { padding-block: 12px; margin-block: -12px; }
}
.proj-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity var(--fast) var(--ease);
}
.proj-nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.18em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.proj-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.proj-nav__arrow { transition: transform 0.5s var(--ease); }
.proj-nav__link--back:hover .proj-nav__arrow { transform: translateX(-0.22em); }
.proj-nav__link--next:hover .proj-nav__arrow { transform: translateX(0.22em); }

/* ---------- below 900px the source reflows to one column ---------- */
@media (max-width: 900px) {
  /* the sticky nav already takes its own room in the flow; the extra ~120px
     on top of it read as a hole under the nav (2026-09-26, Aurobind) */
  .proj-main { padding-top: 0; }
  .proj-canvas > .proj:first-child { padding-top: 8px; }
  .proj {
    height: auto !important;
    font-size: 16px;
    padding: clamp(84px, 18vw, 120px) 20px 24px;
    display: grid;
    gap: 16px;
  }
  .card--proj {
    position: relative;
    left: auto; top: auto;
    width: 100%; height: auto;
    aspect-ratio: var(--ar, 636 / 441);
  }
  .card--hero { order: -1; }
  .proj__head,
  .proj__meta {
    position: static;
    width: auto;
    order: 0;
  }
  .proj__head { margin-top: 8px; }
  .proj__kicker { font-size: 14px; margin-bottom: 10px; }
  .proj__title { font-size: clamp(30px, 9vw, 46px); }
  .proj__tags {
    gap: 8px;
    margin-bottom: 4px;
  }
  .proj__tags li { height: 22px; font-size: 13px; }
  /* 2026-09-26 (Aurobind: "too fat", "a block"): 17px/1.3 in full white
     read heavy on the dark. Smaller, more leading, a step back in colour,
     and real paragraphs. */
  p.proj__desc {
    font-size: 15.5px;
    line-height: 1.6;
    letter-spacing: -0.003em;
    color: color-mix(in srgb, var(--paper) 84%, transparent);
    margin-bottom: 22px;
    max-width: 34em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .proj__para { display: block; margin-top: 0.9em; }
  .proj-note p.proj__desc { margin: 0; }
  /* a stage that follows a note does not need the first stage's nav clearance */
  .proj-note + .proj { padding-top: 16px; }
  .proj-note__label { font-size: 12px; }
  .proj-note {
    font-size: 16px;
    grid-template-columns: 1fr;
    row-gap: 14px;
    padding: 40px 20px 32px;
  }
  .proj-note .proj__kicker { font-size: 14px; margin-bottom: 10px; }
  .proj-note .proj__title { font-size: clamp(30px, 9vw, 46px); }
  .proj-nav { padding: 8px 20px 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .layer--spin,
  .layer--rise > img { animation: none; }
  .proj-nav__link::after,
  .proj-nav__arrow { transition: none; }
}