/* Journal of Sexualities — 全站样式表
   常用改动点见文件末尾「速查」。 */

/* ---------- 1. 调色板与字体 ---------- */
:root{
  --ink:#14110f;      /* 正文黑 */
  --paper:#fbf9f5;    /* 页面底色 */
  --rule:#d9d2c7;     /* 分割线 */
  --muted:#6b625a;    /* 次要文字：导航、副标题、页脚 */
  --accent:#7c1220;   /* 强调色 */

  --mono:"Courier New",Courier,monospace;
  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
}

/* ---------- 2. 全局 ---------- */
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--serif)}
a{color:inherit}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}   /* 版面宽度 */

/* ---------- 3. 顶部细条 ---------- */
.utility{
  border-bottom:1px solid var(--rule);
  font:12px var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.utility .wrap{                                        /* 左右两端对齐 */
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:4px 16px;
  padding:9px 20px;
}
.utility strong{color:var(--ink);font-weight:400}
.utility a{text-decoration:none;color:var(--muted)}
.utility a:hover{color:var(--accent);text-decoration:underline}

/* ---------- 4. 刊头 ---------- */
.masthead{border-bottom:1px solid var(--rule)}
.masthead .wrap{                                       /* 刊名在左，导航在右 */
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
  padding:22px 20px;
}
.wordmark{font-size:27px;letter-spacing:-.01em;text-decoration:none}
nav a{
  margin-left:18px;
  font:12px var(--mono);
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--muted);
}
nav a:first-child{margin-left:0}
nav a:hover{color:var(--accent);text-decoration:underline}

/* ---------- 5. 头版大头条 ---------- */
.hero{
  border-top:3px solid var(--ink);                     /* 顶部粗黑线 */
  border-bottom:1px solid var(--rule);
  padding:44px 0 40px;
}
.kicker{
  font:12px var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0;
}
h1{
  font-size:clamp(30px,4.4vw,50px);                    /* 最小30 / 最大50 / 中间随窗口 */
  line-height:1.08;
  letter-spacing:-.015em;
  margin:14px 0 10px;
  max-width:22ch;                                      /* 一行最多约22字符 */
}
.byline{font-size:14px;color:var(--muted);margin:0 0 18px}
.standfirst{font-size:19px;line-height:1.5;margin:0;max-width:62ch}   /* 每行约62字符，长文好读 */
.actions{margin:26px 0 0}

.btn{
  display:inline-block;
  padding:10px 18px;
  margin-right:10px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  font:12px var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
}
.btn--ghost{background:transparent;color:var(--ink)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}

/* ---------- 6. Latest News ---------- */
main.wrap{padding-top:64px}                            /* 带 .wrap 才生效；越大，Latest News 越往下 */
.section-title{
  font:20px var(--mono);
  font-weight:400;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 24px;                                     /* 线到卡片 */
  border-bottom:1px solid var(--rule);
  padding-bottom:16px;                                 /* 字到线 */
}

.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));   /* 每列至少230px，列数自动 */
}
.card{
  padding:22px 22px 22px 0;
  border-top:1px solid var(--rule);
}
.card:first-child{border-top:0;padding-top:0}          /* 避免和标题的线叠成双线 */
.card h3{font-size:20px;line-height:1.22;margin:10px 0 8px;letter-spacing:-.01em}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--accent);text-decoration:underline}
.card p:last-child{margin:0;font-size:15px;color:#3d3733;max-width:44ch}

/* ---------- 7. 页脚 ---------- */
footer{
  border-top:1px solid var(--rule);
  margin-top:40px;
  padding:26px 0 54px;
  background:#f4f1ea;
}
.disc{font-size:12.5px;color:var(--muted);max-width:80ch;margin:0 0 8px}
footer a{color:var(--accent)}

/* ---------- 8. 窄屏（≤560px） ---------- */
@media (max-width:560px){
  .card{padding:18px 0;border-top:1px solid var(--rule)}   /* 卡片改为上下堆叠 */
  .card:first-child{padding-top:0;border-top:0}
  nav a{margin-left:0;margin-right:14px}                   /* 导航紧凑排列 */

  .cookie{padding:14px}                                    /* 同意墙在手机上别贴边 */
  .cookie__panel{padding:26px 22px}
}

/* ---------- 9. 饼干提示条（全屏遮挡） ---------- */
.cookie{
  position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(20,17,15,.72);                         /* 压暗整页，让你读不下去 */
}
.cookie[hidden]{display:none}
.cookie__panel{
  width:100%;max-width:640px;
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:0 14px 48px rgba(20,17,15,.4);
  padding:36px 40px 32px;
}
.cookie__title{font-size:20px;font-weight:bold;margin:0 0 12px}
.cookie__body{font-size:16px;line-height:1.55;margin:0}
.cookie__ask{font-size:18px;font-weight:bold;margin:18px 0 0}
.cookie__actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px;margin-top:28px}
.cookie__actions .btn{margin-right:0}                    /* 间距交给 gap */
.btn--big{font-size:14px}                                /* 只给 Accept 用，见 HTML 里加的那个类 */

/* ---------- 10. Cookies 页 ---------- */
.meter{padding:30px 0;border-bottom:1px solid var(--rule)}
.meter__label{font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.meter__value{font-size:clamp(44px,7vw,76px);line-height:1;margin:0;letter-spacing:-.02em}
.meter__note{font-size:13px;color:var(--muted);margin:12px 0 0}

.tin{padding:30px 0}
.biscuit{display:block;width:76px;height:76px;margin:0 0 14px}
.biscuit circle{fill:none;stroke:var(--ink);stroke-width:2}   /* 外圈只描边 */
.biscuit circle + circle{fill:var(--ink);stroke:none}         /* 巧克力豆是实心 */
.tin__line{font-size:16px;margin:0}

/* ---------- 速查 ----------
   整页宽度        .wrap 的 max-width:1080px
   全站颜色        :root 的 --ink / --paper / --muted / --accent
   标题位置        main.wrap 的 padding-top 数值
   标题大小        .section-title 的 font:20px
   每行几张卡      .cards 里 minmax(230px,...) 的 230px
   大标题大小      h1 的 clamp(30px,4.4vw,50px)
------------------------------------------------ */