/* =====================================================================
   DAWU Liquid V5.4 — calm Apple glass + restrained technology
   Design goals:
   - High readability in both light and dark themes
   - No full-bleed hero cover as page background
   - YSJF-inspired horizontal series rail (16:9, snap, minimal caption)
   - Liquid-glass depth without neon overload
   ===================================================================== */
:root{
  --ui-bg:#0b0d10;
  --ui-bg-elev:#101318;
  --ui-surface:rgba(23,27,33,.72);
  --ui-surface-strong:rgba(19,23,29,.90);
  --ui-surface-soft:rgba(255,255,255,.045);
  --ui-text:#f5f7fa;
  --ui-text-2:#a7b0bc;
  --ui-text-3:#7f8996;
  --ui-line:rgba(255,255,255,.10);
  --ui-line-strong:rgba(255,255,255,.16);
  --ui-accent:#9bc4c8;
  --ui-accent-strong:#b7d8da;
  --ui-accent-ink:#102225;
  --ui-shadow:0 24px 70px rgba(0,0,0,.28);
  --ui-shadow-soft:0 12px 36px rgba(0,0,0,.16);
  --ui-radius:22px;
  --ui-ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html[data-theme="light"]{
  --ui-bg:#f4f7fa;
  --ui-bg-elev:#edf2f6;
  --ui-surface:rgba(255,255,255,.76);
  --ui-surface-strong:rgba(255,255,255,.94);
  --ui-surface-soft:rgba(19,42,58,.035);
  --ui-text:#18202a;
  --ui-text-2:#647080;
  --ui-text-3:#7a8796;
  --ui-line:rgba(18,42,60,.10);
  --ui-line-strong:rgba(18,42,60,.16);
  --ui-accent:#236778;
  --ui-accent-strong:#184e5b;
  --ui-accent-ink:#f6fbfc;
  --ui-shadow:0 24px 70px rgba(45,63,78,.12);
  --ui-shadow-soft:0 12px 34px rgba(45,63,78,.09);
  color-scheme:light;
}

html,body{background:var(--ui-bg)!important;color:var(--ui-text)!important}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","PingFang SC","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif!important;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(900px 520px at 12% -8%,color-mix(in srgb,var(--ui-accent) 9%,transparent),transparent 66%),
    radial-gradient(760px 500px at 96% 8%,color-mix(in srgb,var(--ui-accent) 5%,transparent),transparent 70%),
    linear-gradient(180deg,var(--ui-bg),var(--ui-bg))!important;
  transition:background-color .45s ease,color .3s ease;
}
body:before{
  opacity:.12!important;
  background-image:linear-gradient(color-mix(in srgb,var(--ui-text) 8%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ui-text) 8%,transparent) 1px,transparent 1px)!important;
  background-size:72px 72px!important;
  animation:none!important;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 62%)!important;
}
body:after{display:none!important}
.ambient-light{display:none!important}

/* ---------- typography / readability ---------- */
body,p,input,button,select,textarea{font-weight:450}
.page-title h1,.section-label h2,.person-caption h3,.vcard h3,.journal-card h2,.identify-v2 h1,.identify-v2 h2{color:var(--ui-text)!important;text-shadow:none!important}
.muted,.video-meta,.video-bottom,.person-caption span,.page-title p,.journal-card p,.evidence-note,.identify-v2-head p,.quick-step p,.identify-privacy,.collection-sidebar p{color:var(--ui-text-2)!important}
.eyebrow,.section-no,.section-en,.ysjf-series-kicker{color:var(--ui-accent)!important}
::placeholder{color:var(--ui-text-3)!important;opacity:.86}
a{color:inherit}
.text-link{color:var(--ui-text-2)!important}.text-link:hover{color:var(--ui-accent-strong)!important}
:focus-visible{outline:2px solid color-mix(in srgb,var(--ui-accent) 72%,white 14%)!important;outline-offset:3px!important}

