/* ============================================
   一叶舟 Yiyezhou Studio - 基础样式（全局共享）
   导航栏 / 页头 / 页脚 / 表单 / 模态框 / 响应式
   ============================================ */

/* ---- Reset ---- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;color:#1a1a1a;background:#fff;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}

/* ---- Navbar ---- */
.navbar{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:3px solid #000;transition:all .3s ease}
.navbar.scrolled{background:rgba(250,250,250,.98);box-shadow:0 4px 16px rgba(0,0,0,.12)}
.nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:center;padding:0 24px;height:64px;position:relative}
.nav-logo{position:absolute;left:24px;font-size:20px;font-weight:900;color:#000;letter-spacing:3px;display:flex;align-items:center;gap:8px}
.nav-logo .logo-icon{font-size:22px}
.nav-menu{display:flex;align-items:center;gap:4px}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:5px;padding:10px 20px;color:#222;font-size:15px;font-weight:700;letter-spacing:2px;transition:color .25s;cursor:pointer;white-space:nowrap;border:2px solid transparent;border-radius:4px}
.nav-link:hover,.nav-item:hover>.nav-link{color:#000;background:#f0f0f0;border-color:#000}
.nav-link .arrow{font-size:10px;transition:transform .3s}
.nav-item:hover .nav-link .arrow{transform:rotate(180deg)}
.dropdown-menu{position:absolute;top:calc(100%+6px);left:50%;transform:translateX(-50%) translateY(8px);min-width:160px;background:#fff;border:3px solid #000;border-radius:4px;box-shadow:6px 6px 0 #000;opacity:0;visibility:hidden;transition:all .25s ease;padding:8px 0;z-index:100}
.nav-item:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropdown-menu li a{display:block;padding:10px 24px;color:#333;font-size:14px;font-weight:600;transition:all .15s;letter-spacing:1px;border-left:4px solid transparent}
.dropdown-menu li a:hover{color:#000;background:#eee;border-left-color:#000;padding-left:28px}
.nav-link.active{color:#fff!important;background:#000;border-color:#000}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:#000;border:none;border-radius:4px;position:absolute;right:20px}
.nav-toggle span{width:22px;height:3px;background:#fff;transition:all .3s;border-radius:1px}

/* ---- Page Header ---- */
.page-header{position:relative;height:360px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;border-bottom:4px solid #000;background-image:repeating-linear-gradient(90deg,transparent,transparent 38px,#e0e0e0 38px,#e0e0e0 40px)}
.page-header .header-bg{position:absolute;inset:0;background:url("../images/page-header-bg.jpg") center/cover no-repeat;filter:grayscale(100%) contrast(1.15) brightness(.85)}
.page-header.no-image .header-bg{background:linear-gradient(135deg,#d8d8d8,#bcbcbc 50%,#a0a0a0);filter:none}
.page-header h1{position:relative;z-index:2;font-size:clamp(26px,4vw,46px);color:#000;font-weight:900;letter-spacing:6px;text-shadow:3px 3px 0 #ddd;-webkit-text-stroke:2px #000;paint-order:stroke fill}
.page-header .subtitle{position:relative;z-index:2;margin-top:10px;color:#555;font-size:14px;letter-spacing:4px;font-weight:700;text-transform:uppercase}

/* ---- Content Section ---- */
.content-section{max-width:1100px;margin:0 auto;padding:60px 24px}
.section-title{font-size:28px;font-weight:900;color:#000;margin-bottom:36px;text-align:center;position:relative;letter-spacing:3px;display:inline-block;width:100%}
.section-title::after{content:"";display:block;width:80px;height:4px;background:#000;margin:14px auto 0}
.comic-divider{width:100%;height:4px;background:repeating-linear-gradient(90deg,#000 0px,#000 12px,transparent 12px,transparent 20px);margin:48px auto;max-width:600px}

/* ---- Form (shared) ---- */
.form-group{margin-bottom:24px}
.form-group label{display:block;font-weight:800;color:#000;margin-bottom:8px;font-size:14px;letter-spacing:1px}
.form-group label .required{color:#000;margin-left:4px;font-size:16px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 18px;border:3px solid #000;border-radius:0;font-size:14px;font-family:inherit;font-weight:600;transition:all .2s;background:#fafafa;color:#222}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;background:#fff;box-shadow:4px 4px 0 #000}
.form-group textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.submit-btn{display:inline-block;padding:15px 56px;background:#000;color:#fff;border:3px solid #000;border-radius:0;font-size:16px;font-weight:900;letter-spacing:3px;cursor:pointer;transition:all .2s;margin-top:12px;font-family:inherit;box-shadow:5px 5px 0 #000;position:relative;top:0;left:0}
.submit-btn:hover{top:3px;left:3px;box-shadow:2px 2px 0 #000}
.submit-btn:active{top:5px;left:5px;box-shadow:none}

/* ---- Modal (shared) ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-box{background:#fff;border:3px solid #000;border-radius:4px;box-shadow:10px 10px 0 #000;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;padding:40px 36px 36px;position:relative}
.modal-close{position:absolute;top:12px;right:16px;font-size:28px;font-weight:900;background:none;border:none;cursor:pointer;color:#000;line-height:1;padding:4px 8px;transition:color .15s}
.modal-close:hover{color:#e8a87c}
.modal-title{font-size:22px;font-weight:900;letter-spacing:3px;margin-bottom:6px;border-bottom:3px solid #000;padding-bottom:12px}
.modal-series{display:inline-block;background:#000;color:#fff;font-size:13px;font-weight:800;letter-spacing:1px;padding:4px 16px;margin-bottom:24px}

/* ---- Footer ---- */
.footer{background:#000;color:#ccc;padding:48px 24px 28px;text-align:center;border-top:4px solid #000}
.footer-logo{font-size:24px;font-weight:900;color:#fff;letter-spacing:4px;margin-bottom:16px}
.footer-links{display:flex;justify-content:center;gap:28px;margin:24px 0;flex-wrap:wrap}
.footer-links a{color:#aaa;font-size:13px;font-weight:700;transition:color .3s;letter-spacing:1px;border-bottom:2px solid transparent}
.footer-links a:hover{color:#fff;border-bottom-color:#fff}
.footer-copy{font-size:12px;color:#666;margin-top:24px;padding-top:20px;border-top:2px solid #333}

/* ---- Responsive ---- */
@media(max-width:768px){
  .nav-toggle{display:flex}
  .nav-menu{position:fixed;top:64px;left:0;width:100%;background:#fff;flex-direction:column;padding:20px;gap:0;transform:translateY(-120%);opacity:0;transition:all .35s ease;border-bottom:3px solid #000;align-items:stretch}
  .nav-menu.active{transform:translateY(0);opacity:1}
  .nav-item{width:100%}
  .nav-link{padding:14px 0;border:none;border-bottom:2px solid #eee;justify-content:center}
  .nav-link:hover{background:transparent;border-color:transparent}
  .dropdown-menu{position:static;transform:none!important;opacity:1!important;visibility:visible!important;background:#f5f5f5;border:none;box-shadow:none;padding:0 0 0 16px;display:none;border-left:3px solid #000}
  .nav-item.dropdown-open .dropdown-menu{display:block}
  .dropdown-menu li a{padding:10px 0;color:#555;border:none}
  .dropdown-menu li a:hover{background:transparent;border-left:3px solid #000;padding-left:12px;font-weight:800}
  .page-header{height:260px}
  .form-row{grid-template-columns:1fr}
  .commission-form-wrap{padding:28px 20px}
  .process-steps{flex-direction:column;align-items:stretch}
  .process-step{margin-bottom:-3px}
  .process-step::after{display:none}
  .gallery-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .nav-logo{position:static;margin-right:auto}
  .nav-inner{justify-content:space-between}
  .modal-box{padding:28px 20px;box-shadow:6px 6px 0 #000}
}
@media(max-width:480px){
  .section-title{font-size:22px}
  .content-section{padding:36px 16px}
}
/* ---- Lightbox 图片放大 ---- */
.lightbox-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:99999;display:none;align-items:center;justify-content:center;cursor:pointer}
.lightbox-overlay.show{display:flex}
.lightbox-overlay img{max-width:90vw;max-height:90vh;border:4px solid #000;box-shadow:8px 8px 0 rgba(255,255,255,.2);object-fit:contain}
.lightbox-close{position:absolute;top:16px;right:20px;color:#fff;font-size:36px;font-weight:900;cursor:pointer;z-index:100000;line-height:1;user-select:none}
.lightbox-close:hover{color:#e8a87c}