/* ============================================================
   2544 — SITE
   One screen. The page itself does not scroll on a desktop —
   only the file column does. On a phone the whole thing
   becomes an ordinary vertical page, because a locked
   viewport with an inner scroll is miserable on touch.
   ============================================================ */

.stage {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(20px, 3vw, 54px);
  height: 100dvh;
  padding: var(--gutter) var(--gutter) var(--gutter) 0;
  overflow: hidden;
}


/* ---------------- LEFT ---------------- */

.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: var(--gutter);
  min-height: 0;
  overflow: hidden;
}

/* badge bleeds off the left edge, exactly as drawn */
.badge {
  flex: 0 0 auto;
  margin-left: calc(var(--gutter) * -1);
  padding: 14px 30px 14px calc(var(--gutter) + 6px);
  border-radius: 0 var(--r-pill) var(--r-pill) 0;
  background: var(--teal);
  box-shadow: 0 14px 30px -18px rgba(5,208,188,0.9);
  transition: transform var(--t-1) var(--ease);
}
.badge:hover { transform: translateX(3px); }
.badge img { width: clamp(52px, 4.4vw, 74px); height: auto; }

.portrait {
  width: clamp(150px, 15.5vw, 250px);
  height: auto;
  margin: clamp(10px, 2vw, 26px) 0 0 clamp(14px, 2.4vw, 40px);
  filter: drop-shadow(24px 26px 26px rgba(12,15,16,0.22));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--t-2) var(--ease);
  flex: 0 0 auto;
}
.portrait:hover  { transform: translateY(-4px); }
.portrait:active { transform: scale(0.985); }

.quote {
  position: relative;
  margin-top: auto;
  width: min(100%, 460px);
  padding: clamp(22px, 2.3vw, 34px) clamp(22px, 2.3vw, 32px) clamp(20px, 2vw, 28px);
  border-radius: var(--r-card);
  flex: 0 0 auto;
}
.quote::before {
  content: "";
  position: absolute;
  left: 16px; top: 16px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(12,15,16,0.34);
}
.quote blockquote {
  font-family: var(--font-quote);
  font-size: var(--fs-quote);
  line-height: 1.42;
  letter-spacing: -0.004em;
  color: #FFFFFF;
  white-space: pre-line;
  text-shadow: 0 1px 2px rgba(0,0,0,0.16);
}
.quote figcaption {
  margin-top: 14px;
  text-align: right;
  font-family: var(--font-quote);
  font-style: italic;
  font-size: 15px;
  color: rgba(255,255,255,0.86);
}

.join { margin-top: clamp(14px, 1.6vw, 20px); flex: 0 0 auto; }
.join .btn { padding-inline: 34px; }
.joined {
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.joined[hidden] { display: none; }


/* ---------------- RIGHT ---------------- */

.right {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.right__head { flex: 0 0 auto; padding-right: 4px; }

.filters {
  display: flex;
  gap: 8px;
  margin-top: 18px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 0 0 auto;
}
.filters::-webkit-scrollbar { display: none; }
.filters:empty { display: none; }

/* the only thing on the page that scrolls */
.scroller {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 18px;
  padding: 2px 10px 2px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(12,15,16,0.22) transparent;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
.scroller::-webkit-scrollbar { width: 6px; }
.scroller::-webkit-scrollbar-thumb { background: rgba(12,15,16,0.2); border-radius: 99px; }
.scroller::-webkit-scrollbar-track { background: transparent; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding-bottom: 6px;
}

.card {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--r-card);
  transition: transform var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--drop-lg); }

.cover {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--cover-radius);
  overflow: hidden;
  background: rgba(255,255,255,0.34);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover__ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(255,255,255,0.5), rgba(5,208,188,0.16));
}
.cover__ph span {
  font-family: var(--font-display); font-weight: 700; font-size: 46px;
  color: rgba(12,15,16,0.13); letter-spacing: -0.03em;
}
.cover__lang {
  position: absolute; left: 10px; top: 10px;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-2); line-height: 1;
}

.card__body { display: flex; flex-direction: column; gap: 7px; padding: 14px 6px 4px; flex: 1; }
.card__cat  { font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
              font-weight: 650; color: var(--teal-dark); }
.card__t    { font-family: var(--font-display); font-weight: 700; font-size: 16px;
              line-height: 1.2; letter-spacing: -0.014em; }
.card__d    { font-size: 12.5px; line-height: 1.5; color: var(--ink-3);
              display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card__go   { margin-top: auto; padding-top: 12px; }

.note {
  margin-top: 18px;
  padding: clamp(34px, 5vw, 60px) 24px;
  border-radius: var(--r-card);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-sm);
}


/* ============================================================
   PHONE — ordinary page scroll, same order, nothing hidden
   ============================================================ */

@media (max-width: 900px) {
  html, body { overflow-y: auto; }

  .stage {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding: var(--gutter) var(--gutter) 44px var(--gutter);
  }

  /* .right and .left both stop being boxes on phone — their children
     join .stage's own flex flow so every piece (badge, title, content,
     face, toggles) can be freely ordered against each other. */
  .right { display: contents; }
  .left  { display: contents; }

  .badge { order: 1; align-self: flex-start; }

  .right__head { order: 2; margin-top: 26px; }

  .scroller {
    order: 3;
    padding: 0;
    overflow: visible;
    max-height: none;
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* face — sits below the content, above the filter toggles */
  .portrait { order: 4; width: min(52vw, 220px); margin: 40px 0 0 6px; }
  .quote    { order: 5; margin-top: 22px; width: 100%; }
  .join     { order: 6; }

  /* toggle chips — very bottom */
  .filters { order: 7; margin-top: 28px; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
  .join .btn { width: 100%; }
}