/* Game keeps its red cutouts; reading pages share the same geometry and content.
   This stylesheet is enabled only for the `dark` appearance by the shared manifest. */
@media screen {
  :root { --wrap:1280px; --gutter:clamp(24px,5.4vw,100px); --head-h:76px; }
  html { scroll-padding-top:100px; }
  .site-head, .is-home .site-head { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); }
  .site-head__row, .is-home .site-head__row { display:flex; min-height:var(--head-h); padding-block:0; gap:24px; }
  .site-name { font-size:24px; transform:rotate(-3deg); }
  .ink-nav { display:flex; align-items:center; gap:18px; margin-left:auto; }
  .ink-nav a { position:relative; display:inline-flex; min-height:44px; padding:8px 4px; align-items:center; color:var(--paper); font:400 19px/1.3 var(--display); text-decoration:none; text-transform:uppercase; }
  .ink-nav a::after { content:""; position:absolute; left:4px; right:4px; bottom:2px; height:3px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform 160ms var(--ease); }
  .ink-nav a:hover::after, .ink-nav a:focus-visible::after, .ink-nav a[aria-current]::after { transform:scaleX(1); }
  .ink-nav a:hover, .ink-nav a[aria-current] { color:var(--accent); }
  .ink-menu { display:none; }

  /* Identity, research focus, one entrance. Biography owns the career details. */
  .profile__stage { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-areas:"identity portrait" "subject portrait" "dialogue portrait"; grid-template-rows:auto auto 1fr; align-items:start; gap:30px 64px; padding-block:64px 100px; }
  .profile__identity { width:100%; max-width:470px; padding-bottom:0; align-self:end; }
  .profile__name { font-size:clamp(72px,7.1vw,100px); }
  .profile__name-zh { margin-bottom:10px; font-size:19px; }
  .profile__portrait { width:min(86%,340px); align-self:center; margin-top:0; padding-bottom:36px; }
  .profile__portrait::before { bottom:30px; }
  .profile__portrait figcaption { left:-16px; right:-16px; bottom:0; }
  .profile__portrait figcaption strong { font-size:18px; }
  .profile__subject { padding:0; font-size:clamp(24px,2.5vw,34px); gap:8px; }
  .profile__dialogue { display:block; margin:0; padding:0; }
  .profile__dialogue::before, .profile__dialogue::after { display:none; }
  .ink-hero-actions { display:flex; }
  .ink-hero-actions a { display:inline-flex; align-items:center; gap:20px; min-height:48px; padding:10px 18px; color:var(--paper); background:var(--ink); font:400 20px/1.3 var(--display); text-decoration:none; }
  .ink-hero-actions a:hover { color:var(--ink); background:var(--paper); }
  .profile__star--small { display:none; }
  .home-portrait { display:none; }
  .home-biography__intro { display:block; }
  .home-personal { padding-block:64px 48px; }
  .home-personal__grid { grid-template-columns:1fr 1fr; gap:80px; padding-top:40px; border-top:1px solid var(--line); }
  .home-personal h2 { margin:0 0 24px; font:400 34px/1.2 var(--display); }
  .home-personal h2 em { font-style:normal; }
  .home-personal p { color:var(--text-2); }
  .home-biography__intro p { max-width:58ch; font-size:17px; }
  .home-contact { margin-top:24px; }
  .home-contact__email { color:var(--accent); }
  .home-contact__links { gap:0 24px; margin-top:4px; font-size:15px; }
  .home-news__list li { display:grid; grid-template-columns:76px minmax(0,1fr); gap:20px; padding-block:16px; }
  .home-news__list li:first-child { padding-top:0; }
  .home-news__list li:last-child { border-bottom:0; }
  .home-news__list .news-date { padding-top:4px; font-variant-numeric:tabular-nums; }
  .home-news__list p { font-size:15px; line-height:1.65; }

  /* Identical heading baseline, content edge and section rhythm on every route. */
  .page-head { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; flex-wrap:nowrap; gap:0; min-height:320px; padding-block:56px 40px; }
  .page-head h1 { margin:0 0 24px; padding:3px 16px 8px; font-size:clamp(46px,5vw,64px); line-height:1.1; transform:rotate(-2deg); }
  .page-head > p, .page-head > div > p { max-width:68ch; font-size:17px; line-height:1.75; }
  .page-head__nav { gap:4px 28px; margin-top:auto; padding-top:22px; font-size:16px; }
  .page-head__nav a { min-height:44px; color:var(--accent); }
  .cv-head > div { display:flex; flex:1; flex-direction:column; width:100%; }
  .cv-head .page-head__links { margin-top:auto; padding-top:22px; }
  .cv-head .text-button { position:absolute; top:64px; right:0; }
  .is-research .research-feature h2 { font:400 36px/1.2 var(--display); }
  .is-research .research-feature figcaption > span { font:400 19px/1.6 var(--font); }
  .research-close { max-width:none; }
  .research-close a { display:inline-flex; align-items:center; min-height:44px; }

  .pub-year { grid-template-columns:72px minmax(0,1fr); gap:32px; padding-block:40px 56px; border-top:1px solid var(--line); }
  .pub-year h2 { padding:4px 10px 7px; font-size:28px; transform:rotate(-3deg); }
  .pubs { max-width:none; gap:56px; }
  .pub--illustrated { display:grid; grid-template-columns:minmax(280px,38%) minmax(0,1fr); gap:36px; align-items:start; }
  .pub__figure { display:flex; align-items:center; justify-content:center; min-width:0; min-height:180px; margin-top:4px; padding:20px; background:#e7e7e3; border:1px solid #666; border-radius:3px; }
  .pub__figure img { width:100%; height:auto; max-height:320px; object-fit:contain; mix-blend-mode:multiply; }
  .pub__figure[data-figure-surface="slate"] { background:#405b70; }
  .pub__figure[data-figure-surface="slate"] img { mix-blend-mode:normal; }
  .pub__figure:hover { outline:1px solid var(--accent); outline-offset:4px; }
  .pub__body { min-width:0; }
  .pub h3, .pub--selected h3 { font:600 24px/1.35 var(--font); }
  .pub__authors { font-size:15px; line-height:1.65; }
  .pub__note { margin-top:16px; font-size:16px; line-height:1.7; }
  .pub__links { gap:4px 24px; margin-top:12px; }
  .pub__links a { min-height:44px; }
  .cv-section, .lib-cat { grid-template-columns:210px minmax(0,1fr); column-gap:48px; padding-block:40px 48px; border-top:1px solid var(--line); }
  .cv-section h2, .lib-cat h2 { font-size:28px; }
  .cv-row { grid-template-columns:140px minmax(0,1fr); gap:24px; font-size:16px; }
  .lib-cat__aside { top:100px; }
  .lib-item > a { font-size:19px; }
  .site-foot { margin-top:24px; padding-block:28px; border-top:3px solid var(--signal); }

  @media(max-width:1100px) {
    .ink-nav { gap:12px; }
    .ink-nav a { font-size:17px; }
    .profile__stage { column-gap:40px; }
    .profile__name { font-size:clamp(64px,8.3vw,88px); }
    .pub-year { grid-template-columns:1fr; gap:28px; }
    .pub--illustrated { grid-template-columns:minmax(240px,40%) minmax(0,1fr); gap:28px; }
    .home-personal__grid { grid-template-columns:1fr; gap:40px; }
    .cv-section, .lib-cat { grid-template-columns:170px minmax(0,1fr); gap:32px; }
    .cv-row { grid-template-columns:1fr; gap:4px; }
  }
  @media(max-width:900px) {
    .ink-nav { display:none; }
    .site-head__row, .is-home .site-head__row { gap:16px; }
    .site-name { font-size:22px; }
    .theme-picker { margin-left:auto; }
    .ink-menu { display:block; font-size:14px; }
    .ink-menu summary { display:flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; }
    .ink-menu summary::-webkit-details-marker { display:none; }
    .ink-menu-close-icon, .ink-menu[open] .ink-menu-lines { display:none; }
    .ink-menu[open] .ink-menu-close-icon { display:block; }
    .ink-menu nav { position:fixed; top:var(--head-h); left:var(--gutter); right:var(--gutter); display:grid; max-height:calc(100svh - var(--head-h) - 16px); overflow-y:auto; overscroll-behavior:contain; padding:12px 24px; background:var(--ink); border:1px solid var(--line); box-shadow:0 16px 32px rgb(0 0 0 / .25); }
    .ink-menu nav a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; color:var(--paper); font:400 25px/1.3 var(--display); text-decoration:none; text-transform:uppercase; }
    .ink-menu nav a:hover, .ink-menu nav a[aria-current] { color:var(--accent); }
    .profile__portrait figcaption strong { font-size:15px; }
    .profile__name-zh { display:none; }
    .cv-head .text-button { position:static; margin-top:20px; }
  }
  @media(max-width:760px) {
    :root { --head-h:64px; }
    .profile__stage { grid-template-columns:1fr; grid-template-areas:"identity" "portrait" "subject" "dialogue"; gap:28px; padding-block:36px 64px; }
    .profile__identity { justify-self:center; width:max-content; max-width:100%; }
    .profile__name { font-size:clamp(56px,12vw,78px); }
    .profile__portrait { width:min(64%,260px); padding-bottom:28px; }
    .profile__portrait figcaption strong { font-size:16px; }
    .profile__subject { justify-self:center; font-size:26px; }
    .profile__dialogue { justify-self:center; }
    .profile__star { width:88vw; right:-25%; top:12%; }
    .profile__geometry::before { left:12%; }
    .page-head { min-height:0; padding-block:40px 32px; }
    .page-head h1 { font-size:clamp(35px,8vw,48px); padding-inline:12px; margin-bottom:24px; }
    .page-head > p, .page-head > div > p { font-size:16px; }
    .page-head__nav { gap:0 24px; padding-top:20px; }
    .home-personal { padding-block:40px 24px; }
    .home-personal__grid { padding-top:32px; }
    .home-personal h2 { font-size:30px; }
    .pub--illustrated { grid-template-columns:1fr; gap:22px; }
    .pub__figure { width:100%; max-width:520px; min-height:0; padding:16px; }
    .pub__figure img { max-height:300px; }
    .pub h3, .pub--selected h3 { font-size:23px; }
    .cv-section, .lib-cat { grid-template-columns:1fr; gap:24px; padding-block:32px; }
    .lib-cat__aside { position:static; }
    .lib-groups { gap:28px; }
    .is-research .research-feature h2 { font-size:30px; }
  }
  @media(max-width:540px) {
    .site-head__row, .is-home .site-head__row { gap:12px; }
    .site-name { font-size:20px; }
    .lib-groups { grid-template-columns:1fr; }
    .home-news__list li { grid-template-columns:1fr; gap:6px; }
  }
  @media(prefers-reduced-motion:reduce) { .ink-nav a::after { transition:none; } }
}
