:root{--sky:#1E5FB4;--sky2:#2A6FD0;--white:#fff;--cloud:#F6F8FB;--sand:#CDB89A;--sand2:#E9DFCF;--ink:#2B2F33;--muted:#6B7177;--palm:#3F7D4E;--serif:"Playfair Display","Cormorant Garamond",Georgia,"Times New Roman",serif}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--cloud);color:var(--ink);padding-bottom:86px;-webkit-font-smoothing:antialiased}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid #e8ebef}
.brand{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--sky)}.brand em{color:var(--sand);font-weight:500}
.pill{border:1px solid var(--sky);color:var(--sky);text-decoration:none;border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600}
main{max-width:720px;margin:0 auto;padding:0 18px}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:.1px}
.hero{margin:0 -18px;padding:34px 22px 40px;color:#fff;background:linear-gradient(180deg,var(--sky),var(--sky2))}
.hero h1{margin:0 0 8px;font-size:30px;line-height:1.15}.hero p{margin:0;opacity:.92;font-size:15px}
.hero.photo{height:400px;padding:28px 22px;background:url(img/lighthouse-web.jpg) 62% 100%/cover no-repeat;position:relative;display:flex;flex-direction:column}
.hero.photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,50,100,.55) 0%,rgba(14,50,100,0) 45%)}
.hero.photo>*{position:relative;z-index:1;max-width:62%}
h2{font-size:23px;margin:30px 0 12px;color:var(--ink)}h2:after{content:"";display:block;width:36px;height:2px;background:var(--sand);margin-top:8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.hero+.card{margin-top:18px}
.card{background:#fff;border-radius:16px;padding:18px;border:1px solid #edf0f3;box-shadow:0 6px 24px rgba(30,95,180,.06);margin-bottom:14px}
.card h3{margin:0 0 8px;font-size:18px;color:var(--ink)}.card p{margin:6px 0;line-height:1.55;font-size:15px}
.stat{text-align:center;background:#fff;font-size:13px;color:var(--muted)}.stat b{display:block;font-family:var(--serif);font-size:28px;color:var(--sky);margin-bottom:2px}
.tag{display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:var(--palm);margin-bottom:6px}
a{color:var(--sky)}.src{font-size:12px;color:var(--muted)}
.time{border-left:2px solid var(--sand2);padding-left:16px;margin-left:6px}.time .card{position:relative}
.time .card:before{content:"";position:absolute;left:-24px;top:22px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--sky)}
.yr{color:var(--sky)}
.cta{background:var(--sand2);border-color:#e2d5bf;display:flex;gap:14px;align-items:flex-start}.cta h3{margin-top:0}
.cta img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:2px solid #fff}
.btn{display:inline-block;background:var(--sky);color:#fff;font-weight:600;padding:11px 18px;border-radius:99px;text-decoration:none;margin:8px 6px 0 0;font-size:14px}
.btn.ghost{background:#fff;color:var(--sky);border:1px solid var(--sky)}
.portrait{width:170px;height:170px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:5px solid #fff;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:#fff;border-top:1px solid #e8ebef;padding-bottom:env(safe-area-inset-bottom);z-index:9}
.tabs button{flex:1;border:0;background:none;padding:9px 0 10px;font:500 10.5px Inter,system-ui,sans-serif;color:#8a9096;display:flex;flex-direction:column;align-items:center;gap:3px}
.tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tabs button.on{color:var(--sky);font-weight:600}
.q button{display:block;width:100%;text-align:left;margin:7px 0;padding:11px 14px;border-radius:12px;border:1px solid #e3e7eb;background:#fff;font:15px Inter,system-ui,sans-serif;color:var(--ink)}
.q button.ok{border-color:var(--palm);background:#eef6f0}.q button.no{border-color:#c9a27a;background:#faf3ea}
footer{font-size:12px;text-align:center;color:var(--muted);padding:24px 0;display:flex;flex-direction:column;align-items:center;gap:6px}
footer img{width:40px;height:40px;border-radius:50%;object-fit:cover}
ul{padding-left:20px;line-height:1.6}
footer .fbrand{display:flex;flex-direction:column;align-items:center;gap:6px}
@media (min-width:768px){
 body{padding-bottom:0}
 .top{height:64px;padding:0 max(24px,calc((100vw - 1200px)/2 + 24px))}
 .brand{font-size:22px}
 .pill{background:var(--sky);color:#fff;padding:9px 18px}
 .tabs{top:0;bottom:auto;left:auto;right:max(150px,calc((100vw - 1200px)/2 + 150px));height:64px;background:none;border:0;padding:0;z-index:10;gap:2px}
 .tabs button{flex:none;flex-direction:row;padding:0 12px;font-size:14px;color:var(--ink);font-weight:500;border-bottom:2px solid transparent;border-radius:0}
 .tabs button svg{display:none}
 .tabs button.on{color:var(--sky);border-bottom-color:var(--sky)}
 main{max-width:1200px;padding:0 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;align-items:start}
 main>.hero,main>h2,main>.grid,main>.time,main>#quiz,main>footer,main>.cta,main>.bio,main>p{grid-column:1/-1}
 .hero{margin:24px 0 8px;border-radius:22px;padding:56px 48px}
 .hero h1{font-size:44px}.hero p{font-size:17px;max-width:560px}
 .hero.photo{height:520px;padding:64px 56px;background:url(img/lighthouse-web.jpg) right center/auto 100% no-repeat,#123f7e}
 .hero.photo:after{background:linear-gradient(90deg,#123f7e 0%,#123f7e 41.5%,rgba(18,63,126,.6) 50%,rgba(18,63,126,0) 62%)}
 .hero.photo>*{max-width:46%}
 .hero.photo+.card{grid-column:1/-1;margin-top:20px}
 .cta+.card{grid-column:1/-1}
 .hero.photo+.card p:last-of-type{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 20px}
 .hero.photo+.card p:last-of-type br{display:none}
 .grid{grid-template-columns:repeat(4,1fr);gap:20px;margin:6px 0 14px}
 .time{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;border-left:0;padding-left:0;margin-left:0}
 .time .card:before{display:none}
 #quiz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}#quiz #score{grid-column:1/-1}
 .bio{display:grid;grid-template-columns:240px 1fr;gap:8px 40px;text-align:left!important;align-items:center;padding:36px 44px}
 .bio .portrait{grid-row:1/4;width:220px;height:220px}
 .bio h3{font-size:28px;align-self:end;margin:0}.bio p{font-size:17px;margin:0}.bio .btn{justify-self:start;align-self:start}
 footer{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;border-top:1px solid #e3e7eb;margin-top:30px;padding:28px 0 36px;font-size:13px;gap:30px}
 footer .fbrand{flex-direction:row;gap:12px}footer img{width:48px;height:48px}
 footer .fcol:nth-child(2){display:flex;flex-direction:column;gap:4px}footer .dot{display:none}
}
@media (min-width:1100px){
 main{grid-template-columns:repeat(3,minmax(0,1fr))}
 .time{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.qlgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 8px}
.qbtn{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--sky);background:#fff;color:var(--sky);text-decoration:none;font-weight:600;font-size:14px;line-height:1.25;min-height:54px;transition:background .15s,color .15s,transform .1s,box-shadow .15s}
.qbtn svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qbtn:hover{background:#eef4fc;box-shadow:0 4px 14px rgba(30,95,180,.15)}.qbtn:active{transform:scale(.97)}
.qbtn.primary{background:var(--sky);color:#fff}.qbtn.primary:hover{background:var(--sky2)}
.ql h3{margin-bottom:4px}
@media (min-width:768px){.qlgrid{grid-template-columns:repeat(3,1fr);gap:14px}.qbtn{padding:14px 18px;font-size:15px}main>.ql{grid-column:1/-1;margin-top:20px}}
.ql p.src{display:block!important;margin-top:4px}