/* 设计令牌与基础样式（逐行注释版） */ /* 文件顶部总注释 */

/*
  Design tokens from MasterGo DSL
  --paint-2-008: #F6FFFF (Page background)
  --paint-2-011: gradient/image + #EBEBEB (Hero bg)
  --effect-2-014: 0px 4px 10px rgba(0,0,0,0.3)
  --paint-2-017: #FFFFFF (Card bg)
  --paint-2-028: #3D3D3D (Primary text)
  --paint-2-020: #EEF5F7 (Top bar bg)
  --paint-2-055: #BCD9D8 (Login pill)
  --paint-2-050: #5594BC (Logo color)
  --paint-2-062: #5486B6 (Divider)
  --paint-2-077: #7A7A7A (Line)
  --paint-2-090: #3D3D3D (Icon fill)
  --paint-2-081: #A2BEDC (Price badge)
  --paint-2-094: #FFFFFF (on-dark)
  --paint-2-096: #000000 (pure black)
  --paint-2-131: #D8D8D8 + image (cover)
  --paint-2-123: #D8D8D8 + image (cover)
  --paint-2-119: #D8D8D8 + image (cover)
  --paint-2-127: #D8D8D8 + image (cover)
  --paint-2-166: #777777
  --paint-2-195: #475569 (Primary btn)
  --paint-2-204: transparent
  --paint-2-212: #4B5563 (About text)
  --paint-2-220: #748991
  --paint-2-223: #6C8F9A
  --paint-2-233: #A6BCC3 (Footer bg)
  --paint-2-236: #3A4B65 (Footer divider)
  --paint-2-240: #231F20 (Icon dark)
  --paint-2-270: #E7275E (Social red)
  --paint-2-267: #38BAC3 (Social cyan)
  --paint-2-273: #190D18 (Social dark bg)
  --paint-2-285: #000000 (Footer text)
  --paint-2-322: #EEEEEE (Social inner)
  --paint-2-325: #E50000 (Badge red)
*/

:root { /* 根作用域：CSS 变量定义 */
  /* color tokens */ /* 颜色令牌区 */
  --bg-2-008: #F6FFFF; /* 页面背景 */
  --bg-top-2-020: #EEF5F7; /* 顶部条背景 */
  --card-2-017: #FFFFFF; /* 卡片背景 */
  --ink-2-028: #3D3D3D; /* 主文字色 */
  --ink-2-090: #3D3D3D; /* 图标主色 */
  --pill-2-055: #BCD9D8; /* 登录胶囊色 */
  --logo-2-050: #5594BC; /* 标志色 */
  --divider-2-062: #5486B6; /* 分割线色 */
  --line-2-077: #7A7A7A; /* 线条色 */
  --accent-2-081: #A2BEDC; /* 强调/价格徽章 */
  --white-2-094: #FFFFFF; /* 纯白 */
  --black-2-096: #000000; /* 纯黑 */
  --btn-2-195: #475569; /* 主按钮背景 */
  --text-2-212: #4B5563; /* about 文本 */
  --muted-2-220: #748991; /* 次级文字 */
  --muted-2-223: #6C8F9A; /* 次级文字变体 */
  --footer-2-233: #A6BCC3; /* 页脚背景 */
  --footer-line-2-236: #3A4B65; /* 页脚分隔线 */
  --icon-2-240: #231F20; /* 深色图标 */
  --social-dark-2-273: #190D18; /* 社交深色背景 */
  --social-red-2-270: #E7275E; /* 社交红 */
  --social-cyan-2-267: #38BAC3; /* 社交青 */
  --footer-ink-2-285: #000000; /* 页脚文字色 */
  --social-inner-2-322: #EEEEEE; /* 社交内层灰 */
  --badge-red-2-325: #E50000; /* 徽章红 */

  /* shadows */ /* 阴影区 */
  --elev-2-014: 0 4px 10px rgba(0, 0, 0, 0.3); /* 通用投影 */

  /* typography */ /* 字体家族 */
  --font-display-script: 'Alex Brush', cursive; /* 展示用手写体 */
  --font-logo-script: 'Sacramento', cursive; /* Logo 手写体 */
  --font-body: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Source Han Sans', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif; /* 正文字体族 */
  --font-serif: 'Ovo', Georgia, serif; /* 衬线字体 */

  /* radii */ /* 圆角半径 */
  --r-30: 30px; /* 卡片圆角 */
  --r-31: 31px; /* 特殊圆角 */
  --r-77: 77px; /* 胶囊半径 */
  --r-90: 90px; /* 大圆角 */
  --r-pill: 999px; /* 胶囊极大值 */

  /* spacing */ /* 间距刻度 */
  --space-2: 8px; /* 8px 间距 */
  --space-3: 12px; /* 12px 间距 */
  --space-4: 16px; /* 16px 间距 */
  --space-5: 20px; /* 20px 间距 */
  --space-6: 24px; /* 24px 间距 */
  --space-8: 32px; /* 32px 间距 */
  --space-10: 40px; /* 40px 间距 */
  --space-12: 48px; /* 48px 间距 */
  --space-16: 64px; /* 64px 间距 */
  --space-24: 96px; /* 96px 间距 */

  /* sizes */ /* 尺寸类变量 */
  --container: 1320px; /* 页面主容器最大宽度 */
  /* page left/right padding for .container */ /* 与 container 水平内边距一致 */
  --page-padding: var(--space-4); /* 页面级左右内边距 */
}

