/* ==========================================================================
   GreatSea · /about-greatsea/  |  由 gs-about.php 按需加载
   来源：设计稿 04-about.html / 04-about.jpg
   全部规则带 #gs-about 前缀；不含设计稿 CTA / 承诺区 / 页脚。
   ========================================================================== */
@font-face{
  font-family:"GS Display";
  src:url("../uploads/gs-inspiration/fonts/cormorant-normal.woff2") format("woff2");
  font-style:normal;font-weight:400 700;font-display:swap;
}
@font-face{
  font-family:"GS Display";
  src:url("../uploads/gs-inspiration/fonts/cormorant-italic.woff2") format("woff2");
  font-style:italic;font-weight:400 700;font-display:swap;
}

#gs-about{
  --deep:#0A5F66; --primary:#0E8A8E; --accent:#3CB87E;
  --bg:#F5FBFA; --ink:#163A40; --muted:#5B7A7E;
  --hairline:#DCEDE9; --paper:#FFFFFF;
  --body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --display:"GS Display",Georgia,"Times New Roman",serif;
  --hand:"Caveat","Segoe Script",cursive;
  --wrap:1242px; --sec:96px;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  box-sizing:border-box;font-family:var(--body);font-size:15px;font-weight:400;line-height:1.7;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:clip;
}
@supports (overflow:clip){ html:has(#gs-about), body:has(#gs-about){overflow-x:clip;} }
#gs-about :where(*){box-sizing:border-box;}
#gs-about :where(h1,h2,p,b,em,i,span,small,strong,div,a,header,section){margin:0;padding:0;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}
#gs-about a{color:inherit;text-decoration:none;}
#gs-about :focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px;}
#gs-about .ga-wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
#gs-about .ga-grid{display:grid;grid-template-columns:64px minmax(0,1fr);}
#gs-about .ga-spine{position:relative;border-right:1px solid var(--hairline);}
#gs-about .ga-spine::before{content:"";position:absolute;top:0;left:-1px;width:1px;height:56px;background:var(--primary);}
#gs-about .ga-spine::after{content:"";position:absolute;top:52px;left:-4px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
#gs-about .ga-spine span{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%) rotate(-90deg);transform-origin:center;
  white-space:nowrap;font-size:11px;letter-spacing:.32em;color:var(--muted);
}
#gs-about .ga-body{padding-left:64px;min-width:0;}

/* ---------- 深青 Hero：合影作为氛围背景 + 右对齐大标题 ---------- */
#gs-about .ga-hero{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--deep);color:var(--paper);padding:104px 0 78px;
}
#gs-about .ga-hero .ga-spine{border-right-color:rgba(255,255,255,.25);}
#gs-about .ga-hero .ga-spine::before{background:rgba(255,255,255,.6);}
#gs-about .ga-hero .ga-spine::after{background:rgba(255,255,255,.75);}
#gs-about .ga-hero .ga-spine span{color:rgba(255,255,255,.6);}
#gs-about .ga-hero .ga-wrap{position:relative;z-index:1;}

/* 照片层：只留轮廓与光影，不展示细节 */
#gs-about .ga-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
#gs-about .ga-hero-media img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 46%;
  filter:saturate(.42) contrast(.88) blur(3.2px);
  transform:scale(1.06);opacity:.84;
}
/* 深青遮罩：左浅右深，把可读性留给右侧文字；再叠一层极淡网点做质感 */
#gs-about .ga-hero-veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(rgba(255,255,255,.045) .5px, transparent .5px) 0 0 / 3px 3px,
    linear-gradient(90deg,
      rgba(10,95,102,.66) 0%, rgba(10,95,102,.81) 38%,
      rgba(10,95,102,.94) 72%, rgba(10,95,102,.97) 100%),
    linear-gradient(180deg, rgba(10,95,102,.16) 0%, rgba(10,95,102,.02) 42%, rgba(10,95,102,.40) 100%);
}

