/* Three-display Readhub editorial archive — sections 02 and 03 */
.collection-index{display:flex;justify-content:center;align-items:stretch;gap:0;background:#151716;color:#e7e7dd;border-top:1px solid #2d302c;border-bottom:1px solid #2d302c;padding:0 clamp(22px,3.4vw,68px)}
.collection-index a{flex:1;min-height:81px;display:flex;align-items:center;gap:14px;justify-content:center;border-right:1px solid #323631;transition:background .2s ease}
.collection-index a:first-child{border-left:1px solid #323631}
.collection-index a:hover{background:#282c27}
.collection-index a span{font-size:10px;letter-spacing:.14em;color:#8c928d}
.collection-index a strong{font:400 clamp(15px,1.65vw,24px)/1 var(--serif);letter-spacing:-.03em}
.archive-section{position:relative;overflow:hidden;isolation:isolate;background:#f0eee8;color:#2b2e35;padding:0 clamp(22px,3.4vw,68px) 28px}
.archive-section--spines{min-height:790px;background:linear-gradient(180deg,#efede8,#f4f1eb 80%,#eae7df)}
.archive-section--fan{min-height:850px;background:radial-gradient(ellipse 60% 40% at 50% 57%,#f6f4ef 0%,#eeece6 75%);border-top:1px solid #d5d0c8}
.archive-bar{height:82px;border-bottom:1px solid #d0cfc8;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#3c476a;font:700 9px/1 var(--sans);letter-spacing:.17em;white-space:nowrap;position:relative;z-index:3}
.archive-bar b{font:400 21px var(--serif);letter-spacing:-.08em;vertical-align:-3px;margin-right:10px}
.archive-bar a{border-bottom:1px solid #8c93a3;padding-bottom:5px;transition:color .2s}
.archive-bar a:hover{color:#101e4e}
.archive-heading{display:flex;align-items:end;justify-content:space-between;gap:36px;position:relative;z-index:2;padding-top:42px}
.archive-heading>div{min-width:0}
.archive-kicker{font:700 9px/1.5 var(--sans);color:#8b8177;letter-spacing:.19em;display:block;margin-bottom:10px}
.archive-heading h2{font:400 clamp(48px,6.5vw,103px)/.92 var(--serif);letter-spacing:-.083em;margin:0;color:#29375d}
.archive-heading h2 span{color:#bd6c52}
.archive-heading p{max-width:280px;font:400 15px/1.46 var(--serif);color:#595b5e;margin:0 0 4px}
.spines-viewport{height:365px;position:relative;z-index:2;overflow:hidden;margin:10px calc(-1 * clamp(22px,3.4vw,68px)) 0;touch-action:pan-y}
.spines-stage{height:100%;width:100%;position:relative;perspective:1200px;perspective-origin:50% 50%;overflow:hidden}
.spines-stage:before{content:"";position:absolute;left:6%;right:6%;bottom:21px;height:17px;background:radial-gradient(ellipse,#2229 0%,#292a281a 44%,transparent 74%);filter:blur(16px)}
.spine-book{position:absolute;bottom:25px;left:50%;border:0;margin:0;padding:0;background:transparent;cursor:pointer;transform-style:preserve-3d;transform-origin:50% 100%;transition:left .72s cubic-bezier(.2,.8,.2,1),width .72s cubic-bezier(.2,.8,.2,1),height .72s cubic-bezier(.2,.8,.2,1),bottom .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1),opacity .3s}
.spine-book .spine-art{display:block;position:absolute;inset:0;opacity:0;transition:opacity .28s ease;box-shadow:9px 16px 15px #181b1e4d,1px 2px 3px #1115}
.spine-book .spine-art img{width:100%;height:100%;display:block;object-fit:fill}
.spine-book .spine-label{display:flex;align-items:center;justify-content:flex-start;position:absolute;inset:0;overflow:hidden;padding:8px 0 10px;background:var(--book-bg);color:var(--book-ink);border-left:2px solid #ffffff3a;border-right:3px solid #080e195e;box-shadow:3px 8px 5px #0005,inset 3px 0 4px #fff4;transition:opacity .28s ease}
.spine-book .spine-label:before{content:"";display:block;position:absolute;left:0;right:0;top:18%;height:8px;background:var(--book-accent);opacity:.75}
.spine-book .spine-label:after{content:"";display:block;position:absolute;left:0;right:0;bottom:15%;height:2px;background:currentColor;opacity:.48}
.spine-book .spine-label span{font:700 clamp(8px,.9vw,11px)/1 var(--serif);white-space:nowrap;letter-spacing:.013em;writing-mode:vertical-rl;transform:rotate(180deg);display:block;margin:12px auto 0;max-height:80%;overflow:hidden;text-overflow:ellipsis}
.spine-book.is-selected .spine-label{opacity:0}
.spine-book.is-selected .spine-art{opacity:1}
.spine-book.is-selected{filter:drop-shadow(1px 12px 12px #1112)}
.spine-book:not(.is-selected):hover{filter:brightness(1.12) drop-shadow(0 12px 8px #0003)}
.spine-book:focus-visible{outline:3px solid #37477a;outline-offset:4px}
.archive-book-meta{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;margin:0 auto 24px;min-height:95px;text-align:center;max-width:1150px}
.archive-book-meta__pre{justify-self:start;text-align:left;color:#777b87;font:700 9px/1.5 var(--sans);letter-spacing:.16em}
.archive-book-meta>div:nth-child(2){width:min(500px,42vw)}
.archive-book-meta h3{color:#293f80;font:400 clamp(32px,4vw,52px)/1 var(--serif);margin:0 0 3px;letter-spacing:-.055em;min-height:42px}
.archive-book-meta>div:nth-child(2)>span{color:#6f7076;font:500 11px/1.4 var(--sans)}
.archive-book-controls{justify-self:end;display:flex;align-items:center;gap:13px}
.archive-book-controls button,.fan-caption__navigation button{width:45px;height:45px;border:1px solid #afb0aa;background:transparent;color:#253963;font:400 24px/1 var(--sans);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.archive-book-controls button:hover,.fan-caption__navigation button:hover{background:#253963;color:white;border-color:#253963}
.archive-timeline{max-width:1200px;margin:4px auto 0;position:relative;z-index:3;color:#506088}
.archive-timeline__legend,.archive-timeline__ticks{display:flex;justify-content:space-between;align-items:center;color:#5c6280;font:600 9px/1 var(--sans);letter-spacing:.07em}
.archive-timeline__legend{margin-bottom:10px}
.archive-timeline__legend span:nth-child(2){font-weight:800;color:#30457d}
.archive-timeline input[type=range]{display:block;width:100%;height:27px;padding:0;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;position:relative;z-index:3}
.archive-timeline input[type=range]::-webkit-slider-runnable-track{height:1px;background:repeating-linear-gradient(90deg,#6475a0 0px,#6475a0 1px,transparent 1px,transparent calc(100% / 31)),linear-gradient(#a8b0be,#a8b0be);box-shadow:0 0 0 0 transparent}
.archive-timeline input[type=range]::-moz-range-track{height:1px;background:#9da6ba}
.archive-timeline input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:12px;width:12px;border-radius:50%;background:#2b4c93;border:2px solid #eceae4;box-shadow:0 0 0 1px #2b4c93;margin-top:-6px}
.archive-timeline input[type=range]::-moz-range-thumb{height:10px;width:10px;border-radius:50%;background:#2b4c93;border:2px solid #eceae4}
.archive-timeline__ticks{font-size:8px;margin-top:0;color:#7e8290}
.archive-section--fan .archive-heading{padding-top:45px}
.fan-display{height:455px;position:relative;z-index:1;margin:7px calc(-1 * clamp(22px,3.4vw,68px)) 0;overflow:hidden}
.fan-display:before{content:"";position:absolute;left:12%;right:12%;bottom:41px;height:27px;background:radial-gradient(ellipse,#21252943 0%,transparent 68%);filter:blur(12px)}
.fan-stage{position:absolute;inset:0;overflow:hidden;perspective:1100px;perspective-origin:50% 65%;touch-action:pan-y}
.fan-book{appearance:none;position:absolute;left:50%;bottom:65px;padding:0;border:0;background:transparent;cursor:pointer;transform-style:preserve-3d;transform-origin:center bottom;transition:left .85s cubic-bezier(.17,.74,.2,1),bottom .85s cubic-bezier(.17,.74,.2,1),transform .85s cubic-bezier(.17,.74,.2,1),filter .25s ease;backface-visibility:hidden;will-change:transform}
.fan-book .fan-book__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;box-shadow:8px 15px 17px #0003,17px 25px 26px #0002;backface-visibility:hidden}
.fan-book .fan-book__spine{position:absolute;left:0;top:0;bottom:0;width:11px;background:linear-gradient(90deg,#05060771,#eaeae53f 48%,#05060745);transform-origin:right;transform:translateX(-99%) rotateY(-72deg);box-shadow:-1px 7px 5px #0003}
.fan-book:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset -4px 0 5px #0002,inset 0 0 1px #fff7}
.fan-book.is-selected .fan-book__image{box-shadow:12px 18px 0 #2a344a15,18px 30px 28px #0003}
.fan-book:not(.is-selected):hover{filter:brightness(1.12) saturate(1.12)}
.fan-book:focus-visible{outline:3px solid #324675;outline-offset:4px}
.fan-side-text{position:absolute;z-index:0;top:72px;color:#c1c3cc;font:900 clamp(55px,8vw,135px)/1 var(--sans);opacity:.45;letter-spacing:-.11em;pointer-events:none}
.fan-side-text--left{left:4%;writing-mode:vertical-lr;transform:rotate(180deg)}
.fan-side-text--right{right:4%;writing-mode:vertical-rl}
.fan-caption{position:relative;z-index:3;max-width:1020px;min-height:90px;display:grid;grid-template-columns:1fr 3fr 1fr;gap:20px;align-items:center;margin:0 auto 20px;text-align:center}
.fan-caption__navigation{justify-self:start;display:flex;gap:11px}
.fan-caption__selected h3{font:400 clamp(34px,4.3vw,60px)/.95 var(--serif);letter-spacing:-.06em;color:#284784;margin:0 0 6px}
.fan-caption__selected>span{display:block;color:#6b6e7a;font-size:11px;margin-bottom:8px}
.fan-caption__selected>div{font:600 9px/1 var(--sans);letter-spacing:.15em;color:#8e8c88;text-transform:uppercase}
.fan-caption__count{justify-self:end;letter-spacing:.15em;color:#3e527c;font:600 10px var(--sans)}
.fan-bottom-line{margin-top:36px;border-top:1px solid #cbd0ce;min-height:68px;display:flex;justify-content:space-between;align-items:center;gap:20px;font:700 9px var(--sans);letter-spacing:.16em;color:#4f5870}
.fan-bottom-line a{border-bottom:1px solid #4f5870;padding-bottom:5px}
@media (min-width:1500px){
  .archive-section--spines{min-height:850px}
  .spines-viewport{height:415px}
  .archive-section--fan{min-height:915px}
  .fan-display{height:530px}
}
@media(max-width:900px){
  .archive-heading h2{font-size:clamp(50px,7.2vw,75px)}
  .archive-heading p{font-size:14px}
  .archive-section--spines{min-height:730px}
  .spines-viewport{height:330px}
  .archive-section--fan{min-height:770px}
  .fan-display{height:425px}
}
@media(max-width:720px){
  .collection-index{padding:0 12px}
  .collection-index a{min-height:68px;gap:7px;flex-direction:column}
  .collection-index a span{font-size:8px}
  .collection-index a strong{font-size:14px}
  .archive-section{padding:0 22px 28px}
  .archive-section--spines{min-height:680px}
  .archive-section--fan{min-height:740px}
  .archive-bar{height:67px;font-size:8px;letter-spacing:.1em}
  .archive-bar span:nth-child(2){display:none}
  .archive-heading{display:block;padding-top:35px}
  .archive-heading h2{font-size:clamp(53px,12.5vw,84px);letter-spacing:-.083em;white-space:normal}
  .archive-heading p{font-size:14px;max-width:32ch;margin:12px 0 0;line-height:1.4}
  .archive-kicker{font-size:8px}
  .spines-viewport{height:325px;margin:12px -22px 0}
  .archive-book-meta{grid-template-columns:1fr auto;gap:4px 12px;min-height:90px;margin-bottom:13px}
  .archive-book-meta__pre{grid-column:1/-1;justify-self:center;font-size:8px;margin:0}
  .archive-book-meta>div:nth-child(2){grid-column:1/2;text-align:left;justify-self:start;width:auto;min-width:0}
  .archive-book-meta h3{font-size:31px;min-height:32px;letter-spacing:-.065em}
  .archive-book-meta>div:nth-child(2)>span{font-size:10px}
  .archive-book-controls{grid-column:2/3}
  .archive-book-controls button{width:37px;height:37px;font-size:19px}
  .archive-timeline{margin:5px 0 0}
  .archive-timeline__legend{font-size:8px}
  .archive-timeline__ticks{font-size:7px}
  .archive-section--fan .archive-heading{padding-top:35px}
  .fan-display{margin:8px -22px 0;height:360px}
  .fan-side-text{font-size:47px;top:80px;opacity:.24}
  .fan-side-text--left{left:3%}.fan-side-text--right{right:4%}
  .fan-caption{grid-template-columns:1fr auto;gap:6px 10px;min-height:115px;margin-bottom:0}
  .fan-caption__selected{grid-row:1;grid-column:1/-1;align-self:center}
  .fan-caption__selected h3{font-size:37px}
  .fan-caption__navigation{grid-column:1/2;grid-row:2}
  .fan-caption__navigation button{width:38px;height:38px;font-size:20px}
  .fan-caption__count{grid-column:2/3;grid-row:2}
  .fan-bottom-line{margin-top:24px;min-height:62px;font-size:8px;letter-spacing:.1em}
  .fan-bottom-line span{max-width:160px;line-height:1.5}
  .fan-bottom-line a{text-align:right}
}
@media(max-width:390px){
 .archive-heading h2{font-size:52px}
 .archive-book-meta h3{font-size:27px}
 .fan-caption__selected h3{font-size:32px}
 .archive-section--fan{min-height:720px}
}
@media(prefers-reduced-motion:reduce){
  .spine-book,.fan-book{transition:none!important;will-change:auto}
}