1<!DOCTYPE html> 2<html lang="en" data-theme="light"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="preload" href="assets/logomark.svg" as="image"> 7
7<script>if(sessionStorage.getItem("ptr_active")){document.documentElement.classList.add("ptr-cover");setTimeout(function(){document.documentElement.classList.remove("ptr-cover");var p=document.querySelector(".ptr__panel");if(p)p.style.transform="translateY(-100%)"},1500)}</script>
7 8 <title>About â NCEA</title> 9 <meta name="description" content="About the National Center for Energy Analytics. Independent, data-driven energy research."> 10
10<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
10 11
11<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
11 12 <link rel="stylesheet" href="shared/components.css"> 13 <link rel="stylesheet" href="shared/global-nav.css"> 14 <link rel="stylesheet" href="shared/island-nav.css"> 15 <style> 16 @font-face{font-family:'Signifier';src:url('assets/Signifier_Light-normal-400-100.ttf') format('truetype');font-weight:300;font-display:swap} 17 @font-face{font-family:'Neue Montreal';src:url('assets/PPNeueMontrealArabic-Regular.otf') format('opentype');font-weight:400;font-display:swap} 18 html[data-theme="light"]{ 19 --font-display:'Signifier',Georgia,serif;--font-body:'Neue Montreal',-apple-system,sans-serif; 20 --ease:cubic-bezier(0.16,1,0.3,1); 21 --bg:#f8f5e7;--bg-warm:#f0ebe4;--bg-card:#ffffff;--bg-dark:#1F1F23;--bg-muted:#f5f4f1; 22 --text:#1a1a1a;--text-dim:rgba(26,26,26,0.65);--text-muted:rgba(26,26,26,0.4);--text-on-dark:#faf9f7; 23 --border:rgba(26,26,26,0.1);--border-dark:rgba(26,26,26,0.15); 24 --accent:#1a1a1a;--tag-bg:rgba(26,26,26,0.04);--green:#CFFE85; 25 --section-py:clamp(80px,10vw,140px);--section-px:clamp(24px,6vw,120px); 26 --gap-lg:clamp(40px,5vw,64px); 27 } 28 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} 29 html{scroll-behavior:smooth} 30 body{overflow-x:hidden;font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased} 31 img{max-width:100%;display:block}a{text-decoration:none;color:inherit} 32 svg{flex-shrink:0} 33 34 .btn{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:0 18px 0 18px;font-size:13px;font-family:var(--font-body);font-weight:500;cursor:pointer;transition:all .25s var(--ease);border:none;letter-spacing:0.02em} 35 .btn svg{width:14px;height:14px} 36 .btn-primary{background:var(--text);color:var(--bg)}.btn-primary:hover{opacity:.85;transform:translateY(-1px)} 37 .btn--outline{background:transparent;border:1px solid var(--border-dark);color:var(--text)}.btn--outline:hover{background:var(--text);color:var(--bg);border-color:var(--text)} 38 39 /* NAV overrides */ 40 .top-nav--inner:not(.scrolled) .nav-logo img{filter:none!important} 41 .top-nav--inner:not(.scrolled) .nav-item{color:var(--text-dim)!important} 42 .top-nav--inner:not(.scrolled) .nav-item:hover{color:var(--text)!important} 43 .top-nav--inner:not(.scrolled) .nav-index{color:var(--text-dim)!important} 44 .top-nav--inner:not(.scrolled) .nav-search-trigger svg{color:var(--text-dim)!important} 45 .top-nav--inner:not(.scrolled) .theme-toggle svg{color:var(--text-dim)!important} 46 .top-nav--inner:not(.scrolled) .nav-subscribe{color:var(--text-dim)!important} 47 .top-nav--inner:not(.scrolled) .nav-cta{background:var(--text)!important;color:var(--bg)!important} 48 .top-nav--inner:not(.scrolled) .nav-text-link{color:var(--text-dim)!important} 49 .top-nav--inner:not(.scrolled) .nav-icon-btn{color:var(--text-dim)!important} 50 .top-nav--inner:not(.scrolled) .nav-hamburger .ham-dark{opacity:1!important} 51 .top-nav--inner:not(.scrolled) .nav-hamburger .ham-white{opacity:0!important} 52 53 /* ====== HERO ====== */ 54 .hero{background:var(--bg);padding:clamp(160px,18vh,240px) var(--section-px) clamp(100px,12vh,160px);min-height:85vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:visible;position:relative;z-index:1} 55 .hero__title{font-family:var(--font-display);font-size:clamp(48px,6.5vw,100px);font-weight:300;line-height:1.05;letter-spacing:-0.03em;max-width:900px;overflow:visible;position:relative;z-index:2} 56 .hero__title .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:0.18em} 57 .hero__title .word-inner{display:inline-block} 58 .hero__subtitle{font-family:var(--font-body);font-size:clamp(16px,1.4vw,19px);color:var(--text-dim);line-height:1.65;max-width:540px;margin-top:32px} 59 60 /* ====== INTRO â Full-bleed photo with sliding panel ====== */ 61 .intro{position:relative;width:100%;min-height:85vh;overflow:hidden} 62 .intro__bg{position:absolute;inset:0} 63 .intro__bg img{width:100%;height:120%;object-fit:cover;filter:saturate(0.6) brightness(0.55);will-change:transform} 64 .intro__panel{position:absolute;top:0;left:0;width:clamp(380px,44%,600px);height:100%;background:#f8f5e7;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(40px,5vw,72px);z-index:2} 65 .intro__label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,26,26,0.4);margin-bottom:24px;display:flex;align-items:center;gap:12px} 66 .intro__label::before{content:'';width:32px;height:1px;background:rgba(26,26,26,0.25)} 67 .intro__heading{font-family:var(--font-display);
67font-size:clamp(32px,3.5vw,52px);font-weight:300;line-height:1.1;letter-spacing:-.025em;margin-bottom:20px;color:#1a1a1a} 68 .intro__body{font-size:clamp(15px,1.2vw,17px);line-height:1.75;color:rgba(26,26,26,0.6);max-width:460px;margin-bottom:32px} 69 .intro__link{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#1a1a1a;transition:gap 0.25s var(--ease);text-decoration:none} 70 .intro__link:hover{gap:12px} 71 .intro__link svg{width:15px;height:15px} 72 @media(max-width:900px){.intro__panel{width:100%;background:rgba(248,245,231,0.92)}} 73 74 /* ====== MISSION CARD ====== */ 75 .mission{padding:var(--section-py) var(--section-px);max-width:1400px;margin:0 auto} 76 .mission__card{display:grid;grid-template-columns:1.1fr 1fr;background:#BADBEE;border-radius:16px;overflow:hidden;min-height:420px;cursor:pointer;transition:transform 0.5s var(--ease)} 77 .mission__card:hover{transform:scale(0.995)} 78 .mission__image{position:relative;overflow:hidden} 79 .mission__image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(0.7) brightness(0.55);transition:transform 0.8s var(--ease)} 80 .mission__card:hover .mission__image img{transform:scale(1.04)} 81 .mission__content{padding:clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:center;gap:20px;color:#1a1a1a} 82 .mission__label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(26,26,26,0.4);display:flex;align-items:center;gap:10px} 83 .mission__label::before{content:'';width:16px;height:1px;background:rgba(26,26,26,0.25)} 84 .mission__title{font-family:var(--font-display);font-size:clamp(26px,3vw,38px);font-weight:300;line-height:1.15;color:#1a1a1a} 85 .mission__desc{font-size:16px;line-height:1.7;color:rgba(26,26,26,0.55);max-width:440px} 86 .mission__cta{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:rgba(26,26,26,0.5);margin-top:8px;transition:color 0.3s,gap 0.3s} 87 .mission__card:hover .mission__cta{color:#1a1a1a;gap:14px} 88 .mission__cta svg{width:16px;height:16px} 89 @media(max-width:768px){.mission__card{grid-template-columns:1fr}.mission__image{min-height:280px}} 90 91 /* ====== VALUES â Simple numbered cards ====== */ 92 .values{background:var(--bg-dark);padding:clamp(80px,10vw,140px) var(--section-px)} 93 .values__inner{max-width:1440px;margin:0 auto} 94 .values__label{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:rgba(248,245,231,0.3);margin-bottom:clamp(48px,6vw,80px);display:flex;align-items:center;gap:12px} 95 .values__label::before{content:'';width:24px;height:1px;background:rgba(248,245,231,0.15)} 96 .values__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0} 97 .values__card{padding:clamp(32px,4vw,56px) clamp(24px,3vw,40px);border-top:1px solid rgba(248,245,231,0.08);position:relative} 98 .values__card:not(:first-child){border-left:1px solid rgba(248,245,231,0.08)} 99 .values__card-num{font-family:var(--font-display);font-size:clamp(48px,5vw,72px);font-weight:200;color:rgba(248,245,231,0.08);line-height:1;margin-bottom:clamp(24px,3vw,40px);letter-spacing:-0.03em} 100 .values__card-title{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);font-weight:300;color:#fff;line-height:1.15;letter-spacing:-0.02em;margin-bottom:14px} 101 .values__card-desc{font-size:clamp(14px,1.1vw,15px);line-height:1.7;color:rgba(248,245,231,0.4);max-width:360px} 102 @media(max-width:768px){.values__grid{grid-template-columns:1fr}.values__card{border-left:none!important}} 103 104 @media(max-width:900px){ 105 } 106 107 /* ====== WHAT WE DO â Full-bleed photo overlay ====== */ 108 .work{position:relative;min-height:clamp(600px,80vh,900px);overflow:hidden} 109 .work__bg{position:absolute;inset:0} 110 .work__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(0.5) brightness(0.35);transition:transform 8s cubic-bezier(0.16,1,0.3,1)} 111 .work:hover .work__bg img{transform:scale(1.03)} 112 .work__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(15,15,18,0.3) 0%,rgba(15,15,18,0.7) 100%)} 113 .work__inner{position:relative;z-index:1;padding:clamp(80px,10vw,140px) var(--section-px);max-width:1440px;margin:0 auto;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit;color:#f8f5e7} 114 .work__header{margin-bottom:clamp(48px,6vw,80px)} 115 .work__header-label{font-size:11px;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;color:rgba(248,245,231,0.35);margin-bottom:16px;display:flex;align-items:center;gap:12px} 116 .work__header-label::before{content:'';width:24px;height:1px;background:rgba(248,245,231,0.2)} 117 .work__header-title{font-family:var(--font-display);font-size:clamp(36px,5vw,64px);font-weight:300;line-height:1.05;letter-spacing:-0.03em;max-width:600px} 118 .work__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(255,255,255,0.1)} 119 .work__card{padding:clamp(24px,3vw,40px) clamp(20px,2vw,32px);border-bottom:1px solid rgba(255,255,255,0.1);text-decoration:none;color:inherit;transition:background 0.4s var(--ease);position:relative} 120 .work__card:not(:first-child){border-left:1px solid rgba(255,255,255,0.1)} 121 .work__card:hover{background:rgba(255,255,255,0.05)} 122 .work__card-num{font-size:11px;color:rgba(255,255,255,0.25);margin-bottom:16px;display:block} 123 .work__card-title{font-family:var(--font-display);font-size:clamp(18px,2vw,24px);font-weight:300;color:#f8f5e7;line-height:1.2;margin-bottom:8px} 124 .work__card-desc{font-size:13px;color:rgba(255,255,255,0.4);line-height:1.5} 125 .work__card-arrow{position:absolute;top:clamp(24px,3vw,40px);right:clamp(20px,2vw,32px);width:20px;height:20px;color:rgba(255,255,255,0.2);opacity:0;transform:translate(-4px,4px);transition:all 0.3s var(--ease)} 126 .work__card-arrow svg{width:100%;height:100%} 127 .work__card:hover .work__card-arrow{opacity:1;transform:translate(0,0)}
128 @media(max-width:900px){.work__grid{grid-template-columns:repeat(2,1fr)}.work__card:nth-child(odd){border-left:none}} 129 @media(max-width:500px){.work__grid{grid-template-columns:1fr}.work__card{border-left:none!important}} 130 131 /* ====== TEAM â Full-width dark editorial ====== */ 132 .team{padding:clamp(80px,10vw,120px) var(--section-px);border-top:1px solid var(--border)} 133 .team__inner{max-width:1440px;margin:0 auto} 134 .team__header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:clamp(40px,5vw,64px);flex-wrap:wrap;gap:24px} 135 .team__header-left{max-width:600px} 136 .team__label{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;display:flex;align-items:center;gap:10px} 137 .team__label::before{content:'';width:24px;height:1px;background:var(--text-muted)} 138 .team__title{font-family:var(--font-display);font-size:clamp(32px,4vw,52px);font-weight:300;line-height:1.08;letter-spacing:-0.03em;color:var(--text)} 139 .team__desc{font-size:15px;line-height:1.7;color:var(--text-dim);margin-top:16px;max-width:480px} 140 .team__actions{display:flex;gap:12px;flex-wrap:wrap} 141 .team__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;font-family:var(--font-body);font-size:14px;font-weight:500;border:none;cursor:pointer;transition:all 0.3s var(--ease);text-decoration:none;border-radius:0 18px 0 18px} 142 .team__btn--primary{background:var(--bg-dark);color:var(--text-on-dark)}.team__btn--primary:hover{opacity:0.85;transform:translateY(-2px)} 143 .team__btn--ghost{background:none;border:1px solid var(--border-dark);color:var(--text-dim)}.team__btn--ghost:hover{border-color:var(--text);color:var(--text)} 144 .team__btn svg{width:14px;height:14px} 145 .team__row{display:flex;flex-wrap:wrap} 146 .team__card{flex:1 1 25%;min-width:25%;border-left:1px solid var(--border);border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg);transition:background 0.4s var(--ease);text-decoration:none;color:inherit} 147 .team__card:nth-child(4n){border-right:1px solid var(--border)} 148 .team__card:hover{background:var(--bg-card, #fff)} 149 .team__card-photo{position:relative;aspect-ratio:3/4;overflow:hidden;margin:clamp(16px,2vw,24px) clamp(16px,2vw,24px) 0;background:#f0efed} 150 .team__card-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform 0.5s var(--ease)} 151 .team__card:hover .team__card-photo img{transform:scale(1.04)} 152 .team__card-badge{position:absolute;top:10px;right:10px;padding:4px 12px;border-radius:0 10px 0 10px;background:var(--bg);border:1px solid var(--border);font-size:11px;color:var(--text-dim)} 153 .team__card-info{padding:clamp(12px,1.5vw,20px) clamp(16px,2vw,24px) clamp(16px,2vw,24px)} 154 .team__card-name{font-size:clamp(14px,1.2vw,17px);font-weight:500;line-height:1.25;margin-bottom:2px} 155 .team__card-role{font-size:12px;color:var(--text-muted)} 156 @media(max-width:900px){.team__row{flex-wrap:wrap}.team__card{flex:1 1 50%;min-width:50%}.team__card:nth-child(2n){border-right:1px solid var(--border)}.team__header{flex-direction:column;align-items:flex-start}} 157 @media(max-width:500px){.team__card{flex:none;width:100%;border-right:1px solid var(--border)}} 158 159 /* ====== VIDEO â Dark split ====== */ 160 .video-meet{display:grid;grid-template-columns:1fr 1.3fr;min-height:80vh;background:var(--bg-dark)} 161 .video-meet__text{display:flex;flex-direction:column;justify-content:center;padding:clamp(48px,6vw,100px);color:var(--text-on-dark)} 162 .video-meet__label{font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:rgba(250,249,247,0.35);margin-bottom:24px} 163 .video-meet__title{font-family:var(--font-display);font-size:clamp(42px,5.5vw,80px);font-weight:300;line-height:1.05;letter-spacing:-0.02em;margin-bottom:24px} 164 .video-meet__title em{font-style:italic} 165 .video-meet__desc{font-size:16px;line-height:1.7;color:rgba(250,249,247,0.5);max-width:400px} 166 .video-meet__media{position:relative;overflow:hidden;cursor:none} 167 .video-meet__media iframe{width:100%;height:100%;position:absolute;inset:0;border:0;pointer-events:none} 168 .video-meet__media.is-playing{cursor:default} 169 .video-meet__media.is-playing iframe{pointer-events:auto} 170 .video-meet__play{position:absolute;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.95);display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:5;transform:translate(-50%,-50%) scale(0.85);transition:transform 0.15s ease,opacity 0.3s ease;opacity:0;mix-blend-mode:difference} 171 .video-meet__media:hover .video-meet__play{opacity:1;transform:translate(-50%,-50%) scale(1)} 172 .video-meet__media.is-playing .video-meet__play{opacity:0!important;transform:translate(-50%,-50%) scale(0.5)} 173 .video-meet__play svg{width:24px;height:24px;margin-left:3px} 174 @media(max-width:768px){.video-meet{grid-template-columns:1fr}
174.video-meet__media{aspect-ratio:16/9;position:relative;cursor:default}.video-meet__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)!important;opacity:1!important;pointer-events:auto}.video-meet__media.is-playing .video-meet__play{opacity:0!important}} 175 176 /* ====== CTA â CREAM BG ====== */ 177 .cta{padding:var(--section-py) var(--section-px);background:#BBC7C3;border-top:none} 178 .cta__inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1fr 1.2fr;gap:var(--gap-lg)} 179 .cta__title{font-family:var(--font-display);font-size:clamp(28px,3.5vw,44px);font-weight:300;line-height:1.1} 180 .cta__desc{font-size:16px;color:var(--text-dim);margin-top:16px;line-height:1.65;max-width:400px} 181 .cta__links{display:flex;flex-direction:column} 182 .cta__link{display:flex;align-items:center;justify-content:space-between;padding:20px 0;font-family:var(--font-display);font-size:clamp(18px,2vw,24px);font-weight:300;border-bottom:1px solid var(--border);transition:padding-left 0.25s ease} 183 .cta__link:first-child{border-top:1px solid var(--border)} 184 .cta__link:hover{padding-left:8px} 185 .cta__link svg{width:18px;height:18px;color:var(--text-muted);opacity:0;transform:translateX(-6px);transition:all 0.2s} 186 .cta__link:hover svg{opacity:0.5;transform:translateX(0)} 187 @media(max-width:768px){.cta__inner{grid-template-columns:1fr}} 188 189 /* ====== CONTACT â 4-col, CREAM BG ====== */ 190 .contact{padding:var(--section-py) var(--section-px);background:var(--bg);border-top:1px solid var(--border)} 191 .contact__inner{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} 192 .contact__col{padding-top:clamp(20px,3vw,32px);border-top:1px solid var(--border)} 193 .contact__col-title{font-family:var(--font-display);font-size:clamp(16px,1.5vw,20px);font-weight:300;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between} 194 .contact__col-title svg{width:14px;height:14px;color:var(--text-muted)} 195 .contact__col-text{font-size:13px;color:var(--text-dim);line-height:1.6} 196 .contact__col-link{font-size:13px;color:var(--text);display:inline-flex;align-items:center;gap:6px;margin-top:4px;transition:opacity 0.2s}.contact__col-link:hover{opacity:0.6}.contact__col-link svg{width:12px;height:12px} 197 @media(max-width:900px){.contact__inner{grid-template-columns:repeat(2,1fr)}} 198 @media(max-width:500px){.contact__inner{grid-template-columns:1fr}} 199 200 .reveal{} 201 202 /* ====== PDF MODAL â Redesigned: cream card overlay ====== */ 203 .pdf-modal-scrim{position:fixed;inset:0;background:rgba(10,10,12,0.85);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.5s var(--ease);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)} 204 .pdf-modal-scrim.is-open{opacity:1;pointer-events:auto} 205 .pdf-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.5s var(--ease);overflow:auto;padding:clamp(24px,4vw,60px)} 206 .pdf-modal.is-open{opacity:1;pointer-events:auto} 207 .pdf-modal__card{background:var(--bg);border-radius:20px;max-width:880px;width:100%;overflow:hidden;display:grid;grid-template-columns:0.45fr 0.55fr;box-shadow:0 40px 80px rgba(0,0,0,0.25);transform:translateY(30px) scale(0.97);transition:transform 0.6s var(--ease);position:relative} 208 .pdf-modal.is-open .pdf-modal__card{transform:translateY(0) scale(1)} 209 .pdf-modal__visual{position:relative;overflow:hidden;min-height:520px} 210 .pdf-modal__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(0.7) brightness(0.7);transform:scale(1.05);transition:transform 1.2s var(--ease)} 211 .pdf-modal.is-open .pdf-modal__visual img{transform:scale(1)} 212 .pdf-modal__visual-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(31,31,35,0.3) 0%,rgba(31,31,35,0.6) 100%)} 213 .pdf-modal__visual-badge{position:absolute;bottom:24px;left:24px;padding:8px 18px;border-radius:100px;background:rgba(255,255,255,0.12);backdrop-filter:blur(12px);font-size:12px;font-weight:500;color:#fff;letter-spacing:0.04em} 214 .pdf-modal__body{padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;justify-content:center;color:var(--text);position:relative} 215 .pdf-modal__close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;background:var(--tag-bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);transition:all 0.3s var(--ease)} 216 .pdf-modal__close:hover{background:var(--text);color:var(--bg)}.pdf-modal__close svg{width:16px;height:16px} 217 .pdf-modal__label{font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted);margin-bottom:20px;
217display:flex;align-items:center;gap:10px} 218 .pdf-modal__label::before{content:'';width:20px;height:1px;background:var(--text-muted)} 219 .pdf-modal__title{font-family:var(--font-display);font-size:clamp(28px,3vw,40px);font-weight:300;line-height:1.1;letter-spacing:-0.02em;margin-bottom:16px} 220 .pdf-modal__desc{font-size:15px;line-height:1.7;color:var(--text-dim);margin-bottom:32px} 221 .pdf-modal__stats{display:flex;gap:32px;margin-bottom:32px;padding-bottom:28px;border-bottom:1px solid var(--border)} 222 .pdf-modal__stat-num{font-family:var(--font-display);font-size:clamp(24px,2.5vw,32px);font-weight:300;line-height:1} 223 .pdf-modal__stat-label{font-size:11px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:0.06em} 224 .pdf-modal__actions{display:flex;gap:12px;flex-wrap:wrap} 225 .pdf-modal__actions .btn-primary{background:var(--text);color:var(--bg)}.pdf-modal__actions .btn-primary:hover{opacity:0.85;transform:translateY(-1px)} 226 .pdf-modal__actions .btn--outline{border:1px solid var(--border-dark);color:var(--text)}.pdf-modal__actions .btn--outline:hover{background:var(--text);color:var(--bg);border-color:var(--text)} 227 @media(max-width:768px){.pdf-modal__card{grid-template-columns:1fr}.pdf-modal__visual{min-height:240px}} 228 229 @media(max-width:480px){ 230 .hero{padding:120px 20px 60px;min-height:65vh}.hero__title{font-size:clamp(36px,9vw,56px)} 231 .mission{padding:0 16px clamp(48px,8vw,80px)}.mission__content{padding:28px 20px} 232 .values__grid{grid-template-columns:1fr} 233 .work__inner{padding:clamp(48px,8vw,80px) 16px}.work__grid{grid-template-columns:1fr;gap:0} 234 .team{height:auto;min-height:auto} 235 } 236 </style> 237</head> 238<body> 239 <div class="nav-overlay" id="navOverlay"></div> 240 241 <section class="hero"> 242 <h1 class="hero__title"> 243 <span class="word"><span class="word-inner">Independent</span></span> 244 <span class="word"><span class="word-inner">research</span></span> 245 <span class="word"><span class="word-inner">for</span></span> 246 <span class="word"><span class="word-inner">informed</span></span><br> 247 <span class="word"><span class="word-inner">energy</span></span> 248 <span class="word"><span class="word-inner">policy</span></span> 249 </h1> 250 <p class="hero__subtitle">Advancing energy literacy through rigorous data analysis, expert commentary, and original research for policymakers, business leaders, and the public.</p> 251 </section> 252 253 <section class="intro" id="introSection"> 254 <div class="intro__bg"> 255 <img src="assets/offshore-platform-sunset.jpg" alt="" id="introBgImg"> 256 </div> 257 <div class="intro__panel" id="introPanel"> 258 <span class="intro__label">Who We Are</span> 259 <h2 class="intro__heading">Data-driven.<br>Nonpartisan.<br>Built for clarity.</h2> 260 <p class="intro__body">The National Center for Energy Analytics was founded to fill a critical gap in public energy discourse: the need for authoritative, data-driven analysis free from ideological commitments. We bring together scholars, former policymakers, and industry experts to produce original research, interactive data tools, and expert commentary spanning the full energy landscape.</p> 261 <p class="intro__body" style="font-size:13px;color:rgba(26,26,26,0.4);margin-top:-16px">A project of the Texas Public Policy Foundation.</p> 262 <a class='intro__link' href='/about#mission'>Our Mission <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a> 263 </div> 264 </section> 265 266 <section class="mission"> 267 <div class="mission__card reveal" onclick="openPdfModal()"> 268 <div class="mission__image"><img src="assets/energy-mix-landscape.jpg" alt="Energy landscape"></div> 269 <div class="mission__content"> 270 <p class="mission__label">Our Mission</p> 271 <h2 class="mission__title">Energy for the 21st Century</h2> 272 <p class="mission__desc">Our declaration of guiding principles — outlining a vision for a pragmatic, prosperous, and environmentally responsible energy future grounded in engineering reality.</p> 273 <div class="mission__cta">
273View Document <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></div> 274 </div> 275 </div> 276 </section> 277 278 <section class="values"> 279 <div class="values__inner"> 280 <div class="values__label reveal">What Sets Us Apart</div> 281 <div class="values__grid"> 282 <div class="values__card reveal"> 283 <div class="values__card-num">01</div> 284 <h3 class="values__card-title">Editorial Independence</h3> 285 <p class="values__card-desc">Our analysis is free from political or corporate influence. We follow the data wherever it leads, regardless of prevailing narratives.</p> 286 </div> 287 <div class="values__card reveal"> 288 <div class="values__card-num">02</div> 289 <h3 class="values__card-title">Data-Driven Research</h3> 290 <p class="values__card-desc">Every claim is backed by verifiable data. Our Energy Security Index and interactive tools make complex energy data accessible.</p> 291 </div> 292 <div class="values__card reveal"> 293 <div class="values__card-num">03</div> 294 <h3 class="values__card-title">Expert Network</h3> 295 <p class="values__card-desc">Former government officials, university professors, Wall Street analysts, and industry veterans with decades of real-world energy experience.</p> 296 </div> 297 </div> 298 </div> 299 </section> 300 301 <section class="work"> 302 <div class="work__bg"><img src="assets/jet-turbine.jpg" alt=""></div> 303 <div class="work__inner"> 304 <div class="work__header"> 305 <div class="work__header-label">Our Work</div> 306 <h2 class="work__header-title">What we do</h2> 307 </div> 308 <div class="work__grid"> 309 <a class='work__card' href='/research-library'><span class="work__card-num">01</span><h3 class="work__card-title">Publishing Research</h3><p class="work__card-desc">Original studies and issue briefs on energy economics, grid reliability, and technology.</p><div class="work__card-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></div></a> 310 <a class='work__card' href='/events'><span class="work__card-num">02</span><h3 class="work__card-title">Expert Testimony</h3><p class="work__card-desc">Scholars testify before Congress and advise state legislatures on critical energy policy.</p><div class="work__card-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></div></a> 311 <a class='work__card' href='/events'><span class="work__card-num">03</span><h3 class="work__card-title">Convening Events</h3><p class="work__card-desc">Forums, webinars, and conferences with policymakers, researchers, and industry leaders.</p><div class="work__card-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></div></a> 312 <a class='work__card' href='/energy-index'><span class="work__card-num">04</span><h3 class="work__card-title">Data Tools & Indices</h3><p class="work__card-desc">Interactive dashboards and datasets that make complex energy data accessible.</p><div class="work__card-arrow"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></div></a> 313 </div> 314 </div> 315 </section> 316 317 <section class="team"> 318 <div class="team__inner"> 319 <div class="team__header"> 320 <div class="team__header-left"> 321 <span class="team__label reveal">Our Scholars</span> 322 <h2 class="team__title reveal">The minds shaping energy policy</h2> 323 <p class="team__desc reveal">Former government officials, Wall Street analysts, university professors, and industry veterans — decades of real-world energy experience informing the national conversation.</p> 324 </div> 325 <div class="team__actions reveal"> 326 <a class='team__btn team__btn--primary' href='/advisory-board'>View All Scholars <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg></a> 327 <a class='team__btn team__btn--ghost' href='/request-briefing'>Request a Briefing</a> 328 </div> 329 </div> 330 <div class="team__row"> 331 <a class='team__card' href='/scholar-detail?slug=mark-p-mills'><div class="team__card-photo"><img src="assets/mark_p_mills.jpg" alt="Mark P. Mills"><span class="team__card-badge">Executive Director</span></div><div class="team__card-info"><div class="team__card-name">Mark P. Mills</div><div class="team__card-role">NCEA</div></div></a> 332 <a class='team__card' href='/scholar-detail?slug=paul-tice'><div class="team__card-photo"><img src="assets/Paul_Tice_Headshot.jpg" alt="Paul H. Tice"><span class="team__card-badge">Advisory Board</span></div><div class="team__card-info"><div class="team__card-name">Paul H. Tice</div><div class="team__card-role">Energy Finance</div></div></a> 333 <a class='team__card' href='/scholar-detail?slug=neil-atkinson'><div class="team__card-photo"><img src="assets/Neil_Atkinson_Headshot.jpg" alt="Neil Atkinson"><span class="team__card-badge">Visiting Fellow</span></div><div class="team__card-info"><div class="team__card-name">Neil Atkinson</div><div class="team__card-role">Oil Markets</div></div></a> 334 <a class='team__card' href='/scholar-detail?slug=brent-bennett'><div class="team__card-photo"><img src="assets/Brent_Bennett__PhD.jpeg" alt="Brent Bennett, PhD"><span class="team__card-badge">Senior Fellow</span></div><div class="team__card-info"><div class="team__card-name">Brent Bennett, PhD</div><div class="team__card-role">Grid Policy</div></div></a> 335 </div> 336 </div> 337 </section> 338 339 <section class="video-meet"> 340 <div class="video-meet__text"> 341 <p class="video-meet__label">Watch</p> 342 <h2 class="video-meet__title">Energy for the<br>21st Century</h2> 343 <p class="video-meet__desc">Our vision for advancing energy literacy through rigorous data analysis, expert commentary, and original research for policymakers and the public.</p> 344 </div> 345 <div class="video-meet__media" id="videoMedia" onclick="playYT(this)"> 346 <img class="video-meet__poster" src="assets/offshore-platform-sunset.jpg" alt="Energy for the 21st Century" style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:saturate(0.6) brightness(0.5);transition:filter 0.4s"> 347 <div class="video-meet__play" id="videoPlay"> 348 <svg viewBox="0 0 24 24" fill="#fff" stroke="none"><polygon points="8,5 20,12 8,19"/></svg> 349 </div> 350 </div> 351 </section> 352 353 <section class="cta"> 354 <div class="cta__inner"> 355 <div class="reveal"> 356 <h2 class="cta__title">Get involved<br>with NCEA</h2> 357 <p class="cta__desc">Informed energy policy starts with rigorous, independent research. There are many ways to engage with our work.</p> 358 </div> 359 <div class="cta__links"> 360 <a class='cta__link' href='/subscribe'>Subscribe to our newsletter <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></a> 361 <a class='cta__link' href='/request-briefing'>Request a briefing <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></a> 362 <a class='cta__link' href='/get-involved'>Support our research <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></a> 363 <a class='cta__link' href='/contact'>Contact us <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></a> 364 </div> 365 </div> 366 </section> 367 368 <section class="contact"> 369 <div class="contact__inner"> 370 <div class="contact__col reveal"><h3 class="contact__col-title">Washington, DC <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4L12 4L12 12"/><path d="M12 4L4 12"/></svg></h3><p class="contact__col-text">General inquiries</p><a href="/cdn-cgi/l/email-protection#4b22252d240b2e252e392c322a252a27323f2228386524392c" class="contact__col-link"><span class="__cf_email__" data-cfemail="80e9eee6efc0e5eee5f2e7f9e1eee1ecf9f4e9e3f3aeeff2e7">[email protected]</span></a></div> 371 <div class="contact__col reveal"><h3 class="contact__col-title">Media & Press <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4L12 4L12 12"/><path d="M12 4L4 12"/></svg></h3><p class="contact__col-text">Interview requests and press resources</p><a class='contact__col-link' href='/press-kit'>View Press Kit</a></div> 372 <div class="contact__col reveal"><h3 class="contact__col-title">Speaking <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4L12 4L12 12"/><path d="M12 4L4 12"/></svg></h3><p class="contact__col-text">Testimony, keynotes, panels, briefings</p><a class='contact__col-link' href='/request-briefing'>Request a Speaker</a></div> 373 <div class="contact__col reveal"><h3 class="contact__col-title">Partnerships <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4L12 4L12 12"/><path d="M12 4L4 12"/></svg></h3><p class="contact__col-text">Collaborate on research initiatives</p><a class='contact__col-link' href='/contact'>Get in Touch</a></div> 374 </div> 375 </section> 376 377 <div class="pdf-modal-scrim" id="pdfScrim" onclick="closePdfModal()"></div> 378 <div class="pdf-modal" id="pdfModal" onclick="if(event.target===this)closePdfModal()"> 379 <div class="pdf-modal__card"> 380 <div class="pdf-modal__visual"> 381 <img src="assets/energy-mix-landscape.jpg" alt=""> 382 <div class="pdf-modal__visual-overlay"></div> 383 <div class="pdf-modal__visual-badge">Declaration of Principles</div> 384 </div> 385 <div class="pdf-modal__body"> 386 <button class="pdf-modal__close" onclick="closePdfModal()">
386<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5"><line x1="5" y1="5" x2="15" y2="15"/><line x1="15" y1="5" x2="5" y2="15"/></svg></button> 387 <div class="pdf-modal__label">Our Mission</div> 388 <h3 class="pdf-modal__title">Energy for the 21st Century</h3> 389 <p class="pdf-modal__desc">Our guiding principles outline a vision for a pragmatic, prosperous, and environmentally responsible energy future grounded in engineering reality and data-driven analysis.</p> 390 <div class="pdf-modal__stats"> 391 <div><div class="pdf-modal__stat-num">7</div><div class="pdf-modal__stat-label">Principles</div></div> 392 <div><div class="pdf-modal__stat-num">30+</div><div class="pdf-modal__stat-label">Signatories</div></div> 393 <div><div class="pdf-modal__stat-num">2024</div><div class="pdf-modal__stat-label">Published</div></div> 394 </div> 395 <div class="pdf-modal__actions"> 396 <a class='btn btn-primary' download href='/research-library'><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> Download PDF</a> 397 <button class="btn btn--outline" onclick="closePdfModal()">Close</button> 398 </div> 399 </div> 400 </div> 401 </div> 402 403 <footer class="footer"> 404 <div class="footer__expertise"><div class="footer__expertise-inner"> 405 <h2 class="footer__expertise-title">Our areas of<br>expertise</h2> 406 <div class="footer__expertise-grid"> 407 <div class="footer__expertise-col"><h4 class="footer__expertise-heading">Topics <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></h4><ul class="footer__expertise-list"><li><a class='footer__expertise-link' href='/topics'>Grid Reliability</a></li><li><a class='footer__expertise-link' href='/topics'>Capacity Markets</a></li><li><a class='footer__expertise-link' href='/topics'>Nuclear Energy</a></li><li><a class='footer__expertise-link' href='/topics'>Natural Gas Markets</a></li><li><a class='footer__expertise-link' href='/topics'>Carbon Policy</a></li></ul></div> 408 <div class="footer__expertise-col"><h4 class="footer__expertise-heading">Research <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></h4><ul class="footer__expertise-list"><li><a class='footer__expertise-link' href='/research-library'>All Publications</a></li><li><a class='footer__expertise-link' href='/research-library'>Research Briefs</a></li><li><a class='footer__expertise-link' href='/research-library'>Data Reports</a></li><li><a class='footer__expertise-link' href='/research-library'>Testimony</a></li></ul></div> 409 <div class="footer__expertise-col"><h4 class="footer__expertise-heading">Tools <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></h4><ul class="footer__expertise-list"><li><a class='footer__expertise-link' href='/energy-index'>ESI Dashboard</a></li><li><a class='footer__expertise-link' href='/energy-index'>Data Downloads</a></li><li><a class='footer__expertise-link' href='/energy-index'>API Access</a></li></ul></div> 410 <div class="footer__expertise-col"><h4 class="footer__expertise-heading">About <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></h4><ul class="footer__expertise-list"><li><a class='footer__expertise-link' href='/about'>Our Mission</a></li><li><a class='footer__expertise-link' href='/advisory-board'>Board of Advisors</a></li><li><a class='footer__expertise-link' href='/press-kit'>Press Room</a></li></ul></div> 411 <div class="footer__expertise-col"><h4 class="footer__expertise-heading">
411Scholars <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></h4><ul class="footer__expertise-list"><li><a class='footer__expertise-link' href='/advisory-board'>All Scholars</a></li><li><a class='footer__expertise-link' href='/request-briefing'>Book a Speaker</a></li></ul></div> 412 <div class="footer__expertise-col"><h4 class="footer__expertise-heading">Connect <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg></h4><ul class="footer__expertise-list"><li><a class='footer__expertise-link' href='/contact'>Contact Us</a></li><li><a class='footer__expertise-link' href='/subscribe'>Newsletter</a></li><li><a href="#" class="footer__expertise-link">LinkedIn</a></li><li><a href="#" class="footer__expertise-link">Twitter / X</a></li></ul></div> 413 </div> 414 </div></div> 415 <div class="footer__bottom"><div class="footer__bottom-inner"><a class='footer__logo' href='/'><img src="assets/Footer_logo.svg" alt="NCEA"></a><p class="footer__copyright">© 2026 National Center for Energy Analytics. All rights reserved.</p><div class="footer__legal"><a class='footer__legal-link' href='/terms'>Terms & Conditions</a><a class='footer__legal-link' href='/privacy'>Privacy Policy</a></div></div></div> 416 </footer>
vendor: 112 bytes, lines 416-418
416 417 418 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
418<script> 419 gsap.registerPlugin(ScrollTrigger); 420 gsap.utils.toArray('.word-inner').forEach((word, i) => { gsap.fromTo(word, { y: '105%' }, { y: 0, duration: 0.9, delay: 0.1 + i * 0.08, ease: 'power3.out' }); }); 421 gsap.fromTo('.hero__subtitle', { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.8, delay: 0.7, ease: 'power2.out' }); 422 423 // Hero split entrance 424 // Intro â bg parallax only 425 gsap.to('#introBgImg', { y: '-10%', ease: 'none', scrollTrigger: { trigger: '#introSection', start: 'top bottom', end: 'bottom top', scrub: true } }); 426 427 // General reveals 428 gsap.utils.toArray('.reveal').forEach(el => { 429 ScrollTrigger.create({ trigger: el, start: 'top 92%', once: true, onEnter: () => { gsap.fromTo(el, { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.8, ease: 'power2.out' }); } }); 430 }); 431 432 // VALUES â reveal 433 ScrollTrigger.create({ trigger: '.values', start: 'top 80%', once: true, onEnter: () => { 434 gsap.fromTo('.values__label', { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: 'power2.out' }); 435 gsap.utils.toArray('.values__card').forEach((card, i) => { 436 gsap.fromTo(card, { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.7, delay: 0.2 + i * 0.12, ease: 'power3.out' }); 437 }); 438 }}); 439 440 // Work section 441 ScrollTrigger.create({ trigger: '.work', start: 'top 85%', once: true, onEnter: () => { 442 gsap.from('.work__header > *', { y: 30, opacity: 0, duration: 0.7, stagger: 0.1, ease: 'power2.out' }); 443 gsap.utils.toArray('.work__card').forEach((card, i) => { gsap.fromTo(card, { y: 40, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, delay: 0.3 + i * 0.1, ease: 'power3.out' }); }); 444 }}); 445 446 // TEAM â photo grid reveal 447 ScrollTrigger.create({ trigger: '.team', start: 'top 80%', once: true, onEnter: () => { 448 gsap.utils.toArray('.team__photo').forEach((item, i) => { 449 gsap.from(item, { scale: 1.06, opacity: 0, duration: 0.7, delay: i * 0.1, ease: 'power2.out' }); 450 }); 451 }}); 452 453 // Video 454 ScrollTrigger.create({ trigger: '.video-meet', start: 'top 80%', once: true, onEnter: () => { 455 gsap.fromTo('.video-meet__text > *', { y: 30, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, stagger: 0.1, ease: 'power2.out' }); 456 }}); 457 458 // Click-to-play YouTube video 459 function playYT(el) { 460 el.innerHTML = '<iframe src="https://www.youtube.com/embed/c53l5VrVkUw?autoplay=1&rel=0&modestbranding=1" style="width:100%;height:100%;position:absolute;inset:0;border:0" allow="autoplay;fullscreen;picture-in-picture;encrypted-media" allowfullscreen></iframe>'; 461 } 462 window.playYT = playYT; 463 464 // PDF Modal 465 function openPdfModal() { document.getElementById('pdfScrim').classList.add('is-open'); document.getElementById('pdfModal').classList.add('is-open'); document.body.style.overflow = 'hidden'; } 466 function closePdfModal() { document.getElementById('pdfScrim').classList.remove('is-open'); document.getElementById('pdfModal').classList.remove('is-open'); document.body.style.overflow = ''; } 467 docum
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.