/* =========================================================
   AN UNNECESSARY LONG NIGHT / BOOK PROJECT
   独立影集项目，不影响普通摄影项目与 DRIFT
========================================================= */


/* =========================
首页：独立影集入口
========================= */

.book-feature-wrap{

margin-top:110px;

padding:8px 0 28px;

display:flex;

justify-content:center;

}


.book-feature{

position:relative;

display:block;

width:min(760px,82vw);

text-align:center;

}


.book-feature img{

display:block;

width:100%;

height:auto;

object-fit:contain;

transition:
transform 1.1s cubic-bezier(.22,.61,.36,1),
opacity .8s ease;

}


.book-feature-title{

display:block;

margin-top:20px;

font-size:14px;

font-weight:400;

letter-spacing:4px;

line-height:1.8;

color:#111;

opacity:0;

transform:translateY(6px);

transition:
opacity .7s ease,
transform .8s cubic-bezier(.22,.61,.36,1);

pointer-events:none;

}


.book-feature:hover img{

transform:translateY(-4px);

}


.book-feature:hover .book-feature-title{

opacity:1;

transform:translateY(0);

}



/* =========================
独立影集页面
========================= */

.book-project-page{

padding:170px 60px 120px;

}


.book-project-intro{

max-width:1180px;

margin:0 auto;

display:grid;

grid-template-columns:
minmax(220px,30%)
minmax(0,1fr);

gap:9vw;

align-items:start;

}


.book-project-heading{

position:sticky;

top:120px;

}


.book-kicker{

margin:0 0 26px;

font-size:11px;

letter-spacing:3px;

color:#999;

}


.book-project-heading h1{

margin:0;

font-size:39px;

font-weight:300;

line-height:1.35;

letter-spacing:7px;

}


.book-project-heading .book-title-cn{

margin-top:18px;

font-size:20px;

font-weight:700;

letter-spacing:3px;

}


.book-meta{

margin-top:42px;

font-size:11px;

line-height:2;

letter-spacing:1.2px;

color:#777;

}


.book-statement{

max-width:720px;

font-size:14px;

line-height:2.15;

color:#444;

}


.book-statement p{

margin:0 0 26px;

}


.book-statement-en{

margin-top:56px;

font-size:13px;

line-height:2.05;

color:#666;

}



/* =========================
书页预告
========================= */

.book-preview{

max-width:1180px;

margin:150px auto 0;

}


.book-preview-row{

min-height:72vh;

display:flex;

align-items:center;

}


.book-preview-row.align-right{

justify-content:flex-end;

}


.book-preview-row.align-left{

justify-content:flex-start;

}


.book-preview-row.align-center{

justify-content:center;

}


.book-preview-page{

display:block;

width:min(390px,34vw);

height:auto;

box-shadow:none;

}


.book-preview-spread{

display:flex;

align-items:stretch;

justify-content:center;

gap:2px;

width:min(820px,72vw);

}


.book-preview-spread img{

display:block;

width:50%;

height:auto;

object-fit:contain;

}


.book-preview-caption{

margin-top:10px;

font-size:9px;

letter-spacing:1.8px;

color:#aaa;

opacity:.75;

}



/* =========================
READ THE BOOK
========================= */

.read-book-area{

min-height:48vh;

display:flex;

align-items:center;

justify-content:center;

}


.read-book-trigger{

position:relative;

border:0;

background:none;

padding:18px 20px;

font-family:
Helvetica,
Arial,
sans-serif;

font-size:10px;

font-weight:400;

letter-spacing:4px;

color:#777;

cursor:pointer;

opacity:0;

transform:translateY(8px);

transition:
opacity .9s ease,
transform .9s cubic-bezier(.22,.61,.36,1),
color .5s ease,
letter-spacing .7s ease;

}


.read-book-trigger.is-visible{

opacity:1;

transform:translateY(0);

}


.read-book-trigger:hover{

color:#111;

letter-spacing:5px;

}



/* =========================================================
FULLSCREEN BOOK READER
========================================================= */

.book-reader{

position:fixed;

inset:0;

z-index:30000;

background:#0a0a0a;

opacity:0;

visibility:hidden;

pointer-events:none;

transition:
opacity .65s ease,
visibility 0s linear .65s;

overflow:hidden;

color:#fff;

}


.book-reader.is-open{

opacity:1;

visibility:visible;

pointer-events:auto;

transition-delay:0s;

}


.book-reader-stage{

position:absolute;

inset:0;

display:flex;

align-items:center;

justify-content:center;

padding:5vh 6vw;

}


.book-reader-layer{

position:absolute;

inset:5vh 6vw;

display:flex;

align-items:center;

justify-content:center;

gap:2px;

opacity:0;

transform:translateX(10px);

transition:
opacity .58s ease,
transform .75s cubic-bezier(.22,.61,.36,1);

will-change:
opacity,
transform;

}


.book-reader-layer.is-visible{

opacity:1;

transform:translateX(0);

}


.book-reader-layer.from-left{

transform:translateX(-10px);

}


