/* ==========================================================================
   portfolio.css · the homepage, the Work index and the Covenant Eyes overview
   JasonWalker.design · homepage 9.0.0, 3 October 2026

   The system is the site's own: Carbon ground, Bone ink, Acid used sparingly
   (the role, one action, focus), Radikal for the interface. The work carries
   the colour. One measure: the navigation's content column (1200 px, the same
   page margins), so the name, the films and the captions share one left edge.

   Normal document scrolling. No scroll ownership, no held arrivals, no scenes.
   The order of the homepage: the opening (opening.css), the reel inline, the
   identity, the selected work. Every work plate is a poster with its project's
   reel laid over it, playing while visible (portfolio.js).
   ========================================================================== */

:root{
  --pf-carbon:#171717; --pf-ink:#F2EFE9; --pf-acid:#DFFF00;
  --pf-mute:rgba(242,239,233,.70); --pf-quiet:rgba(242,239,233,.52);
  --pf-rule:rgba(242,239,233,.14); --pf-well:#101010;
  --pf-m:clamp(20px,4.6vw,72px);
  --pf-gap:24px;
}
html.pf-html{background:var(--pf-carbon);-webkit-text-size-adjust:100%}
body.pf-body{margin:0;background:var(--pf-carbon);color:var(--pf-ink);
  font-family:var(--font-brand,'Radikal',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif);
  font-weight:400;font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.pf-body *,.pf-body *::before,.pf-body *::after{box-sizing:border-box}
.pf-body img,.pf-body video{display:block;max-width:100%}
.pf-body :where(h1,h2,h3,h4){color:var(--pf-ink)}
.pf-body li,.pf-body dd,.pf-body dt{color:inherit}
.pf-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pf-m)}
.pf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}
.pf-skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--pf-acid);color:var(--pf-carbon);
  padding:10px 14px;font-weight:500;font-size:14px;text-decoration:none}
.pf-skip:focus{top:12px}
.pf-body a:focus-visible,.pf-body button:focus-visible{outline:2px solid var(--pf-acid);outline-offset:4px}

/* ---- the identity, beneath the reel: the name large, the role, the routes ------------- */
.pf-intro{padding:clamp(44px,7vh,80px) 0 clamp(36px,6vh,64px);border-bottom:1px solid var(--pf-rule);margin-bottom:clamp(44px,7vh,80px)}
.pf-intro__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--pf-gap);align-items:end}
.pf-name{margin:0;font-weight:300;font-size:clamp(52px,7.2vw,112px);line-height:.92;letter-spacing:-.018em;color:var(--pf-ink);text-wrap:balance}
.pf-role{margin:18px 0 0;font-weight:500;font-size:clamp(12px,.95vw,14px);letter-spacing:.22em;text-transform:uppercase;color:var(--pf-acid)}
.pf-intro__grid .pf-actions{margin:0;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:8px}
.pf-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 30px;margin:18px 0 0;padding:0;list-style:none;font-size:15px;font-weight:500}
.pf-actions a,.pf-actions button{font:inherit;color:var(--pf-ink);text-decoration:none;background:none;border:0;padding:4px 0;cursor:pointer;
  border-bottom:1px solid rgba(242,239,233,.32);display:inline-flex;align-items:baseline;gap:8px}
.pf-actions a:hover,.pf-actions button:hover{border-bottom-color:var(--pf-ink)}
.pf-actions .pf-act--reel{color:var(--pf-acid);border-bottom-color:rgba(223,255,0,.42)}
.pf-actions .pf-act--reel:hover{border-bottom-color:var(--pf-acid)}
.pf-act__play{display:inline-block;width:0;height:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent;transform:translateY(-1px)}
.pf-act__dur{color:var(--pf-mute);font-variant-numeric:tabular-nums;font-size:.9em}
.pf-actions .pf-act--mail{color:var(--pf-mute);border-bottom-color:transparent;font-weight:400}
.pf-actions .pf-act--mail:hover{color:var(--pf-ink);border-bottom-color:var(--pf-ink)}
.pf-arrow{display:inline-block;transition:transform .2s ease}
a:hover .pf-arrow{transform:translateX(3px)}

