/* ============================================================================
   星叙 Sentisap · 全站公共样式 common.css
   视觉基调：雾蓝深空 + 星光点缀 + 金色柔和字体
   全站页面共用，任何页面只需引入本文件即可获得统一的星空视觉。
   ========================================================================= */

/* ---------------------------------------------------------------- 1. 设计变量 */
:root{
  /* 夜空 */
  --night:        #0e1728;   /* 主底色 */
  --night-2:      #13203a;   /* 次级底 */
  --night-3:      #1a2b49;   /* 雾蓝 */
  --night-deep:   #0b1322;   /* 深压底（页脚/分区） */
  --mist:         #294269;   /* 星云雾蓝 */

  /* 文字 */
  --cream:        #f2ece0;   /* 主文字（奶白） */
  --cream-soft:   #c3bcae;   /* 次级文字 */
  --dim:          #8b8b96;   /* 弱化文字 */
  --faint:        #5f6472;   /* 最弱文字 */

  /* 金色 */
  --gold:         #e0ac4e;
  --gold-bright:  #f0c877;
  --gold-deep:    #b8863a;

  /* 线与面 */
  --line:         rgba(226,215,192,.10);
  --line-soft:    rgba(226,215,192,.06);
  --line-gold:    rgba(224,172,78,.45);
  --surface:      rgba(255,255,255,.035);
  --surface-hi:   rgba(255,255,255,.055);

  /* 排版 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
                "SimSun", Georgia, "Times New Roman", serif;

  /* 布局 */
  --wrap: 1120px;
  --pad: 28px;
  --nav-h: 76px;
  --radius: 16px;

  /* 动效 */
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ---------------------------------------------------------------- 2. 基础重置 */
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{
  /* clip 而非 hidden：不创建滚动容器，不影响 sticky 导航 */
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  font-family:var(--font-sans);
  color:var(--cream);
  background-color:var(--night);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
b,strong{ font-weight:600; }

/* 内容层：抬到星空之上（注意——不要在此层叠上下文里使用 mix-blend-mode） */
.layer{ position:relative; z-index:1; }

/* 四芒星形状（纯 CSS，可复用的小星） */
.spark{
  display:inline-block; width:1em; height:1em;
  vertical-align:middle;
  background:currentColor;
  clip-path:polygon(50% 0%, 60.5% 39.5%, 100% 50%, 60.5% 60.5%,
                    50% 100%, 39.5% 60.5%, 0% 50%, 39.5% 39.5%);
}

/* ---------------------------------------------------------------- 3. 星空背景 */
/* 固定层，铺满视口，不随内容滚动。
   注意 z-index:-1 —— 让星空永远位于所有内容之下。
   若改成 0（定位元素的默认层级），按 CSS 绘制顺序它会盖住「非定位」的普通流文字，
   导致没加 .layer 的区块（例如页脚）整体看不见。 */
.sky{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-color:var(--night);
  /* 三层雾蓝星云，营造"深空"的纵深 */
  background-image:
    radial-gradient(ellipse 62% 46% at 16% 6%,  rgba(41,66,105,.60), rgba(41,66,105,0) 64%),
    radial-gradient(ellipse 54% 44% at 86% 22%, rgba(33,55,90,.52),  rgba(33,55,90,0) 66%),
    radial-gradient(ellipse 82% 48% at 50% 106%,rgba(26,43,73,.62),  rgba(26,43,73,0) 68%);
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-size:cover,cover,cover;
}
/* 两层星图：远星细密 + 近星带光晕与金色四芒星 */
.sky__stars,.sky__sparkles{
  position:absolute; inset:0;
  background-repeat:repeat;
  background-size:1440px 1440px;
}
.sky__stars{ background-image:url("../img/stars.svg"); opacity:.9; }
.sky__sparkles{
  background-image:url("../img/sparkles.svg");
  opacity:.85;
  /* 极缓慢的明暗呼吸，让星光"活着"，不产生重绘开销 */
  animation:twinkle 11s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ opacity:.68; }
  50%    { opacity:.95; }
}
/* 首屏中央的暖金光晕 */
.sky__glow{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(760px,120vw); height:760px; border-radius:50%;
  background:radial-gradient(circle,
    rgba(224,172,78,.13) 0%,
    rgba(224,172,78,.05) 42%,
    rgba(224,172,78,0)   72%);
}

/* ---------------------------------------------------------------- 4. 布局容器 */
.wrap{
  width:100%; max-width:var(--wrap);
  margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);
}

