/* =============================================================
   GreatSea · BLOGGER 栏目页「02 · Split portrait」
   移植自 2026-11-05-22-46-50/07-bloggers-02.html
   全部规则锁在 #gs-blogger-page 下，不污染主题与其它页面。
   ============================================================= */

@font-face{
  font-family:"GS Cormorant";
  src:url("../uploads/gs-inspiration/fonts/cormorant-normal.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

#gs-blogger-page{
  --deep:#0A5F66;
  --primary:#0E8A8E;
  --accent:#3CB87E;
  --bg:#F5FBFA;
  --bg-alt:#EAF6F3;
  --ink:#163A40;
  --muted:#5B7A7E;
  --hairline:#DCEDE9;
  --display:"GS Cormorant","Cormorant Garamond",Georgia,serif;
  --hand:"Caveat","Segoe Script",cursive;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;

  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow-x:clip;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
#gs-blogger-page *,
#gs-blogger-page *::before,
#gs-blogger-page *::after{box-sizing:border-box}
#gs-blogger-page p,
#gs-blogger-page h2{margin:0}
#gs-blogger-page a{text-decoration:none;color:inherit}
#gs-blogger-page img{display:block;max-width:100%}
#gs-blogger-page a:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}

#gs-blogger-page .bp-wrap{max-width:1242px;margin:0 auto;padding:0 24px}

/* ---------- 极窄页头 ---------- */
#gs-blogger-page .bp-lede{background:var(--bg);border-bottom:1px solid var(--hairline)}
#gs-blogger-page .bp-lede .bp-wrap{padding-top:26px;padding-bottom:24px}
#gs-blogger-page .bp-lede__row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
#gs-blogger-page .bp-lede__kicker{font-size:11px;letter-spacing:.3em;color:var(--muted)}
#gs-blogger-page .bp-lede__hand{font-family:var(--hand);font-size:31px;font-weight:400;line-height:1.15;color:var(--primary);margin:2px 0 0}
#gs-blogger-page .bp-lede__meta{font-size:12px;color:var(--muted);padding-bottom:6px;font-variant-numeric:tabular-nums}

/* ---------- 分屏卡片 ---------- */
#gs-blogger-page .bp-duos{background:var(--bg);padding:38px 0 26px}
#gs-blogger-page .bp-duo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 30%;
  min-height:420px;
  background:var(--deep);
}
#gs-blogger-page .bp-duo + .bp-duo{margin-top:14px}
#gs-blogger-page .bp-duo--light{background:var(--bg-alt)}

#gs-blogger-page .bp-duo__text{
  background:var(--deep);
  color:#fff;
  padding:44px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  min-width:0;
}
#gs-blogger-page .bp-duo__name{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(50px,4.9vw,68px);
  line-height:.95;
  letter-spacing:-.02em;
  color:#fff;
  margin-top:16px;
}
#gs-blogger-page .bp-duo__quote{font-family:var(--hand);font-size:26px;line-height:1.2;color:#9FE1CB;margin-top:12px}
#gs-blogger-page .bp-duo__bio{font-size:13px;line-height:1.8;color:rgba(255,255,255,.78);max-width:48ch;margin-top:14px}
#gs-blogger-page .bp-duo__cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:#fff;
  color:var(--deep);
  border-radius:999px;
  padding:11px 22px;
  font-size:13px;
  font-weight:500;
  margin-top:24px;
  transition:background .2s,color .2s;
}
#gs-blogger-page .bp-duo__cta span{font-size:16px;line-height:1}
#gs-blogger-page .bp-duo__cta:hover{background:var(--accent);color:#fff}
#gs-blogger-page .bp-duo__hint{font-size:11px;color:rgba(255,255,255,.5);margin-top:9px}

/* 人像：上下内缩嵌进底色，桌面四边等距装裱 */
#gs-blogger-page .bp-duo__ph{
  position:relative;
  display:block;
  overflow:hidden;
  background:#0B555B;
  isolation:isolate;
  margin:24px 0;
}
#gs-blogger-page .bp-duo__ph .bp-duo__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  object-position:44% 30%;
}

