/* Beyond Research: source CSS from Hanchao Zhang, with a UH deep-red palette. */
.beyond{
    --life-red:var(--uh-brick); --life-deep:var(--uh-chocolate); --life-accent:var(--uh-brick); --life-soft:var(--accent-soft);
    --life-ink:var(--text); --life-cinnabar:var(--uh-brick);
    --life-zh:"Songti SC","STSong","Noto Serif SC",serif;
    color:var(--life-ink);
  }
  .beyond *{ box-sizing:border-box; }

  /* ---------- hero ---------- */
  .beyond .life-hero{ display:flex; align-items:center; gap:16px; margin:6px 0 6px; }
  .beyond .life-hero .life-hero-bar{ width:5px; align-self:stretch; min-height:64px; border-radius:3px;
    background:linear-gradient(var(--life-cinnabar),var(--uh-chocolate)); }
  .beyond .life-hero .life-eyebrow{ font-family:'Caveat',cursive; font-size:1.4rem; color:var(--life-accent);
    font-weight:600; line-height:1; }
  .beyond .life-hero h1{ font-size:2.6rem; font-weight:800; margin:2px 0 0; line-height:1;
    background:linear-gradient(90deg,var(--life-deep),var(--life-accent) 45%,var(--life-red) 72%,var(--life-deep));
    background-size:220% auto; -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; animation:life-shimmer 4s linear infinite; }
  .beyond .life-lede{ max-width:34em; color:var(--muted); font-size:1rem; line-height:1.6; margin:14px 0 4px; }

  /* ---------- section label ---------- */
  .beyond .life-section-heading{ display:flex; align-items:baseline; gap:11px; margin:34px 0 4px; }
  .beyond .life-section-heading .life-section-title{ font-size:1.3rem; font-weight:700; color:var(--life-red); letter-spacing:-.3px; }
  .beyond .life-section-heading .life-zh{ font-family:var(--life-zh); font-size:.95rem; color:var(--life-accent); letter-spacing:.14em; }
  .beyond .life-section-heading::after{ content:''; flex:1; height:1px; align-self:center;
    background:linear-gradient(90deg,rgba(var(--accent-rgb),.3),transparent); }
  .beyond .life-section-intro{ font-size:.82rem; color:var(--muted); margin:6px 0 18px; }

  /* ---------- mounted scrolls (calligraphy) ---------- */
  .beyond .life-grid.is-scrolls{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
  .beyond .life-scroll{ position:relative; background:linear-gradient(#fbf2f4,#f8ecef);
    border-radius:3px; padding:15px 13px 11px; box-shadow:0 9px 26px rgba(var(--accent-rgb),.16);
    cursor:zoom-in; transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
  .beyond .life-scroll::before, .beyond .life-scroll::after{ content:''; position:absolute; left:-4px; right:-4px;
    height:10px; background:linear-gradient(var(--life-deep),#42050f); border-radius:5px;
    box-shadow:0 2px 6px rgba(0,0,0,.32); }
  .beyond .life-scroll::before{ top:-4px; } .beyond .life-scroll::after{ bottom:-4px; }
  .beyond .life-scroll:hover{ transform:translateY(-5px); box-shadow:0 18px 40px rgba(var(--accent-rgb),.28); }
  .beyond .life-scroll:focus-visible{ outline:3px solid var(--life-accent); outline-offset:3px; }
  .beyond .life-scroll .life-silk{ background:#fff; border:1px solid rgba(var(--accent-rgb),.18); padding:5px; overflow:hidden; }
  .beyond .life-scroll .life-silk img{ display:block; width:100%; height:auto;
    transition:transform .55s cubic-bezier(.2,.7,.2,1); }
  .beyond .life-scroll:hover .life-silk img{ transform:scale(1.03); }
  .beyond .life-scroll .life-scroll-caption{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-top:11px; }
  .beyond .life-scroll .life-scroll-text{ font-size:.86rem; font-weight:600; color:var(--life-ink); line-height:1.25; }
  .beyond .life-scroll .life-scroll-meta{ font-family:var(--life-zh); font-size:.78rem; color:var(--life-red); white-space:nowrap; }
  .beyond .life-seal{ flex:0 0 auto; width:30px; height:30px; border-radius:5px;
    border:2px solid var(--life-cinnabar); color:var(--life-cinnabar); font-family:var(--life-zh); font-weight:700;
    font-size:.82rem; display:flex; align-items:center; justify-content:center; transform:rotate(-4deg);
    box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.25); }

  /* ---------- swimming ---------- */
  .beyond .life-grid.is-photos{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:6px; }
  .beyond .life-photo{ position:relative; border-radius:7px; overflow:hidden; cursor:zoom-in;
    box-shadow:0 7px 22px rgba(var(--accent-rgb),.15); transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
  .beyond .life-photo:hover{ transform:translateY(-4px); box-shadow:0 16px 38px rgba(var(--accent-rgb),.26); }
  .beyond .life-photo:focus-visible{ outline:3px solid var(--life-accent); outline-offset:3px; }
  .beyond .life-photo img{ display:block; width:100%; height:240px; object-fit:cover;
    transition:transform .55s cubic-bezier(.2,.7,.2,1); }
  .beyond .life-photo:hover img{ transform:scale(1.04); }
  .beyond .life-photo .life-photo-caption{ position:absolute; left:0; right:0; bottom:0; padding:24px 14px 11px; color:#fff;
    background:linear-gradient(to top,rgba(35,0,8,.82),transparent); }
  .beyond .life-photo .life-photo-caption b{ display:block; font-size:.92rem; }
  .beyond .life-photo .life-photo-caption small{ font-size:.74rem; opacity:.88; }

  /* ---------- lightbox ---------- */
  .life-lightbox{ position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center;
    background:rgba(30,4,10,.86); backdrop-filter:blur(3px); padding:34px; }
  .life-lightbox.open{ display:flex; }
  .life-lightbox img{ max-width:92vw; max-height:82vh; border-radius:4px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
  .life-lightbox .life-lightbox-caption{ position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#fff;
    font-size:.9rem; }
  .life-lightbox .life-lightbox-caption .life-zh{ font-family:var(--life-zh); color:#f2ccd4; }
  .life-lightbox .life-lightbox-close{ position:absolute; top:18px; right:24px; width:40px; height:40px; border:0; cursor:pointer;
    border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.5rem; line-height:1; }
  .life-lightbox .life-lightbox-close:hover{ background:rgba(255,255,255,.26); }

  /* ---------- reveal ---------- */
  .beyond:where(.life-enhanced) .life-reveal{ opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s ease; }
  .beyond:where(.life-enhanced) .life-reveal.is-visible{ opacity:1; transform:none; }

  @keyframes life-shimmer{ 0%{background-position:0% center} 100%{background-position:220% center} }

  /* ---------- responsive ---------- */
  @media (max-width:760px){
    .beyond .life-grid.is-scrolls{ grid-template-columns:1fr 1fr; }
    .beyond .life-hero h1{ font-size:2.1rem; }
  }
  @media (max-width:520px){
    .beyond .life-grid.is-scrolls{ grid-template-columns:1fr; }
    .beyond .life-grid.is-photos{ grid-template-columns:1fr; }
  }
  @media (prefers-reduced-motion: reduce){
    .beyond .life-hero h1{ animation:none; }
    .beyond .life-scroll, .beyond .life-scroll .life-silk img, .beyond .life-photo, .beyond .life-photo img,
    .beyond:where(.life-enhanced) .life-reveal{ transition:none; transform:none; }
    .beyond:where(.life-enhanced) .life-reveal{ opacity:1; }
  }

  /* Keep the approved light red palette aligned with the home page. */
  @media (prefers-color-scheme: dark){
    .beyond{ color:var(--text); }
    .beyond .life-lede{ color:var(--muted); }
    .beyond .life-scroll{ background:linear-gradient(#fbf2f4,#f8ecef); }
    .beyond .life-scroll .life-silk{ background:#fff; }
    .beyond .life-scroll .life-scroll-text{ color:var(--text); }
  }

/* Semantic headings replace the source's inline .en labels without changing metrics. */
.beyond .life-section-title { margin:0; padding:0; line-height:1.5; }
.beyond .life-section-title::after { content:none; }
.beyond .life-section-intro { line-height:1.5; }
/* The source photo grid has only a 6px top margin; scroll grids have no margin. */
.beyond .life-grid { margin:0; }
.beyond .life-grid.is-photos { margin-top:6px; }
.beyond [data-life-gallery][hidden], .beyond [data-life-gallery]:empty { display:none !important; }
.beyond .life-image-link { display:block; color:inherit; }
/* Font fallback matches the source; the viewer is outside .beyond. */
.life-lightbox { --life-zh:"Songti SC","STSong","Noto Serif SC",serif; }
.life-lightbox[hidden], .life-lightbox img[hidden], .life-lightbox-caption[hidden], .life-lightbox-error[hidden] { display:none !important; }
.life-lightbox .life-lightbox-close:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.life-lightbox .life-lightbox-error { max-width:25em; color:#fff; text-align:center; }