/* Panel 2 redesign: "Curious by nature. Useful by choice." (cover layout)
   Scoped with the .p2- prefix. Uses the site's existing vars (--bg, --rule, --text, --gutter)
   and 'Profile Display' for the heading. Adds one font (Inter Tight variable) only for the
   lighter lead/body weights, because the site's sans.ttf ships SemiBold only. */
@font-face { font-family: 'P2 Sans'; src: url('assets/inter-tight-var.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

.p2-cover { position: relative; min-height: max(760px, min(100svh - 76px, 960px)); border-top: 1px solid var(--rule); overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: radial-gradient(70% 80% at 74% 30%, #15233a 0%, #0e1420 38%, var(--bg) 72%); }
.p2-cover::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 0%, var(--bg) 8%, rgba(8,17,28,.8) 22%, rgba(8,17,28,.2) 40%, transparent 56%),
              linear-gradient(90deg, rgba(8,17,28,.88) 32%, rgba(8,17,28,.35) 52%, transparent 66%); }
.p2-fig { position: absolute; z-index: 0; top: 4%; height: 132%; right: max(-6vw, calc(1% - (1440px - 100vw) * .45)); margin: 0; }
.p2-fig img { height: 100%; width: auto; max-width: none; filter: grayscale(.2) contrast(1.06) brightness(.98); }
.p2-bar { position: relative; z-index: 2; width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.p2-top { position: absolute; z-index: 2; top: 40px; left: 0; right: 0; }
.p2-top .p2-bar { display: flex; justify-content: space-between; }
.p2-meta { font: 600 11px/1 'P2 Sans', 'Profile Sans', Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #6b7682; }
.p2-title { font-family: 'Profile Display', Arial, sans-serif; font-weight: 800; font-size: clamp(64px, 7.1vw, 108px); line-height: .94; letter-spacing: -.05em; margin: 120px 0 44px; color: var(--text); }
.p2-title span { display: block; white-space: nowrap; }
.p2-title span + span { color: #c9d0d8; }
.p2-text { display: grid; gap: 24px; max-width: min(620px, 52%); padding: 36px 0 clamp(72px, 8vw, 104px); border-top: 1px solid rgba(255,255,255,.12); }
.p2-text p { margin: 0; }
.p2-lead { font: 450 clamp(20px, 1.65vw, 24px)/1.42 'P2 Sans', 'Profile Sans', Arial, sans-serif; letter-spacing: -.012em; color: var(--text); text-wrap: pretty; }
.p2-body { font: 400 17px/1.75 'P2 Sans', 'Profile Sans', Arial, sans-serif; max-width: 62ch; color: #a7b0ba; text-wrap: pretty; }

@media (max-width: 900px) {
  .p2-cover { min-height: 0; display: block; background: radial-gradient(90% 50% at 60% 18%, #15233a 0%, #0e1420 45%, var(--bg) 80%); }
  .p2-cover::after { display: none; }
  .p2-fig { position: relative; top: auto; right: auto; margin-top: 56px; height: 118vw; max-height: 620px; display: flex; justify-content: center; }
  .p2-fig img { height: 100%; -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 40%); mask-image: linear-gradient(0deg, transparent 0%, #000 40%); }
  .p2-top { top: 22px; }
  .p2-main { margin-top: -24vw; }
  .p2-title { font-size: clamp(36px, 10.6vw, 64px); line-height: .98; letter-spacing: -.035em; margin: 0 0 28px; }
  .p2-text { max-width: none; gap: 20px; padding: 28px 0 88px; }
  .p2-lead { font-size: 20px; }
  .p2-body { font-size: 17px; line-height: 1.72; }
}

.p2-br { display: none; }
@media (max-width: 700px) { .p2-br { display: inline; } }