/* ---------------------------------------------------------------- 5. 顶部导航 */
.site-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(14,23,40,.74);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid var(--line);
}
.site-nav__in{
  position:relative;
  max-width:var(--wrap); margin:0 auto;
  padding:0 var(--pad); height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

/* 品牌标识（夜空反白版：奶白笔触 + 金色星辉，透明底，无需任何滤镜） */
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{ height:54px; width:auto; }
.brand:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:6px; }

/* 导航链接 */
.nav-menu{ display:flex; align-items:center; gap:34px; }
.nav-menu a{
  position:relative;
  font-size:15px; letter-spacing:.06em;
  color:var(--cream-soft);
  padding:6px 0;
  transition:color .22s;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:var(--gold-bright);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-menu a:hover{ color:var(--gold-bright); }
.nav-menu a:hover::after{ transform:scaleX(1); }
.nav-menu a.is-active{ color:var(--gold-bright); }
.nav-menu a.is-active::after{ transform:scaleX(1); background:var(--gold); }

/* --- 汉堡菜单：纯 CSS（复选框方案），移动端才显示 --- */
.nav-cb{
  position:absolute; width:1px; height:1px;
  opacity:0; pointer-events:none;
}
.burger{
  display:none;
  width:44px; height:44px; flex:0 0 auto;
  align-items:center; justify-content:center;
  cursor:pointer; border-radius:10px;
  transition:background .22s;
}
.burger:hover{ background:rgba(255,255,255,.06); }
.burger i{
  display:block; width:20px; height:1.7px; border-radius:2px;
  background:var(--cream-soft);
  transition:transform .3s var(--ease), opacity .2s, background .22s;
}
.burger i + i{ margin-top:5px; }
.nav-cb:checked ~ .site-nav .burger i:nth-child(1){ transform:translateY(6.7px) rotate(45deg); background:var(--gold-bright); }
.nav-cb:checked ~ .site-nav .burger i:nth-child(2){ opacity:0; }
.nav-cb:checked ~ .site-nav .burger i:nth-child(3){ transform:translateY(-6.7px) rotate(-45deg); background:var(--gold-bright); }

/* 移动端菜单展开时的遮罩：点击即关闭（label 直接切换复选框） */
.nav-scrim{
  display:none; position:fixed; inset:0; z-index:55;
  background:rgba(5,10,20,.55);
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.nav-cb:checked ~ .nav-scrim{ opacity:1; visibility:visible; }

/* ---------------------------------------------------------------- 6. 首页首屏 */
.hero{ padding:74px 0 96px; text-align:center; }

.hero__logo{
  width:min(440px,78vw); margin:0 auto 30px;
  /* 标识已是透明底，直接摆放即可；轻微光晕让它在星空里"亮"起来 */
  filter:drop-shadow(0 0 26px rgba(224,172,78,.16));
}
.hero__logo img{ width:100%; }

/* 德尔斐神庙箴言 */
.quote{
  font-family:var(--font-serif);
  font-size:clamp(26px,4.6vw,40px);
  font-weight:600;
  line-height:1.5;
  letter-spacing:.05em;
  color:var(--cream);
  margin-bottom:14px;
}
.quote em{
  font-style:normal;
  color:var(--gold-bright);
  text-shadow:0 0 26px rgba(224,172,78,.34);
}
.quote__by{
  display:block;
  font-family:var(--font-sans);
  font-size:13px; font-style:normal;
  letter-spacing:.14em;
  color:var(--gold);
  opacity:.82;
}

/* 分隔星线 */
.star-rule{
  position:relative;
  width:100%; max-width:240px; height:1px;
  margin:38px auto;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(226,215,192,.28) 20%,
    rgba(226,215,192,.28) 42%,
    transparent 42%, transparent 58%,
    rgba(226,215,192,.28) 58%,
    rgba(226,215,192,.28) 80%,
    transparent 100%);
}
.star-rule .spark{
  position:absolute; left:50%; top:50%;
  width:11px; height:11px;
  transform:translate(-50%,-50%);
  color:var(--gold-bright);
  filter:drop-shadow(0 0 7px rgba(240,200,119,.55));
}

/* 项目简介段落 */
.intro{
  max-width:632px; margin:0 auto;
  font-size:15.5px; line-height:2.15;
  color:var(--cream-soft);
  letter-spacing:.03em;
}
.intro p{ text-wrap:pretty; }
.intro p + p{ margin-top:6px; }
.intro p:last-child{ color:var(--cream); }
.intro .mod{ color:var(--gold-bright); font-weight:600; }
.intro .lead{ color:var(--cream); }
/* 不可内部断行的子句：配合 <wbr>，把换行点固定到语义边界 */
.intro .cl{ white-space:nowrap; }

/* ---------------------------------------------------------------- 7. 内页页头 */
.page-head{ padding:70px 0 52px; text-align:center; }
.page-head__eyebrow{
  font-size:11.5px; font-weight:600;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:18px;
}
.page-head__title{
  font-family:var(--font-serif);
  font-size:clamp(32px,5vw,44px);
  font-weight:600; letter-spacing:.12em;
  color:var(--cream);
  text-shadow:0 0 34px rgba(224,172,78,.20);
}
.page-head__sub{
  margin-top:14px;
  font-size:14.5px; letter-spacing:.16em;
  color:var(--dim);
}

/* ---------------------------------------------------------------- 8. 卡片网格 */
.section{ padding-bottom:96px; }
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(246px,1fr));
  gap:22px;
}

