/* Shared shell for the subpages: same header, language menu, footer, fonts and palette as the home page.
   Loaded after each page's own stylesheet. */

:root{
  --space:#050913;
  --panel-solid:#0B1529;
  --edge-site:rgba(170,200,255,.14);
  --ice:#5CC8FF;
  --sun:#FEC50C;
  --snow:#F2F6FC;
  --mist:#9FADC4;
  --font:'Montserrat','PingFang SC','Microsoft YaHei','Noto Sans SC',system-ui,sans-serif;
  --gutter:clamp(16px,3.4vw,40px);
  /* page palettes re-pointed at the home palette */
  --accent:#5CC8FF;--accent2:#2E7BEF;--accent3:#9ADCFF;--gold:#FEC50C;--yellow:#FEC50C;--cyan:#5CC8FF;--blue:#2E7BEF;
  --font-display:'Montserrat',sans-serif;--font-body:'Montserrat',sans-serif;
  --bg:#050913;--dark:#050913;
}
html{background:var(--space)}
html,body{overflow-x:clip}
body{font-family:var(--font)!important;background:transparent!important;cursor:auto!important;-webkit-font-smoothing:antialiased}
#cursor,#cursor-ring,#mouse-glow,.mouse-glow{display:none!important}
#progress-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:120;background:linear-gradient(90deg,#FFB547,var(--ice))}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

/* Photo banner behind the top of the page */
.page-banner{position:absolute;top:0;left:0;right:0;height:clamp(460px,78vh,760px);z-index:-1;pointer-events:none;
  background:var(--img) var(--pos,center 35%)/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 45%,transparent 100%)}
.page-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,19,.55) 0%,rgba(5,9,19,.25) 30%,rgba(5,9,19,.55) 70%,var(--space) 100%),radial-gradient(ellipse 50% 60% at 50% 45%,rgba(5,9,19,.45),transparent 75%)}

/* ── Header ─────────────────────────────────────── */
#site-header{position:fixed;inset:0 0 auto 0;z-index:1000;display:flex;align-items:center;gap:24px;padding:20px var(--gutter);margin:0;width:auto;background:transparent;border:0;border-bottom:1px solid transparent;box-shadow:none;flex-direction:row;font-family:var(--font);transition:background .3s,padding .3s,border-color .3s}
#site-header.scrolled{background:rgba(5,9,19,.84);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-top:12px;padding-bottom:12px;border-bottom-color:var(--edge-site)}
#site-header .site-logo{font-weight:800;font-size:19px;letter-spacing:.08em;color:var(--snow);text-decoration:none;white-space:nowrap;background:none;-webkit-text-fill-color:currentColor}
#site-header .site-logo span{font-weight:300;color:rgba(242,246,252,.78)}
#site-header .site-nav{display:flex;gap:32px;margin:0 auto;padding:0;background:none;border:0}
#site-header .site-nav a{position:relative;text-decoration:none;color:rgba(242,246,252,.78);font-size:14.5px;font-weight:500;padding:6px 0;white-space:nowrap;letter-spacing:0;text-transform:none;background:none;border:0;transition:color .2s}
#site-header .site-nav a::before,#site-header .site-nav a::after{content:none}
#site-header .site-nav a:hover,#site-header .site-nav a[aria-current="page"]{color:#fff}
#site-header .site-nav a[aria-current="page"]::after{content:"";position:absolute;left:-8px;right:-8px;bottom:-6px;height:2px;border-radius:2px;background:var(--snow);width:auto;transform:none;opacity:1}
#site-header .site-tools{display:flex;align-items:center;gap:10px}
.lang-menu{position:relative}
.lang-current{display:flex;align-items:center;gap:7px;border:0;background:none;color:var(--snow);font:600 14px var(--font);padding:8px 4px;cursor:pointer}
.lang-current .globe{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5}
.lang-current>svg:last-child{width:11px;height:7px}
.lang-pop{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;gap:0;min-width:140px;padding:6px;border-radius:14px;background:rgba(9,17,34,.97);border:1px solid var(--edge-site);box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .2s,transform .2s}
.lang-menu.open .lang-pop{opacity:1;transform:none;pointer-events:auto}
.lang-pop .lang-btn{display:block;width:100%;border:0;background:none;color:rgba(242,246,252,.78);font:500 14.5px var(--font);padding:9px 12px;border-radius:9px;cursor:pointer;text-align:left;letter-spacing:0;box-shadow:none;transition:background .2s,color .2s}
.lang-pop .lang-btn:hover{background:rgba(255,255,255,.06);color:#fff}
.lang-pop .lang-btn.active{color:#fff;background:rgba(92,200,255,.14)}
#hamburger.site-burger{display:none;width:40px;height:40px;border:0;background:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;padding:0;position:static}
#hamburger.site-burger span{display:block;width:24px;height:2px;margin:0;background:var(--snow);border-radius:2px;transition:transform .3s,opacity .3s}
#hamburger.site-burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
#hamburger.site-burger.open span:nth-child(2){opacity:0}
#hamburger.site-burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#mobile-overlay.site-overlay{position:fixed;inset:0;z-index:998;background:rgba(2,4,10,.6);opacity:0;pointer-events:none;transition:opacity .3s;display:block}
#mobile-overlay.site-overlay.open{opacity:1;pointer-events:auto}
#mobile-nav.site-mnav{position:fixed;top:0;right:0;bottom:0;left:auto;z-index:999;width:min(300px,82vw);height:auto;background:rgba(7,13,28,.98);border-left:1px solid var(--edge-site);padding:92px 26px 28px;display:flex;flex-direction:column;align-items:stretch;gap:2px;transform:translateX(100%);opacity:1;visibility:visible;transition:transform .35s ease}
#mobile-nav.site-mnav.open{transform:none}
#mobile-nav.site-mnav a{display:block;text-decoration:none;color:var(--snow);font:600 20px var(--font);padding:13px 0;border-bottom:1px solid var(--edge-site);text-align:left;background:none}

/* Project cards with photos instead of emoji */
.pcard-thumb.photo{background:var(--img) var(--pos,center)/cover no-repeat!important;font-size:0!important;position:relative;min-height:170px}
.pcard-thumb.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,21,41,.85))}
.page-banner{opacity:var(--op,.62)}

