/* Naytra — "The Problem": two-panel split (paper statement | inset trading-floor image).
   Sits between the hero and the transmission chain. Light section.
   Fraunces (title) + DM Sans (stat/body). System values only.
   Depends on tokens.css + base.css. */

.prob{
  --font-serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  display:grid;grid-template-columns:1fr 1fr;min-height:100vh;
  background:var(--paper)}

/* Left = white statement; right = beige stat as an inset block (no divider).
   The beige is inset by the grid margin on the sides it would otherwise bleed to
   (top / bottom / right), so its ground no longer touches the neighbours or the edge. */
.prob__left,.prob__right{display:flex;flex-direction:column}
.prob__right{order:1;justify-content:center;
  padding:clamp(var(--space-40),6vw,var(--space-120))}
.prob__left{order:2;justify-content:flex-end;background:var(--sunk);
  margin:clamp(var(--space-40),6vw,var(--space-120));margin-left:0;
  padding:clamp(var(--space-40),4vw,var(--space-80))}

/* eyebrow — signal amber, matching every other section (now above the right-panel title) */
.prob__eyebrow{font-family:var(--font-sans);font-weight:500;font-size:12px;line-height:1.2;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent-700);margin:0 0 var(--space-20)}

/* inset image panel — the photo lives on a taller ::before so it can parallax (shifted by
   motion.js via --prob-shift) without ever revealing an edge; beige shows while it loads. */
.prob__media{position:relative;overflow:hidden;background:var(--sunk);padding:0}
.prob__media::before{content:"";position:absolute;left:0;right:0;top:-12%;height:124%;
  background:var(--prob-img) center/cover no-repeat;
  transform:translateY(var(--prob-shift,0));will-change:transform}

/* right — the statement, vertically centred.
   title = h2 (44) cap / h3 (32) floor; body = lead (20) cap / body (16) floor. */
.prob__rightinner{max-width:34rem}
.prob__title{font-family:var(--font-serif);font-weight:340;font-size:clamp(30px,3.8vw,44px);
  line-height:1.08;letter-spacing:-.02em;color:var(--ink);margin:0;text-wrap:balance}
.prob__body{font-family:var(--font-sans);font-weight:400;font-size:17px;
  line-height:1.5;color:var(--ink-2);margin:var(--space-20) 0 0;max-width:34ch}

/* Mobile: stack the two panels */
@media (max-width:820px){
  .prob{grid-template-columns:1fr;min-height:0}
  .prob__right{padding:clamp(var(--space-40),6vw,var(--space-120))}
  /* beige block: full-width with a grid margin on the sides, spaced from the statement */
  .prob__left{justify-content:flex-start;
    margin:0 clamp(var(--space-40),6vw,var(--space-120)) clamp(var(--space-60),8vw,var(--space-120))}
  .prob__media{min-height:clamp(240px,42vh,360px)}
}