/* gbx-circle-connects.css · the Hero Flow and the Circle Connects · one kit component, every forum.
   Ruled by Patrick 2026-10-15: "BILS DDIF GBX MEVO is the first the rest after".
   Seven lines:
     1  the hero holds 82vh at desktop and 58vh on a phone, full bleed, GOLDFINGER 24 s4.2
     2  nothing is written over a frame: the type frames stand alone, the crumb and the seal sit below
     3  the film and the poster sit at center 15%, so a head is never cut
     4  the ATOM draws on its own canvas and never carries a name; the card beneath speaks
     5  the card portrait is the person's link and rests in the record grade, GOLDFINGER 9.10
     6  the hover film is the kit's, gbx-hover-film.js, and the card only marks the frame it plays in
     7  reduced motion gets the poster and the card, never the sequence
   The person page flow plays its layers once on its own type stage, then leaves the film.
   The hero breakpoint is 900px, which is BILS and DDIF. CGTI holds 768px and takes its own value
   in the commit that adds it.
   SOURCE: 00_canonical/gbx-circle-connects.css. Every forum copy is byte identical. npm run kit. */

[data-gbx-circle-connects]{display:block;width:100%}
.gcc-heroblock{display:grid;width:100%}
.gcc-heroblock>.gcc-stage{grid-area:1/1}
.gcc-stage{position:relative;width:100%;overflow:hidden;background:var(--deep,#161313)}
/* only the component's own layers fill the stage. The header kit's sound control lives in the media stage
   too, and stretched to the stage its dark pill covered the film and every frame */
.gcc-stage>.gcc-frame,.gcc-stage>.gcc-still,.gcc-stage>.gcc-film,.gcc-stage>.gcc-atom,.gcc-stage>.gcc-blink{position:absolute;inset:0}
.gcc-type{z-index:2;pointer-events:none;background:transparent}
.gcc-media,.gcc-type{height:82vh}
@supports(height:82svh){.gcc-media,.gcc-type{height:82svh}}
@media(max-width:900px){.gcc-media,.gcc-type{height:58vh}@supports(height:58svh){.gcc-media,.gcc-type{height:58svh}}}

.gcc-atom{width:100%;height:100%;display:block;opacity:0;transition:opacity .9s ease-out}
.gcc-atom.on{opacity:1}
/* the hero ATOM is drawn, never touched: a click passes through to the film's own play control */
.gcc-media .gcc-atom{pointer-events:none}
.gcc-still,.gcc-film{width:100%;height:100%;object-fit:cover;object-position:center 15%;opacity:0;transition:opacity 1s ease-out}
.gcc-still.on,.gcc-film.on{opacity:1}
.gcc-blink{display:grid;place-items:center;opacity:0;transition:opacity .7s ease-out;pointer-events:none}
.gcc-blink.on{opacity:1}
.gcc-blink img{width:min(26%,180px);height:auto;transform-origin:50% 50%}
.gcc-blink img.shut{animation:gcc-shut .26s ease-in-out 1}
@keyframes gcc-shut{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.06)}}