/* ---------- top navigation ---------- */
.topbar{
  background:color-mix(in srgb,var(--ui-bg) 72%,transparent)!important;
  border-bottom:1px solid var(--ui-line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(140%)!important;
}
.topbar:after{display:none!important}
.topbar-in{height:72px!important;width:min(1440px,calc(100% - 48px))!important}
.wordmark{color:var(--ui-text)!important;font-size:21px!important;font-weight:820!important;letter-spacing:-.75px!important;text-shadow:none!important}
.wordmark>span{color:var(--ui-accent)!important;text-shadow:none!important}
.logo-caption{color:var(--ui-text-3)!important;font-weight:650!important;letter-spacing:1.55px!important}
.nav{
  background:color-mix(in srgb,var(--ui-surface) 76%,transparent)!important;
  border:1px solid var(--ui-line)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ui-text) 7%,transparent),var(--ui-shadow-soft)!important;
  backdrop-filter:blur(20px) saturate(135%)!important;
}
.nav a{color:var(--ui-text-2)!important;font-weight:620!important}
.nav a:hover{color:var(--ui-text)!important;background:var(--ui-surface-soft)!important}
.nav a.active{color:var(--ui-accent-ink)!important;background:var(--ui-accent)!important;box-shadow:none!important}
.header-link,.theme-toggle,.menu-toggle{
  color:var(--ui-text-2)!important;background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ui-text) 8%,transparent)!important;
}
.header-link:hover,.theme-toggle:hover,.menu-toggle:hover{color:var(--ui-text)!important;border-color:var(--ui-line-strong)!important;background:color-mix(in srgb,var(--ui-surface) 82%,var(--ui-text) 4%)!important}
.menu-toggle span{background:var(--ui-text)!important}