/* 偶数张镜像：列宽跟着翻，否则人像会掉进 1fr 轨道 */
#gs-blogger-page .bp-duo--flip{grid-template-columns:30% minmax(0,1fr)}
#gs-blogger-page .bp-duo--flip .bp-duo__ph{order:-1}

/* 浅底卡：避免三块深青连成一片 */
#gs-blogger-page .bp-duo--light .bp-duo__text{background:var(--bg-alt);color:var(--ink)}
#gs-blogger-page .bp-duo--light .bp-duo__name{color:var(--deep)}
#gs-blogger-page .bp-duo--light .bp-duo__quote{color:var(--primary)}
#gs-blogger-page .bp-duo--light .bp-duo__bio{color:var(--muted)}
#gs-blogger-page .bp-duo--light .bp-duo__cta{background:var(--deep);color:#fff}
#gs-blogger-page .bp-duo--light .bp-duo__cta:hover{background:var(--accent)}
#gs-blogger-page .bp-duo--light .bp-duo__hint{color:var(--muted)}

@media(min-width:981px){
  #gs-blogger-page .bp-duo__ph,
  #gs-blogger-page .bp-duo--flip .bp-duo__ph{margin:22px;background:transparent}
  #gs-blogger-page .bp-duo__ph::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
    border:1px solid rgba(255,255,255,.30);
  }
  #gs-blogger-page .bp-duo--light .bp-duo__ph::after{border-color:rgba(10,95,102,.16)}
  #gs-blogger-page .bp-duo__ph .bp-duo__img{object-position:46% 26%}
}

/* 无图占位：明确标成待补，不伪装成真实照片 */
#gs-blogger-page .bp-duo__ph--empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#CFE7E0;
  color:#5B7A7E;
  text-align:center;
}
#gs-blogger-page .bp-duo__ph--empty::before{
  content:"";
  display:block;
  width:88px;
  height:112px;
  border:1px solid rgba(10,95,102,.28);
  border-radius:4px;
  background:
    radial-gradient(circle at 50% 27%, rgba(10,95,102,.20) 0 13px, transparent 14px),
    radial-gradient(ellipse 29px 34px at 50% 92%, rgba(10,95,102,.20) 0 98%, transparent 100%);
  margin-bottom:6px;
}
#gs-blogger-page .bp-duo__ph--empty strong{font-size:11px;letter-spacing:.24em;font-weight:500;color:#3E6B70}
#gs-blogger-page .bp-duo__ph--empty small{font-size:12px;letter-spacing:.02em}
#gs-blogger-page .bp-duo--light .bp-duo__ph--empty,
#gs-blogger-page .bp-duo:nth-child(3) .bp-duo__ph--empty{background:#DCEDE9}

/* ---------- 响应式 ---------- */
@media(max-width:980px){
  #gs-blogger-page .bp-duos{padding:28px 0 20px}
  #gs-blogger-page .bp-duo,
  #gs-blogger-page .bp-duo--flip{min-height:0;grid-template-columns:1fr}
  #gs-blogger-page .bp-duo + .bp-duo{margin-top:12px}
  #gs-blogger-page .bp-duo__ph,
  #gs-blogger-page .bp-duo--flip .bp-duo__ph{order:-1;aspect-ratio:4/3;min-height:0;min-width:0;margin:0}
  #gs-blogger-page .bp-duo__ph .bp-duo__img{object-position:44% 28%}
  #gs-blogger-page .bp-duo__text{padding:36px 30px 42px}
  #gs-blogger-page .bp-duo__name{font-size:clamp(46px,8vw,60px)}
  #gs-blogger-page .bp-duo__quote{font-size:24px}
  #gs-blogger-page .bp-lede__hand{font-size:27px}
}
@media(max-width:520px){
  #gs-blogger-page .bp-duo__text{padding:30px 22px 34px}
  #gs-blogger-page .bp-duo__name{font-size:clamp(44px,12vw,58px)}
  #gs-blogger-page .bp-duo__bio{font-size:12px;line-height:1.75}
  #gs-blogger-page .bp-duo__cta{margin-top:20px}
  #gs-blogger-page .bp-lede .bp-wrap{padding-top:22px;padding-bottom:20px}
  #gs-blogger-page .bp-lede__hand{font-size:24px}
}