/* ── Footer ─────────────────────────────────────── */
#site-footer{position:relative;z-index:1;overflow:hidden;margin-top:clamp(60px,8vw,100px);padding:clamp(130px,15vw,210px) var(--gutter) 30px;background:none;border:0;text-align:left;font-family:var(--font)}
#site-footer .footer-art{position:absolute;inset:0;background:linear-gradient(180deg,var(--space) 0%,rgba(5,9,19,.2) 35%,rgba(5,9,19,.55) 70%,var(--space) 100%),url(/img/footer-night.webp) 50% 60%/cover}
#site-footer .footer-inner{position:relative;max-width:1280px;margin:0 auto}
#site-footer .footer-quote{text-align:center;font-size:clamp(14px,1.3vw,17px);font-style:italic;color:rgba(242,246,252,.88);max-width:52ch;margin:0 auto clamp(50px,6vw,80px);text-shadow:0 2px 14px rgba(0,0,0,.9)}
#site-footer .footer-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;padding-top:22px;border-top:1px solid var(--edge-site);font-size:13.5px;color:var(--mist)}
#site-footer .footer-brand{font-weight:800;color:var(--snow);font-size:14px;letter-spacing:.08em}
#site-footer .footer-brand span{font-weight:300;color:rgba(242,246,252,.75)}
#site-footer .socials{display:flex;gap:6px;margin-left:auto}
#site-footer .socials a{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;color:rgba(242,246,252,.85);transition:background .2s}
#site-footer .socials a:hover{background:rgba(255,255,255,.08);color:#fff}
#site-footer .socials svg{width:20px;height:20px}

@media (max-width:1020px){
  #site-header .site-nav{display:none}
  #site-header .site-tools{margin-left:auto}
  #hamburger.site-burger{display:flex}
}
@media (max-width:720px){
  #site-header{padding:14px var(--gutter);gap:10px}
  #site-header .site-logo{font-size:17px}
  #site-footer .footer-row{flex-direction:column;text-align:center}
  #site-footer .socials{margin:0}
  .page-banner{height:clamp(380px,62vh,560px)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Projects page: 2 x 2 grid of photo cards */
.projects-section{max-width:980px!important}
.projects-grid{grid-template-columns:repeat(2,1fr)!important}
@media (max-width:720px){.projects-grid{grid-template-columns:1fr!important}}



/* Buttons and inputs inherit the site font everywhere */
button,input,select,textarea{font-family:var(--font)}