/* ---------- home hero: no background photo ---------- */
.hero-v54{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:calc(100svh - 72px);max-height:900px;
  display:grid;align-items:center;
  padding:clamp(48px,7vh,84px) 0;
  border-bottom:1px solid var(--ui-line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ui-bg) 96%,var(--ui-accent) 4%),var(--ui-bg));
}
.hero-v54:before{
  content:"";position:absolute;z-index:-2;width:min(62vw,940px);aspect-ratio:1;right:-26vw;top:-30%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--ui-accent) 12%,transparent) 0 1px,transparent 1.6px);background-size:20px 20px;
  opacity:.36;mask-image:radial-gradient(circle,#000 0 45%,transparent 72%);transform:rotate(-10deg);
}
.hero-v54:after{
  content:"";position:absolute;z-index:-1;left:3%;bottom:-170px;width:520px;height:520px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--ui-accent) 18%,transparent);
  box-shadow:0 0 0 72px color-mix(in srgb,var(--ui-accent) 2.5%,transparent),0 0 0 144px color-mix(in srgb,var(--ui-accent) 1.5%,transparent);
  opacity:.55;
}
.hero-v54-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);align-items:center;gap:clamp(44px,7vw,110px)}
.hero-v54-copy{max-width:720px}
.hero-v54-kicker{display:inline-flex;align-items:center;gap:10px;color:var(--ui-text-2);font:700 11px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.15em;text-transform:uppercase}
.hero-v54-kicker:before{content:"";width:8px;height:8px;border:1px solid var(--ui-accent);border-radius:50%;box-shadow:inset 0 0 0 2px var(--ui-bg)}
.hero-v54 h1{margin:24px 0 22px;color:var(--ui-text)!important;font-size:clamp(64px,7.6vw,118px);line-height:.92;letter-spacing:-.07em;font-weight:840;text-shadow:none!important;background:none!important;-webkit-text-fill-color:currentColor!important}
.hero-v54 h1 span{color:var(--ui-accent)}
.hero-v54-sub{max-width:590px;color:var(--ui-text-2);font-size:clamp(16px,1.2vw,19px);line-height:1.78;font-weight:480}
.hero-v54-actions{display:flex;align-items:center;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero-v54-meta{display:flex;gap:22px;margin-top:36px;flex-wrap:wrap;color:var(--ui-text-3);font-size:12px}
.hero-v54-meta span{display:flex;align-items:center;gap:7px}.hero-v54-meta i{width:5px;height:5px;border-radius:50%;background:var(--ui-accent);opacity:.72}
.hero-feature-v54{position:relative;min-width:0}
.hero-feature-card{
  display:block;position:relative;overflow:hidden;border-radius:26px;background:var(--ui-surface);border:1px solid var(--ui-line);box-shadow:var(--ui-shadow);
  aspect-ratio:16/10;isolation:isolate;
}
.hero-feature-card:before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 34%,rgba(3,6,9,.18) 54%,rgba(3,6,9,.88) 100%);pointer-events:none}
.hero-feature-card:after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.035);pointer-events:none}
.hero-feature-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.84) contrast(1.03);transition:transform .8s var(--ui-ease),filter .5s ease}
.hero-feature-card:hover img{transform:scale(1.025);filter:saturate(.94) contrast(1.03)}
.hero-feature-copy{position:absolute;z-index:4;left:24px;right:82px;bottom:22px;text-align:left;color:white}
.hero-feature-copy small{display:block;margin-bottom:8px;color:#cbd5df;font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em}
.hero-feature-copy strong{display:block;font-size:clamp(18px,1.45vw,24px);line-height:1.35;font-weight:700;letter-spacing:-.02em}
.hero-feature-copy em{display:block;margin-top:8px;color:#b9c4cf;font-size:12px;font-style:normal}
.hero-feature-play{position:absolute;z-index:5;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(245,250,252,.92);color:#132126;font-size:14px;box-shadow:0 10px 28px rgba(0,0,0,.24)}
.hero-feature-note{display:flex;justify-content:space-between;gap:16px;margin-top:14px;color:var(--ui-text-3);font-size:11px;padding:0 4px}
.hero-feature-note span:first-child{color:var(--ui-text-2)}
.hero-metrics-v54{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:clamp(18px,2vh,28px);border:1px solid var(--ui-line);border-radius:18px;overflow:hidden;background:var(--ui-line)}
.hero-metrics-v54>div{background:color-mix(in srgb,var(--ui-bg) 90%,transparent);padding:16px 20px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;align-items:baseline}
.hero-metrics-v54 strong{font-size:25px;letter-spacing:-.035em}.hero-metrics-v54 small{font-size:12px;color:var(--ui-text-2)}.hero-metrics-v54 span{grid-column:1/-1;color:var(--ui-text-3);font-size:11px}

/* ---------- liquid glass: calmer, consistent ---------- */
.vcard,.person-card,.journal-card,.evidence-card,.people-intro,.collection-sidebar,.glass-card,.identify-video-card,.identify-pick-panel,.search-field,.home-search,.quick-search,.quick-fields input,.quick-fields textarea{
  background:var(--ui-surface)!important;border:1px solid var(--ui-line)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ui-text) 8%,transparent),var(--ui-shadow-soft)!important;
  backdrop-filter:blur(20px) saturate(128%)!important;-webkit-backdrop-filter:blur(20px) saturate(128%)!important;
}
.vcard:after,.person-card:after,.journal-card:after,.evidence-card:after,.identify-pick-panel:after{opacity:.12!important}
.vcard:hover,.person-card:hover,.journal-card:hover{transform:translateY(-4px)!important;border-color:var(--ui-line-strong)!important;box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ui-text) 10%,transparent),0 22px 56px color-mix(in srgb,#000 20%,transparent)!important}

/* ---------- buttons ---------- */
.button{border-radius:999px!important;background:var(--ui-surface)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)!important;box-shadow:none!important;font-weight:650!important;padding:11px 17px!important;min-height:42px!important}
.button:hover:not(:disabled){background:color-mix(in srgb,var(--ui-surface) 86%,var(--ui-text) 4%)!important;color:var(--ui-text)!important;border-color:var(--ui-line-strong)!important;box-shadow:none!important}
.button.light{background:var(--ui-accent)!important;color:var(--ui-accent-ink)!important;border-color:transparent!important;box-shadow:none!important}
.button.light:hover:not(:disabled){background:var(--ui-accent-strong)!important;color:var(--ui-accent-ink)!important}