.note-card{
  position:relative; display:block;
  min-height:186px;
  padding:26px 24px 22px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s,
             border-color .3s, background .3s;
}
/* 金色书脊 */
.note-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, rgba(224,172,78,.9), rgba(224,172,78,0));
  opacity:.5; transition:opacity .3s;
}
.note-card:hover{
  transform:translateY(-4px);
  background:var(--surface-hi);
  border-color:var(--line-gold);
  box-shadow:0 16px 40px rgba(0,0,0,.42), 0 0 0 1px rgba(224,172,78,.10);
}
.note-card:hover::before{ opacity:1; }
.note-card:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

.note-card__no{
  font-size:11.5px; font-weight:600; letter-spacing:.22em;
  color:var(--gold); margin-bottom:20px;
}
.note-card__title{
  font-family:var(--font-serif);
  font-size:21px; font-weight:600; line-height:1.5;
  letter-spacing:.04em;
  color:var(--cream);
  margin-bottom:9px;
}
.note-card__meta{
  font-size:12.5px; line-height:1.8;
  color:var(--dim);
  letter-spacing:.02em;
}
.note-card__go{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  margin-top:18px;
  opacity:.72; transform:translateX(-3px);
  transition:opacity .28s, transform .28s var(--ease);
}
.note-card:hover .note-card__go{ opacity:1; transform:translateX(0); }

/* 卡片里的多个入口（第十五轮新增，只影响 .note-card 内部，不动其他页面） */
/* 主入口：::after 铺满整张卡 —— 鼠标落在卡片任何一处都算点它（stretched link）。
   卡片的定位基准来自 .note-card{position:relative}，不需要额外包一层。 */
.note-card__main{ color:inherit; }
.note-card__main::after{
  content:""; position:absolute; inset:0; z-index:0;
}
.note-card__main:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* 次入口：z-index 压在铺层之上，各自独立可点，不会被主入口抢走。
   尺寸刻意收紧 —— 卡片内容宽只有约 200px，两个入口必须并排在一行。 */
.note-card__cta{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:5px;
  flex:0 0 auto; white-space:nowrap;
  font-size:11.5px; font-weight:600; letter-spacing:.04em;
  color:var(--gold);
  padding:4px 10px;
  border:1px solid rgba(224,172,78,.30);
  border-radius:999px;
  background:rgba(224,172,78,.07);
  transition:color .22s, border-color .22s, background .22s;
}
.note-card__cta:hover{
  color:var(--gold-bright);
  border-color:var(--line-gold);
  background:rgba(224,172,78,.16);
}
.note-card__cta:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.note-card__cta--ghost{
  color:var(--cream-soft);
  border-color:var(--line);
  background:transparent;
}
.note-card__cta--ghost:hover{
  color:var(--gold-bright);
  border-color:var(--line-gold);
  background:rgba(224,172,78,.10);
}