/* ---- the six featured stories --------------------------------------------------------- */
.pf-features{padding:0 0 clamp(20px,4vh,40px)}
.pf-feature{position:relative;margin:0 0 clamp(60px,10vh,112px)}
.pf-feature__link{display:block;color:inherit;text-decoration:none}
.pf-feature__link:focus-visible{outline:none}
.pf-feature__link:focus-visible .pf-media{outline:2px solid var(--pf-acid);outline-offset:4px}
.pf-media{position:relative;width:100%;aspect-ratio:16/9;background:var(--pf-well);overflow:hidden}
.pf-media__poster,.pf-media__poster img,.pf-media__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* every living plate: the film lies over its poster, lets every pointer through to the link, and appears only once it plays */
.pf-media__film,.pf-tri__film,.pf-card__film{opacity:0;transition:opacity .45s ease;pointer-events:none;background:transparent}
[data-state="playing"] > .pf-media__film,[data-state="paused"] > .pf-media__film,[data-state="idle"] > .pf-media__film,
[data-state="playing"] > .pf-tri__film,[data-state="paused"] > .pf-tri__film,[data-state="idle"] > .pf-tri__film,
[data-state="playing"] > .pf-card__film,[data-state="paused"] > .pf-card__film,[data-state="idle"] > .pf-card__film{opacity:1}
.pf-cap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);align-items:baseline;margin-top:22px}
.pf-cap__name{grid-column:1 / span 4;margin:0;font-weight:500;font-size:clamp(18px,1.4vw,21px);line-height:1.2;display:flex;gap:14px;align-items:baseline}
.pf-cap__num{font-weight:400;font-size:13px;color:var(--pf-quiet);font-variant-numeric:tabular-nums;letter-spacing:.04em;min-width:1.6em}
.pf-cap__body{grid-column:5 / span 8}
.pf-cap__title{margin:0;font-weight:300;font-size:clamp(25px,2.3vw,34px);line-height:1.1;letter-spacing:-.006em;color:var(--pf-ink)}
.pf-cap__line{margin:10px 0 0;font-size:17px;line-height:1.45;color:var(--pf-mute);max-width:52ch}
.pf-cap__go{display:inline-flex;gap:8px;margin-top:14px;font-size:14px;font-weight:500;color:var(--pf-ink);padding-bottom:3px;border-bottom:1px solid rgba(242,239,233,.32)}
.pf-feature__link:hover .pf-cap__name span:last-child,.pf-feature__link:focus-visible .pf-cap__name span:last-child{color:var(--pf-acid)}
.pf-feature__link:hover .pf-cap__go{border-bottom-color:var(--pf-ink)}
.pf-feature__link:hover .pf-arrow{transform:translateX(3px)}

/* one quiet control per moving film: pause or play every ambient preview */
.pf-motion{position:absolute;z-index:3;right:12px;top:12px;display:none;align-items:center;gap:8px;height:34px;padding:0 12px;
  border:1px solid rgba(242,239,233,.28);background:rgba(23,23,23,.72);color:var(--pf-ink);border-radius:0;
  font:500 11px/1 var(--font-brand,system-ui);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pf-motion:hover{border-color:rgba(242,239,233,.6)}
.pf-motion__ic{width:9px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.pf-motion[aria-pressed="true"] .pf-motion__ic{border:0;width:0;height:0;border-left:9px solid currentColor;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
/* shown on the film that is playing, paused by it, or held on its poster by it; never on a film that cannot play */
.pf-js .pf-feature[data-film="1"][data-state="playing"] .pf-motion,
.pf-js .pf-feature[data-film="1"][data-state="paused"] .pf-motion,
.pf-js .pf-feature[data-film="1"][data-state="held"] .pf-motion{display:inline-flex}
.pf-js .pf-feature[data-film="1"][data-motion="off"] .pf-motion{display:none}

/* the Covenant Eyes story: three artifacts, one leadership story; each tile is its own living plate */
.pf-tri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.pf-tri__tile{position:relative;aspect-ratio:9/16;background:var(--pf-well);overflow:hidden;margin:0}
.pf-tri__tile img,.pf-tri__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf-feature__link:focus-visible .pf-tri{outline:2px solid var(--pf-acid);outline-offset:4px}

/* ---- after the selection ----------------------------------------------------------------- */
.pf-close{border-top:1px solid var(--pf-rule);padding:clamp(48px,8vh,84px) 0 0}
.pf-allwork{display:inline-flex;align-items:baseline;gap:14px;font-weight:300;font-size:clamp(30px,3.4vw,48px);line-height:1.05;
  color:var(--pf-ink);text-decoration:none;padding-bottom:6px;border-bottom:1px solid rgba(242,239,233,.32)}
.pf-allwork:hover{border-bottom-color:var(--pf-ink)}
.pf-close__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);margin-top:clamp(40px,7vh,72px);align-items:start}
.pf-exp{grid-column:1 / span 5;margin:0;font-size:17px;line-height:1.55;color:var(--pf-mute);max-width:44ch}
.pf-exp a{color:var(--pf-ink);text-decoration:underline;text-decoration-color:rgba(242,239,233,.4);text-underline-offset:3px}
.pf-talk{grid-column:7 / span 6}
.pf-talk__h{margin:0;font-weight:300;font-size:clamp(30px,3.2vw,46px);line-height:1.06;letter-spacing:-.008em}
.pf-talk__mail{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 18px;border:1px solid var(--pf-acid);color:var(--pf-ink);
  text-decoration:none;font-size:15px;font-weight:500;transition:background .2s,color .2s}
.pf-talk__mail:hover{background:var(--pf-acid);color:var(--pf-carbon)}
.pf-about .v-mail{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:12px 18px;border:1px solid var(--pf-acid);color:var(--pf-ink);text-decoration:none;font-size:15px;font-weight:500;transition:background .2s,color .2s}
.pf-about .v-mail:hover{background:var(--pf-acid);color:var(--pf-carbon)}
.pf-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;align-items:center;margin-top:clamp(56px,10vh,104px);
  padding:22px 0 calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--pf-rule);font-size:13px;color:var(--pf-quiet)}
.pf-foot .jw-footnav{color:var(--pf-mute)}

/* ---- the reel, inline: the whole film, muted and looping, with its own quiet controls ------ */
.rl{--rl-bar:56px;position:relative;background:var(--pf-carbon);scroll-margin-top:var(--jw-head-h,64px)}
/* the frame keeps the film's ratio and never exceeds the viewport less the bar and its own controls, so the
   whole picture and its controls are on screen together; its box is reserved before any media arrives */
.rl__frame{position:relative;margin:0 auto;background:#000;overflow:hidden;aspect-ratio:16/9;
  width:min(100%,calc((100vh - var(--jw-head-h,64px) - var(--rl-bar)) * 16 / 9));
  width:min(100%,calc((100svh - var(--jw-head-h,64px) - var(--rl-bar)) * 16 / 9))}
.rl[data-portrait="1"] .rl__frame{aspect-ratio:9/16;
  width:min(100%,calc((100vh - var(--jw-head-h,64px) - var(--rl-bar)) * 9 / 16));
  width:min(100%,calc((100svh - var(--jw-head-h,64px) - var(--rl-bar)) * 9 / 16))}
.rl__video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;outline:0}
.rl__start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:14px;
  padding:16px 22px 16px 18px;background:rgba(23,23,23,.78);border:1px solid rgba(242,239,233,.42);color:var(--pf-ink);border-radius:0;
  font:500 14px/1 var(--font-brand,system-ui);letter-spacing:.04em;cursor:pointer}
.rl__start:hover{border-color:var(--pf-acid)}
.rl__start[hidden]{display:none}
.rl__start-ic{display:inline-block;width:0;height:0;border-left:14px solid var(--pf-acid);border-top:9px solid transparent;border-bottom:9px solid transparent}
.rl__start-d{color:var(--pf-mute);font-variant-numeric:tabular-nums}
.rl__frame[data-state="failed"]::after{content:'The reel could not be loaded. The work below is complete without it.';position:absolute;left:0;right:0;bottom:0;
  padding:14px var(--pf-m);background:rgba(23,23,23,.86);color:var(--pf-mute);font-size:14px}
