@font-face { font-family:"Alibaba PuHuiTi"; src:url("fonts/AlibabaPuHuiTi-Regular.woff2?v=20260928-1") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Alibaba PuHuiTi"; src:url("fonts/AlibabaPuHuiTi-SemiBold.woff2?v=20260928-1") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

:root { --ink:#274a78; --line:rgba(39,74,120,.24); --gutter:clamp(24px,5vw,72px); --max:1280px; --header-height:78px; --sans:"Anthropic Sans","Alibaba PuHuiTi",Arial,sans-serif; --serif:var(--serif-body); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; }
a { color:inherit; }
a:focus-visible { outline:2px solid #274a78; outline-offset:5px; }
.skip-link { position:fixed; z-index:20; top:-80px; left:20px; padding:10px 16px; background:#071a34; color:#fff; }
.skip-link:focus { top:12px; }
.home-scene { min-height:calc(100svh - 62px); overflow:hidden; isolation:isolate; }
.home-visual { background:#faf9f5; }
.home-visual::before {
  content:"";
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  /* Keep cover's crop stable while Safari hides or reveals its address bar. */
  height:100lvh;
  z-index:0;
  background:#faf9f5 url("display/home-shrikes-v6.png") 50% 50% / cover no-repeat;
  pointer-events:none;
}
.home-scene > * { position:relative; z-index:1; }
.site-header { display:flex; align-items:center; justify-content:space-between; width:min(100%,var(--max)); min-height:var(--header-height); margin-inline:auto; padding:18px var(--gutter); color:var(--ink); text-shadow:none; }
.brand { font-size:18px; font-weight:600; letter-spacing:-.04em; text-decoration:none; }
nav { display:flex; gap:28px; }
nav a { font-size:14px; font-weight:600; text-decoration:none; transition:opacity 180ms ease; }
nav a:hover { opacity:.58; }
.hero { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100svh - 78px); max-width:var(--max); margin:auto; padding:64px var(--gutter); text-align:center; }
.hero-content { transform:translateY(-13vh); }
.eyebrow,.card-index { margin:0; font-size:11px; font-weight:600; letter-spacing:.12em; line-height:1.3; }
.hero .eyebrow { font-size:clamp(13px,1vw,16px); }
h1,h2,p { margin-top:0; }
h1 { margin:32px 0 0; font-family:var(--latin-display); font-size:clamp(54px,7vw,128px); font-weight:500; letter-spacing:-.015em; line-height:1; white-space:nowrap; }
.building-section { min-height:100svh; margin:0; padding:clamp(48px,7vw,96px) max(var(--gutter),calc((100% - var(--max)) / 2 + var(--gutter))) clamp(72px,9vw,120px); background:transparent; }
.section-heading { margin-bottom:34px; padding-top:20px; border-top:1px solid var(--line); }
.section-heading h2 { margin:12px 0 0; font-family:"KingHwa Old Song","Songti SC",serif; font-size:clamp(42px,5vw,67px); font-weight:400; letter-spacing:.01em; line-height:1.2; }
.archive-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.archive-card { position:relative; display:grid; grid-template-rows:auto 1fr auto; min-height:300px; overflow:hidden; padding:24px; border:0; border-radius:16px; color:#fff; text-decoration:none; isolation:isolate; box-shadow:0 12px 35px rgba(6,32,69,.12); transition:transform 220ms ease,box-shadow 220ms ease; }
.archive-card > span { position:relative; z-index:2; }
.archive-card::before { z-index:-1; }
.archive-card::after { z-index:0; }
.archive-card:hover { box-shadow:0 18px 42px rgba(6,32,69,.23); transform:translateY(-4px); }
.card-index { color:rgba(255,255,255,.86); }
.card-title { align-self:end; font-family:"KingHwa Old Song","Songti SC",serif; font-size:clamp(30px,3.1vw,43px); font-weight:400; letter-spacing:.01em; }
.card-note { margin-top:7px; color:rgba(255,255,255,.94); font-family:"Alibaba PuHuiTi",Arial,sans-serif; font-size:15px; }
.card-arrow { position:absolute !important; right:24px; bottom:19px; font-size:27px; transition:transform 200ms ease; }
.archive-card:hover .card-arrow { transform:translate(4px,-4px); }
.archive-card-weekly { background:#fcfff6 url("display/%E5%91%A8%E6%8A%A5.png") center / cover no-repeat; color:#08264d; }
.archive-card-stars { background:#121519 url("display/%E8%A7%82%E6%98%9F.svg") center / cover no-repeat; color:#fff; }
.archive-card-weekly .card-index { color:rgba(7,26,52,.72); }
.archive-card-weekly .card-note { color:rgba(7,26,52,.9); }
.archive-card-stars .card-index { color:rgba(255,255,255,.8); }
.archive-card-stars .card-note { color:rgba(255,255,255,.94); }
.archive-card-birds { background:#f8f7f4 url("display/%E8%A7%82%E9%B8%9F.svg") center / cover no-repeat; color:#101820; }
.archive-card-birds .card-index { color:rgba(16,24,32,.72); }
.archive-card-birds .card-note { color:rgba(16,24,32,.9); }
footer { position:relative; z-index:1; display:flex; justify-content:space-between; min-height:62px; padding:20px max(var(--gutter),calc((100vw - var(--max)) / 2)); background:#0b2b57; color:#e7f0fb; font-size:12px; }
footer p { margin:0; }
@media (max-width:760px) {
  :root { --header-height:68px; }
  nav { gap:16px; }
  nav a { font-size:13px; }
  .hero { min-height:calc(100svh - var(--header-height)); padding-top:48px; }
  .hero-content { transform:translateY(-7vh); }
  .hero h1 { font-size:clamp(37px,10vw,48px); }
  .archive-grid { grid-template-columns:1fr; }
  .archive-card { min-height:230px; }
  .archive-card-stars { background:#121519 url("display/%E8%A7%82%E6%98%9F-mobile.webp") center / cover no-repeat; }
  .archive-card-birds { background:#f8f7f4 url("display/%E8%A7%82%E9%B8%9F-mobile.webp") center / cover no-repeat; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }