/* ============================================================
   LBD Portfolio — Featured Works scroll-stacking section
   Rendered by the [lbd_portfolio] shortcode.
   Panels are sticky: as the page scrolls, each case study
   slides up and covers the previous one.
   ============================================================ */

/* ---------- Tokens ---------- */
.fw-section {
  --fw-ink:      #000000;
  --fw-surface:  #0a0a0b;
  --fw-line:     #262c3a;
  --fw-text:     #ffffff;
  --fw-muted:    #c9c9c9;
  --fw-brass:    #F7A73D;
  --fw-brass-hi: #FFBE6B;

  --fw-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --fw-sans:  "Spline Sans", "Helvetica Neue", Arial, sans-serif;

  --fw-radius: 24px;
  --fw-ease: cubic-bezier(.22, .61, .21, 1);

  /* sticky-stack geometry */
  --fw-top: 0px;                     /* pin flush to the viewport top — no see-through gap above the card */
  --fw-panel-h: min(70vh, 500px);    /* panel height ≈ 1200×500 on desktop */
  --fw-peek: 48px;                   /* sliver of the next card visible at rest */

  background: var(--fw-ink);
  color: var(--fw-text);
  font-family: var(--fw-sans);
  font-size: 16px;
  line-height: 1.6;
  /* no vertical padding — the stack sits flush against the
     sections above/below so no black band shows at the edges */
  padding: 0 clamp(16px, 4vw, 56px);
  position: relative;
  -webkit-font-smoothing: antialiased;
}

.fw-section *, .fw-section *::before, .fw-section *::after { box-sizing: border-box; }

.fw-wrap { max-width: 1200px; margin: 0 auto; position: relative; }

/* ---------- The sticky stack ----------
   The gap between panels fills the rest of the viewport below a
   pinned card, so only ONE card is in view at a time (plus a small
   peek of the next at the bottom edge). Scrolling brings the next
   card up and over the pinned one. */
.fw-stack {
  display: flex;
  flex-direction: column;
  gap: max(32px, calc(100vh - var(--fw-panel-h) - var(--fw-top) - var(--fw-peek)));
}

.fw-panel {
  position: -webkit-sticky;
  position: sticky;
  top: var(--fw-top);
  height: var(--fw-panel-h);
  margin: 0;
  transform-origin: center top;
  will-change: transform, filter;
}

.fw-panel a {
  display: block;
  position: relative;
  height: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: var(--fw-radius);
  border: 1px solid var(--fw-line);
  background: var(--fw-surface);
  overflow: hidden;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, .55);
}

/* --- media --- */
.fw-art { position: absolute; inset: 0; transition: transform .9s var(--fw-ease); }
.fw-art svg, .fw-art img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
}
.fw-panel a:hover .fw-art,
.fw-panel a:focus-visible .fw-art { transform: scale(1.035); }

/* readability scrims: strong at top-left for the title, soft at bottom */
.fw-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 38%, transparent 62%),
    linear-gradient(to top, rgba(0,0,0,.72), transparent 42%);
  pointer-events: none;
}

/* --- overlaid content --- */
.fw-content {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 48px);
  /* keep the title clear of a floating fixed header (JS sets --fw-clearance) */
  padding-top: max(clamp(24px, 4vw, 48px), calc(var(--fw-clearance, 0px) + 12px));
}

.fw-top { max-width: 34ch; }

.fw-cat {
  display: inline-block;
  font: 600 11.5px/1 var(--fw-sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fw-brass-hi);
  margin-bottom: 14px;
}

.fw-name {
  font-family: var(--fw-serif);
  font-weight: 480;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.6);
  color: var(--fw-text);
}

.fw-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

/* description intentionally hidden in the scroll section */
.fw-desc { display: none; }

.fw-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 12.5px/1 var(--fw-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fw-ink);
  background: var(--fw-brass-hi);
  border-radius: 999px;
  padding: 13px 22px;
  transition: gap .3s var(--fw-ease), background .3s var(--fw-ease);
}
.fw-open svg { width: 13px; height: 13px; }
.fw-panel a:hover .fw-open,
.fw-panel a:focus-visible .fw-open { gap: 16px; background: var(--fw-brass); }

.fw-index {
  font: 500 14px/1 var(--fw-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: rgba(237, 233, 224, .75);
  white-space: nowrap;
}
.fw-index strong {
  font-family: var(--fw-serif);
  font-weight: 480;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--fw-brass-hi);
  margin-right: 4px;
}

.fw-panel a:focus-visible { outline: 2px solid var(--fw-brass); outline-offset: 4px; }

/* ---------- Footer CTA ---------- */
.fw-footer {
  margin-top: clamp(48px, 8vw, 96px);
  padding-top: 36px;
  border-top: 1px solid var(--fw-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.fw-footer p { margin: 0; color: var(--fw-muted); font-size: 15px; }
.fw-footer p strong { color: var(--fw-text); font-weight: 600; }

.fw-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: 600 14px/1 var(--fw-sans);
  letter-spacing: .04em;
  color: var(--fw-text);
  text-decoration: none;
  border: 1px solid var(--fw-brass);
  border-radius: 999px;
  padding: 16px 28px;
  transition: background .3s var(--fw-ease), color .3s var(--fw-ease);
}
.fw-cta svg { width: 15px; height: 15px; transition: transform .3s var(--fw-ease); }
.fw-cta:hover { background: var(--fw-brass); color: var(--fw-ink); }
.fw-cta:hover svg { transform: translateX(4px); }
.fw-cta:focus-visible { outline: 2px solid var(--fw-brass); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .fw-section * { transition-duration: .01ms !important; animation: none !important; }
  .fw-panel { transform: none !important; filter: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .fw-section { --fw-panel-h: min(64vh, 460px); --fw-top: 0px; }
  .fw-bottom { flex-direction: column; align-items: flex-start; }
  .fw-index { order: -1; }
  .fw-desc { display: none; }
  .fw-name { font-size: clamp(28px, 8vw, 40px); }
}