.gcc-links{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .6s ease-out}
.gcc-links.on{opacity:1}
.gcc-links.on .gcc-node{pointer-events:auto}
.gcc-node{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;outline:none}
.gcc-node:focus-visible{box-shadow:0 0 0 1px var(--gold,#ba9933)}
/* a leader drawn as their company logo in the hero ATOM: place() sizes the hit area to the mark it draws */
.gcc-node.gcc-logo{width:64px;height:40px;margin:-20px 0 0 -32px;border-radius:0}
.gcc-frame{display:grid;place-items:center;text-align:center;padding:5%;opacity:0;transition:opacity .6s ease-out;pointer-events:none;background:var(--deep,#161313)}
.gcc-frame.on{opacity:1;transition-delay:.6s}
.gcc-frame p{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(40px,5.4vw,76px);line-height:1.02;margin:0;letter-spacing:-.015em;text-wrap:balance;color:var(--cashmere,#F3F6F9)}
.gcc-type>.gcc-frame{padding-top:calc(5% + var(--gcc-hdr,0px))}
.gcc-frame.three p{font-size:clamp(30px,4vw,52px);line-height:1.18}
.gcc-frame.three p span{display:block}
.gcc-frame p span.g{color:var(--gold,#ba9933)}

.gcc-under{min-height:var(--sp6,55px);display:grid;place-items:center;text-align:center;gap:var(--sp2,8px);width:100%;padding:var(--sp4,21px) var(--sp4,21px) 0}
.gcc-crumb{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.2em;color:rgba(243,246,249,.52);margin:0;opacity:0;transition:opacity .6s ease-out}
.gcc-crumb.on{opacity:1}
.gcc-seal{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(24px,3.2vw,38px);line-height:1;margin:0;color:var(--cashmere,#F3F6F9);opacity:0;transition:opacity 1.1s ease-out}
.gcc-seal.on{opacity:1}
.gcc-row{display:flex;justify-content:center;padding:var(--sp4,21px) var(--sp4,21px) 0}
.gcc-btn{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#ba9933);background:transparent;border:.5px solid var(--g2,rgba(186,153,51,.236));padding:var(--sp3,13px) var(--sp4,21px);cursor:pointer}
.gcc-btn:hover{border-color:var(--gold,#ba9933)}
.gcc-btn:focus-visible{outline:1px solid var(--gold,#ba9933);outline-offset:3px}

/* the Circle Connects */
[data-gbx-circle-connects="connects"]{display:grid;gap:var(--sp4,21px);justify-items:center;max-width:1180px;margin:0 auto;padding:var(--sp6,55px) var(--sp4,21px) var(--sp6,55px)}
.gcc-eyebrow{font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#ba9933);margin:0}
.gcc-h2{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1.02;margin:0;text-align:center;letter-spacing:-.015em;text-wrap:balance;color:var(--cashmere,#F3F6F9)}
.gcc-h2 em{font-style:italic;color:var(--gold,#ba9933)}
.gcc-live{width:min(100%,128vh);aspect-ratio:16/9}
.gcc-live .gcc-atom{cursor:default}
.gcc-card{width:min(100%,900px);display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:var(--sp5,34px);align-items:start;min-height:15em}
.gcc-card.rest{grid-template-columns:1fr;justify-items:center;text-align:center}
.gcc-card.rest .gcc-pop{display:none}
.gcc-pop{min-height:1px}
.gcc-pic{display:block;text-decoration:none;color:inherit}
.gcc-pic .gbx-hf-frame{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--stone,#211D1D)}
.gcc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;display:block;filter:grayscale(1) contrast(1.06) brightness(.55);transition:filter .45s ease}
.gcc-pic:hover img,.gcc-pic.is-playing img{filter:grayscale(1) contrast(1.06) brightness(.82)}
.gcc-text{display:grid;gap:var(--sp3,13px);align-content:start}
.gcc-card.rest .gcc-text{justify-items:center}
.gcc-who{margin:0;display:grid;gap:4px;min-height:1.7em;font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300}
.gcc-who b{font-weight:400;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--cashmere,#F3F6F9)}
.gcc-who .gcc-label{font-size:11px;letter-spacing:.2em;color:var(--gold,#ba9933)}
.gcc-who .gcc-title{font-size:12px;letter-spacing:.06em;color:rgba(243,246,249,.72)}
.gcc-lines{display:grid;gap:var(--sp2,8px);align-content:start;min-height:8.5em}
.gcc-lines>*{margin:0;opacity:0;animation:gcc-arrive .8s ease-out forwards}
.gcc-lines i{font-style:normal;font-family:var(--sans,'Jost',system-ui,sans-serif);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#ba9933)}
.gcc-lines .n{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-.015em;color:var(--cashmere,#F3F6F9);text-wrap:balance}
.gcc-lines .s,.gcc-lines .sub{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:400;font-size:clamp(19px,2.3vw,28px);line-height:1.3;text-wrap:balance}
.gcc-lines .s{color:var(--cashmere,#F3F6F9)}
.gcc-lines .sub{color:rgba(243,246,249,.72)}
.gcc-card.rest .gcc-lines .n{color:rgba(243,246,249,.72);font-size:clamp(24px,3.2vw,38px)}
.gcc-card.rest .gcc-lines .n.g{color:var(--gold,#ba9933)}
.gcc-card.rest .gcc-lines>*{animation:gcc-float 2.4s ease-in-out forwards}
@keyframes gcc-float{0%{opacity:0;transform:translateY(8px)}22%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@keyframes gcc-arrive{to{opacity:1}}
@media(max-width:900px){.gcc-live{aspect-ratio:1/1}.gcc-card{grid-template-columns:1fr;justify-items:center;text-align:center}.gcc-pop{width:min(60%,220px)}.gcc-text{justify-items:center}}
/* the person page flow: its own type stage inside the person hero, which covers the film and then leaves it */
.pp-hero .gcc-pflow{position:absolute;inset:0;height:auto;z-index:1;background:var(--deep,#161313);opacity:0;transition:opacity 1.2s ease-out}
.pp-hero .gcc-pflow.on{opacity:1}
.gcc-pframe p{display:grid;gap:var(--sp3,13px);justify-items:center;max-width:min(100%,30ch);font-size:clamp(28px,3.6vw,48px);line-height:1.15;text-wrap:balance}
.gcc-pframe p i,.gcc-plist i{font-style:normal;font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold,#ba9933)}
.gcc-pframe p .sub{font-size:clamp(19px,2.3vw,28px);color:rgba(243,246,249,.72)}
.gcc-plist ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp4,21px)}
.gcc-plist li{display:grid;gap:var(--sp2,8px)}
.gcc-plist span{font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(22px,2.6vw,32px);line-height:1.2;color:var(--cashmere,#F3F6F9)}
.gcc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.gcc-atom,.gcc-still,.gcc-film,.gcc-frame,.gcc-crumb,.gcc-seal,.gcc-blink{transition:none}.gcc-blink img.shut{animation:none}.gcc-lines>*{animation:none;opacity:1}.gcc-card.rest .gcc-lines>*{animation:none;opacity:1}}
/* the Ring, from the Hero Flow prototype v47, ruled by Patrick 2026-10-16 */
[data-gbx-circle-connects="ring"]{display:block;max-width:1180px;margin:0 auto;padding:var(--sp6,55px) var(--sp4,21px) var(--sp6,55px)}
.gcc-rh{margin:0 0 var(--sp4,21px);text-align:center;font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(30px,4vw,52px);line-height:1.1;color:var(--cashmere,#F3F6F9);transition:opacity .45s ease,transform .45s ease,color .6s ease}
.gcc-rh.out{opacity:0;transform:translateY(6px)}
.gcc-rh.g{color:var(--gold,#ba9933)}
.gcc-ring{--cw:240px;--ch:410px;position:relative;width:100%;height:min(62vw,560px);perspective:1800px;perspective-origin:50% 40%;overflow:hidden;touch-action:pan-y;cursor:grab;outline:none}
.gcc-ring:active{cursor:grabbing}
.gcc-ring:focus-visible{outline:1px solid var(--gold,#ba9933);outline-offset:-4px}
.gcc-rtrack{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.gcc-r3{position:absolute;width:var(--cw);left:calc(var(--cw) / -2);top:calc(var(--ch) / -2);display:grid;gap:var(--sp2,8px);text-decoration:none;color:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.gcc-r3:focus-visible{outline:1px solid var(--gold,#ba9933);outline-offset:4px}
.gcc-rimg{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--deep,#161313)}
.gcc-rimg img,.gcc-rimg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:grayscale(1) contrast(1.06) brightness(.82)}
/* the card grade, Brandmaster kit v30, 16 October: the still mono .55 at rest, the film .82 on hover */
/* one eye, GOLDFINGER 20.10: the house film and its eye poster are a mark, never graded */
.gcc-rimg img[src*="gbx-circle-intro-holder"],.gcc-rimg video[src*="gbx-circle-intro-holder"],.gcc-film[src*="gbx-circle-intro-holder"],.gcc-still[src*="gbx-circle-intro-holder"]{filter:none!important}
.gcc-rimg img{filter:grayscale(1) contrast(1.06) brightness(.55);transition:filter .45s ease}
.gcc-r3:hover .gcc-rimg img,.gcc-r3.playing .gcc-rimg img{filter:grayscale(1) contrast(1.06) brightness(.82)}
.gcc-rimg video{opacity:0;transition:opacity .45s ease}
.gcc-r3.playing .gcc-rimg video{opacity:1}
.gcc-rst{position:absolute;inset:0;display:grid;align-content:center;gap:var(--sp3,13px);padding:var(--sp4,21px);background:var(--deep,#161313);opacity:0;transition:opacity .9s cubic-bezier(.2,.7,.2,1)}
.gcc-r3.m .gcc-rst{opacity:1}
.gcc-r3.playing .gcc-rst{opacity:0}
.gcc-rn{display:block;font-family:var(--serif,'Cormorant',Georgia,serif);font-weight:300;font-size:clamp(26px,3vw,40px);line-height:1.05;color:var(--gold,#ba9933);letter-spacing:-.01em;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .9s ease,transform .9s ease,filter .9s ease}
.gcc-r3.m .gcc-rn{opacity:1;transform:none;filter:none}
.gcc-rl{display:block;font-family:var(--serif,'Cormorant',Georgia,serif);font-style:italic;font-weight:300;font-size:clamp(15px,1.5vw,19px);line-height:1.3;color:rgba(243,246,249,.72);text-wrap:balance;opacity:0;transform:translateY(8px);filter:blur(4px);transition:opacity .9s ease .2s,transform .9s ease .2s,filter .9s ease .2s}
.gcc-r3.s .gcc-rl{opacity:1;transform:none;filter:none}
.gcc-rw{display:block;margin:0;font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(243,246,249,.52);border-top:.5px solid rgba(186,153,51,.236);padding-top:var(--sp2,8px)}
.gcc-rw b{display:block;font-weight:400;color:var(--gold,#ba9933);margin-bottom:5px}
.gcc-rw span{display:block}
.gcc-rdots{display:flex;gap:var(--sp2,8px);justify-content:center;margin:var(--sp3,13px) 0 0}
.gcc-rdots i{width:5px;height:5px;border-radius:50%;background:rgba(186,153,51,.236);transition:background .45s ease}
.gcc-rdots i.on{background:var(--gold,#ba9933)}
.gcc-rstatic .gcc-ring{height:auto;perspective:none;overflow:visible;cursor:default}
.gcc-rstatic .gcc-rtrack{position:static;width:auto;height:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--sp4,21px)}
.gcc-rstatic .gcc-r3{position:static;width:auto}
.gcc-rstatic .gcc-rst{position:static;opacity:1;background:none;padding:var(--sp2,8px) 0 0}
.gcc-rstatic .gcc-rn,.gcc-rstatic .gcc-rl{opacity:1;transform:none;filter:none}
.gcc-rstatic .gcc-rdots{display:none}
/* the signature, Brandmaster 2026-10-16, kit v18 section 08: the name in wordmark caps and gold, the role and company
   in stamp and dim, the room and year in stamp and dim2. One module on every leader card */
.gcc-sig{display:grid;gap:4px;font-family:var(--sans,'Jost',system-ui,sans-serif);font-weight:300;text-transform:none}
.gcc-sig b{font-weight:400;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold,#ba9933)}
.gcc-sig .gcc-sr1{font-size:11px;letter-spacing:.06em;color:rgba(243,246,249,.72)}
.gcc-sig .gcc-sr2{font-size:10px;letter-spacing:.2em;color:rgba(243,246,249,.52)}
.gcc-rw .gcc-sig{text-transform:none;letter-spacing:0}
.gcc-node .gcc-sig{position:absolute;left:50%;top:100%;transform:translateX(-50%);white-space:nowrap;text-align:center;justify-items:center;opacity:0;transition:opacity .3s ease-out;pointer-events:none}
.gcc-node:hover .gcc-sig,.gcc-node:focus-visible .gcc-sig{opacity:1}
/* a leader's own reel on hover in the hero, 15 s, under the signature */
.gcc-reel{position:absolute;inset:0;z-index:1}
/* the card's forum mark, the home forum for a borrowed voice, ruled by Patrick 2026-10-16 */
.gcc-sig .gcc-sr2{display:flex;align-items:center;gap:var(--sp2,8px)}
.gcc-node .gcc-sig .gcc-sr2,.gcc-card.rest .gcc-sig .gcc-sr2{justify-content:center}
.gcc-sic{width:18px;height:18px;object-fit:contain;flex:none}

/* the leader's card in the On the Record hero, Patrick 2026-10-17: the still with the leader's own film, the signature,
   then the layers. It stands beside the leader, the ATOM stays, and the node's own label gives way to it */
.gcc-hero.gcc-carded .gcc-node .gcc-sig{display:none}
.gcc-hcard{position:absolute;top:50%;right:4%;z-index:3;width:min(400px,42%);display:grid;grid-template-columns:132px 1fr;gap:var(--sp3,13px);align-items:start;padding:var(--sp3,13px);background:var(--deep,#161313);transform:translateY(-50%);opacity:0;transition:opacity .45s ease-out;pointer-events:none}
.gcc-hcard.l{right:auto;left:4%}
.gcc-hcard.on{opacity:1}
.gcc-hframe{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone,#211D1D)}
.gcc-hframe img,.gcc-hframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:grayscale(1) contrast(1.06) brightness(.82)}
.gcc-hframe video{opacity:0;transition:opacity .45s ease-out}
.gcc-hframe video.on{opacity:1}
.gcc-hframe video[src*="gbx-circle-intro-holder"]{filter:none}
.gcc-hcard .gcc-lines{min-height:0}
.gcc-hcard .gcc-lines .s,.gcc-hcard .gcc-lines .sub{font-size:clamp(15px,1.35vw,19px)}
.gcc-hcard .gcc-lines .n{font-size:clamp(24px,2.4vw,34px)}
@media (max-width:600px){.gcc-hcard,.gcc-hcard.l{top:auto;bottom:3%;left:4%;right:4%;width:auto;grid-template-columns:96px 1fr;transform:none}}
@media (prefers-reduced-motion:reduce){.gcc-hcard{transition:none}}