/* =============================================================
   MORE KLYMB — a curated gallery of additional KLYMB work, not a
   case study. One uniform image treatment (.mk-screen — identical
   border, radius, no shadow) applied to every screen in the
   gallery; a small uppercase caption (.mk-tag) always sits above
   it, never inside it (.mk-screen clips via overflow:hidden).

   One masonry gallery of every screen (Section 01) — no screen gets
   special treatment, no process or progression is shown — then a
   large full-bleed pair of App Store concepts (Section 02).
   ============================================================= */

.pg-project--more-klymb {
  --mk-crimson-deep: #C21F3A; /* KLYMB's identity red, readable on porcelain — eyebrow, index, tags */
  --project-accent:  var(--mk-crimson-deep);
}

/* the hero copy runs a touch longer than the shell's default 46ch
   measure — widen both the paragraph and its parent (a child's
   max-width can never exceed its parent's, see klymb-v2-direction) */
.pg-project--more-klymb .proj-hero__masthead {
  max-width: 64ch;
}

.pg-project--more-klymb .proj-hero__oneline {
  max-width: 58ch;
}

/* =============================================================
   SCREEN — the one image treatment, used everywhere. Radius is a
   custom property so the small gallery thumbnails and the large
   showcase posters each get a radius proportionate to their own
   width (an identical px radius reads disproportionately round on
   a 220px thumbnail vs a 480px poster) while the rule itself never
   changes: border, no shadow, no glow, clipped corners.
   ============================================================= */
.mk-screen {
  display: block;
  overflow: hidden;
  border-radius: var(--mk-radius, 14px);
  border: 1px solid var(--color-border);
}

.mk-screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* Small uppercase caption — identical for every screen on the page,
   always above it, never inside the clipped .mk-screen box. */
.mk-tag {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* =============================================================
   GALLERY — every remaining screen, one consistent system. A CSS
   multi-column layout gives a true masonry (identical width,
   natural height) without JS: each screen keeps its own aspect
   ratio, so the page packs tightly instead of forcing a fixed-
   height grid full of cropped or padded images.
   ============================================================= */
.mk-gallery {
  columns: 3;
  column-gap: clamp(1.25rem, 3vw, 2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.mk-item {
  --mk-radius: 14px;
  display: block;
  break-inside: avoid;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

@media (max-width: 900px) {
  .mk-gallery { columns: 2; }
}

@media (max-width: 560px) {
  .mk-gallery { columns: 1; }
}

/* =============================================================
   ONBOARDING STAGE — the five Cycle Tracking setup screens, a
   supporting showcase between the gallery and the App Store
   section. Deliberately borrows the KLYMB case study's own dark
   "stage" treatment (Portfolio_V1/css/klymb.css — .stage /
   .onboarding-set, read there for reference only, never edited)
   rather than the light .mk-screen gallery style used everywhere
   else on this page: one dark rounded container, a crimson glow,
   five screens in a single grouped grid — not five separate cards.
   Token values below are copied from klymb.css's .cs scope, which
   isn't loaded on this page.
   ============================================================= */
.mk-onboarding {
  --ob-stage:      #0E0D11;
  --ob-stage-2:    #17141A;
  --ob-stage-line: rgba(255, 255, 255, 0.09);
  --ob-stage-dim:  rgba(237, 234, 230, 0.6);

  margin-top: clamp(2rem, 5vw, 3rem);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(245, 53, 79, 0.14), transparent 60%),
    var(--ob-stage);
  padding: clamp(1.5rem, 5vw, 4rem);
  overflow: hidden;
}

.mk-onboarding__set {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1.25rem);
  align-items: start;
}

.mk-onboarding__item .mk-tag {
  color: var(--ob-stage-dim);
}

.mk-onboarding__screen {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: clamp(10px, 1.6vw, 16px);
  border: 1px solid var(--ob-stage-line);
  background: var(--ob-stage-2);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
}

.mk-onboarding__screen img {
  display: block;
  width: 100%;
  height: auto;
}

/* same fallback as klymb.css's own .onboarding-set: a contained
   horizontal scroll strip once five columns no longer fit */
@media (max-width: 720px) {
  .mk-onboarding__set {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 44%;
    overflow-x: auto;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    scroll-snap-type: x proximity;
  }

  .mk-onboarding__screen {
    scroll-snap-align: start;
  }
}

/* =============================================================
   SHOWCASE — the two App Store concepts, large and equal. The
   one place this page breaks the container, because the brief
   calls for it explicitly: side by side, identical size, nothing
   decorative around them.
   ============================================================= */
.mk-showcase {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-inline: var(--gutter);
  margin-top: clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.mk-showcase__item {
  --mk-radius: 22px;
  flex: 1 1 380px;
  max-width: 480px;
}