/* Connected learning story: contained, tactile and useful without animation. */
.connection-story{--connection-accent:var(--emerald,var(--blue,#3d5677));--connection-soft:var(--mint,#eaf0e9);--connection-position:0;margin-top:42px;border:1px solid var(--line,#d8dcd9);border-radius:24px;background:var(--white,#fffdfa);overflow:hidden;isolation:isolate}.connection-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 30px;border-bottom:1px solid var(--line,#d8dcd9)}.connection-invitation{font-size:.75rem;font-weight:600;letter-spacing:.02em;color:var(--connection-accent)}.connection-view-label{font-size:.68rem;color:var(--muted,#647181);text-align:right}.connection-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding:25px 24px 19px;position:relative;background:var(--paper,#f6f3ed)}.connection-picker::before{content:'';height:1px;background:var(--line,#d8dcd9);position:absolute;top:43px;left:10%;right:10%;z-index:0}.connection-tab{position:relative;z-index:1;display:flex;align-items:center;flex-direction:column;gap:10px;border:0;background:none;padding:0 8px 5px;min-height:86px;font-size:.76rem;font-weight:500;line-height:1.4;color:var(--muted,#647181)}.connection-tab-number{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line,#d8dcd9);border-radius:50%;background:var(--paper,#f6f3ed);font-size:.72rem;transition:background .2s,color .2s,transform .2s}.connection-tab-label{max-width:130px;text-align:center}.connection-tab[aria-selected=true]{color:var(--connection-accent);font-weight:650}.connection-tab[aria-selected=true] .connection-tab-number{background:var(--connection-accent);border-color:var(--connection-accent);color:white;box-shadow:0 0 0 5px var(--connection-soft);transform:translateY(-1px)}.connection-tab:hover .connection-tab-number{border-color:var(--connection-accent)}.connection-tab:focus-visible{outline:3px solid #a76329;outline-offset:5px;border-radius:8px}.connection-panel{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:45px;padding:48px 52px;border-bottom:1px solid var(--line,#d8dcd9);scroll-margin-top:30px}.connection-panel:last-child{border-bottom:0}.connection-copy{max-width:470px}.connection-kicker{display:flex;align-items:center;gap:12px;margin:0 0 23px;font-size:.7rem;font-weight:600;line-height:1.5;color:var(--connection-accent)}.connection-kicker>span{font-family:var(--serif,Georgia,serif);font-size:1.6rem;line-height:1;font-weight:400;opacity:.6}.connection-copy h3{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:clamp(2rem,3vw,3rem);line-height:1.1;letter-spacing:-.035em}.connection-intro{font-size:.97rem;line-height:1.85;margin-top:25px;color:var(--ink,#253b55)}.connection-detail{font-size:.8rem;line-height:1.85;margin-top:18px;color:var(--muted,#647181);max-width:420px}.connection-action{margin-top:23px}.connection-action .text-link{font-size:.82rem;margin-top:0}.connection-visual{position:relative;display:grid;place-items:center;min-width:0;padding:22px 15px;background:var(--connection-soft);border-radius:150px 150px 18px 18px;overflow:hidden}.connection-visual .connection-image{z-index:1;width:min(100%,290px);max-width:290px;margin:0}.connection-image .image-zoom{width:100%;border:1px solid #8e9d9666;border-radius:9px;background:var(--paper,#f6f3ed);box-shadow:0 15px 38px #18352b13;overflow:hidden}.connection-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}.connection-image figcaption{font-size:.66rem;text-align:center;line-height:1.6;padding-inline:4px;color:var(--ink,#253b55)}.connection-orbit{position:absolute;left:-50px;right:-50px;border:1px solid #66827125;border-radius:50%;height:240px;pointer-events:none}.connection-orbit-one{top:65px;transform:rotate(-22deg)}.connection-orbit-two{bottom:80px;transform:rotate(20deg)}.connection-footer{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:22px 30px;border-top:1px solid var(--line,#d8dcd9);background:var(--paper,#f6f3ed)}.connection-disclosure{font-size:.67rem;line-height:1.7;max-width:490px;margin:0;color:var(--muted,#647181)}.connection-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.connection-controls button{min-height:44px;border-radius:24px;padding:9px 17px;font-size:.75rem;display:inline-flex;justify-content:center;align-items:center;gap:12px;border:1px solid var(--connection-accent);background:var(--connection-accent);color:white}.connection-controls .connection-back{background:transparent;color:var(--connection-accent);border-color:var(--line,#d8dcd9)}.connection-controls button:disabled{opacity:.4;cursor:default}.connection-controls button:not(:disabled):hover{box-shadow:0 3px 12px #18352b18}.connection-story[data-connection-ready=true] .connection-panel{border-bottom:0;animation:connection-arrive .23s ease-out}.connection-story[data-connection-ready=true] .connection-stage{min-height:650px}.connection-panel:focus-visible{outline:3px solid #a76329;outline-offset:-5px}.connection-story [hidden]{display:none!important}@keyframes connection-arrive{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1100px){.connection-visual .connection-image{width:300px;max-width:300px}}
@media(max-width:1000px){.connection-panel{gap:28px;padding:34px 30px}.connection-visual{padding:20px 10px}.connection-visual .connection-image{width:280px;max-width:280px}.connection-copy h3{font-size:2.25rem}.connection-footer{align-items:flex-start;gap:20px}.connection-disclosure{max-width:330px}.connection-controls{flex-wrap:wrap;justify-content:flex-end}.connection-story[data-connection-ready=true] .connection-stage{min-height:650px}}
@media(max-width:700px){.connection-story{border-radius:20px;margin-top:28px}.connection-topline{padding:19px 20px;gap:14px}.connection-invitation{font-size:.68rem;max-width:170px}.connection-view-label{font-size:.59rem;max-width:145px}.connection-picker{padding:20px 8px 12px}.connection-picker::before{top:37px}.connection-tab{padding:0 3px 5px;gap:8px;min-height:83px;font-size:.58rem}.connection-tab-number{width:32px;height:32px;font-size:.65rem}.connection-tab-label{max-width:75px}.connection-tab[aria-selected=true] .connection-tab-number{box-shadow:0 0 0 4px var(--connection-soft)}.connection-panel{grid-template-columns:1fr;gap:28px;padding:29px 22px 24px}.connection-copy{max-width:none}.connection-copy h3{font-size:2.1rem;max-width:370px}.connection-kicker{font-size:.65rem;margin-bottom:18px;gap:10px}.connection-intro{font-size:.87rem;margin-top:20px}.connection-detail{font-size:.75rem;margin-top:15px;max-width:none}.connection-action{margin-top:17px}.connection-action .text-link{font-size:.77rem}.connection-visual{width:100%;max-width:390px;margin:auto;padding:24px 10px 15px;border-radius:120px 120px 14px 14px}.connection-visual .connection-image{width:min(100%,270px);max-width:270px}.connection-image figcaption{font-size:.61rem}.connection-footer{flex-direction:column;padding:20px;gap:20px}.connection-disclosure{max-width:none;font-size:.63rem}.connection-controls{width:100%;justify-content:space-between;flex-wrap:nowrap}.connection-controls button{font-size:.68rem;padding:9px 13px;gap:8px}.connection-story[data-connection-ready=true] .connection-stage{min-height:0}}
@media(max-width:360px){.connection-panel{padding-inline:12px}.connection-visual{padding-inline:4px}.connection-visual .connection-image{width:250px;max-width:100%}.connection-tab{font-size:.54rem}.connection-topline{padding-inline:14px}.connection-controls{gap:8px}.connection-controls button{padding-inline:10px;font-size:.63rem}}
@media(prefers-reduced-motion:reduce){.connection-story *, .connection-story *::before,.connection-story *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