* { /* 全局盒模型设置 */
  box-sizing: border-box; /* 包括内边距与边框 */
}

html, /* 根元素 */
body { /* 文档主体 */
  height: 100%; /* 占满视口高度用于粘性布局 */
}

body { /* 页面主体基础样式 */
  margin: 0; /* 去掉默认外边距 */
  font-family: var(--font-body); /* 使用正文字体 */
  color: var(--ink-2-028); /* 主文字色 */
  background: var(--bg-2-008); /* 页面背景色 */
}

.container { /* 居中容器 */
  width: 100%; /* 横向占满 */
  max-width: var(--container); /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 var(--space-4); /* 左右内边距 */
}

.site-header { /* 站点头部（吸顶） */
  position: sticky; /* 粘性定位 */
  top: 0; /* 吸附顶部 */
  z-index: 10; /* 置于内容之上 */
  background: var(--bg-top-2-020); /* 顶部背景 */
  box-shadow: var(--elev-2-014); /* 阴影分隔 */
}

.nav-bar { /* 导航条容器 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 纵向居中 */
  justify-content: space-between; /* 两端对齐 */
  gap: var(--space-6); /* 子项间距 */
  height: 61px; /* 高度 */
}

.brand .logo-script { /* 品牌 Logo 字体样式 */
  font-family: var(--font-logo-script); /* Logo 手写体 */
  font-size: 28px; /* 字号 */
  color: var(--logo-2-050); /* 品牌色 */
}

.main-nav { /* 主导航容器 */
  display: flex; /* 弹性布局 */
  gap: var(--space-5); /* 链接间距 */
  align-items: center; /* 垂直居中 */
}

.main-nav .nav-link { /* 导航链接样式 */
  color: var(--ink-2-028); /* 链接颜色 */
  text-decoration: none; /* 去下划线 */
  font-size: 16px; /* 字号 */
}

.main-nav .nav-link:hover { /* 链接悬停态 */
  text-decoration: underline; /* 显示下划线 */
}

.actions .btn-login { /* 登录按钮 */
  background: var(--pill-2-055); /* 背景色 */
  border: 0; /* 无边框 */
  padding: 6px 14px; /* 内边距 */
  border-radius: var(--r-pill); /* 胶囊形状 */
  cursor: pointer; /* 指针样式 */
  color: var(--ink-2-028); /* 字体颜色 */
}

.btn { /* 通用按钮基类 */
  display: inline-flex; /* 内联弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  border: 0; /* 无边框 */
  cursor: pointer; /* 指针样式 */
}

.btn-primary { /* 主按钮样式 */
  background: var(--btn-2-195); /* 背景色 */
  color: var(--white-2-094); /* 文字白色 */
  padding: 12px 32px; /* 内边距 */
  border-radius: 4px; /* 圆角 */
}

.btn-pill { /* 胶囊按钮变体 */
  border-radius: var(--r-pill); /* 大圆角 */
}

.hero-section { /* 主视觉区域 */
  position: relative; /* 为绝对定位背景提供参照 */
  min-height: var(--hero-height, 640px); /* 可配置最小高度 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中内容 */
  padding-bottom: var(--hero-bottom-extend, 0px); /* 可选底部扩展留白 */
}

.hero-bg { /* 主视觉背景层（绝对定位全覆盖） */
  position: absolute; /* 绝对定位 */
  inset: 0; /* 填满容器 */
  /* 顶层是渐变，其下为本地优先的图片；若未提供本地，则使用外链兜底 */ /* 背景图层说明 */
  background-image:
    linear-gradient(180deg, rgba(235, 235, 235, 0) 0%, rgba(235, 235, 235, 0) 100%), /* 渐变层 */
    var(--hero-img); /* 图片层（页面级设置） */
  /* 渐变不重复；图片按高度自适应，横向平铺到两端 */ /* 背景尺寸策略 */
  background-size: auto, auto 100%; /* 渐变自动，图片高度填满 */
  /* 渐变层居中；图片层的水平起点与 .container 左边对齐（中心留白 + 页面内边距）；垂直以居中为基准并可用 --hero-y-offset 微调 */ /* 背景位置策略 */
  background-position:
    center center, /* 渐变居中 */
    calc(clamp(0px, (100vw - var(--container)) / 2, 100vw) + var(--page-padding)) var(--hero-top-offset, 0px); /* 图片左对齐容器，垂直偏移可调 */
  background-repeat: no-repeat, repeat-x; /* 渐变不重复，图片横向平铺 */
  box-shadow: none; /* 移除内阴影避免遮挡 */
  /* 提示：向上移动图片（负 offset）可露出更多底部，必要时提升 hero-section 的 padding-bottom */ /* 使用指南 */
}

