@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

/* --- 1. Reset & Global --- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; -webkit-text-size-adjust: none; }
ol, ul { list-style: none; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    background: #000000; /* 黑色背景 */
    color: #ffffff;      /* 白色文字 */
    font-size: 14px;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    line-height: 1.6;
    font-weight: 300;
}

/* --- 2. Typography & Links --- */
a {
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s ease;
}
a:hover { opacity: 0.7; }

h1, h2, h3, h4, h5, h6 { color: #ffffff; font-weight: 700; margin-bottom: 0.5em; }
p { margin-bottom: 1.5em; color: #dddddd; }

/* --- 3. Layout --- */
.container { width: 100%; padding: 0 20px; max-width: 900px; margin: 0 auto; }

/* --- 4. Header & Nav --- */
header {
    padding-top: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
    margin-bottom: 60px;
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.brand h1 { font-size: 24px; margin: 0; letter-spacing: -0.5px; }

.top-nav { display: flex; gap: 20px; align-items: center; }
.nav-links > ul { display: flex; gap: 30px; }
.nav-links li { position: relative; padding-bottom: 10px; }
.nav-links a { font-weight: 500; font-size: 14px; }

/* Dropdown Menu */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 1px solid #333;
    min-width: 160px;
    padding: 10px 0;
    z-index: 1000;
    flex-direction: column;
}
.nav-links li:hover .dropdown-menu { display: flex; }
.dropdown-menu a { padding: 8px 15px; color: #ccc; display: block; }
.dropdown-menu a:hover { background-color: #1a1a1a; color: #fff; }

/* --- 5. Content Sections --- */
.intro-text { font-size: 18px; color: #ddd; margin-bottom: 80px; max-width: 100%; }

.project-list { display: flex; flex-direction: column; gap: 100px; margin-bottom: 120px; }
.project-card { width: 100%; }
.image-wrapper { display: block; width: 100%; background-color: #111; margin-bottom: 15px; overflow: hidden; }
.image-wrapper img { width: 100%; height: auto; display: block; transition: opacity 0.5s ease; }
.project-card:hover .image-wrapper img { opacity: 0.8; }

.meta-info { font-size: 14px; line-height: 1.4; }
.designers { font-weight: 700; display: block; color: #fff; }
.project-title { color: #ccc; display: block; font-size: 16px; }
.location { color: #666; font-size: 12px; font-family: monospace; }

/* --- 6. Footer --- */
footer { border-top: 1px solid #333; padding: 60px 0; font-size: 12px; color: #888; }
.footer-content { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; }
.footer-col h5 { color: #fff; font-weight: 700; margin-bottom: 10px; text-transform: uppercase; }
.footer-col a { color: #888; border-bottom: 1px solid transparent; }
.footer-col a:hover { color: #fff; border-bottom: 1px solid #fff; }

/* --- 7. Mobile UI (Halcyonic JS Support) --- */
#titleBar {
    display: none; /* 默认隐藏，JS会在手机端显示 */
    height: 44px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    z-index: 10001;
    border-bottom: 1px solid #333;
}
#titleBar .toggle {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 44px;
    content: '';
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>') center center no-repeat;
}
#titleBar .title {
    display: block;
    text-align: center;
    color: #fff;
    line-height: 44px;
    font-weight: bold;
}

#navPanel {
    background: #111;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 275px;
    z-index: 10002;
    overflow-y: auto;
    transform: translateX(-275px);
    transition: transform 0.2s ease;
    padding-top: 20px;
}
#navPanel.navPanel-visible { transform: translateX(0); }
#navPanel .link {
    display: block;
    color: #ccc;
    text-decoration: none;
    padding: 10px 20px;
    border-bottom: 1px solid #222;
}
#navPanel .link:hover { color: #fff; background: #222; }

/* Mobile Media Query */
@media screen and (max-width: 736px) {
    #header .top-nav { display: none; } /* 隐藏桌面菜单 */
    #titleBar { display: block; } /* 显示手机顶部栏 */
    body { padding-top: 44px; } /* 为顶部栏留出空间 */
}