/* =========================
   Global Base
   ========================= */
:root{
  --ink:#111;
  --ink-2:#444;
  --brand:#1B3A57;      /* 深蓝：专业 */
  --accent:#D95F1C;     /* 橙色：点缀 */
  --paper:#fff;
  --maxw:800px;
}

html,body{
  padding:0; margin:0;
  background:var(--paper);
  color:var(--ink);
}

body{
  font-family:'Cormorant Garamond', serif;
  line-height:1.8;
  max-width:var(--maxw);
  margin:80px auto;
  padding:0 20px;
}

/* 通用排版 */
h1,h2,h3{
  font-family: 'Cormorant Garamond', serif; /* 标题用历史感衬线 */
  font-weight:700;
  line-height:1.3;
  margin:0.6em 0 0.4em;
}
h1{
  text-align:center;
  font-size:2.5em;
  margin-bottom:0.5em;
}
p{
  font-size:1.1em;
  text-align:justify;
  margin:0 0 1.8em;
}
a{
  color:var(--brand);
  text-decoration:none;
}
a:hover{
  color:var(--accent);
  text-decoration:none;
}

/* =========================
   Modern Sticky Navbar
   ========================= */
.navbar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;

  background: rgba(255, 255, 255, 0.85); /* 半透明背景 */
  backdrop-filter: blur(8px);            /* 毛玻璃模糊效果 */
  border-bottom: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);

  z-index: 1000;
}

.navbar a,
.navbar .dropbtn {
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  padding: 6px 10px;
  transition: color 0.3s, background 0.3s;
}

.navbar a:hover,
.navbar .dropbtn:hover {
  color: var(--accent);
  background: rgba(0,0,0,0.03);
  border-radius: 4px;
}

/* =========================
   Page Content Spacing
   ========================= */
main {
  margin-top: 40px;   /* ✅ 改这里控制正文与导航的距离 */
}


/* =========================
   Dropdown (Glass Style)
   ========================= */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  min-width: 240px;
  padding: 10px 0;

  background: rgba(255, 255, 255, 0.85); /* 半透明白 */
  backdrop-filter: blur(10px);            /* 毛玻璃 */
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);

  z-index: 1000;
  text-align: left;
}

.dropdown-content a {
  color: var(--ink);
  padding: 10px 16px;
  text-decoration: none;
  display: block;
  transition: background 0.3s, color 0.3s;
  border-radius: 4px;
}

.dropdown-content a:hover {
  background: rgba(0,0,0,0.05);
  color: var(--accent);
}

/* Hover 显示下拉 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* =========================
   Divider
   ========================= */
.divider{
  height:2px;
  width:150px;
  background:var(--brand);
  margin:40px auto;
}

/* =========================
   Section Title (可替代内联样式)
   ========================= */
.section-title{
  font-size:1.6em;
  margin-top:40px;
  margin-bottom:0.5em;
  border-left:4px solid var(--brand);
  padding-left:10px;
}

/* =========================
   Home Page – About Layout
   ========================= */
.about-container {
  display: flex;
  flex-wrap: wrap;         /* 手机端自动换行 */
  gap: 40px;
  align-items: center;     /* 图片和文字居中对齐 */
  margin-bottom: 40px;
}

.about-left {
  flex: 1.2 1 300px;         /* 图片区域最小250px，响应式缩放 */
  text-align: center;
  margin-top: 20px; 
}

.about-img {
  max-width: 100%;
  width: 100%;              /* ✅ 在手机端自动跟随文字宽度 */
  border: 6px solid #fff;  /* 白色边框 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影让边框更突出 */
  height: auto;             /* ✅ 保持比例 */
}

.about-right {
  flex: 1.8 1 400px;         /* 文字区域更大 */
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 1.05em;
  line-height: 1.7;
}

.about-left .img-credit {
  max-width: 360px;   /* Home 页图片宽度 */
}

.figure-torn + .img-credit {
  max-width: 320px;   /* Research 页图片宽度 */
}


/* =========================
   Research Page – Subsections
   ========================= */
.subhead{
  font-size:1.2em;
  font-weight:700;
  margin:0.6em 0 0.2em;
}
.subdesc{
  margin:0 0 1.2em;
  color:var(--ink-2);
}

/* =========================
   Research Page – Torn-Edge Figure (Square)
   统一正方形比例、统一尺寸、响应式
   ========================= */