.hero-content { /* 主视觉内容容器 */
  position: relative; /* 位于背景之上 */
  padding: var(--space-24) 0 var(--space-12); /* 上下内边距 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 纵向排列 */
  align-items: center; /* 水平居中 */
  gap: var(--space-6); /* 子项间距 */
}

.hero-title { /* 主标题样式 */
  font-family: var(--font-display-script); /* 手写体展示字体 */
  font-size: clamp(48px, 8vw, 96px); /* 响应式字号 */
  color: var(--ink-2-028); /* 文字颜色 */
  margin: 0; /* 清除默认外边距 */
}

.search-bar { /* 搜索条容器 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  gap: var(--space-2); /* 子项间距 */
  background: var(--card-2-017); /* 背景色 */
  border-radius: var(--r-77); /* 大圆角 */
  box-shadow: var(--elev-2-014); /* 投影 */
  padding: 6px 12px; /* 内边距 */
  width: min(650px, 90%); /* 最大宽度限制 */
}

.search-bar input { /* 搜索输入框 */
  flex: 1; /* 占据剩余空间 */
  border: none; /* 无边框 */
  outline: none; /* 去轮廓 */
  padding: 10px 12px; /* 内边距 */
  font-size: 16px; /* 字号 */
  background: transparent; /* 透明背景 */
}

.icon-btn { /* 图标按钮 */
  background: transparent; /* 透明背景 */
  border: none; /* 无边框 */
  padding: 8px; /* 内边距 */
  cursor: pointer; /* 指针样式 */
}

.section { /* 通用版块容器 */
  padding: var(--space-16) 0; /* 上下间距 */
}

.section-title { /* 版块标题 */
  text-align: center; /* 居中 */
  font-size: 36px; /* 字号 */
  margin: 0 0 var(--space-10); /* 底部外边距 */
}

.works-grid { /* 作品栅格（12 列） */
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(12, 1fr); /* 12 等分 */
  gap: var(--space-6); /* 网格间距 */
}

.work-card { /* 作品卡片 */
  background: var(--card-2-017); /* 卡片背景 */
  border-radius: var(--r-30); /* 圆角 */
  box-shadow: var(--elev-2-014); /* 投影 */
  overflow: hidden; /* 裁剪溢出 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 纵向排列 */
}

.work-card .work-media { /* 卡片媒体区域 */
  background-position: center, center; /* 多层背景：均居中 */
  background-size: cover, cover; /* 多层背景：均 cover */
  background-repeat: no-repeat, no-repeat; /* 多层背景：不重复 */
  aspect-ratio: 16/9; /* 固定比例避免 CLS */
}

.work-card .work-info { /* 卡片信息区域 */
  padding: var(--space-4) var(--space-5) var(--space-6); /* 内边距 */
  display: flex; /* 弹性布局 */
  flex-direction: column; /* 纵向排列 */
  gap: var(--space-3); /* 子项间距 */
}

.work-title { /* 卡片标题 */
  margin: 0; /* 清除外边距 */
  font-size: 24px; /* 字号 */
}

.work-cta { /* 卡片底部操作区 */
  display: flex; /* 弹性布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 两端分布 */
}

.price { /* 价格样式 */
  font-weight: 700; /* 加粗 */
  font-size: 18px; /* 字号 */
}

.btn-buy { /* 购买按钮 */
  background: var(--accent-2-081); /* 背景色 */
  color: var(--ink-2-028); /* 文字色 */
  padding: 6px 14px; /* 内边距 */
  border-radius: 6px; /* 圆角 */
}

/* layout mapping to DSL */ /* 与 DSL 的布局映射 */
.work-lg { /* 大卡：跨 6 列 */
  grid-column: span 6; /* 跨 6/12 列 */
}

.work-md { /* 中卡：跨 6 列 */
  grid-column: span 6; /* 跨 6/12 列 */
}

.work-sm { /* 小卡：跨 3 列 */
  grid-column: span 3; /* 跨 3/12 列 */
}

