/* ============================================================
   L/G® — Article section
   1:1 from Figma node 40001184:642 (frame 1920×2100).

   STRUCTURE:
   .article                   — container, z-30, gray bg
     .article-above           — position:sticky top:0 z-2 — gray, lifts away
       .article-intro         — 48/56 #B2B2C4 mix-blend-difference
       .article-features      — 4 rows, border-bottom #C4C4C4, w=1256
       .article-panel           — normal flow z-1 — pink #F3A2FF, rounded 32
       .article-label         — 48px #272637
       .article-cards-wrap    — horizontal scroll
       .article-handle        — 296px #272637 centered
       .article-foot          — 3-col footer #272637
   ============================================================ */

/* ── ARTICLE WRAPPER ── */
.article {
  position: relative;
  z-index: 30;
  background: var(--bg);
  color: var(--ink);
}

/* ============================================================
   GRAY ABOVE SECTION — sticky so it "lifts away" while the
   pink panel is revealed from below as the user scrolls.
   ============================================================ */
.article-above {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg);
  /* Figma: intro at y=488; header band ~272 → 216px padding top.
     Bottom padding gives breathing room before the clients text ends. */
  padding: calc(216 * var(--u)) var(--s-16) calc(120 * var(--u));
  min-height: 100vh;
}

/* ── Intro big text — Figma: y=488, w=1016, 48/56, -2%, #B2B2C4 ── */
.article-intro {
  margin: 0 0 calc(160 * var(--u));
  max-width: calc(1016 * var(--u));
  font-size: calc(48 * var(--u));
  line-height: calc(56 / 48);
  letter-spacing: var(--tr-tighter);
  font-weight: 400;
  color: var(--ink-4);                          /* #B2B1BE */
  mix-blend-mode: difference;
}

/* ── Features — Figma: 4 rows, pb=20, pt=12, border-bottom #C4C4C4, w=1256 ── */
.article-features {
  list-style: none;
  margin: 0 0 calc(56 * var(--u));
  padding: 0;
  max-width: calc(1256 * var(--u));
}
.feature {
  padding-bottom: calc(20 * var(--u));
  padding-top: calc(12 * var(--u));
  border-bottom: 1px solid #C4C4C4;
}
.feature--last { border-bottom: none; }
.feature-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.feature-head {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1;
  letter-spacing: var(--tr-tighter);
}
.feature-num   { color: var(--ink-3); min-width: calc(44 * var(--u)); }
.feature-title { color: var(--ink-2); }
.feature-desc {
  margin: 0;
  width: calc(400 * var(--u));
  flex: 0 0 auto;
  font-size: var(--t-18);
  line-height: calc(22 / 18);
  letter-spacing: -0.02em;
  color: var(--ink-2);
}


/* ── PINK PANEL — flex column so we can reorder children with `order` ── */
.article-panel {
  position: relative;
  z-index: 1;
  background: #F3A2FF;
  padding: calc(48 * var(--u)) calc(40 * var(--u));
  display: flex;
  flex-direction: column;
}

/* Visual order: handle(0) → label(1) → cards(2) → footer(3) */
.article-handle    { order: 0; }
.article-label     { order: 1; }
.article-cards-wrap{ order: 2; }
.article-foot      { order: 3; }

/* ── Articles label — #272637 Regular ── */
.article-label {
  margin: 0 0 calc(24 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tr-tighter);
  color: var(--ink);
}

/* ── Article cards — horizontal scroll ── */
.article-cards-wrap {
  margin: 0 calc(-40 * var(--u)) calc(80 * var(--u));
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.article-cards-wrap::-webkit-scrollbar { display: none; }

.article-cards {
  display: flex;
  gap: calc(12 * var(--u));                     /* Figma: 12px between cards */
  margin-left: calc(36 * var(--u));
}

/* Card — Figma: 656×224, rounded 28 */
.art-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: calc(606 * var(--u));
  height: calc(196 * var(--u));
  border-radius: calc(28 * var(--u));
}
/* Card inner link — Figma: gradient #F0B6FB→#F3A2FF, padding 16/20/16/16 */
.art-card__link {
  display: flex;
  gap: calc(20 * var(--u));
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(232.85deg, #F0B6FB 25.433%, #F3A2FF 120.97%);
  border-radius: calc(28 * var(--u));
  color: inherit;
  text-decoration: none;
  transition: transform .35s var(--ease-out);
  will-change: transform;
  box-sizing: border-box;
}
.art-card__link:hover {
  transform: translateY(calc(-3 * var(--u)));
}

/* Card image — Figma: w=240, full height, rounded 16 */
.art-card__img {
  width: calc(240 * var(--u));
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  border-radius: calc(16 * var(--u));
  background: var(--ink-4);
  margin: 0;
}
.art-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.art-card__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: calc(16 * var(--u));
  flex: 1 1 auto;
  min-width: 0;
}