.figure-torn{
  position:relative;
  width: min(320px, 70%);   /* 更小：大屏最大 360px，小屏占 70% */
  aspect-ratio: 1 / 1;      /* 正方形 */
  margin:20px auto 12px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.12));
  overflow:hidden;          /* 防止内容溢出容器 */


  clip-path: polygon(
    4% 6%, 10% 3%, 18% 5%, 28% 2%, 40% 4%, 52% 1%,
    63% 3%, 72% 2%, 82% 5%, 92% 3%, 97% 8%, 99% 16%,
    98% 28%, 100% 40%, 97% 52%, 99% 62%, 96% 73%,
    99% 84%, 97% 92%, 90% 96%, 
    82% 98%, 72% 96%, 61% 99%, 50% 96%, 40% 99%,
    30% 96%, 20% 98%, 12% 95%, 7% 92%, 
    5% 84%, 3% 73%, 4% 61%, 2% 55%, 5% 38%, 4% 27%, 2% 16%
  );
}

/* 图像填充容器并裁剪；撕碎边缘 clip-path 可按需微调 */
.figure-torn img{
  position:static;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;         /* 保持比例、填满、裁剪溢出 */
  display:block;
  transform: scale(1.02); /* 轻微放大，避免出现细白缝 */
  filter:contrast(1.02) saturate(0.92);
}

/* 可选图注 */
.figure-torn figcaption{
  font-style:italic;
  text-align:center;
  font-size:.95em;
  color:var(--ink-2);
  margin-top:6px;
}

/* =========================
   Trivia Page
   ========================= */
.trivia-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
}

.trivia-left {
  flex: 1.5 1 400px;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 1.05em;
  line-height: 1.7;
}

.trivia-left .section-title {
  margin-top: 0px;   /* 比默认40px小一半 */
  font-size: 1.55em;   /* 稍微比页面主标题小 */
}


.trivia-right {
  flex: 1 1 300px;
  text-align: center;
}

/* 图片样式（与 Home 页呼应） */
.trivia-figure {
  display: inline-block;
  margin: 0;
}
.trivia-img {
  max-width: 100%;
  border: 6px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  height: auto;
}


/* =========================
   Anchor Scroll Offset
   ========================= */
h2[id] {
  scroll-margin-top: 120px; /* 避免被 sticky navbar 遮挡 */
}

/* =========================
   Utilities
   ========================= */
.center{
  text-align:center;
}
.m0{ margin:0 !important; }
.mt0{ margin-top:0 !important; }
.mt20{ margin-top:20px !important; }
.mb0{ margin-bottom:0 !important; }
.mb10{ margin-bottom:10px !important; }
.mb20{ margin-bottom:20px !important; }

/* =========================
   Image Credit Style
   ========================= */
.img-credit {
  font-size: 0.8em;
  font-style: italic;
  color: #666;              /* 灰色小字 */
  text-align: right;          /* ✅ 改成右对齐 */
  
  margin: 6px auto 18px;      /* 上方6px，下方18px，居中对齐容器 */
}


/* =========================
   File Download Link (雅致样式)
   ========================= */
.file-link {
  font-family: 'Cormorant Garamond', sans-serif;
  text-decoration: none;
  border-bottom: 1px dashed currentColor; /* 虚线下划线，轻微强调 */
  padding-bottom: 1px;
  transition: color 0.3s ease;
}

.file-link:hover {
  color: var(--accent); /* 悬停时变为主题橙色 */
}


/* =========================
   Centered Intro Paragraph (Public Philosophy)
   ========================= */
.center-paragraph {
  max-width: 680px;          /* 限制宽度，不让文字太长 */
  margin: 1.2em auto 2.2em;      /* 水平居中 + 与下方元素留距离 */
  text-align: center;        /* 居中对齐 */
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;            /* 斜体 */
  font-size: 1.15em;
  line-height: 1.9;
  color: var(--ink);
  letter-spacing: 0.2px;         /* 轻微字距，提升可读性 */
}

/* =========================
   Public Philosophy – Resources Section
   ========================= */
/* Resources list */
.resource-list{
  list-style: disc outside;
  padding-left: 1.5em;     /* 控制圆点与文字缩进 */
  margin: 0 0 1.8em;
}
.resource-list li{
  text-align: justify;             /* 两端对齐 */
  
  line-height: 1.75;
  color: var(--ink-2);
}
.resource-list a{
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;  /* 与全站风格呼应的虚线下划线 */
  transition: color .3s ease;
}
.resource-list a:hover{
  color: var(--accent);     /* 悬停变为点缀色 */
}
.resource-category {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15em;
  font-style: italic;
  margin: 0em 0 0.2em;
  color: var(--ink-2);
}


/* =========================
   Ask a Philosopher – Form
   ========================= */
.ask-form{
  max-width: 90%;
  width: 600px;                   /* 桌面端最大宽度 */
  margin: 0 auto 2.2em;
  padding: 20px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.ask-form label{
  display:block;
  margin: 12px 0 6px;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 0.95em;
  color: var(--ink-2);
}

.ask-form select,
.ask-form textarea{
  width: 100%;
  box-sizing: border-box;          /* 计算边距，避免溢出 */
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 1em;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  background: #fff;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease;
}

.ask-form select:focus,
.ask-form textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(27,58,87,.12);
}

.ask-submit{
  margin-top: 14px;
  display:inline-block;
  font-family: 'Cormorant Garamond', sans-serif;
  font-weight: 600;
  padding: 8px 14px;
  border: 1px solid var(--brand);
  background: #fff;
  color: var(--brand);
  border-radius: 6px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ask-submit:hover{
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}

.ask-hint{
  font-size: .9em;
  color: var(--ink-2);
  margin-top: 10px;
}

/* =========================
   Ask Button (Public Philosophy)
   ========================= */
.ask-button {
  display: inline-block;
  margin-top: 1em;
  padding: 6px 12px;
  font-family: 'Cormorant Garamond', sans-serif;
  font-weight: 500;
  font-size: 0.95em;
  color: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: 5px;
  background: #fff;
  text-decoration: none;
  transition: all 0.25s ease;
}

.ask-button:hover {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  text-decoration: none;
}

/* Ask – consent radios */
.choice-group{
  margin: 14px 0 6px;
  border: 0;
  padding: 0;
}
.choice-group legend{
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: .95em;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.choice{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-family: 'Cormorant Garamond', sans-serif;
  font-size: 1em;
}
.choice input[type="radio"]{
  transform: translateY(1px);
}





/* =========================
   Responsive Tweaks
   ========================= */
@media (max-width: 768px){
  body{ margin:60px auto; }
  h1{ font-size:2.1em; }
  .figure-torn{ width:90%; } /* 手机更贴边一些 */
}

/* 手机端导航标签自动换行 */
@media (max-width: 768px){
  .navbar {
    flex-wrap: wrap;          /* ✅ 允许换行 */
    justify-content: center;  /* 换行后保持居中 */
    white-space: normal;      /* 不强制一行 */ 
    gap: 8px 15px !important;  /* ✅ 第一个数是行距(竖直间距)，第二个是列距(水平间距) */
  }

  .navbar a,
  .navbar .dropbtn {
    margin-bottom: 0 !important; /* ✅ 去掉多余的竖直间距 */
    line-height: 1.4 !important; /* ✅ 收紧按钮高度 */
  }
}

@media (max-width: 768px) {
  .about-left {
    width: 100%;            /* ✅ 宽度和正文一致 */
    text-align: center;
  }
  .about-img {
    max-width: 90%;         /* ✅ 图片不会顶到页面两侧，留出和文字一样的左右空白 */
  }
}

/* 手机端：上下堆叠 */
@media (max-width: 768px) {
  .trivia-wrapper {
    flex-direction: column;
    gap: 24px;
  }
  .trivia-left, .trivia-right {
    width: 100%;
  }
  .trivia-img {
    max-width: 90%;   /* 保持和正文宽度一致 */
  }
}

/* 移动端居中按钮 */
@media (max-width: 768px) {
  .ask-button {
    display: block;          /* 让按钮独占一行 */
    margin: 1.2em auto;      /* 上下间距 + 自动水平居中 */
    text-align: center;
    width: fit-content;      /* 只占自身宽度 */
    font-size: 1em;          /* 稍放大一点方便触控，但不夸张 */
    padding: 8px 14px;
  }
}

/* 手机端适配 */
@media (max-width: 768px) {
  .ask-form {
    width: 94%;                    /* 手机端更窄的留白 */
    padding: 16px;                 /* 缩小内边距 */
  }
}