/* 文字块收在右侧，左侧留白让背景透气 —— 刻意不对称 */
#gs-about .ga-head{width:min(100%,650px);margin-left:auto;}
#gs-about .ga-head-row{display:block;}
#gs-about .ga-head h1{
  font-family:var(--display);font-size:clamp(64px,8.2vw,118px);font-weight:500;
  line-height:.88;letter-spacing:-.02em;color:var(--paper);text-align:right;
  max-width:none;text-shadow:0 2px 24px rgba(4,42,46,.28);
}
#gs-about .ga-head h1 em{font-weight:400;font-style:italic;color:#8FD9C4;white-space:nowrap;}
#gs-about .ga-note{
  font-family:var(--hand);font-size:30px;line-height:1.25;color:#B9E8D9;
  text-align:right;white-space:normal;max-width:none;margin-top:22px;padding:0;
  text-shadow:0 1px 14px rgba(4,42,46,.35);
}
#gs-about .ga-sub{
  color:rgba(255,255,255,.78);text-align:right;margin-left:auto;max-width:52ch;
  margin-top:26px;font-size:15px;text-shadow:0 1px 10px rgba(4,42,46,.3);
}
#gs-about .ga-rule{
  display:flex;align-items:center;gap:20px;margin:40px 0 0;
  color:rgba(255,255,255,.66);font-size:12px;letter-spacing:.08em;
}

/* 背景图的出处标签：杂志式 FIG. 编号，极低调 */
#gs-about .ga-credit{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 0;
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.52);text-shadow:0 1px 8px rgba(4,42,46,.5);
}
#gs-about .ga-credit-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none;}
#gs-about .ga-credit em{font-style:normal;color:rgba(255,255,255,.78);letter-spacing:.2em;}
#gs-about .ga-credit i{width:26px;height:1px;background:rgba(255,255,255,.3);flex:none;}
#gs-about .ga-rule i{flex:1;height:1px;background:rgba(255,255,255,.22);position:relative;}
#gs-about .ga-rule i::before,#gs-about .ga-rule i::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:rgba(255,255,255,.35);}
#gs-about .ga-rule i::before{left:0;} #gs-about .ga-rule i::after{right:0;}
#gs-about .ga-rule b{font-weight:500;color:#8FD9C4;font-variant-numeric:tabular-nums;}

/* ---------- 一封信 ---------- */
#gs-about .ga-story{padding:var(--sec) 0;}
#gs-about .ga-letterwrap{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,720px);gap:40px;
  align-items:start;margin-top:26px;
}
#gs-about .ga-aside{
  font-family:var(--hand);font-size:32px;line-height:1.35;color:var(--primary);max-width:22ch;
  position:sticky;top:120px;padding-top:16px;
}
#gs-about .ga-aside small{
  display:block;font-family:var(--body);font-size:12px;color:var(--muted);
  margin-top:20px;line-height:1.8;letter-spacing:0;
}
#gs-about .ga-letter{
  background:var(--paper);max-width:720px;margin-left:auto;padding:56px 60px 44px;
  position:relative;box-shadow:0 18px 48px rgba(10,95,102,.10);
}
#gs-about .ga-letter::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:linear-gradient(180deg,var(--primary),var(--accent));opacity:.7;
}
#gs-about .ga-letter p{font-family:var(--body);font-size:17px;line-height:1.9;color:var(--ink);}
#gs-about .ga-letter p:first-of-type{
  font-family:var(--display);font-size:19px;line-height:1.7;color:var(--deep);margin-bottom:22px;
}
#gs-about .ga-letter p+p{margin-top:18px;}
#gs-about .ga-letter .ga-sign{font-family:var(--hand);font-size:38px;color:var(--primary);margin-top:34px;}

/* ---------- 三个尺规数字 ---------- */
#gs-about .ga-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:72px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
#gs-about .ga-stats>div{padding:28px 26px;border-right:1px solid var(--hairline);}
#gs-about .ga-stats>div:first-child{padding-left:0;}
#gs-about .ga-stats>div:last-child{border-right:0;}
#gs-about .ga-stats b{
  display:block;font-family:var(--display);font-size:72px;font-weight:500;line-height:1;
  color:var(--deep);font-variant-numeric:tabular-nums;
}
#gs-about .ga-stats span{display:block;font-size:12px;color:var(--muted);margin-top:8px;letter-spacing:.06em;}