/* Title — Figma: 28/32, -1.5%, #272637 Regular */
.art-card__title {
  margin: 0;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: calc(34 / 28);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.art-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12 * var(--u));
}

/* Date — Figma: 20/24, -0.25px, #272637 Medium, opacity .6 */
.art-card__date {
  font-size: calc(16 * var(--u));
  font-weight: 500;
  line-height: calc(24 / 20);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  opacity: .6;
}
.art-card__arrow {
  width: calc(24 * var(--u));
  height: calc(24 * var(--u));
  color: var(--ink);
  flex: 0 0 auto;
  transition: transform .35s var(--ease-out);
}
.art-card__link:hover .art-card__arrow {
  transform: translate(calc(3 * var(--u)), calc(-3 * var(--u)));
}

/* ── leogarcia.work ── */
.article-handle {
  position: relative;
  z-index: 2;
  margin: 0 0 calc(72 * var(--u));
  margin-left: calc(-12 * var(--u));
  width: 100%;
  font-size: calc(296 * var(--u));
  font-weight: 500;
  line-height: calc(340 / 296);
  letter-spacing: -5%;
  text-align: left;
  color: var(--ink);
  user-select: text;
}

/* ── Footer row — Figma: 3-col, 16px, #272637 ── */
.article-foot {
  position: relative;
  z-index: 2;
  color: var(--ink);                            /* #272637 */
}
.article-foot-inner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: calc(40 * var(--u));
}
.foot-social {
  list-style: none;
  margin: 0;
  padding: 0;
  justify-self: center;
  display: flex;
  gap: calc(8 * var(--u));
}
.foot-social a { color: inherit; transition: opacity .25s ease; }
.foot-social a:hover { opacity: .6; }
.foot-year { margin: 0; justify-self: end; }

/* ============================================================
   CLIPPING-MASK REVEAL — .rv-mask / .rv-inner pattern
   Driven by --art-rv (set by app.js from article getBoundingClientRect).
   ============================================================ */
.rv-mask  { overflow: hidden; }
.rv-inner {
  --rv: clamp(0, calc((var(--art-rv, 0) - var(--i, 0) * 0.04) / 0.55), 1);
  transform: translateY(calc((1 - var(--rv)) * 110%));
  opacity: calc(0.1 + 0.9 * var(--rv));
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity   220ms ease-out;
  will-change: transform, opacity;
}

/* Inline .rv-inner spans need inline-block for translateY to work */
.article-intro > .rv-inner,
.article-label > .rv-inner,
.article-handle > .rv-inner {
  display: inline-block;
}

/* Card link fills the masked card */
.art-card .rv-inner { height: 100%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .feature-desc { width: calc(340 * var(--u)); }
}

@media (max-width: 900px) {
  .article-above  { padding-top: calc(140 * var(--u)); }
  .article-intro  { font-size: calc(34 * var(--u)); line-height: 1.2; }
  .article-label  { font-size: calc(36 * var(--u)); }
  .feature-inner  { flex-direction: column; gap: calc(8 * var(--u)); }
  .feature-desc   { width: 100%; max-width: none; }
  .art-card       { width: calc(580 * var(--u)); }
  .article-handle { font-size: calc(120 * var(--u)); line-height: 1; }
  .article-foot-inner { grid-template-columns: 1fr; gap: calc(20 * var(--u)); }
  .foot-social    { justify-self: start; }
  .foot-year      { justify-self: start; }
}

@media (max-width: 560px) {
  .article-intro   { font-size: calc(28 * var(--u)); }
  .article-handle  { font-size: calc(72 * var(--u)); }
  .art-card        { width: calc(480 * var(--u)); height: auto; }
  .art-card__link  { padding: calc(12 * var(--u)); }
  .art-card__img   { width: calc(120 * var(--u)); height: calc(120 * var(--u)); }
  .art-card__title { font-size: calc(22 * var(--u)); line-height: 1.2; }
  .article-panel   { border-radius: calc(20 * var(--u)); margin: 0 calc(8 * var(--u)) calc(8 * var(--u)); padding: calc(32 * var(--u)) calc(24 * var(--u)); }
}