/* :root{
  --paper:#9fc5e8; --panel:#e3f0f1; --ink:#073763; --muted:#3768c4; --line:#9fc5e8;
  --brand:#75BDD1; --brand-strong:#2256b0; --accent:#8C1515; --link:#1f4bb8;
  --radius:14px; --shadow:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --cw: clamp(960px, 86vw, 1120px);
} 
*/
:root{
  --paper:#9fc5e8;
  --panel:#fffdeb; /* #d5e2ef; */
  --ink:#073763;
  --muted:#3768c4;
  --line:#9fc5e8;

  --brand:#75BDD1;
  --brand-strong:#2256b0;
  --accent:#8C1515;
  --link:#1f4bb8;

  /* 关键：整体圆角 & 阴影 */
  --radius:4px;
  --shadow:0 32px 12px rgba(15,23,42,.06);

  --cw: clamp(960px, 86vw, 1120px);
}

html,body{height:100%} body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif;line-height:1.6;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:Arial} h1{font-size:clamp(3.5rem,2.8vw,2.4rem);margin:0 0 .5rem;color:var(--brand-strong)} h2{font-size:clamp(1.7rem,2.2vw,1.9rem);margin:0 0 .75rem} h3{font-size:clamp(1.125rem,1.6vw,1.2rem);margin:.25rem 0 .25rem;color:var(--brand-strong)}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} p,li{font-size:1rem}
.container{width:var(--cw);margin:0 auto} .section{padding:56px 20px;border-top:1px solid var(--line)} .section:first-of-type{border-top:none}
.masthead{position:sticky;top:0;z-index:50;background:rgba(180,200,220,.9);backdrop-filter:saturate(120%) blur(6px);border-bottom:1px solid var(--line)} .mast{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px} .brand{display:flex;align-items:center;gap:12px;font-weight:700}
.brand-mark{width:28px;height:28px;border-radius:6px;background:var(--brand);display:block;box-shadow:var(--shadow);background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAxCAMAAAC4V5rkAAAAhFBMVEVmtdQUFBT///8AAAAUFBOamprJyclnt9cEAABfnrhsutk4ODgaGhoPDw8XHyAIAADw8PD4+PioqKiJiYmRkZF+fn7k5OR2dnZLS0toaGi+vr61tbWioqJgYGBwcHDd3d1UVFQtLS3S0tIhMDdEbYBVjqZGbnsRDAUtQUpLeIpRgZYlJSXEYx00AAACJElEQVRIicWW23aqMBCG4wxBQdmEJIAQ5aSore//fp3EY1u7FV2r/W8ITD7mkJCBwUXCl7pazqc3NF9WWvriajI7DWrdolN0W862V/UXsG6IGN0V4fP6GtSInyZ4n3VtQlQXsLhgnoO+hGnZC43LE6iOXBTHiNvRv++ajbaIcXxMBtMD6KPztJ2s1n3A2Di8JcaCfrOi11rX6DuwjexdvAvCMYn9IGsLg13sQmsteHCIb+GY/Uid6fANbbLkkh0qE6/De9BB4Sa2sRYEWi5aPcgRubIlQmCdc9jfjfIc7btNEztmCPS2j2IEMherYXYRt7uHI6VYd7QmqBjVxos3A8DxmmLFijURge9DQErSixrWWvDx2hDYk8doymZUo0kwBAwmhOyZ3TZDQSrrzIE4DMRnwbPHoTnavfYaOLQ4fww+rvCqOHEfDFAfn5fDiycD5M6rA/jt6P6PjqfyCRysF0B8Usx/UufGOlQvgEL7kBkA02nOdVZqJZ1FLIBrLRMaGteFJQcoueZZslC6ZqAqhHIO0JhMFVnZClFwOy/DBDOhbBdtSndPl6VMeMML6BRLEHLjNwDLEqQCmQMsUtF1tQUBuukJzKWYQbFUc5kVVSHZok2LfUcNb1oSAeU0gYp3UpYWTBJdWNAIITBPsSsM+DNjQCDT9POiM5nnC+rNlCqNeOJyVIlKU2sGmaapT5l30tCoE/T8L5aDP6nn9+rvf1a/Dn4AqhEzHgHYzMkAAAAASUVORK5CYII=');background-size:cover;background-position:center}
.nav{display:flex;gap:18px;align-items:center} .nav a{color:var(--ink);font-weight:500;padding:6px 8px;border-radius:8px} .nav a[aria-current="page"],.nav a:hover{background:#f3f4f6;text-decoration:none}
.hero{padding:72px 20px 36px;position:relative} .lead{color:var(--muted);max-width:68ch} .meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .meta .tag{font-size:.85rem;color:#374151;background:#eef6f9;border:1px solid #d7ecf3;padding:4px 10px;border-radius:999px}
body.bg-animated::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 40% at 20% 20%, rgba(117,189,209,.20), transparent 60%),radial-gradient(50% 35% at 80% 30%, rgba(74,159,184,.18), transparent 60%),linear-gradient(0deg, rgba(255,255,255,.7), rgba(255,255,255,.7));animation:slowShift 18s ease-in-out infinite alternate}
@keyframes slowShift{from{transform:translateY(-1%)} to{transform:translateY(1%)}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.grid{display:grid;gap:18px;grid-template-columns:repeat(12,1fr)} .col-4{grid-column:span 4} .col-6{grid-column:span 6} .col-8{grid-column:span 8} .col-12{grid-column:span 12} @media (max-width:900px){.col-4,.col-6,.col-8{grid-column:span 12}}
.topic{padding:16px} .topic h3{margin-bottom:6px} .topic p{color:var(--muted);margin:0}
.people{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .person{display:flex;gap:14px;padding:14px} .avatar{width:120px;height:120px;border-radius:10px;aspect-ratio: 1 / 1;background:#f1f7f9;display:grid;place-items:center;font-weight:700;color:#6b7280;border:1px solid var(--line)} .person small{color:var(--muted)}
.publist{list-style:none;padding:0;margin:0} .pub{padding:16px;border-bottom:1px dashed var(--line);display:grid;gap:6px} .pub:last-child{border-bottom:none} .pub .title{font-weight:600} .pub .meta{font-size:.92rem;color:var(--muted)} .links{display:flex;gap:12px;flex-wrap:wrap} .chip{border:1px solid var(--line);padding:4px 8px;border-radius:8px;font-size:.9rem}
footer{padding:40px 20px;margin-top:40px;border-top:1px solid var(--line);color:var(--muted)}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

.avatar { overflow: hidden; }
.avatar img { width:100%; height:100%; object-fit: cover; border-radius: 8px; display:block; }
/* 头像容器：强制正方形比例，不受外部影响 */
.avatar {
  width: 130px;             /* 想要的大小 */
  height: 130px;            /* 明确指定高度 */
  flex-shrink: 0;           /* 不允许被压缩 */
  border-radius: 12px;      /* 可改成50%变圆形 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f7f9;
  border: 1px solid var(--line);
  box-sizing: border-box;
}

/* 图片完全铺满容器，保持正方形裁切 */
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 自动裁剪，保持比例 */
  object-position: center;
  border-radius: inherit;
  display: block;
}

/* ===== Flipbook (People page) ===== */
.book { position: relative; padding: 18px; }
.book .book-pages {
  position: relative; width: min(820px, 100%); height: 520px; margin: 0 auto;
  perspective: 1800px;
}

.page {
  position: absolute; inset: 0; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transform-origin: left center; transform: rotateY(0deg);
  transition: transform .6s ease;
  overflow: hidden; display: grid; grid-template-rows: 1fr auto;

  /* 新增：避免背面遮挡点击 */
  backface-visibility: hidden;
}
.page.is-flipped {
  transform: rotateY(-180deg);

  /* 新增：翻过去的页不再拦截点击 */
  pointer-events: none;
}

.page img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page figcaption {
  padding: 8px 12px; font-size: .92rem; color: var(--muted); border-top: 1px solid var(--line);
  background: #fafcff;
}
/* .page.is-flipped { transform: rotateY(-180deg); } */

.book-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; box-shadow: var(--shadow); cursor: pointer;
  display: grid; place-items: center; font-size: 20px; line-height: 1; user-select: none;
}
.book-btn:hover { background: #f8fafc; }
.book-btn.prev { left: -6px; }
.book-btn.next { right: -6px; }

@media (max-width: 720px) {
  .book .book-pages { height: 420px; }
  .book-btn { display: none; } /* taps/swipes preferred on mobile */
}


/* ===== Pinned stack with curled corner ===== */
.stack {
  position: relative; padding: 24px; overflow: visible;
}
.stack .pin {
  position: absolute; top: 8px; left: 16px; width: 14px; height: 14px;
  border-radius: 50%; background: #cbd5e1; border: 1px solid #94a3b8;
  box-shadow: 0 2px 2px rgba(0,0,0,.15) inset, 0 2px 6px rgba(0,0,0,.08);
}
.sheet {
  position: absolute; inset: 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  box-shadow: var(--shadow);
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  will-change: transform;
}
/* Slight randomization for depth (optional) */
.sheet:nth-child(2) { transform: rotate(-0.6deg); }
.sheet:nth-child(3) { transform: rotate(0.8deg); }

/* Image and caption */
.sheet img { width: 100%; height: 100%; object-fit: cover; display:block; }
.sheet figcaption {
  padding: 8px 12px; font-size:.92rem; color:var(--muted);
  border-top: 1px solid var(--line); background:#fafcff;
}

/* Corner curl on the TOP sheet only */
.stack .sheet.top::after {
  content:""; position: absolute; right: 0; bottom: 0; width: 120px; height: 120px;
  background:
    radial-gradient(120px 120px at right bottom, rgba(0,0,0,.18), transparent 60%),
    linear-gradient(135deg, #e9eef5 0%, #ffffff 50%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  box-shadow: -8px -8px 12px rgba(0,0,0,.04) inset;
  transform-origin: 100% 100%;
  transition: transform .35s ease, filter .35s ease;
  border-bottom-right-radius: 6px;
}
.stack .sheet.top:hover::after {
  transform: rotate(-10deg) translate(-6px,-6px);
  filter: brightness(0.98);
}

/* Peel animation class */
.stack .sheet.peel {
  animation: peelUp .45s ease forwards;
}
@keyframes peelUp {
  0%   { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(-6px,-10px) rotate(-2deg); opacity: .92; }
}

/* Ensure the stack has height so absolutely-positioned sheets can fill it */
.stack {
  position: relative;
  padding: 24px;
  overflow: visible;
  min-height: 560px;        /* <-- critical: gives the stack a real height */
}

/* Make sure the top sheet shows a visible peel area and doesn’t intercept clicks when flipped */
.page { backface-visibility: hidden; }
.page.is-flipped { pointer-events: none; }

/* Optional: make the “hot corner” clearly clickable */
.stack .sheet.top .hot-corner {
  position: absolute; right: 0; bottom: 0; width: 36%; height: 36%;
  cursor: pointer; background: transparent; border: 0;
}
.stack .sheet.top .hot-corner:hover {
  outline: 2px dashed rgba(0,0,0,.08); outline-offset: -6px;
}



/* ===== Pinned stack with centered pin & real paper frame ===== */
.stack{
  position: relative;
  padding: 24px;
  overflow: visible;
  min-height: 560px;             /* Make room for absolutely-positioned sheets */
  background: var(--panel);
}

/* Centered pin on top */
.stack .pin{
  position: absolute;
  top: -10px;                    /* sits slightly outside the card edge */
  left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #cbd5e1; border: 1px solid #94a3b8;
  box-shadow: 0 2px 2px rgba(0,0,0,.18) inset, 0 6px 12px rgba(0,0,0,.12);
  z-index: 999;
}

/* Each sheet in the stack */
.sheet{
  position: absolute; inset: 56px 32px 40px;          /* space for pin and frame */
  display: grid; place-items: center;
  transform-origin: center;
  will-change: transform, opacity;
}
/* subtle random angles for depth (optional) */
.sheet:nth-child(2){ transform: rotate(-0.6deg); }
.sheet:nth-child(3){ transform: rotate(0.8deg); }

/* Paper frame (Polaroid style) */
.paper{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow), 0 24px 40px rgba(0,0,0,.06);
  width: min(860px, 100%); height: min(520px, 60vh);
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  position: relative;
}

/* Inset photo area */
.photo{
  margin: 16px 16px 6px 16px;             /* white frame margins */
  border-radius: 6px; overflow: hidden;
  background: #eef2f7;
  height: 100%;
}
.photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Caption strip */
.sheet figcaption{
  padding: 8px 14px; font-size: .95rem; color: var(--muted);
  border-top: 1px solid var(--line); background: #fbfdff;
}

/* Corner curl on TOP sheet only */
.sheet.top::after{
  content:""; position:absolute; right: 22px; bottom: 18px; width: 120px; height: 120px;
  background:
    radial-gradient(120px 120px at right bottom, rgba(0,0,0,.22), transparent 62%),
    linear-gradient(135deg, #e9eef5 0%, #ffffff 50%);
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  border-bottom-right-radius: 8px;
  transform-origin: 100% 100%;
  transition: transform .28s ease, filter .28s ease;
  pointer-events: none;
}
.sheet.top:hover::after{ transform: rotate(-10deg) translate(-6px,-6px); filter: brightness(0.98); }

/* Big, friendly click target for the peel corner */
.sheet.top .hot-corner{
  position: absolute; right: 0; bottom: 0; width: 36%; height: 36%;
  cursor: pointer; background: transparent; border: 0;
}

/* Peel / flip animation */
.sheet.peel{
  animation: peelUp .45s ease forwards;
}
@keyframes peelUp{
  0%   { transform: translateY(0) rotate(0) rotateX(0deg); }
  55%  { transform: translate(-6px,-10px) rotate(-2deg) rotateX(12deg); }
  100% { transform: translate(-10px,-20px) rotate(-4deg) rotateX(18deg); opacity: .94; }
}

/* Allow clicking anywhere on top sheet, not just the corner */
.sheet.top { cursor: pointer; }

/* (optional) a subtle board look behind the sheets */
.stack{
  background:
    radial-gradient(240px 40px at 50% 0, rgba(0,0,0,.04), transparent 60%),
    var(--panel);
}

/* === Research grid: 2 per row, responsive === */
.research-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* two per row */
  gap: 20px;
}

/* Individual card (whole card is a link) */
.research-card{
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.research-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0,0,0,.06), 0 16px 28px rgba(0,0,0,.08);
  border-color: #dbe4ea;
}

/* Media on top: fixed aspect for clean rows */
.card-media{ margin:0; width:100%; aspect-ratio: 16 / 9; overflow:hidden; background:#eef2f7; }
.card-media img{ width:100%; height:100%; object-fit: cover; display:block; }

/* Text area */
.card-body{ padding:14px 16px 16px; }
.card-title{ margin:0 0 6px; color: var(--brand-strong); font-size: clamp(1.05rem, 1.8vw, 1.2rem); }
.card-desc{ margin:0; color: var(--muted); }

/* Mobile: stack to single column */
@media (max-width: 860px){
  .research-grid{ grid-template-columns: 1fr; }
}


/* Ensure 3D transforms look correct in flipbook too */
.book .book-pages{ transform-style: preserve-3d; }
.page{ backface-visibility: hidden; }
.page.is-flipped{ pointer-events: none; }


.book .book-pages { transform-style: preserve-3d; }  /* 让子元素保持3D */
.page { box-shadow: var(--shadow), 0 24px 40px rgba(0,0,0,.06); }

/* Make topic cards feel clickable */
.topic { position: relative; transition: transform .12s ease, box-shadow .12s ease; }
.topic:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.topic > a { display:block; color:inherit; text-decoration:none; }



/* Homepage subtle pattern background */
.home::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* 基础底色 = 你的 --paper 浅蓝 / 白色 */
  background:
    /* 柔和光晕（右上、左上各一个，增加层次） */
    radial-gradient(38% 28% at 75% 5%, rgba(74,159,184,.20), transparent 60%),
    radial-gradient(32% 24% at 12% 6%, rgba(117,189,209,.18), transparent 60%),

    /* 细腻的“X”交叉线（两组对角线，间距可调） */
    repeating-linear-gradient(45deg,
      rgba(70,120,190,.10) 0 2px,   /* 线宽 2px */
      transparent 2px 96px          /* 线距 96px */
    ),
    repeating-linear-gradient(-45deg,
      rgba(70,120,190,.10) 0 2px,
      transparent 2px 96px
    ),

    /* 柔白蒙层，保证文字可读 */
    linear-gradient(0deg, rgba(255,255,255,.82), rgba(255,255,255,.82)),

    /* 页面底色（来自你的变量） */
    var(--paper);

  /* 多层叠加的混合模式（让线条/光晕更柔和） */
  background-blend-mode: normal, normal, normal, normal, lighten, normal;
}

/* 移动端降低密度，提升性能 */
@media (max-width: 768px){
  .home::before{
    background:
      radial-gradient(45% 30% at 70% 3%, rgba(74,159,184,.16), transparent 60%),
      radial-gradient(40% 26% at 15% 8%, rgba(117,189,209,.14), transparent 60%),
      repeating-linear-gradient(45deg, rgba(70,120,190,.08) 0 2px, transparent 2px 120px),
      repeating-linear-gradient(-45deg, rgba(70,120,190,.08) 0 2px, transparent 2px 120px),
      linear-gradient(0deg, rgba(255,255,255,.86), rgba(255,255,255,.86)),
      var(--paper);
  }
}

/* 若你启用了 prefers-reduced-motion，可忽略动画；这里本身无动画 */
@media (prefers-reduced-motion: reduce){
  .home::before{ animation: none !important; }
}


/* ===== Light blue base stays as --paper; add glowing diagonal white stripes ===== */
.home{ position: relative; }

/* 柔光（模糊）斜条纹层：制造“发光”的感觉 */
.home::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  /* 只是一组斜向重复线，线较宽、透明度低，然后整体做轻微模糊 */
  background:
    /* 可选：很淡的光晕，增强层次；不需要可删除下一行两段 radial-gradient */
    radial-gradient(36% 28% at 78% 8%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(32% 24% at 10% 12%, rgba(255,255,255,.18), transparent 60%),
    repeating-linear-gradient(
      -30deg,                   /* 斜率：-24°，可改：-18deg/-30deg */
      rgba(255,255,255,.35) 0 12px,   /* 线条本体（较宽，透明度低）*/
      transparent           8px 200px /* 线距：总周期 124px，可调稀疏度 */
    );
  filter: blur(8px);   /* 模糊产生柔光 */
  opacity: 2.5;        /* 整体强度（越小越淡） */
  mix-blend-mode: screen; /* 与淡蓝底色叠加更柔和 */
}

/* 清晰细线层：在柔光层上再叠淡淡的“线芯”，更干净利落 */
.home::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      -30deg,                     /* 与上层同角度 */
      rgba(255, 255, 255, 0.42) 0 2px,    /* 细线（2px） */
      transparent             2px 124px
    );
  opacity: .22;    /* 线的存在感（建议 0.15–0.30 之间） */
}

/* 移动端弱化效果，减少纹理密度与模糊开销 */
@media (max-width: 768px){
  .home::before{
    filter: blur(6px);
    opacity: .30;
    background:
      radial-gradient(40% 28% at 75% 6%, rgba(255,255,255,.18), transparent 60%),
      radial-gradient(34% 24% at 12% 10%, rgba(255,255,255,.14), transparent 60%),
      repeating-linear-gradient(-24deg, rgba(255,255,255,.28) 0 8px, transparent 8px 136px);
  }
  .home::after{
    opacity: .18;
    background: repeating-linear-gradient(-24deg, rgba(255,255,255,.36) 0 20px, transparent 2px 136px);
  }
}

/* 如果用户偏好减少动效：我们这里没有动画，但仍保留开关占位 */
@media (prefers-reduced-motion: reduce){
  .home::before, .home::after{ animation: none !important; }
}

/* =============================================================================
   FULL HERO SYSTEM — drop-in replacement
   - Full-bleed banner
   - Light/Dark text modes
   - Overlay variants (dark / light / custom var)
   - Ken-Burns motion (optional)
   - Works per-page via --hero-h, --hero-img, --kb-dur overrides
   ========================================================================== */

/* ---------- Base: full-bleed container ---------- */
.page-hero{
  position: relative;
  /* Break out of centered layout to span the viewport width */
  width: 100vw; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;

  /* Height controlled by CSS var; override per-page inline */
  min-height: var(--hero-h, clamp(260px, 38vh, 520px));

  display: grid; place-items: center;
  overflow: hidden;
  /* Fallback static bg (in case .hero-bg is missing) */
  background-image: var(--hero-img, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Background image layer (animated or static) ---------- */
.page-hero .hero-bg{
  position: absolute; inset: 0;
  background-image: var(--hero-img, none);
  background-size: cover; background-position: center;
  will-change: transform;
  transform: scale(1.06);
  /* Ken-Burns motion (set --kb-dur per page; default 26s) */
  animation: heroKenBurns var(--kb-dur, 26s) ease-in-out infinite alternate;
  z-index: 0; /* BACKGROUND */
}

/* Motion keyframes */
@keyframes heroKenBurns{
  0%   { transform: scale(1.08) translate3d( 0%,  0%, 0); }
  50%  { transform: scale(1.12) translate3d(-2%, -1%, 0); }
  100% { transform: scale(1.08) translate3d( 1%,  0%, 0); }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .page-hero .hero-bg{ animation: none; transform: none; }
}

/* ---------- Overlay (readability) ---------- */
/* Default: gentle dark vignette; change with classes or var */
:root{ --hero-dim: 1; } /* global multiplier; 1=as-is, 0=no dim, 1.5=stronger */

.page-hero::after{
  content:""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 10%,
      rgba(0,0,0, calc(.10 * var(--hero-dim))),
      rgba(0,0,0, calc(.20 * var(--hero-dim)))
    );
  z-index: 1; /* OVERLAY */
}

/* Lighter overlay variant (for bright/silver images) */
.page-hero.is-light::after{
  background: linear-gradient(0deg,
      rgba(255,255,255, calc(.08 * var(--hero-dim))),
      rgba(255,255,255, calc(.08 * var(--hero-dim)))
  );
}

/* No overlay (if you want the raw image) */
.page-hero.no-overlay::after{ background: transparent; }

/* ---------- Text block ---------- */
.page-hero .hero-inner{
  position: relative; z-index: 2;            /* TEXT layer */
  width: var(--cw, min(1120px, 86vw));
  padding: 64px 20px;
  text-align: left;
}

.page-hero .hero-title{
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.05;
  margin: 0 0 .5rem;
}

.page-hero .hero-sub{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 80ch;
  margin: 0;
  opacity: .92;
}

/* Text color presets */
.page-hero.light-text .hero-title,
.page-hero.light-text .hero-sub{ color: #ffffff; }

.page-hero.dark-text .hero-title,
.page-hero.dark-text .hero-sub{ color: #0b1830; }

/* ---------- Alignment helpers (optional) ---------- */
.page-hero.center .hero-inner{ text-align: center; }
.page-hero.center .hero-sub{ margin-left: auto; margin-right: auto; }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 768px){
  .page-hero .hero-inner{ padding: 48px 20px; }
}

/* ---------- Defensive: avoid interference from old hero styles ---------- */
/* If you still have old `.hero.has-hero-bg` rules, this keeps our stack intact */
.page-hero,
.page-hero .hero-bg,
.page-hero::after,
.page-hero .hero-inner{ isolation: isolate; }



/* =========================
   NEW FULL-WIDTH HERO (image element)
   ========================= */
.page-banner{
  position: relative;
  width: 100vw; left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  min-height: var(--h, clamp(260px, 38vh, 520px)); /* per-page height */
  display: grid; place-items: center;
  overflow: hidden;
}

/* Image layer (actual <img>) */
.page-banner > img.hero-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transform: scale(1.06);
  will-change: transform;
  animation: kbPan var(--dur, 26s) ease-in-out infinite alternate;
  z-index: 0; /* BACKGROUND */
}

/* Optional overlay (readability) */
.page-banner::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 80% at 50% 10%, rgba(0,0,0,.10), rgba(0,0,0,.20));
  z-index: 1; /* OVERLAY */
}
/* Lighter or none */
.page-banner.is-light::after{ background: linear-gradient(0deg, rgba(255,255,255,.08), rgba(255,255,255,.08)); }
.page-banner.no-overlay::after{ background: transparent; }

/* Text block */
.page-banner .inner{
  position: relative; z-index: 2;      /* TEXT layer */
  width: var(--cw, min(1120px, 86vw));
  padding: 64px 20px;
  text-align: left;
}
.page-banner .title{
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.05; margin: 0 0 .5rem;
}
.page-banner .sub{
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  max-width: 80ch; margin: 0; opacity: .92;
}

/* Light / Dark text modes */
.page-banner.light .title,
.page-banner.light .sub{ color:#fff; }

.page-banner.dark .title,
.page-banner.dark .sub{ color:#0b1830; }

/* Centering helper (optional) */
.page-banner.center .inner{ text-align:center; }
.page-banner.center .sub{ margin-left:auto; margin-right:auto; }

/* Ken-Burns motion */
@keyframes kbPan{
  0%   { transform: scale(1.08) translate3d( 0%,  0%, 0); }
  50%  { transform: scale(1.12) translate3d(-2%, -1%, 0); }
  100% { transform: scale(1.08) translate3d( 1%,  0%, 0); }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
  .page-banner > img.hero-img{ animation:none; transform:none; }
}

/* Mobile padding tweak */
@media (max-width: 768px){
  .page-banner .inner{ padding: 48px 20px; }
}