/* gbx-person-page.css · the person page · one kit component, every forum.
   Ruled by Patrick 2026-10-11 on Webwizard's person page mock (reports/mock/bils-member-page-mock.html):
   "send to page layer to build via brandmaster and 007 to deploy remove - Conference Chair in carosel -
   add the label ... chair are the standard" and "Hotel Palace Berlin · 10 and 11 February 2027 text under
   pics messy and you got loads wrong so remove and read the master page content", and the same day
   "add the ladder". With the 10 October rule "rule not text over hero": the hero film carries nothing
   but the breadcrumb and the sound control. Everything else sits below the frame.
   Order on the page: hero · title block · in brief (kit) · in the conversation · the ladder · the journey ·
   previous and next · the door. A section with no content comes off; nothing is a placeholder.
   The grade is the DDIF pair (9.10) on every journey card: rest .55, hover film .82. The hero film keeps
   GRADE.hero until Patrick names it.
   SOURCE: 00_canonical/gbx-person-page.css. Every forum copy is byte identical. npm run kit. */

/* the fixed header is measured by the script and written to --pp-hdr on the host, so the hero starts below it on every forum */
/* the page ground, so a profile never reads light on light whatever its own sheet carries */
html,body{background:var(--ground,var(--deep,#151313))}
.pp-jframe.empty{background:linear-gradient(135deg,var(--stone,#1F2828),var(--deep,#151313))}
/* hero geometry, GOLDFINGER PART 24 4.2 and Patrick 2026-10-13: 82vh at desktop, 58vh at mobile, full bleed, no floor, the title below */
.pp-hero{position:relative;width:100%;margin-top:var(--pp-hdr,0px);height:82vh;overflow:hidden;background:var(--stone,#1F2828)}
.pp-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.55) contrast(1.08) brightness(.55) sepia(.12)}
.pp-hero video.pp-holder{filter:none}
.pp-crumb{position:absolute;top:0;left:0;right:0;z-index:2;padding:var(--sp3,13px) var(--sp5,34px);font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cashmere,#F3F6F9);opacity:.78;text-decoration:none}
.pp-crumb:hover{opacity:1}
.pp-sound{position:absolute;right:var(--sp5,34px);bottom:var(--sp5,34px);z-index:2;display:inline-flex;align-items:center;gap:8px;background:transparent;border:0;padding:6px 0;cursor:pointer;color:var(--cashmere,#F3F6F9);font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:10px;letter-spacing:.2em;text-transform:lowercase;opacity:.72}
.pp-sound::before{content:"";display:block;width:34px;height:.5px;background:var(--g2,rgba(186,153,51,.236))}
.pp-sound:hover{opacity:1}
.pp-wrap{max-width:1180px;margin:0 auto;padding:0 var(--sp5,34px)}
.pp-title{padding:var(--sp7,89px) 0 var(--sp6,55px)}
.pp-eyebrow{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#ba9933);margin:0 0 var(--sp4,21px)}
.pp-eyebrow .gbx-case{display:inline;text-transform:none}
.pp-eyebrow .pp-circle{color:var(--cashmere,#F3F6F9);opacity:.62;margin-left:var(--sp3,13px)}
.pp-name{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:-.01em;margin:0 0 var(--sp3,13px);color:var(--cashmere,#F3F6F9)}
.pp-role{font-family:var(--serif,'Cormorant',Georgia,serif);font-style:italic;font-weight:300;font-size:clamp(22px,2.6vw,32px);color:var(--gold,#ba9933);margin:0 0 var(--sp4,21px)}
.pp-org{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:14px;letter-spacing:.04em;color:var(--cashmere,#F3F6F9);opacity:.72;margin:0}
.pp-org-link{color:inherit;text-decoration:none;border:0;transition:color .2s ease}
.pp-org-link:hover,.pp-org-link:focus-visible{color:var(--gold,#ba9933)}
.pp-org-link:focus-visible{outline:1px solid var(--gold,#ba9933);outline-offset:3px}
.pp-tags{display:flex;flex-wrap:wrap;gap:var(--sp2,8px);margin:var(--sp4,21px) 0 0}
.pp-tag{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:10px;letter-spacing:.2em;text-transform:lowercase;color:var(--dim2,rgba(243,246,249,.52));border:.5px solid var(--g2,rgba(186,153,51,.236));padding:5px 13px}
.pp-rule{width:34px;height:.5px;background:var(--g2,rgba(186,153,51,.236));margin:var(--sp5,34px) 0 0}
.pp-sec{padding:0 0 var(--sp7,89px)}
.pp-label{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold,#ba9933);margin:0 0 var(--sp4,21px)}
.pp-h2{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(28px,3.2vw,40px);line-height:1.1;margin:0 0 var(--sp5,34px);color:var(--cashmere,#F3F6F9)}
.pp-why{display:grid;grid-template-columns:1fr 2fr;gap:var(--sp6,55px)}
.pp-thesis{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.15;margin:0;color:var(--cashmere,#F3F6F9)}
.pp-body{font-family:var(--hv,'Helvetica Neue',Helvetica,Arial,sans-serif);font-weight:300;font-size:16px;line-height:1.7;color:var(--cashmere,#F3F6F9);opacity:.86;margin:0;max-width:62ch}
.pp-body p{margin:0 0 var(--sp4,21px)}
.pp-body p:last-child{margin-bottom:0}
.pp-when{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim2,rgba(243,246,249,.52));margin:var(--sp4,21px) 0 0}
.pp-ladder{list-style:none;margin:0;padding:0;max-width:72ch}
.pp-ladder li{display:grid;grid-template-columns:96px 1fr;gap:var(--sp4,21px);padding:var(--sp3,13px) 0;border-top:.5px solid var(--g2,rgba(186,153,51,.236))}
.pp-ladder li:last-child{border-bottom:.5px solid var(--g2,rgba(186,153,51,.236))}
.pp-ladder .pp-lwhen{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#ba9933);padding-top:4px}
.pp-ladder .pp-lstep{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:22px;line-height:1.3;color:var(--cashmere,#F3F6F9)}
.pp-ladder .pp-lstep span{display:block;font-family:var(--sans,'Jost',system-ui,sans-serif);font-size:13px;color:var(--cashmere,#F3F6F9);opacity:.62;margin-top:2px}
/* the journey: one carousel, 16:9 cards, year first, hover plays from the intro, mono alike */
.pp-rail{display:flex;gap:var(--sp4,21px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--sp3,13px);scrollbar-width:none}
.pp-rail::-webkit-scrollbar{display:none}
.pp-jcard{flex:0 0 min(520px,78vw);scroll-snap-align:start;text-decoration:none;color:inherit;display:block}
.pp-jframe{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--stone,#1F2828)}
.pp-jframe img,.pp-jframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}
.pp-jframe img{filter:grayscale(1) contrast(1.06) brightness(.55);transition:opacity .72s ease}
.pp-jframe video{opacity:0;filter:grayscale(1) contrast(1.06) brightness(.82);transition:opacity .72s ease}
.pp-jcard.is-playing .pp-jframe img{opacity:0}
.pp-jcard.is-playing .pp-jframe video{opacity:1}
/* the line below the frame: hidden at rest, shown on hover, or in view where there is no hover (9.11) */
.pp-jcap{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold,#ba9933);margin:var(--sp3,13px) 0 0;position:relative;padding-top:var(--sp2,8px);opacity:0;transition:opacity .72s ease}
.pp-jcap::before{content:"";position:absolute;top:0;left:0;width:34px;height:.5px;background:var(--g2,rgba(186,153,51,.236))}
.pp-jcard:hover .pp-jcap,.pp-jcard:focus-within .pp-jcap{opacity:1}
@media (hover:none){.pp-jcard.in-view .pp-jcap{opacity:1}}
@media (prefers-reduced-motion:reduce){.pp-jcap{opacity:1;transition:none}}
/* previous and next, then the door */
.pp-pn{display:flex;justify-content:space-between;gap:var(--sp5,34px);padding:var(--sp6,55px) 0;border-top:.5px solid var(--g2,rgba(186,153,51,.236))}
.pp-pn a{text-decoration:none;font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#ba9933)}
.pp-pn a span{display:block;font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:26px;letter-spacing:0;text-transform:none;color:var(--cashmere,#F3F6F9);margin-top:6px}
.pp-pn a.pp-next{text-align:right;margin-left:auto}
.pp-door{padding:var(--sp7,89px) 0 var(--sp7,89px);text-align:center}
.pp-door p{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(26px,3vw,38px);line-height:1.15;margin:0 0 var(--sp5,34px);color:var(--cashmere,#F3F6F9)}
.pp-btn{display:inline-block;border:.5px solid var(--g2,rgba(186,153,51,.236));padding:15px 34px;font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:12px;letter-spacing:.22em;text-transform:lowercase;color:var(--cashmere,#F3F6F9);text-decoration:none;transition:border-color .3s}
.pp-btn:hover{border-color:var(--gold,#ba9933)}
.pp-notfound{padding:calc(var(--gbx-hdr-h,91px) + var(--sp7,89px)) var(--sp5,34px) var(--sp7,89px);text-align:center;font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:22px;color:var(--dim,rgba(243,246,249,.72))}
.pp-notfound a{color:var(--gold,#ba9933);text-decoration:none}
/* the reveal, gated on the script so it never fails closed */
html.pp-rev-on .pp-rev{opacity:0;transform:translateY(13px);transition:opacity .72s ease,transform .72s var(--ease-enter,cubic-bezier(.22,1,.36,1))}
html.pp-rev-on .pp-rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.pp-rev-on .pp-rev{opacity:1;transform:none;transition:none}
  .pp-jframe video{display:none}
}
@media (max-width:900px){
  .pp-hero{height:58vh}
  .pp-wrap{padding:0 16px}
  .pp-crumb{padding:var(--sp3,13px) 16px}
  .pp-sound{right:16px;bottom:16px}
  .pp-title{padding:var(--sp6,55px) 0 var(--sp5,34px)}
  .pp-why{grid-template-columns:1fr;gap:var(--sp4,21px)}
  .pp-sec{padding-bottom:var(--sp6,55px)}
  .pp-ladder li{grid-template-columns:72px 1fr}
  .pp-pn a span{font-size:20px}
}