.book-reader-layer img{

display:block;

width:auto;

height:auto;

max-width:48%;

max-height:90vh;

object-fit:contain;

user-select:none;

-webkit-user-drag:none;

}


.book-reader-layer.single img{

max-width:min(46vw,680px);

max-height:90vh;

}


.book-reader-layer.single{

gap:0;

}


.book-reader-layer .blank-page{

display:none;

}



/* =========================
点击翻页区域
========================= */

.book-reader-zone{

position:absolute;

top:0;

bottom:0;

z-index:4;

width:28%;

border:0;

background:transparent;

cursor:pointer;

outline:0;

}


.book-reader-zone.prev{

left:0;

}


.book-reader-zone.next{

right:0;

}



/* =========================
控制项
鼠标移动后才出现
========================= */

.book-reader-controls{

position:absolute;

left:50%;

bottom:22px;

z-index:8;

transform:
translateX(-50%)
translateY(5px);

display:flex;

align-items:center;

gap:18px;

opacity:0;

pointer-events:none;

transition:
opacity .35s ease,
transform .4s ease;

}


.book-reader.controls-visible
.book-reader-controls{

opacity:1;

pointer-events:auto;

transform:
translateX(-50%)
translateY(0);

}


.book-reader-control{

border:0;

background:none;

color:rgba(255,255,255,.5);

font-family:
Helvetica,
Arial,
sans-serif;

font-size:18px;

font-weight:300;

padding:10px 12px;

cursor:pointer;

transition:
color .3s ease;

}


.book-reader-control:hover{

color:#fff;

}


.book-reader-close{

position:absolute;

right:28px;

top:22px;

z-index:9;

border:0;

background:none;

color:rgba(255,255,255,.5);

font-size:24px;

font-weight:200;

padding:10px;

cursor:pointer;

opacity:0;

pointer-events:none;

transition:
opacity .35s ease,
color .3s ease;

}


.book-reader.controls-visible
.book-reader-close{

opacity:1;

pointer-events:auto;

}


.book-reader-close:hover{

color:#fff;

}



/* =========================
手机竖屏提示
========================= */

.book-rotate-prompt{

position:absolute;

inset:0;

z-index:20;

display:none;

align-items:center;

justify-content:center;

flex-direction:column;

gap:12px;

background:#0a0a0a;

text-align:center;

font-size:10px;

line-height:2;

letter-spacing:3px;

color:rgba(255,255,255,.72);

}


.book-rotate-prompt span:last-child{

font-size:11px;

letter-spacing:2px;

color:rgba(255,255,255,.48);

}



/* =========================
手机与窄屏
========================= */

@media(max-width:768px){


.book-feature-wrap{

margin-top:72px;

padding-bottom:10px;

}


.book-feature{

width:min(560px,94vw);

}


.book-feature-title{

margin-top:16px;

font-size:12px;

letter-spacing:2.6px;

line-height:1.8;

opacity:.78;

transform:none;

color:#111;

}


.book-project-page{

padding:135px 22px 80px;

}


.book-project-intro{

display:block;

}


.book-project-heading{

position:static;

margin-bottom:54px;

}


.book-project-heading h1{

font-size:28px;

letter-spacing:4px;

}


.book-project-heading
.book-title-cn{

font-size:18px;

}


.book-meta{

margin-top:28px;

}


.book-statement{

font-size:13px;

line-height:2.05;

}


.book-statement-en{

margin-top:44px;

font-size:12px;

}


.book-preview{

margin-top:90px;

}


.book-preview-row{

min-height:56vh;

}


.book-preview-page{

width:72vw;

}


.book-preview-spread{

width:92vw;

gap:1px;

}


.read-book-area{

min-height:36vh;

}


.read-book-trigger{

font-size:9px;

letter-spacing:3px;

}


}



/* =========================
手机竖屏
不拆跨页，要求横屏
========================= */

@media(max-width:900px)
and (orientation:portrait){


.book-reader.is-open
.book-rotate-prompt{

display:flex;

}


.book-reader-stage,
.book-reader-zone,
.book-reader-controls,
.book-reader-close{

visibility:hidden;

}


}



/* =========================
手机横屏阅读
========================= */

@media(max-width:1000px)
and (orientation:landscape){


.book-reader-stage{

padding:3vh 3vw;

}


.book-reader-layer{

inset:3vh 3vw;

}


.book-reader-layer img{

max-width:49%;

max-height:94vh;

}


.book-reader-layer.single img{

max-width:58vw;

max-height:94vh;

}


.book-reader-controls{

bottom:8px;

}


.book-reader-close{

right:10px;

top:6px;

}


}
/* =========================================================
   2026 RESPONSIVE OVERRIDES
   《长夜将尽》手机 / 平板适配
========================================================= */

@media (max-width:1024px){

.book-feature{
width:min(700px,88vw);
}

.book-project-page{
padding:150px 36px 100px;
}

.book-project-intro{
grid-template-columns:minmax(200px,32%) minmax(0,1fr);
gap:6vw;
}

.book-preview{
margin-top:120px;
}

.book-preview-page{
width:min(380px,40vw);
}

.book-preview-spread{
width:min(800px,82vw);
}

}


