:root { --paper:#f3f1eb; --ink:#161616; --line:rgba(22,22,22,.15); --blue:#3156ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:sticky; top:0; z-index:50; min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:10px max(20px,calc((100vw - 1440px)/2)); border-bottom:1px solid var(--line); background:rgba(243,241,235,.92); backdrop-filter:blur(16px); }
.identity { display:flex; align-items:baseline; gap:12px; white-space:nowrap; }
.identity strong { font-size:17px; letter-spacing:.08em; }
.identity span { color:#686868; font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
nav { display:flex; gap:clamp(14px,2.5vw,36px); }
nav a { position:relative; padding:8px 0; font-size:13px; }
nav a::after { content:""; position:absolute; inset:auto 0 3px; height:1px; background:currentColor; transform:scaleX(0); transition:transform .2s ease; }
nav a:hover::after, nav a:focus-visible::after { transform:scaleX(1); }
main { width:min(100%,1440px); margin:0 auto; }
.portfolio-page { margin:0; line-height:0; background:#fff; aspect-ratio:2135/1200; }
.portfolio-page img { display:block; width:100%; height:100%; object-fit:contain; }
.opening, .chapter, .directory { scroll-margin-top:64px; }
.directory { position:relative; }
.directory-links { position:absolute; inset:0; }
.directory-link { position:absolute; width:50%; height:50%; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(18px,3vw,48px); color:transparent; outline-offset:-8px; transition:background .2s ease,color .2s ease; }
.directory-link span { font-size:clamp(16px,2vw,30px); font-weight:700; }
.directory-link small { margin-top:5px; font-size:clamp(9px,1vw,13px); text-transform:uppercase; letter-spacing:.08em; }
.directory-link:hover, .directory-link:focus-visible { color:#fff; background:rgba(49,86,255,.72); }
.link-1 { left:0; top:0; }
.link-2 { right:0; top:0; }
.link-3 { left:0; bottom:0; }
.link-4 { right:0; bottom:0; }
footer { display:flex; justify-content:space-between; gap:24px; padding:34px 24px; border-top:1px solid var(--line); font-size:12px; letter-spacing:.04em; }
footer a { font-weight:700; }
@media (max-width:760px) {
  .site-header { min-height:56px; padding:8px 14px; align-items:flex-start; flex-direction:column; gap:3px; }
  .identity span { display:none; }
  nav { width:100%; overflow-x:auto; gap:20px; scrollbar-width:none; }
  nav::-webkit-scrollbar { display:none; }
  nav a { flex:none; font-size:12px; }
  .opening, .chapter, .directory { scroll-margin-top:88px; }
  .directory-link { padding:10px; }
  footer { padding:24px 14px; flex-direction:column; gap:10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }