@font-face {
  font-family: "GrotzecCond-Demibold";
   src: url(https://mediainnovation.camd.northeastern.edu/2021/loveinthetimeofcovid/fonts/GrotzecCond-Demibold3.woff2);
 }  
 
 @font-face {
  font-family: "GrotzecCond-DemiboldItalic";
   src: url(https://mediainnovation.camd.northeastern.edu/2021/loveinthetimeofcovid/fonts/GrotzecCond-DemiboldItalic.woff2);
 }  
 
 @font-face {
  font-family: "LeJeunePoster-Regular";
   src: url(https://mediainnovation.camd.northeastern.edu/2021/loveinthetimeofcovid/fonts/LeJeunePoster-Regular.otf);
 } 
 
 @font-face {
  font-family: "LeJeunePoster-RegularItalic";
   src: url(https://mediainnovation.camd.northeastern.edu/2021/loveinthetimeofcovid/fonts/LeJeunePoster-RegularItalic.otf);
 }

:root{
  --bg:#0b0c10;
  --text:#e8ebf3;
  --muted:#a8b0c5;
  --line:#1b2130;
  --accent:#ffd166;
  --w:min(900px, 92vw);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}

body{
  background: radial-gradient(circle at 50% 40%, #0f1625 0%, #070b12 100%);
  background-attachment: fixed;
  color:var(--text);
  font:18px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  overflow-x:hidden;
}

/* 全屏 step */
section.step{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:transparent;
  padding:10vh 0;
}

/* 版心 */
.wrap{ width:var(--w); margin:0 auto; text-align:center; }
/* 滑入动画 */
.rise{ opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.is-visible .rise{ opacity:1; transform:translateY(0); }

/* 文案 */
.lead{ font-size:clamp(28px,5vw,44px); font-weight:700; line-height:1.15; letter-spacing:.2px; margin:0; font-family:"GrotzecCond-Demibold3",sans-serif}
.sub{ font-size:clamp(18px,2.6vw,24px); color:var(--muted); margin-top:12px; }
.caption{ color:var(--muted); font-size:14px; margin-top:10px; }

.rise{ opacity:0; transform:translateY(40px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.is-visible .rise{ opacity:1; transform:translateY(0); }

h2.rise {
    font-family:"GrotzecCond-Demibold","Impact",sans-serif;
    font-size:45px;
}

h3.rise {
    font-family:"GrotzecCond-Demibold","Impact",sans-serif;
    font-size:33px;
}

/* 手机框 */
.phone-wrap{
  width:min(420px,92vw);
  aspect-ratio:9/19.5;
  border:12px solid #0f1624;
  border-radius:36px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);
  background:#000;
  margin:0 auto;
  overflow:hidden;
  position:relative;
}
.notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:36%; height:22px; background:#0d1422; border-radius:0 0 16px 16px; }
.phone-content{ position:absolute; inset:0; padding-top:24px; display:flex; align-items:center; justify-content:center; }
blockquote.tiktok-embed{ max-width:100% !important; min-width:0 !important; margin:0 auto !important; }

/* scroll 提示 */
.cue{ position:fixed; bottom:16px; left:50%; transform:translateX(-50%); color:#b8c2dd; font-size:12px; opacity:.8; }

/* Reaction */
.buttons{ display:flex; justify-content:center; gap:24px; margin-top:28px; flex-wrap:wrap; }
button.react{
  background:#121621; color:#fff; border:1px solid #2a3247; border-radius:10px;
  padding:10px 22px; font-size:18px; cursor:pointer; transition:all .25s ease;
}
button.react:hover{ background:#1b2236; transform:translateY(-2px); }
.reaction-box{ margin-top:28px; font-size:18px; color:var(--muted); min-height:2.5em; transition:opacity .4s ease; }
.choice-list{
  display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:20px; width:100%;
  max-width:480px; margin-left:auto; margin-right:auto;
}
.choice{
  width:100%; text-align:center; background:#141b29; border:1px solid #2c3347; border-radius:8px;
  padding:10px 14px; cursor:pointer; transition:background .2s, transform .2s;
}
.choice:hover{ background:#1e2538; transform:translateY(-2px); }
.fade-in{opacity:1;} .fade-out{opacity:0;}

/* 大标题 */
.title-hero{
  margin:0; text-align:center; line-height:1.08; font-weight:900; letter-spacing:.2px;
  font-size:clamp(36px,7vw,72px); text-wrap:balance;
}
.title-hero .subtitle{ display:inline-block; margin-top:.25em; font-weight:800; font-size:clamp(28px,5vw,48px); color:#dfe6f8; }

/* Section 1 文本 */
.sec-kicker{
  margin:0 0 .5rem; font-size:clamp(18px,2.2vw,22px); letter-spacing:.02em; color:#cdd6ef; font-weight:700; text-align:left;
}
#section-1 .para{ margin:.25rem 0; font-size:clamp(18px,2.4vw,20px); text-align:left; }

/* Pull quote */
.pullquote{
  margin:1.25rem auto; max-width:min(760px,92vw); padding:14px 18px; border-left:4px solid var(--accent);
  background:rgba(255,255,255,0.03); border-radius:12px;
}
.pullquote blockquote{ margin:0; font-size:clamp(18px,2.6vw,22px); line-height:1.5; font-style:italic; }
.pullquote figcaption{ margin-top:.5rem; color:var(--muted); font-size:14px; text-align:right; }

/* 评论块：左对齐版本（合并去重） */
.comments{ max-width:min(720px,95vw); margin:2rem auto; text-align:left; }
.comment-intro, .comment-summary{ font-size:clamp(17px,2.4vw,20px); margin-bottom:1rem; line-height:1.6; }
.comment-feed{ display:flex; flex-direction:column; gap:14px; margin:1.2rem 0; }
.comment{
  display:flex; align-items:flex-start; gap:10px; width:100%;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08);
  border-radius:12px; padding:12px 16px; font-size:clamp(16px,2.3vw,18px); line-height:1.5; color:#f1f3f9;
  box-shadow:0 2px 10px rgba(0,0,0,.25); text-align:left;
}
.avatar{ width:36px; height:36px; border-radius:50%; opacity:.8; }
.text{ text-align:left; }
.user{ display:block; font-weight:600; color:#b6c1e2; font-size:15px; }
.content{ display:block; font-size:16px; line-height:1.4; color:#f1f3f9; }
.note{ color:var(--muted); font-size:14px; }

/* 采访区容器：独立于 .wrap，给更宽的版心 */
.interviews-inline{
  width: min(1100px, 95vw);   /* ✅ 比 --w 更宽，能装下三卡 */
  margin: 2rem auto 0;
  text-align: left;
}

/* 三卡一排：按容器宽度平均分配 */
.interview-grid{
  display: flex;
  flex-wrap: wrap;            /* ✅ 允许在小屏换行，避免被裁切 */
  justify-content: center;
  gap: 24px;
}

.interview-card{
  flex: 0 0 calc((100% - 48px) / 3);  /* ✅ 三等分（两处间距共48px） */
  min-width: 280px;                   /* 比 300 更弹性，避免挤爆容器 */
  max-width: 360px;                   /* 防止超大屏过宽 */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  text-align: left;
  transition: transform .25s ease, background .25s ease;
}
.interview-card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,0.08);
}
.interview-card .name{
  margin: 0 0 .5rem;
  font-size: clamp(18px, 2.5vw, 20px);
  font-weight: 700;
  color: var(--accent);
}
.interview-card .quote{
  font-size: clamp(16px, 2.3vw, 18px);
  color: var(--text);
  line-height: 1.55;
}

/* 响应式：<= 950px 两列；<= 600px 一列 */
@media (max-width: 950px){
  .interview-card{ flex: 0 0 calc((100% - 24px) / 2); }
}
@media (max-width: 600px){
  .interview-card{ flex: 0 0 100%; }
}

.interviews-inline {
  width: min(900px, 92vw);
  margin: 2rem auto 0;
  text-align: left;
}
.interview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1100px) {
  .interview-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .interview-grid { grid-template-columns: 1fr; }
}
.interview-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.interview-card .name {
  margin: 0 0 .5rem;
  font-weight: 700;
  color: var(--accent);
  font-size: clamp(18px,2.4vw,20px);
}
.interview-card .quote {
  font-size: clamp(16px,2.2vw,18px);
  line-height: 1.55;
}
.section-conclusion {
  width: min(900px, 92vw);
  margin: 2rem auto 4rem;
  text-align: left;
}
.section-conclusion .para {
  margin: .5rem 0;
  font-size: clamp(18px,2.4vw,20px);
  line-height: 1.65;
}
.section-conclusion strong {
  color: var(--accent);
  font-weight: 700;
}

/* ===== SECTION 2 — keep dark theme & left alignment ===== */
#section-2 {
  background: transparent;
  color: var(--text);
  padding: 10vh 0;
}

#section-2 .wrap {
  width: var(--w);
  margin: 0 auto;
  text-align: left;      /* ✅ 改成左对齐 */
}

/* headings use your global .lead; only minimal tweaks */
#section-2 h2.lead,
#section-2 h3.lead {
  color: var(--text);
  margin: 0 0 .5rem;
  text-align: left;      /* ✅ 保证标题左对齐 */
}

/* paragraphs follow global color/spacing */
#section-2 p {
  color: var(--text);
  margin: 1rem 0;
  text-align: left;      /* ✅ 段落左对齐 */
}

/* quote block styled to match Section 1 pullquote look */
#section-2 blockquote {
  margin: 1.25rem auto;
  max-width: min(760px, 92vw);
  padding: 14px 18px;
  border-left: 4px solid var(--accent);
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  font-style: italic;
  color: var(--text);
}
#section-2 cite {
  display: block;
  margin-top: .5rem;
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}
/* ===== Flourish charts layout ===== */
#section-2 .charts-group{
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}
#section-2 .flourish-embed{
  width: 100%;
  max-width: 780px;
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 720px){
  #section-2 .flourish-embed{
    max-width: 100%;
  }
}
/* ===== Fix Section 2: let content flow downward ===== */
#section-2{
  display: block;          /* ⬅️ 不再用 .step 的 flex 居中 */
  min-height: auto;        /* ⬅️ 取消一屏高度限制 */
  padding: 10vh 0;
  background: transparent;
  color: var(--text);
}

#section-2 .wrap{
  width: var(--w);
  margin: 0 auto;
  text-align: left;
}

/* charts block: full flow, no float, centered by width only */
#section-2 .charts-group{
  margin-top: 2.5rem;
  display: block;          /* 列排即可 */
}

#section-2 .flourish-embed{
  display: block;
  float: none;             /* 防止被主题里其它样式浮动到右侧 */
  width: 100%;
  max-width: 780px;
  margin: 2rem auto 0;     /* 与正文同版心、居中 */
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 780px){
  #section-2 .flourish-embed{ max-width: 100%; }
}
/* ===== Fix paragraph width and padding under charts ===== */
#section-2 p {
  color: var(--text);
  line-height: 1.65;
  font-size: clamp(18px, 2.4vw, 20px);
}

/* 限制图表后正文宽度 + 居中 */
#section-2 .charts-group + p {
  max-width: min(780px, 92vw);  /* ✅ 控制宽度 */
  margin: 3rem auto 0;          /* ✅ 居中且加间距 */
  padding: 0 1rem;              /* ✅ 两边空隙，防止贴边 */
  text-align: left;
}

/* ==== FINAL PATCH for Section 2 (paste at END of style.css) ==== */

/* 覆盖 .step 的一屏居中，只作用于 #section-2 */
section#section-2.step{
  display: block !important;
  min-height: auto !important;
  align-items: unset !important;
  justify-content: unset !important;
  padding: 10vh 0 !important;
  background: transparent !important;
  color: var(--text) !important;
}

/* 版心与上文一致，左对齐 */
section#section-2 .wrap{
  width: var(--w) !important;
  margin: 0 auto !important;
  text-align: left !important;
}

/* 标题/段落：左对齐与间距统一 */
section#section-2 h2.lead,
section#section-2 h3.lead{
  margin: 0 0 .5rem !important;
  color: var(--text) !important;
  text-align: left !important;
}
section#section-2 p{
  color: var(--text) !important;
  line-height: 1.65 !important;
  font-size: clamp(18px,2.4vw,20px) !important;
  margin: 1rem 0 !important;
  max-width: none; /* 由 .wrap 控宽 */
}

/* 引用块风格与 Section 1 保持一致 */
section#section-2 blockquote{
  margin: 1.25rem 0 !important;
  padding: 14px 18px !important;
  border-left: 4px solid var(--accent) !important;
  background: rgba(255,255,255,.03) !important;
  border-radius: 12px !important;
  font-style: italic !important;
  color: var(--text) !important;
}
section#section-2 cite{
  display: block !important;
  margin-top: .5rem !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  text-align: right !important;
}

/* 图表：跟随版心，纵向排列，防止漂到右边 */
section#section-2 .charts-group{
  margin-top: 2.5rem !important;
  display: block !important;
}
section#section-2 .flourish-embed{
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 2rem 0 !important;   /* 与正文同列、左对齐，由 .wrap 控宽 */
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* 图表后的说明段落：与正文同宽、同对齐 */
section#section-2 .charts-group + p{
  margin-top: 3rem !important;
  padding: 0 !important;
  text-align: left !important;
}
/* ==== Section 2: two side-by-side interview cards ==== */
#section-2 .section-conclusion { 
  width: var(--w);
  margin: 2rem auto 0;
  text-align: left;
}

#section-2 .interview-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* two columns */
  gap: 24px;
  margin-top: 1rem;
}

#section-2 .interview-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

#section-2 .interview-card .name{
  margin: 0 0 .5rem;
  font-weight: 700;
  color: var(--accent);
  font-size: clamp(18px,2.4vw,20px);
}

#section-2 .interview-card .quote{
  font-size: clamp(16px,2.2vw,18px);
  line-height: 1.55;
  color: var(--text);
}

/* responsive: stack to one column on narrow screens */
@media (max-width: 900px){
  #section-2 .interview-grid{ grid-template-columns: 1fr; }
}
/* === Fix: restore accent color for interviewee names === */
#section-2 .interview-card .name {
  color: var(--accent) !important;   /* ✅ force accent yellow */
  font-weight: 700;
  margin: 0 0 .5rem;
  font-size: clamp(18px,2.4vw,20px);
}