@media (max-width:768px){

.book-feature-wrap{
margin-top:68px;
padding-bottom:18px;
}

.book-feature{
width:min(620px,94vw);
}

/* 手机没有 hover，书名直接轻度显示 */
.book-feature-title{
margin-top:14px;
font-size:13px;
letter-spacing:3px;
line-height:1.7;
opacity:.9;
transform:none;
}

.book-project-page{
padding:
calc(118px + env(safe-area-inset-top,0px))
calc(20px + env(safe-area-inset-right,0px))
80px
calc(20px + env(safe-area-inset-left,0px));
}

.book-project-intro{
display:block;
max-width:none;
}

.book-project-heading{
position:static;
margin-bottom:48px;
}

.book-kicker{
margin-bottom:20px;
font-size:9px;
letter-spacing:2.2px;
}

.book-project-heading h1{
font-size:clamp(25px,7.8vw,30px);
line-height:1.3;
letter-spacing:clamp(3px,1.2vw,4px);
overflow-wrap:anywhere;
}

.book-project-heading .book-title-cn{
margin-top:14px;
font-size:18px;
letter-spacing:2px;
}

.book-meta{
margin-top:24px;
font-size:10px;
line-height:1.85;
letter-spacing:.8px;
}

.book-statement{
max-width:none;
font-size:13px;
line-height:2;
}

.book-statement p{
margin-bottom:20px;
}

.book-statement-en{
margin-top:38px;
font-size:12px;
line-height:1.95;
}

.book-preview{
margin-top:72px;
}

.book-preview-row{
min-height:auto;
margin-bottom:72px;
}

.book-preview-row.align-left,
.book-preview-row.align-right,
.book-preview-row.align-center{
justify-content:center;
}

.book-preview-page{
width:min(82vw,520px);
}

.book-preview-spread{
width:min(94vw,760px);
gap:1px;
}

.book-preview-caption{
font-size:8px;
letter-spacing:1.2px;
}

.read-book-area{
min-height:32svh;
}

.read-book-trigger{
min-height:44px;
padding:12px 16px;
font-size:10px;
letter-spacing:3px;
}

.book-reader{
height:100svh;
}

@supports (height:100dvh){
.book-reader{
height:100dvh;
}
}

.book-rotate-prompt{
padding:
calc(24px + env(safe-area-inset-top,0px))
calc(24px + env(safe-area-inset-right,0px))
calc(24px + env(safe-area-inset-bottom,0px))
calc(24px + env(safe-area-inset-left,0px));
font-size:10px;
letter-spacing:2.4px;
}

.book-reader-controls{
bottom:calc(10px + env(safe-area-inset-bottom,0px));
gap:12px;
}

.book-reader-control{
min-width:44px;
min-height:44px;
padding:8px 10px;
}

.book-reader-close{
right:calc(8px + env(safe-area-inset-right,0px));
top:calc(6px + env(safe-area-inset-top,0px));
min-width:44px;
min-height:44px;
}

}


@media (max-width:480px){

.book-feature{
width:96vw;
}

.book-feature-title{
font-size:12px;
letter-spacing:2.4px;
}

.book-project-page{
padding-left:16px;
padding-right:16px;
}

.book-project-heading h1{
font-size:25px;
letter-spacing:3px;
}

.book-preview-page{
width:88vw;
}

.book-preview-spread{
width:96vw;
}

}


/* 影集阅读：竖屏保持横屏提示，跨页不拆分 */
@media (max-width:900px) and (orientation:portrait){

.book-reader.is-open .book-rotate-prompt{
display:flex;
}

.book-reader-stage,
.book-reader-zone,
.book-reader-controls,
.book-reader-close{
visibility:hidden;
}

}


/* 手机横屏阅读 */
@media (max-width:1000px) and (orientation:landscape){

.book-reader-stage{
padding:
calc(2vh + env(safe-area-inset-top,0px))
calc(2vw + env(safe-area-inset-right,0px))
calc(2vh + env(safe-area-inset-bottom,0px))
calc(2vw + env(safe-area-inset-left,0px));
}

.book-reader-layer{
inset:
calc(2vh + env(safe-area-inset-top,0px))
calc(2vw + env(safe-area-inset-right,0px))
calc(2vh + env(safe-area-inset-bottom,0px))
calc(2vw + env(safe-area-inset-left,0px));
gap:1px;
}

.book-reader-layer img{
max-width:49%;
max-height:94svh;
}

.book-reader-layer.single img{
max-width:58vw;
max-height:94svh;
}

.book-reader-controls{
bottom:calc(4px + env(safe-area-inset-bottom,0px));
}

.book-reader-close{
right:calc(4px + env(safe-area-inset-right,0px));
top:calc(2px + env(safe-area-inset-top,0px));
}

.book-reader-zone{
width:24%;
}

}