@font-face{font-family:"Xyan Serif";src:local("Noto Serif SC");font-style:normal;font-weight:100 900;font-display:swap}
:root{--wall:#626a63;--deep:#353b37;--paper:#d7cfbd;--ink:#222521;--rust:#8a463e;--pale:#e1d9c7;--serif:"Xyan Serif","Noto Serif SC","Source Han Serif SC","Songti SC",STSong,SimSun,serif;--latin:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:var(--wall);color:var(--ink);font-family:var(--serif)}a{color:inherit;text-decoration:none}button,input{font:inherit;color:inherit}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.page-grain{position:fixed;z-index:20;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='5' seed='19'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E")}

/* header — shared across all archive pages */
.archive-header{height:132px;padding:35px clamp(24px,4vw,70px);display:flex;justify-content:space-between;align-items:flex-start}.archive-brand{display:flex;gap:21px}.archive-brand>i{width:2px;height:64px;background:var(--rust)}.archive-brand strong{display:block;font-size:25px;font-weight:500;letter-spacing:.17em}.archive-brand small{display:block;margin-top:7px;font:10px var(--latin);letter-spacing:.3em;opacity:.62}.archive-header nav{display:flex;align-items:center;gap:28px;padding-top:10px}.archive-header nav a{position:relative;font-size:14px;letter-spacing:.14em}.archive-header nav a:not(.home-link):after{content:"";position:absolute;left:50%;bottom:-9px;width:0;height:1px;background:var(--ink);transform:translateX(-50%);transition:.3s}.archive-header nav a:hover:after,.archive-header nav a[aria-current=page]:after{width:100%}.archive-header nav em{font-style:normal;opacity:.55}.home-link{margin-left:20px;padding:9px 15px;border:1px solid rgba(34,37,33,.35);font-size:11px!important}

/* hero — shared shape, each page tints via body[data-page] */
.archive-hero{position:relative;min-height:440px;padding:86px clamp(24px,7vw,126px) 90px;overflow:hidden;background:radial-gradient(ellipse at 75% 32%,rgba(220,212,188,.09),transparent 34%),linear-gradient(103deg,rgba(231,221,195,.035),transparent 45%),var(--wall)}.archive-hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(31,35,31,.24)}.hero-copy{position:relative;z-index:2;max-width:850px;animation:arrive .85s ease both}.archive-code{margin:0 0 27px;font:12px var(--latin);letter-spacing:.4em;color:var(--pale)}.archive-hero h1{margin:0;font-size:clamp(54px,6.2vw,102px);line-height:1.1;font-weight:500;letter-spacing:.07em}.archive-hero .hero-copy>p:last-child{max-width:710px;margin:30px 0 0;font-size:16px;line-height:2;letter-spacing:.06em}.archive-symbol{position:absolute;right:9%;top:50%;width:250px;height:250px;border:1px solid rgba(31,35,31,.18);border-radius:50%;transform:translateY(-50%);animation:slow 24s linear infinite}.archive-symbol:before,.archive-symbol:after{content:"";position:absolute;border:1px solid rgba(31,35,31,.13);border-radius:50%}.archive-symbol:before{inset:35px}.archive-symbol:after{inset:78px}.archive-symbol span{position:absolute;left:-5px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--rust)}.archive-symbol i{position:absolute;left:50%;top:50%;width:1px;height:125%;background:rgba(31,35,31,.1);transform:translate(-50%,-50%) rotate(41deg)}

footer{padding:28px clamp(24px,4vw,70px);display:flex;justify-content:space-between;background:#252a26;color:var(--pale);font:10px var(--latin);letter-spacing:.16em}footer p{margin:0;opacity:.55}footer a{opacity:.68}
.mock-notice{margin:32px 0 0;text-align:center;font:10px var(--latin);letter-spacing:.2em;opacity:.42}

/* detail dialog — reused by journey & fiction */
.entry-dialog{width:min(620px,calc(100% - 32px));max-height:82vh;padding:65px 64px;border:0;background:var(--paper);color:var(--ink);box-shadow:0 25px 80px rgba(12,16,13,.45)}.entry-dialog::backdrop{background:rgba(20,24,21,.68);backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:22px;top:16px;border:0;background:none;font-size:32px;cursor:pointer}.dialog-id{margin:0 0 38px;font:10px var(--latin);letter-spacing:.3em;color:var(--rust)}.entry-dialog h2{margin:0 0 12px;font-size:38px;font-weight:500}.dialog-meta{margin:0 0 34px;font-size:11px;letter-spacing:.12em;opacity:.55}.dialog-body{font-size:15px;line-height:2.1}.dialog-body p{margin:0 0 1.4em}.dialog-body p:last-child{margin-bottom:0}.dialog-tags{display:flex;gap:8px;margin-top:34px;flex-wrap:wrap}.dialog-tags span{padding:5px 9px;border:1px solid rgba(34,37,33,.28);font-size:10px}

@keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes slow{to{transform:translateY(-50%) rotate(360deg)}}

@media(max-width:950px){.archive-header{height:auto}.archive-header nav em{display:none}.home-link{display:none}.archive-symbol{right:-80px;opacity:.45}}
@media(max-width:620px){.archive-header{padding:24px}.archive-brand strong{font-size:20px}.archive-brand small{display:none}.archive-brand>i{height:42px}.archive-header nav{gap:14px}.archive-header nav a{font-size:12px}.archive-hero{min-height:390px;padding:80px 24px 65px}.archive-hero h1{font-size:49px}.archive-hero .hero-copy>p:last-child{font-size:14px}.archive-symbol{width:190px;height:190px;top:25%;right:-100px}.entry-dialog{padding:55px 28px}.entry-dialog h2{font-size:32px}footer{gap:20px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.progress-rail{position:fixed;top:0;left:0;right:0;height:2px;background:rgba(216,208,190,.12);z-index:50;pointer-events:none}
.progress-rail i{display:block;height:100%;width:0%;background:var(--rust)}

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.75,.2,1)}