@media (max-width: 1024px) { /* 平板断点及以下 */

  .work-lg, /* 大卡 */
  .work-md { /* 中卡 */
    grid-column: span 12; /* 改为整行 */
  }

  .work-sm { /* 小卡 */
    grid-column: span 6; /* 半行（两列并排） */
  }
}

@media (max-width: 640px) { /* 手机断点及以下 */
  .main-nav { /* 主导航 */
    display: none; /* 隐藏（可改为汉堡菜单） */
  }

  .work-sm { /* 小卡 */
    grid-column: span 12; /* 也改为整行 */
  }
}

.about-section { /* About 版块外层 */
  background: var(--card-2-017); /* 卡片背景 */
  box-shadow: var(--elev-2-014) inset; /* 内阴影以区隔 */
}

.about-card { /* About 卡片布局 */
  display: grid; /* 网格布局 */
  gap: var(--space-8); /* 网格间距 */
  grid-template-columns: repeat(12, 1fr); /* 12 列 */
  align-items: center; /* 垂直对齐 */
}

.about-media { /* About 图片区域 */
  grid-column: span 5; /* 占 5/12 列 */
  border-radius: 10px 90px; /* 特殊圆角 */
  aspect-ratio: 3/3.4; /* 固定比例 */
  /* 仅使用本地图片 */ /* 资源说明 */
  background-image: url('../assets/images/about-photo.png'); /* 本地图片路径 */
  background-position: center; /* 居中 */
  background-size: cover; /* cover 裁剪 */
  background-repeat: no-repeat; /* 不重复 */
  box-shadow: var(--elev-2-014); /* 投影 */
}

.about-content { /* About 文本区域 */
  grid-column: span 7; /* 占 7/12 列 */
  color: var(--text-2-212); /* 文字颜色 */
}

.about-content p { /* About 段落 */
  line-height: 1.7; /* 行高 */
}

.site-footer { /* 页脚外层 */
  background: var(--footer-2-233); /* 背景色 */
  color: var(--black-2-096); /* 文字色 */
}

.footer-top { /* 页脚顶部区域 */
  display: grid; /* 网格布局 */
  grid-template-columns: repeat(12, 1fr); /* 12 列 */
  gap: var(--space-8); /* 网格间距 */
  padding: var(--space-12) 0; /* 上下内边距 */
}

.footer-col { /* 页脚列 */
  grid-column: span 3; /* 每列 3/12（4 列） */
}

.brand-col .logo-big { /* 页脚 Logo */
  font-family: var(--font-logo-script); /* Logo 字体 */
  font-size: 64px; /* 大字号 */
  color: var(--logo-2-050); /* 品牌色 */
}

.slogan { /* 标语 */
  white-space: pre-line; /* 保留换行 */
}

.links-col ul, /* 链接列表 */
.contact-list { /* 联系方式列表 */
  list-style: none; /* 去项目符号 */
  padding: 0; /* 去内边距 */
  margin: 0; /* 去外边距 */
  display: grid; /* 网格 */
  gap: 12px; /* 项间距 */
}

.links-col a { /* 页脚链接 */
  color: inherit; /* 继承颜色 */
  text-decoration: none; /* 无下划线 */
}

.links-col a:hover { /* 悬停态 */
  text-decoration: underline; /* 加下划线 */
}

.socials { /* 社交图标容器 */
  display: flex; /* 弹性布局 */
  gap: 16px; /* 图标间距 */
}

.social { /* 社交图标底块 */
  width: 38px; /* 宽度 */
  height: 34px; /* 高度 */
  background: var(--social-dark-2-273); /* 背景色 */
  border-radius: 6px; /* 圆角 */
  display: inline-block; /* 行内块 */
  position: relative; /* 相对定位（可放伪元素） */
}

.social-red { /* 红色社交块 */
  background: var(--social-red-2-270); /* 红色 */
}

.social-gray { /* 灰色社交块 */
  background: var(--social-inner-2-322); /* 灰色 */
}

.footer-bottom { /* 页脚底部区域 */
  padding: 0 0 var(--space-8); /* 下间距 */
}

.footer-bottom .divider { /* 页脚分割线 */
  height: 1px; /* 线高 */
  background: var(--footer-line-2-236); /* 颜色 */
  margin: var(--space-6) 0 var(--space-5); /* 上下外边距 */
}

/* Simple icons placeholder */ /* 简易图标占位 */
.icon-mail::before { /* 邮件图标伪元素 */
  content: '✉️'; /* 内容 */
  margin-right: 8px; /* 右间距 */
}

.icon-phone::before { /* 电话图标伪元素 */
  content: '📞'; /* 内容 */
  margin-right: 8px; /* 右间距 */
}

.icon-location::before { /* 定位图标伪元素 */
  content: '📍'; /* 内容 */
  margin-right: 8px; /* 右间距 */
}