/* ---------- home series — derived from the supplied YSJF DOM ---------- */
.ysjf-series-section{
  padding:clamp(86px,10vw,150px) 0 clamp(82px,9vw,140px)!important;
  background:var(--ui-bg)!important;border-bottom:1px solid var(--ui-line);
  overflow:hidden;
}
.ysjf-series-heading{text-align:center;margin-bottom:clamp(30px,3.4vw,50px)!important}
.ysjf-series-kicker{font-size:12px!important;letter-spacing:.15em!important;font-weight:740!important;margin-bottom:8px!important}
.ysjf-series-heading h2{font-size:clamp(28px,3vw,44px)!important;line-height:1.1!important;letter-spacing:-.045em!important;font-weight:760!important;color:var(--ui-text)!important}
.ysjf-series-track{
  display:flex!important;align-items:center!important;gap:60px!important;
  overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory!important;
  scroll-behavior:auto!important;overscroll-behavior-inline:contain;
  padding:0 max(24px,calc((100vw - 1440px)/2)) 14px!important;
  scrollbar-width:none!important;cursor:grab;touch-action:pan-x;
}
.ysjf-series-track::-webkit-scrollbar{display:none}
.ysjf-series-track.is-dragging{cursor:grabbing;scroll-snap-type:none!important;user-select:none}
.ysjf-series-card{
  flex:0 0 calc(50% - 60px)!important;min-width:0!important;scroll-snap-align:center!important;
  color:var(--ui-text)!important;text-decoration:none!important;transform:none!important;
}
.ysjf-series-media{position:relative!important;aspect-ratio:16/9!important;overflow:hidden!important;border-radius:14px!important;background:var(--ui-bg-elev)!important;border:1px solid var(--ui-line)!important;box-shadow:var(--ui-shadow-soft)!important}
.ysjf-series-media img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;filter:saturate(.88) contrast(1.02)!important;transition:transform .65s var(--ui-ease),filter .45s ease!important}
.ysjf-series-card:hover .ysjf-series-media img{transform:scale(1.025)!important;filter:saturate(.98) contrast(1.02)!important}
.ysjf-series-caption{margin-top:18px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;color:var(--ui-text-2)!important}
.ysjf-series-name{font-size:14px!important;line-height:1.4!important;font-weight:550!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:72%!important}
.ysjf-series-more{text-align:center!important;margin-top:34px!important}

/* ---------- search: single coherent focus ring ---------- */
.home-controls{align-items:center!important}
.home-search,.search-field{border-radius:16px!important;overflow:visible!important;background:var(--ui-surface)!important;box-shadow:none!important;transition:border-color .22s ease,box-shadow .22s ease,background .22s ease!important}
.home-search:focus-within,.search-field:focus-within{border-color:color-mix(in srgb,var(--ui-accent) 58%,transparent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-accent) 12%,transparent)!important;background:var(--ui-surface-strong)!important}
.home-search input,.search-field input{color:var(--ui-text)!important;background:transparent!important;border:0!important;outline:0!important;box-shadow:none!important}
.home-search input:focus,.search-field input:focus{outline:0!important;box-shadow:none!important}
.home-search button{background:transparent!important;border:0!important;color:var(--ui-text-3)!important;box-shadow:none!important}.home-search button:hover{color:var(--ui-accent-strong)!important;background:transparent!important}
.ui-icon{color:currentColor}

/* ---------- cards / collections ---------- */
.section{background:transparent!important}.section-head{border-bottom-color:var(--ui-line)!important}.tabs.segmented{background:var(--ui-surface-soft)!important;border:1px solid var(--ui-line)!important}.tabs.segmented button{color:var(--ui-text-2)!important}.tabs.segmented button.active{background:var(--ui-surface-strong)!important;color:var(--ui-text)!important;border:1px solid var(--ui-line)!important;box-shadow:none!important}
.video-cast a,.journal-kind-chip,.wrong-chip{background:var(--ui-surface-soft)!important;color:var(--ui-text-2)!important;border-color:var(--ui-line)!important}.journal-kind-chip.active{background:var(--ui-accent)!important;color:var(--ui-accent-ink)!important;border-color:transparent!important}
.collection-toolbar select,input,textarea{color:var(--ui-text);background:var(--ui-surface);border-color:var(--ui-line)}