.rl__bar{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;min-height:var(--rl-bar);width:100%;max-width:1200px;margin:0 auto;padding:8px var(--pf-m)}
.rl__bar[data-state="failed"]{display:none}
.rl__btn{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 12px;background:none;border:1px solid transparent;color:var(--pf-mute);border-radius:0;
  font:500 11px/1 var(--font-brand,system-ui);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.rl__btn:hover{color:var(--pf-ink)}
.rl__btn:first-child{margin-left:-12px}
.rl__btn--restart{color:var(--pf-acid)}
.rl__btn--restart:hover{color:var(--pf-acid);border-color:rgba(223,255,0,.38)}
.rl__ic{display:block;width:16px;height:16px;flex:none}
/* the marks read the section's state: the speaker shows waves with the sound on and a cross with it off; play or pause bars */
.rl__wave{display:none}.rl[data-sound="on"] .rl__wave{display:block}.rl[data-sound="on"] .rl__slash{display:none}
.rl[data-sound="on"] .rl__btn[data-rl="sound"]{color:var(--pf-acid)}
.rl__bars{display:none}.rl[data-playing="1"] .rl__bars{display:block}.rl[data-playing="1"] .rl__tri{display:none}
.rl__time{margin-left:auto;color:var(--pf-quiet);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}
.rl__break{display:none}
.rl__credits{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pf-m) 10px}
.rl__credits summary{cursor:pointer;color:var(--pf-quiet);font-size:13px;padding:6px 0;list-style:none;display:inline-flex;align-items:center;gap:8px}
.rl__credits summary::-webkit-details-marker{display:none}
.rl__credits summary::before{content:'';width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(-45deg);transition:transform .2s}
.rl__credits[open] summary::before{transform:rotate(45deg)}
.rl__credits summary:hover{color:var(--pf-mute)}
.rl__credits ol{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 6px;padding:0;list-style:none;font-size:13px}
.rl__credits button{background:none;border:0;padding:2px 0;color:var(--pf-mute);font:inherit;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(242,239,233,.25);text-underline-offset:3px}
.rl__credits button:hover{color:var(--pf-ink)}
.rl__credits time{color:var(--pf-quiet);font-variant-numeric:tabular-nums;margin-right:6px}
/* full screen: the film fills the screen, the controls stay along the foot, the credits step aside */
.rl:fullscreen,.rl:-webkit-full-screen{background:#000;display:flex;flex-direction:column;justify-content:center;height:100%}
.rl:fullscreen .rl__frame,.rl:-webkit-full-screen .rl__frame{width:min(100%,calc((100vh - var(--rl-bar)) * 16 / 9))}
.rl:fullscreen[data-portrait="1"] .rl__frame,.rl:-webkit-full-screen[data-portrait="1"] .rl__frame{width:min(100%,calc((100vh - var(--rl-bar)) * 9 / 16))}
.rl:fullscreen .rl__credits,.rl:-webkit-full-screen .rl__credits{display:none}

/* ---- the Work index ------------------------------------------------------------------------ */
.pf-wk-head{padding:clamp(32px,6vh,64px) 0 clamp(26px,4.6vh,44px)}
.pf-wk-head__grid{display:flex;align-items:flex-end;justify-content:space-between;gap:20px var(--pf-gap);flex-wrap:wrap}
.pf-wk-h{margin:0;font-weight:300;font-size:clamp(44px,5vw,72px);line-height:.95;letter-spacing:-.012em}
.pf-wk-sub{margin:16px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:var(--pf-mute);max-width:46ch}
/* one control for the whole gallery, in the header, shown once the previews can move */
.pf-motion--page{position:static;right:auto;top:auto;margin-bottom:6px}
.pf-js .pf-motion--page{display:inline-flex}
.pf-motion--page[hidden]{display:none}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,5vh,56px) var(--pf-gap);margin:0;padding:0;list-style:none}
.pf-card{margin:0;scroll-margin-top:calc(var(--jw-head-h,64px) + 24px)}
.pf-card__link{display:block;color:inherit;text-decoration:none}
.pf-card__link:hover,.pf-feature__link:hover{text-decoration:none}
.pf-card__link:focus-visible{outline:none}
.pf-card__media{position:relative;aspect-ratio:16/9;background:var(--pf-well);overflow:hidden}
.pf-card__media img,.pf-card__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pf-card__film{transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.pf-card__link:hover .pf-card__media img,.pf-card__link:focus-visible .pf-card__media img,
.pf-card__link:hover .pf-card__film,.pf-card__link:focus-visible .pf-card__film{transform:scale(1.025)}
.pf-card__link:focus-visible .pf-card__media{outline:2px solid var(--pf-acid);outline-offset:4px}
.pf-card__media .pf-tri{position:absolute;inset:0;padding:0 7%;background:#1f1f1f;gap:6px;align-items:center}
.pf-card__media .pf-tri__tile{aspect-ratio:auto;height:100%}
.pf-card__name{margin:16px 0 0;font-weight:500;font-size:19px;line-height:1.2;display:flex;align-items:baseline;gap:10px}
.pf-card__link:hover .pf-card__name,.pf-card__link:focus-visible .pf-card__name{color:var(--pf-acid)}
.pf-card__rel{margin:6px 0 0;font-size:13px;letter-spacing:.02em;color:var(--pf-quiet)}
.pf-card__idea{margin:8px 0 0;font-size:16px;line-height:1.45;color:var(--pf-mute);max-width:40ch}
.pf-wk-foot{margin-top:clamp(64px,10vh,112px)}

@media (max-width:1100px){
  .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pf-intro__grid{grid-template-columns:1fr;row-gap:28px}
  .pf-intro__grid .pf-actions{padding-bottom:0}
  .pf-cap__name{grid-column:1 / -1}
  .pf-cap__body{grid-column:1 / -1;margin-top:10px}
  .pf-close__grid{grid-template-columns:1fr;row-gap:44px}
  .pf-exp,.pf-talk{grid-column:1 / -1}
}
@media (max-width:640px){
  .pf-grid{grid-template-columns:1fr}
}
/* a phone held upright: the purpose-built 9:16 cut, never a landscape film in a tall box, and never the
   whole screen; the plate keeps its ratio and stops at about three fifths of the screen's height */
@media (max-width:720px) and (orientation:portrait){
  .pf-feature[data-film="1"]{--pf-mw:min(100%,calc(62vh * 9 / 16));--pf-mw:min(100%,calc(62svh * 9 / 16))}
  .pf-feature[data-film="1"] .pf-media{aspect-ratio:9/16;width:var(--pf-mw)}
  .pf-feature[data-film="1"] .pf-motion{right:auto;left:calc(var(--pf-mw) - 8px);transform:translateX(-100%)}
  .pf-tri{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-tri__tile--wide{grid-column:1 / -1;aspect-ratio:16/9}
  .pf-intro{padding-top:36px}
  .pf-name{font-size:clamp(46px,13.5vw,60px)}
  .pf-actions{gap:8px 22px;font-size:15px}
  .pf-cap{margin-top:16px}
  .pf-cap__title{font-size:25px}
  .pf-cap__line{font-size:16px}
  .pf-motion{right:8px;top:8px;height:32px;padding:0 10px}
  .pf-motion--page{height:34px}
  /* an upright phone: the frame is the full width (the picture over the fold on the shortest screens is scrolled, never
     shrunk to a sliver); the controls in two rows: Sound, Pause, Full screen; then Watch from the beginning, the time */
  .rl{--rl-bar:92px}
  .rl__frame,.rl[data-portrait="1"] .rl__frame{width:100%}
  .rl__bar{padding:4px var(--pf-m) 0;gap:0}
  .rl__btn{min-height:44px;padding:0 7px;gap:8px;letter-spacing:.1em}
  .rl__btn:first-child{margin-left:-7px}
  .rl__btn--full{order:3}
  .rl__time{order:4;font-size:11px}
  .rl__break{display:block;order:5;flex-basis:100%;height:0}
  .rl__btn--restart{order:6;margin-left:-7px;white-space:normal;text-align:left;line-height:1.35}
}
@media (prefers-reduced-motion:reduce){
  .pf-media__film,.pf-tri__film,.pf-card__film,.pf-card__media img,.pf-arrow{transition:none}
  .pf-card__link:hover .pf-card__media img,.pf-card__link:focus-visible .pf-card__media img,
  .pf-card__link:hover .pf-card__film,.pf-card__link:focus-visible .pf-card__film{transform:none}
}

/* ---- About (/vitae/): the essentials first, the lenses lower ------------------------------- */
.pf-ab-intro{padding:clamp(32px,6vh,64px) 0 clamp(36px,6vh,64px)}
.pf-ab-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--pf-gap);align-items:start}
.pf-ab-lede{max-width:34ch}
.pf-ab-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px var(--pf-gap);margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--pf-rule)}
.pf-ab-facts div{margin:0}
.pf-ab-facts dt{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-quiet);margin:0 0 6px}
.pf-ab-facts dd{margin:0;font-size:16px;line-height:1.45;color:var(--pf-ink)}
.pf-ab-facts a{color:var(--pf-ink);text-decoration:underline;text-decoration-color:rgba(242,239,233,.4);text-underline-offset:3px}
.pf-ab-facts a:hover{text-decoration-color:var(--pf-ink)}
.pf-ab-sec{border-top:1px solid var(--pf-rule);padding:clamp(40px,7vh,72px) 0}
.pf-ab-h{margin:0 0 26px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pf-mute)}
.pf-ab-h3{margin:44px 0 14px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pf-quiet)}
.pf-ab-ev{margin:0;padding:0;list-style:none}
.pf-ab-ev li{border-top:1px solid var(--pf-rule)}
.pf-ab-ev li:last-child{border-bottom:1px solid var(--pf-rule)}
.pf-ab-ev a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);align-items:baseline;padding:22px 0;color:inherit;text-decoration:none}
.pf-ab-ev__k{grid-column:1 / span 4;font-weight:500;font-size:clamp(18px,1.4vw,21px)}
.pf-ab-ev__t{grid-column:5 / span 7;font-size:17px;line-height:1.5;color:var(--pf-mute)}
.pf-ab-ev .pf-arrow{grid-column:12;justify-self:end;color:var(--pf-mute)}
.pf-ab-ev a:hover .pf-ab-ev__k,.pf-ab-ev a:focus-visible .pf-ab-ev__k{color:var(--pf-acid)}
.pf-ab-roles{display:grid;gap:40px}
.pf-ab-role{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap)}
.pf-ab-role header{grid-column:1 / span 4}
.pf-ab-role h3{margin:0;font-weight:500;font-size:clamp(18px,1.4vw,21px);line-height:1.25}
.pf-ab-role__where{margin:6px 0 0;font-size:14px;color:var(--pf-quiet);line-height:1.45}
.pf-ab-role > p,.pf-ab-role > ul{grid-column:5 / span 8}
.pf-ab-role > p{margin:0;font-size:17px;line-height:1.55;color:var(--pf-ink);max-width:62ch}
.pf-ab-role ul{margin:16px 0 0;padding:0 0 0 18px;font-size:16px;line-height:1.55;color:var(--pf-mute);max-width:64ch}
.pf-ab-role li{margin:0 0 6px}
.pf-ab-list{margin:0;padding:0;list-style:none}
.pf-ab-list li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,2fr);column-gap:var(--pf-gap);padding:12px 0;border-top:1px solid var(--pf-rule);font-size:15px;line-height:1.4}
.pf-ab-li__t{color:var(--pf-ink)}
.pf-ab-li__w{color:var(--pf-mute)}
.pf-ab-li__y{color:var(--pf-quiet);text-align:right;font-variant-numeric:tabular-nums}
.pf-ab-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--pf-gap) * 2)}
.pf-ab-two .pf-ab-list li{grid-template-columns:minmax(0,6fr) minmax(0,4fr) minmax(0,2fr)}
.pf-ab-note{margin:0 0 24px;font-size:16px;line-height:1.5;color:var(--pf-mute);max-width:60ch}
.pf-ab-note a{color:var(--pf-ink);text-decoration:underline;text-decoration-color:rgba(242,239,233,.4);text-underline-offset:3px}
.pf-ab-fn{margin:32px 0 0}
.pf-ab-lens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pf-ab-lens a{display:block;height:100%;padding:18px 18px 20px;border:1px solid var(--pf-rule);color:inherit;text-decoration:none;transition:border-color .2s}
.pf-ab-lens a:hover,.pf-ab-lens a:focus-visible{border-color:var(--pf-acid)}
.pf-ab-lens__t{display:block;font-weight:500;font-size:16px;line-height:1.3}
.pf-ab-lens__d{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--pf-mute)}
.pf-ab-close{padding-top:clamp(40px,7vh,72px)}
.pf-ab-closegrid{margin-top:0}
.pf-ab-closegrid .pf-talk{grid-column:1 / span 8}
@media (max-width:900px){
  .pf-ab-grid{grid-template-columns:1fr;row-gap:20px}
  .pf-ab-ev__k{grid-column:1 / -1}
  .pf-ab-ev__t{grid-column:1 / span 11;margin-top:6px}
  .pf-ab-role header,.pf-ab-role > p,.pf-ab-role > ul{grid-column:1 / -1}
  .pf-ab-role > p{margin-top:12px}
  .pf-ab-two{grid-template-columns:1fr;row-gap:40px}
  .pf-ab-lens{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .pf-ab-facts{grid-template-columns:1fr}
  .pf-ab-list li,.pf-ab-two .pf-ab-list li{grid-template-columns:1fr auto;row-gap:2px}
  .pf-ab-li__t{grid-column:1}
  .pf-ab-li__w{grid-column:1;font-size:14px}
  .pf-ab-li__y{grid-column:2;grid-row:1}
  .pf-ab-lens{grid-template-columns:1fr}
}

/* ---- the Covenant Eyes overview: one leadership story, three chapters ----------------------- */
.pf-ce-head{padding:clamp(32px,6vh,64px) 0 clamp(28px,5vh,48px)}
.pf-ce-eyebrow{margin:0 0 14px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--pf-acid)}
.pf-ce-h1{margin:0;font-weight:300;font-size:clamp(44px,5.4vw,80px);line-height:.95;letter-spacing:-.014em}
.pf-ce-cap{margin:14px 0 0;font-weight:300;font-size:clamp(22px,2.1vw,30px);line-height:1.2;color:var(--pf-ink)}
.pf-ce-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);margin-top:clamp(28px,4.6vh,44px);padding-top:24px;border-top:1px solid var(--pf-rule)}
.pf-ce-role{grid-column:1 / span 7;margin:0;font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--pf-ink);max-width:60ch}
.pf-ce-facts{grid-column:9 / span 4;margin:0;display:grid;gap:16px}
.pf-ce-facts dt{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-quiet);margin:0 0 5px}
.pf-ce-facts dd{margin:0;font-size:15px;line-height:1.5;color:var(--pf-mute)}
.pf-ce-hero{margin:0 0 clamp(36px,6vh,56px)}
.pf-ce-figcap,.pf-ce-fig figcaption{margin-top:12px;font-size:14px;line-height:1.45;color:var(--pf-quiet)}
.pf-ce-chnav{border-top:1px solid var(--pf-rule);border-bottom:1px solid var(--pf-rule)}
.pf-ce-chnav ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pf-gap);margin:0;padding:0;list-style:none}
.pf-ce-chnav a{display:flex;gap:14px;align-items:baseline;padding:20px 0;color:var(--pf-ink);text-decoration:none;font-size:16px;font-weight:500}
.pf-ce-chnav a span{font-size:12px;font-weight:400;color:var(--pf-acid);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.pf-ce-chnav a:hover{color:var(--pf-acid)}
.pf-ce-ch{padding:clamp(56px,10vh,104px) 0 clamp(24px,4vh,40px);scroll-margin-top:calc(var(--jw-head-h,64px) + 8px)}
.pf-ce-ch + .pf-ce-ch{border-top:1px solid var(--pf-rule)}
.pf-ce-chhead{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);align-items:baseline;margin-bottom:clamp(30px,5vh,48px)}
.pf-ce-num{grid-column:1 / span 1;margin:0;font-size:13px;color:var(--pf-acid);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.pf-ce-chhead h2{grid-column:2 / span 11;margin:0;font-weight:300;font-size:clamp(32px,3.6vw,52px);line-height:1.04;letter-spacing:-.01em}
.pf-ce-lead{grid-column:5 / span 8;margin:22px 0 0;font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--pf-mute);max-width:60ch}
.pf-ce-pull{margin:0 0 clamp(32px,5vh,48px);padding:0 0 0 calc((100% + var(--pf-gap)) / 12 * 4);border:0}
.pf-ce-pull p{margin:0;font-weight:300;font-size:clamp(28px,3vw,44px);line-height:1.12;color:var(--pf-ink);max-width:22ch}
.pf-ce-pull footer{margin-top:12px;font-size:13px;color:var(--pf-quiet)}
.pf-ce-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.pf-ce-gallery--two{margin-top:clamp(14px,2vw,24px)}
.pf-ce-fig{margin:0}
.pf-ce-fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--pf-well)}
.pf-ce-fig--wide{grid-column:1 / -1}
.pf-ce-go{margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;font-weight:500}
.pf-ce-go a{color:var(--pf-ink);text-decoration:none;padding-bottom:3px;border-bottom:1px solid rgba(242,239,233,.32)}
.pf-ce-go a:hover{border-bottom-color:var(--pf-ink)}
.pf-ce-split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);align-items:end}
.pf-ce-fig--lead{grid-column:1 / span 8}
.pf-ce-stat{grid-column:9 / span 4;padding-bottom:30px}
.pf-ce-stat__n{margin:0;font-weight:300;font-size:clamp(56px,6.4vw,96px);line-height:.9;letter-spacing:-.02em;color:var(--pf-ink)}
.pf-ce-stat__l{margin:12px 0 0;font-size:16px;line-height:1.45;color:var(--pf-mute);max-width:22ch}
.pf-ce-campaign{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);align-items:center;margin-top:clamp(56px,9vh,96px)}
.pf-ce-campaign > .pf-ce-fig{grid-column:1 / span 7}
.pf-ce-campaign__t{grid-column:9 / span 4}
.pf-ce-campaign--flip > .pf-ce-fig{grid-column:6 / span 7;grid-row:1}
.pf-ce-campaign--flip .pf-ce-campaign__t{grid-column:1 / span 4;grid-row:1}
.pf-ce-kick{margin:0 0 10px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-quiet)}
.pf-ce-campaign__t h3{margin:0;font-weight:400;font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.pf-ce-campaign__t p{font-size:16px;line-height:1.55;color:var(--pf-mute)}
.pf-ce-campaign__t .pf-ce-credit{margin:0;font-size:13px;color:var(--pf-quiet)}
.pf-ce-ba{margin-top:clamp(8px,2vh,16px)}
.pf-ce-ba__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--pf-gap);align-items:start}
.pf-ce-ba__before{grid-column:1 / span 4;padding:20px 0 0;border-top:1px solid var(--pf-rule)}
.pf-ce-ba__before p{margin:0 0 8px;font-size:16px;line-height:1.5;color:var(--pf-mute)}
.pf-ce-ba__before .pf-ce-ba__h{color:var(--pf-ink);font-weight:500}
.pf-ce-ba__after{grid-column:6 / span 7;margin:0;padding:20px 0 0;border-top:1px solid var(--pf-acid)}
.pf-ce-ba__after img{width:100%;height:auto}
.pf-ce-ba__k{margin:0 0 12px!important;font-size:11px!important;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--pf-quiet)!important}
.pf-ce-note{margin:22px 0 0;font-size:16px;line-height:1.5;color:var(--pf-mute);max-width:60ch}
.pf-ce-related{border-top:1px solid var(--pf-rule);padding:clamp(48px,8vh,84px) 0 clamp(20px,4vh,40px)}
.pf-ce-allwork{margin-top:28px}
@media (max-width:900px){
  .pf-ce-role,.pf-ce-facts{grid-column:1 / -1}
  .pf-ce-facts{margin-top:24px}
  .pf-ce-chnav ol{grid-template-columns:1fr;gap:0}
  .pf-ce-chnav li + li{border-top:1px solid var(--pf-rule)}
  .pf-ce-chnav a{padding:14px 0}
  .pf-ce-num{grid-column:1 / -1}
  .pf-ce-chhead h2{grid-column:1 / -1;margin-top:8px}
  .pf-ce-lead{grid-column:1 / -1}
  .pf-ce-pull{padding-left:0}
  .pf-ce-fig--lead,.pf-ce-stat{grid-column:1 / -1}
  .pf-ce-stat{padding:24px 0 0}
  .pf-ce-campaign > .pf-ce-fig,.pf-ce-campaign__t,.pf-ce-campaign--flip > .pf-ce-fig,.pf-ce-campaign--flip .pf-ce-campaign__t{grid-column:1 / -1;grid-row:auto}
  .pf-ce-campaign__t{margin-top:22px}
  .pf-ce-ba__before,.pf-ce-ba__after{grid-column:1 / -1}
  .pf-ce-ba__after{margin-top:22px}
}
@media (max-width:640px){
  .pf-ce-gallery{grid-template-columns:1fr}
}