/* Blue Crescent · shared styles for Projects / Project album / Insights pages */
:root{--blue:#0066b3;--bright:#1d8cff;--cyan:#00aeef;--ink:#0b2540;--text:#3f5a70;--muted:#6b8196;--line:#d8e6f2;--bg:#f2f7fc;--navy:#082a4a;
  --shadow:0 18px 50px rgba(16,60,110,.12);--shadow2:0 8px 24px rgba(16,60,110,.1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
html,body{margin:0}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font-family:inherit}

/* calm blueprint background */
#bpbg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(1200px 700px at 85% -10%,#e2eefb 0%,rgba(226,238,251,0) 60%),radial-gradient(900px 600px at -10% 110%,#e6f1fb 0%,rgba(230,241,251,0) 60%),var(--bg)}
#bpbg canvas{position:absolute;inset:0;width:100%;height:100%}
#bpbg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;animation:glow 26s ease-in-out infinite alternate}
#bpbg i:nth-child(2){width:46vw;height:46vw;left:58%;top:-12%;background:#cfe4fa}
#bpbg i:nth-child(3){width:38vw;height:38vw;left:-10%;top:52%;background:#d8ecfb;animation-duration:32s}
#bpbg i:nth-child(4){width:28vw;height:28vw;left:40%;top:70%;background:#e3f0fd;animation-duration:38s}
@keyframes glow{to{transform:translate(4vw,3vh) scale(1.12)}}
main,footer{position:relative;z-index:1}

/* header (same as the main site) */
.nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:40;width:min(1180px,calc(100vw - 32px));height:58px;padding:0 10px 0 22px;border-radius:999px;display:flex;align-items:center;gap:28px;
  background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 30px rgba(16,60,110,.12);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.nav.hide{transform:translate(-50%,calc(-100% - 20px))}
.nav .logo img{height:34px;width:auto;display:block}
.nav .links{display:flex;gap:22px;margin-left:auto}
.nav .links a{font-size:.84rem;font-weight:500;color:var(--ink);position:relative;padding:6px 0;transition:color .2s}
.nav .links a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--bright);transform:scaleX(0);transition:transform .3s}
.nav .links a:hover,.nav .links a.on{color:var(--blue)}
.nav .links a.on:after,.nav .links a:hover:after{transform:none}
.nav-cta{font-size:.84rem;font-weight:600;padding:10px 18px;border-radius:999px;background:var(--blue);color:#fff;transition:background .2s}
.nav-cta:hover{background:var(--bright)}
.menu{display:none;margin-left:auto;border:0;background:none;font-size:1.4rem;color:var(--ink);cursor:pointer}
@media (max-width:860px){.nav .links,.nav-cta{display:none}.menu{display:block}
  .nav.open .links{display:flex;position:absolute;top:66px;left:0;right:0;flex-direction:column;gap:4px;padding:12px 18px;border-radius:20px;background:#fff;box-shadow:var(--shadow)}}

/* type + common */
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 5vw}
.kicker{display:inline-block;font:800 .95rem Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#0a4f91;background:rgba(255,255,255,.92);padding:7px 16px;border-radius:999px;box-shadow:0 4px 16px rgba(16,60,110,.12)}
.h1{font:800 clamp(2.6rem,min(5vw,8.4vh),4.9rem)/1 "Plus Jakarta Sans",Inter,sans-serif;letter-spacing:-.045em;margin:.6rem 0 .5rem}
.h2{font:800 clamp(2rem,min(3.4vw,6vh),3.4rem)/1.05 "Plus Jakarta Sans",Inter,sans-serif;letter-spacing:-.035em;margin:.55rem 0 .4rem}
.h1 span,.h2 span{color:var(--blue)}
.pd{font-style:normal;margin-left:-.09em}
.lead{color:var(--text);font-size:1.05rem;line-height:1.6;margin:0;max-width:56ch}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;background:#fff;color:var(--blue);font:700 .86rem Inter,sans-serif;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow2)}
.btn.blue{background:var(--blue);color:#fff}.btn.blue:hover{background:var(--bright)}
.btn.line{background:transparent;border:1.5px solid var(--blue)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{all:unset;cursor:pointer;font:600 .84rem Inter,sans-serif;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink);transition:background .2s,color .2s,border-color .2s}
.chips button b{font-weight:700;color:var(--muted);margin-left:6px}
.chips button:hover{border-color:#a9c9ea}
.chips button.on{background:var(--blue);color:#fff;border-color:var(--blue)}.chips button.on b{color:#bfe0ff}
.chips button:focus-visible{outline:2px solid var(--bright);outline-offset:2px}
.tagp{font:700 .7rem Inter,sans-serif;letter-spacing:.05em;padding:5px 10px;border-radius:999px;background:#eef5fc;color:#0a4f91;white-space:nowrap}
.tagp.ok{background:#e6f6ed;color:#17703f}.tagp.done{background:#eef1f5;color:#4a5d70}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}#bpbg i{animation:none}}

/* footer */
footer{background:linear-gradient(160deg,#072a4c,#0a3a6a);color:#fff;padding:26px 5vw 20px;margin-top:40px}
footer .foot{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
footer img{width:130px}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer a{font-size:.82rem;color:#cfe3f2}footer a:hover{color:#fff}
footer .fc{margin-left:auto;display:flex;gap:18px}
footer .copy{margin-top:14px;font-size:.74rem;color:#8fb0c8}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:rgba(5,18,34,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.lb.open{opacity:1;visibility:visible;transition:opacity .3s}
.lb img{max-width:min(1400px,92vw);max-height:84vh;border-radius:10px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb button{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;width:52px;height:52px;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:background .2s}
.lb button:hover{background:rgba(255,255,255,.25)}
.lb .x{top:20px;right:20px}.lb .pv{left:24px;top:50%;margin-top:-26px}.lb .nx{right:24px;top:50%;margin-top:-26px}
.lb .cnt{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:#cfe3f2;font:600 .85rem Inter,sans-serif}

/* lightbox: photo + project details */
.lb .stage{display:flex;align-items:center;gap:26px;max-width:94vw}
.lb.has-inf img{max-width:min(980px,64vw)}
.lb .inf{display:none;width:320px;flex:none;color:#fff;padding:24px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.lb.has-inf .inf{display:block}
.lb .inf .tg{display:flex;gap:6px;flex-wrap:wrap}.lb .inf .tg span{border-radius:8px !important;font:700 .66rem Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:rgba(29,140,255,.25);color:#9fd0ff}
.lb .inf h3{font:800 1.35rem/1.2 "Plus Jakarta Sans",sans-serif;margin:12px 0 10px}
.lb .inf .hl{font:700 .85rem Inter,sans-serif;color:#ffd27a;margin-bottom:14px}
.lb .inf dl{margin:0 0 18px;display:grid;gap:10px}.lb .inf dt{font:700 .64rem Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7fa3c2}.lb .inf dd{margin:2px 0 0;font:600 .9rem Inter,sans-serif;color:#e6f0f8}
.lb .inf .go{display:inline-flex;font:700 .85rem Inter,sans-serif;color:#0a4f91;background:#fff;padding:10px 16px;border-radius:999px}
@media (max-width:900px){.lb .stage{flex-direction:column;gap:14px}.lb.has-inf img{max-width:92vw;max-height:48vh}.lb .inf{width:min(92vw,520px);padding:16px}.lb .inf dl{grid-template-columns:1fr 1fr}}
/* lightbox v2: clearer close, bigger details */
.lb{z-index:80}
.lb .x{top:32px;right:32px;width:56px;height:56px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35)}
.lb .stage{padding:70px 90px 60px;box-sizing:border-box;max-width:100vw}
.lb.has-inf img{max-width:min(940px,58vw);max-height:76vh}
.lb .inf{width:380px;padding:30px}
.lb .inf h3{font-size:1.6rem}
.lb .inf .hl{font-size:.98rem}
.lb .inf dt{font-size:.7rem}.lb .inf dd{font-size:1.02rem}
.lb .inf dl{gap:14px}
.lb .inf .go{font-size:.95rem;padding:12px 18px}
@media (max-width:900px){.lb .stage{padding:70px 16px 50px}.lb .inf{width:min(92vw,520px);padding:18px}}
.lb:not(.open){pointer-events:none}

.copy a.pv{margin-left:8px;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.copy a.pv:hover{color:#fff}
/* bigger logo in the header (Oct 2026) */
.nav .logo img{height:54px!important;width:auto}
@media (min-width:1001px){.nav{height:66px!important}}
@media (max-width:1000px){.nav .logo img{height:40px!important}.nav{height:58px!important}}