/* ---------- footer ---------- */
.footer{background:var(--ui-bg-elev)!important;color:var(--ui-text-2)!important;border-top:1px solid var(--ui-line)!important}.footer-logo{color:var(--ui-text)!important}.footer-logo span{color:var(--ui-accent)!important}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hero-v54{min-height:auto;max-height:none;padding:58px 0 64px}
  .hero-v54-grid{grid-template-columns:1fr;gap:38px}
  .hero-v54-copy{max-width:720px}.hero-feature-v54{width:min(760px,100%)}
  .hero-metrics-v54{margin-top:4px}
}
@media(max-width:760px){
  .topbar-in{height:64px!important;width:calc(100% - 24px)!important;padding-top:env(safe-area-inset-top)!important}
  .topbar{padding-top:env(safe-area-inset-top)!important}
  .logo{max-width:calc(100vw - 116px)!important}.wordmark{font-size:18px!important}.logo-caption{display:none!important}
  .header-actions{display:flex!important;gap:7px!important}.theme-toggle,.menu-toggle{width:40px!important;height:40px!important;border-radius:13px!important}
  .nav{top:calc(64px + env(safe-area-inset-top))!important;left:12px!important;right:12px!important;transform:none!important;display:none!important;flex-direction:column!important;align-items:stretch!important;padding:8px!important;border-radius:18px!important;background:var(--ui-surface-strong)!important;box-shadow:var(--ui-shadow)!important}
  .nav.open{display:flex!important}.nav a{padding:13px 14px!important;border-radius:12px!important;font-size:15px!important}.mobile-nav-extra{display:block!important;border-top:1px solid var(--ui-line)!important;margin-top:4px!important;padding-top:15px!important}
  .hero-v54{padding:42px 0 54px;min-height:0}
  .hero-v54-grid{gap:30px}.hero-v54 h1{font-size:clamp(54px,18vw,76px);margin:20px 0 18px}.hero-v54-sub{font-size:15px;line-height:1.72}.hero-v54-actions{margin-top:24px}.hero-v54-meta{gap:13px;margin-top:26px;font-size:11px}
  .hero-feature-card{border-radius:18px;aspect-ratio:16/10}.hero-feature-copy{left:16px;right:64px;bottom:15px}.hero-feature-copy strong{font-size:17px}.hero-feature-copy em{font-size:11px}.hero-feature-play{right:14px;bottom:14px;width:42px;height:42px}
  .hero-metrics-v54{grid-template-columns:1fr;border-radius:15px}.hero-metrics-v54>div{padding:13px 15px}.hero-metrics-v54 strong{font-size:22px}
  .ysjf-series-section{padding:92px 0 82px!important}.ysjf-series-heading{text-align:left!important;padding-left:16px!important;padding-right:16px!important;margin-bottom:30px!important}.ysjf-series-kicker{font-size:12px!important}.ysjf-series-heading h2{font-size:29px!important}
  .ysjf-series-track{gap:10px!important;padding:0 16px 12px!important;scroll-padding-left:16px!important}
  .ysjf-series-card{flex-basis:calc(100% - 60px)!important;scroll-snap-align:start!important}
  .ysjf-series-media{border-radius:10px!important}.ysjf-series-caption{justify-content:flex-start!important;margin-top:16px!important}.ysjf-series-name{font-size:13px!important;max-width:82%!important}.ysjf-series-more{text-align:left!important;padding-left:16px!important;margin-top:26px!important}
  .home-controls{gap:12px!important}.home-search{width:100%!important}
}
@media(max-width:430px){
  .wrap{width:calc(100% - 28px)!important}.hero-v54 h1{font-size:58px}.hero-v54-kicker{font-size:9.5px;letter-spacing:.12em}.hero-v54-sub br{display:none}.hero-v54-actions .button{flex:1;justify-content:center}.hero-v54-meta{display:grid;grid-template-columns:1fr 1fr}.hero-feature-note{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .hero-feature-card img,.vcard,.person-card,.journal-card{transition:none!important}.ysjf-series-track{scroll-behavior:auto!important}
}
.hero-feature-trigger{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
@media(min-width:761px){.header-actions{display:none!important}.desktop-actions{display:flex!important;align-items:center!important;gap:8px!important}}
@media(max-width:760px){.desktop-actions{display:none!important}.header-actions{display:flex!important}.menu-toggle{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important}.menu-toggle span{width:17px!important;height:1.5px!important;border-radius:999px!important}}