/* ---------- 人物 ---------- */
#gs-about .ga-people{margin-top:66px;}
#gs-about .ga-people h2{font-family:var(--display);font-size:40px;font-weight:500;color:var(--deep);}
#gs-about .ga-person{
  display:grid;grid-template-columns:190px minmax(0,1fr) 210px;gap:20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--hairline);font-size:14px;transition:color .2s;
}
#gs-about a.ga-person:hover{color:var(--primary);}
#gs-about .ga-person b{font-family:var(--display);font-size:26px;font-weight:500;}
#gs-about .ga-person em{font-style:normal;color:var(--muted);}
#gs-about .ga-person span{text-align:right;color:var(--muted);font-size:12px;}

/* 主题在页面上方补的标题，本页自带 H1 */
body:has(#gs-about) .entry-title{display:none;}

/* ============ 响应式 ============ */
@media (max-width:1000px){
  #gs-about{--sec:72px;}
  #gs-about .ga-grid{grid-template-columns:40px minmax(0,1fr);}
  #gs-about .ga-body{padding-left:36px;}
  #gs-about .ga-letterwrap{grid-template-columns:1fr;}
  #gs-about .ga-aside{max-width:none;}
  #gs-about .ga-letter{margin-left:0;padding:40px;}
  #gs-about .ga-head h1{font-size:clamp(56px,9vw,86px);}
  #gs-about .ga-head{width:min(100%,600px);}
  #gs-about .ga-hero{padding:88px 0 68px;}
  /* 窄屏背景被放得更大，进一步虚化 + 加重遮罩，彻底退成氛围 */
  #gs-about .ga-hero-media img{filter:saturate(.36) contrast(.86) blur(4px);opacity:.82;}
  #gs-about .ga-hero-veil{
    background:
      radial-gradient(rgba(255,255,255,.04) .5px, transparent .5px) 0 0 / 3px 3px,
      linear-gradient(90deg, rgba(10,95,102,.70) 0%, rgba(10,95,102,.93) 100%),
      linear-gradient(180deg, rgba(10,95,102,.28) 0%, rgba(10,95,102,.52) 100%);
  }
  #gs-about .ga-rule{margin-top:32px;}
}
@media (max-width:767px){
  #gs-about{--sec:56px;}
  #gs-about .ga-wrap{padding:0 20px;}
  #gs-about .ga-hero{padding:60px 0 54px;}
  #gs-about .ga-hero-veil{
    background:
      radial-gradient(rgba(255,255,255,.035) .5px, transparent .5px) 0 0 / 3px 3px,
      linear-gradient(180deg, rgba(10,95,102,.74) 0%, rgba(10,95,102,.95) 100%);
  }
  #gs-about .ga-hero-media img{object-position:50% 52%;filter:saturate(.34) contrast(.86) blur(4px);opacity:.76;}
  #gs-about .ga-grid{grid-template-columns:1fr;}
  #gs-about .ga-spine{display:none;}
  #gs-about .ga-body{padding-left:0;}
  #gs-about .ga-head{width:100%;}
  #gs-about .ga-head-row{display:block;}
  #gs-about .ga-head h1{text-align:left;font-size:clamp(56px,15vw,84px);max-width:none;}
  #gs-about .ga-note,#gs-about .ga-sub{text-align:left;margin-left:0;font-size:24px;}
  #gs-about .ga-sub{font-size:14px;margin-top:18px;}
  #gs-about .ga-note{padding:14px 0 0;margin-top:0;}
  #gs-about .ga-rule{font-size:11px;gap:12px;margin-top:28px;}
  #gs-about .ga-credit{font-size:9.5px;letter-spacing:.1em;gap:9px;}
  #gs-about .ga-letter{padding:32px 26px;}
  #gs-about .ga-letter p{font-size:15.5px;}
  #gs-about .ga-letter p:first-of-type{font-size:19px;}
  #gs-about .ga-aside{position:static;}
  #gs-about .ga-stats{grid-template-columns:1fr;}
  #gs-about .ga-stats>div{padding:18px 0;border-right:0;border-bottom:1px solid var(--hairline);}
  #gs-about .ga-stats>div:first-child{padding-left:0;}
  #gs-about .ga-stats>div:last-child{border-bottom:0;}
  #gs-about .ga-stats b{font-size:56px;}
  #gs-about .ga-person{grid-template-columns:1fr;gap:2px;}
  #gs-about .ga-person span{text-align:left;}
}
@media (prefers-reduced-motion:reduce){
  #gs-about *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}