/* 预留空位卡片 */
.note-card--empty{
  display:flex; align-items:center; justify-content:center;
  min-height:152px;
  background:transparent;
  border:1px dashed rgba(226,215,192,.15);
  cursor:default;
}
.note-card--empty::before{ display:none; }
.note-card--empty:hover{
  transform:none; background:rgba(255,255,255,.018);
  border-color:rgba(226,215,192,.22);
  box-shadow:none;
}
.note-card__ph{
  display:flex; align-items:center; gap:10px;
  font-size:12.5px; letter-spacing:.16em;
  color:var(--faint);
}
.note-card__ph .spark{
  width:9px; height:9px; color:var(--gold); opacity:.5;
}

/* ---------------------------------------------------------------- 9. 页脚 */
.site-foot{
  position:relative; z-index:1;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(11,19,34,0), rgba(11,19,34,.55));
}
.site-foot__in{
  max-width:var(--wrap); margin:0 auto;
  padding:36px var(--pad) 46px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px;
  font-size:12.5px; color:var(--dim); letter-spacing:.04em;
}
.site-foot__in .spark{ width:8px; height:8px; color:var(--gold); opacity:.65; margin-right:8px; }

/* ---------------------------------------------------------------- 10. 响应式 */
@media (max-width:820px){
  :root{ --pad:20px; --nav-h:64px; }

  .brand img{ height:42px; }

  /* 导航折叠为汉堡菜单 */
  .burger{ display:flex; }
  .nav-menu{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    padding:6px var(--pad) 16px;
    /* 必须用不透明底色：半透明会让下方首屏文字透出来，看起来像脏点 */
    background:#0c1626;
    box-shadow:0 18px 34px rgba(0,0,0,.45);
    border-bottom:1px solid var(--line);
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .28s, transform .28s var(--ease), visibility .28s;
  }
  .nav-menu a{
    font-size:16px; padding:15px 2px;
    border-bottom:1px solid var(--line-soft);
  }
  .nav-menu a::after{ display:none; }
  .nav-cb:checked ~ .site-nav .nav-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .nav-scrim{ display:block; }

  .hero{ padding:46px 0 66px; }
  .hero__logo{ width:min(300px,74vw); margin-bottom:24px; }
  .quote{ line-height:1.55; }
  .star-rule{ margin:28px auto; }
  .intro{ font-size:14.5px; line-height:2.05; }

  .page-head{ padding:46px 0 36px; }
  .page-head__sub{ font-size:13.5px; }

  .section{ padding-bottom:66px; }
  /* 列数交给 auto-fill 自动决定：宽屏 3~4 列，平板 2 列，手机自然落到 1 列 */
  .card-grid{ gap:16px; }
  .note-card{ min-height:0; padding:22px 20px 20px; }
  .note-card--empty{ min-height:98px; }
  .note-card__no{ margin-bottom:14px; }

  .site-foot__in{ padding:28px var(--pad) 34px; }
}

@media (max-width:420px){
  :root{ --pad:16px; }
  .hero__logo{ width:min(252px,72vw); }
  .intro{ font-size:14px; }
}

/* 让星空在窄屏密度更合适 */
@media (max-width:820px){
  .sky__stars,.sky__sparkles{ background-size:1000px 1000px; }
}

/* ---------------------------------------------------------------- 11. 动效偏好 */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ---------------------------------------------------------------- 12. 打印 */
@media print{
  .sky,.site-nav,.nav-scrim{ display:none !important; }
  body{ background:#fff; color:#111; }
}

/* ---------------------------------------------------------------- 13. 内页顶部：返回首页 */
/* 右上一组（菜单＋返回首页＋汉堡）整体靠右。
   注：只有两个子元素时（首页 / 星叙集）本规则与原来的 space-between 渲染完全一致。 */
.nav-menu{ margin-left:auto; }

.back-home{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; letter-spacing:.06em;
  color:var(--gold);
  padding:8px 15px;
  border:1px solid rgba(224,172,78,.32);
  border-radius:999px;
  background:rgba(224,172,78,.06);
  transition:color .22s, border-color .22s, background .22s;
}
.back-home:hover{
  color:var(--gold-bright);
  border-color:var(--line-gold);
  background:rgba(224,172,78,.12);
}
.back-home:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.back-home__arw{ font-size:13px; line-height:1; }

@media (max-width:820px){
  /* 导航折叠后 .nav-menu 已脱离文档流，改由返回按钮把右侧这一组顶到右边 */
  .back-home{ margin-left:auto; font-size:12px; padding:7px 12px; gap:5px; }
}