/* ============================================================
   shared.css — nav, hamburger, mobile-nav, footer
   共用於 profile.html / index.html / proartcampaignsite.html
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ─── NAV ─── */
.nav{
  position:fixed;
  top:0;left:0;right:0;
  height:113px;
  background:#1a1a1a;
  z-index:9999;
  display:flex;
  align-items:center;
  padding:0 max(40px, calc((100% - 926px) / 2));
  justify-content:space-between;
}
.nav-logo{
  font-family:'Fraunces',serif;
  font-size:34px;
  font-weight:600;
  font-style:normal;
  color:#fff;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.nav-links{
  display:flex;
  align-items:center;
  height:113px;
}
.nav-link{
  font-family:'Roboto',sans-serif;
  font-size:16px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#fff;
  padding:0 20px;
  height:113px;
  display:flex;
  align-items:center;
  position:relative;
  cursor:pointer;
}
.nav-link.active::after{
  content:'';
  position:absolute;
  bottom:30px;
  left:20px;
  right:20px;
  height:2px;
  background:#fff;
}
.nav-dropdown{
  position:relative;
  height:113px;
  display:flex;
  align-items:center;
}
.nav-dropdown-panel{
  display:none;
  position:absolute;
  top:113px;right:0;
  background:#222;
  border:1px solid #3a3a3a;
  padding:8px 0;
  min-width:120px;
  z-index:10000;
}
.nav-dropdown:hover .nav-dropdown-panel{display:block}
.nav-dropdown-panel a{
  display:block;
  padding:8px 20px;
  font-family:'Roboto',sans-serif;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.07em;
  text-transform:uppercase;
  color:#aaa;
}
.nav-dropdown-panel a:hover{color:#fff}

/* ─── HAMBURGER ─── */
.hamburger{
  display:none;
  flex-direction:column;gap:5px;
  cursor:pointer;background:none;border:none;padding:4px;
}
.hamburger span{display:block;width:22px;height:2px;background:#fff}

/* ─── MOBILE NAV ─── */
.mobile-nav{
  display:none;position:fixed;
  top:113px;left:0;right:0;
  background:#1a1a1a;z-index:9998;
  padding:8px 0 16px;
  border-top:1px solid #333;
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:14px 32px;
  font-size:14px;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:#ccc;
  border-bottom:1px solid #2a2a2a;
}
.mobile-nav a.sub{padding-left:52px;font-size:12px;font-weight:400;color:#888}
.mobile-nav a:hover{color:#fff}

/* ─── FOOTER ─── */
footer{
  position:relative;
  z-index:1;
  background:#000;
  padding:16px 0;
  text-align:center;
  width:100%;
}
footer p{
  font-family:'Roboto',sans-serif;
  font-size:12px;
  font-weight:100;
  color:rgb(158,158,158);
  letter-spacing:0.02em;
}

/* ─── RESPONSIVE: NAV / HAMBURGER ─── */
@media(max-width:768px){
  .nav{padding:0 24px;height:80px}
  .nav-logo{font-size:26px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .mobile-nav{top:80px}
}
@media(max-width:480px){
  .nav{height:64px;padding:0 16px}
  .nav-logo{font-size:22px}
  .mobile-nav{top:64px}
}

/* ─── PROJECT PAGES: shared text styles ─── */
.page-wrap{
  margin-top:113px;
  min-height:100vh;
  position:relative;
  z-index:1;
}
.project-title{
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  font-size:36px;
  font-weight:700;
  color:#66DA43;
  letter-spacing:0.04em;
  line-height:1.25;
  margin-bottom:20px;
}
.project-meta{
  margin-bottom:28px;
}
.project-meta p{
  font-size:15px;
  font-weight:400;
  color:#fff;
  line-height:1.9;
}
.project-meta span{
  color:#ccc;
  font-weight:300;
}
.project-meta a{
  color:#ccc;
  font-weight:300;
  text-decoration:underline;
}
.project-meta a:hover{color:#fff}
.project-subtitle{
  font-size:18px;
  font-weight:700;
  color:#66DA43;
  line-height:1.45;
  margin-bottom:14px;
}
.project-desc{
  font-size:16px;
  font-weight:300;
  color:#ccc;
  line-height:1.75;
  margin-bottom:32px;
}
.project-section-label{
  font-size:14px;
  font-weight:700;
  color:#fff;
  letter-spacing:0.06em;
  text-transform:uppercase;
  margin-bottom:12px;
  margin-top:40px;
}
.project-screenshot{
  width:100%;
  display:block;
  margin:0 auto 24px;
  max-width:none;
}

/* ─── PROJECT PAGES: two-column description block ─── */
.desc-two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  margin-top:24px;
  margin-bottom:32px;
}
.desc-col-label{
  font-size:18px;
  font-weight:700;
  color:#66DA43;
  letter-spacing:0.02em;
  margin-bottom:10px;
}
.desc-col-text{
  font-size:16px;
  font-weight:300;
  color:#ccc;
  line-height:1.75;
}

/* ─── TYPE2: left-image layout title override ─── */
.type2 .project-title{font-size:32px}

/* ─── PROJECT PAGES: responsive ─── */
@media(max-width:768px){
  .page-wrap{margin-top:80px}
  .project-title{font-size:26px}
  .type2 .project-title{font-size:26px}
  .project-meta p{font-size:14px}
  .project-subtitle{font-size:18px}
  .project-desc{font-size:14px}
  .desc-two-col{grid-template-columns:1fr;gap:24px}
}
@media(max-width:480px){
  .page-wrap{margin-top:64px}
  .project-title{font-size:22px;letter-spacing:0.02em}
  .type2 .project-title{font-size:22px;letter-spacing:0.02em}
}