:root{
  --void:#000; --pitch:#0A0A0A; --coal:#141414; --slate:#232323;
  --paper:#FAF9F7; --stone:#8B7D6B; --gold:#A2873F; --champagne:#C4B5A0;
  --f:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(20px,4.4vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--paper);font-family:var(--f);
  font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:var(--f);border:0;background:none;color:inherit}
.sheet{padding-left:var(--pad);padding-right:var(--pad);max-width:1560px;margin:0 auto}

.cover{position:relative;height:100svh;min-height:560px;overflow:hidden}
.cover img.bed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 20%;filter:grayscale(.4) contrast(1.08) brightness(.58);z-index:0}
.cover .fade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
  rgba(0,0,0,.78) 0%,rgba(0,0,0,.22) 38%,rgba(0,0,0,.5) 72%,var(--void) 100%)}
.cover .lay{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:space-between;height:100%;
  padding-top:clamp(26px,4vw,52px);padding-bottom:clamp(26px,4vw,52px)}
.cmark{width:min(430px,62vw)}
.cmark img{width:100%;display:block}
.cbot{margin-top:auto}
.cvol{font-size:clamp(9px,1.1vw,11px);font-weight:600;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold)}
.ctitle{font-weight:900;text-transform:uppercase;font-size:clamp(38px,10vw,132px);
  line-height:.86;letter-spacing:-.03em;margin:16px 0 0}
.ctitle em{font-style:normal;color:var(--gold)}
.cfoot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-top:clamp(22px,3vw,40px);font-size:9px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.cue{display:flex;align-items:center;gap:11px;color:var(--champagne)}
.cue i{display:block;width:40px;height:1px;background:var(--gold);
  animation:draw 2.6s ease-in-out infinite}
@keyframes draw{0%,100%{transform:scaleX(.25);transform-origin:left}
  50%{transform:scaleX(1);transform-origin:left}}

.valley{display:block;width:100%;height:26px;overflow:visible}
.valley path{fill:none;stroke:var(--slate);stroke-width:1.4}
.valley.gold path{stroke:var(--gold);opacity:.72}

.index{padding-top:clamp(58px,9vw,120px);padding-bottom:clamp(40px,6vw,74px);
  text-align:center}
.imark{width:min(210px,40vw);margin:0 auto}
.imark img{width:100%;display:block;opacity:.9}
.ilabel{margin-top:22px;font-size:9px;font-weight:600;letter-spacing:.4em;
  text-transform:uppercase;color:var(--gold)}
.ilist{margin-top:clamp(34px,5vw,58px);display:grid;
  grid-template-columns:repeat(3,1fr);gap:1px;background:var(--slate);
  border:1px solid var(--slate)}
.ient{background:var(--void);padding:clamp(16px,2.2vw,26px) 14px;display:block;
  transition:background .3s ease}
.ient:hover,.ient:focus-visible{background:var(--coal);outline:none}
.ient .no{font-size:9px;font-weight:700;letter-spacing:.22em;color:var(--gold)}
.ient .nm{font-weight:900;text-transform:uppercase;font-size:clamp(12px,1.5vw,17px);
  letter-spacing:-.006em;margin-top:9px;line-height:1.16}
.ient:hover .nm{color:var(--gold)}
.ient .ct{font-size:8.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stone);margin-top:8px}

.chapter{padding-top:clamp(56px,8vw,110px)}
.chead{display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding-bottom:20px}
.chead .cno{font-size:clamp(30px,6vw,80px);font-weight:900;line-height:.8;
  color:var(--slate);letter-spacing:-.04em}
.chead .cnm{font-weight:900;text-transform:uppercase;
  font-size:clamp(22px,4vw,54px);line-height:.94;letter-spacing:-.024em;flex:1}
.chead .cct{font-size:9px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--stone);padding-bottom:8px}

.plates{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(26px,3.4vw,54px) clamp(14px,1.8vw,28px);
  align-items:start;padding-top:clamp(24px,3vw,44px);padding-bottom:clamp(50px,7vw,96px)}
.plate{grid-column:span 4;position:relative;cursor:pointer;text-align:left;
  display:block;padding:0;opacity:0;transform:translateY(30px);
  transition:opacity .9s ease,transform .9s ease}
.plate.in{opacity:1;transform:none}
.plate:focus-visible{outline:2px solid var(--gold);outline-offset:8px}
.plate .shot{position:relative;overflow:hidden;background:var(--coal)}
.plate .shot img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;
  max-height:82svh;
  transition:transform 1.1s cubic-bezier(.16,.72,.24,1)}
.plate:hover .shot img{transform:scale(1.045)}
.plate .veil{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.72) 100%)}
.plate:hover .veil{opacity:1}
.plate .open{position:absolute;left:16px;bottom:15px;font-size:8.5px;font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translateY(7px);transition:all .45s ease}
.plate:hover .open{opacity:1;transform:none}
.plate .mto{position:absolute;top:0;left:0;font-size:7.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:6px 9px;
  background:var(--gold);color:var(--void)}
.cap{display:flex;align-items:baseline;gap:12px;padding-top:14px}
.cap .pl{font-size:8.5px;font-weight:600;letter-spacing:.14em;color:var(--stone);
  font-variant-numeric:tabular-nums;flex-shrink:0}
.cap .nm{font-size:clamp(10px,1.05vw,12px);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.45;flex:1}
.cap .pr{font-size:clamp(10px,1.05vw,12.5px);font-weight:600;color:var(--champagne);
  font-variant-numeric:tabular-nums;flex-shrink:0}

.ql{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.97);
  backdrop-filter:blur(18px);display:none;overflow-y:auto}
.ql.open{display:block}
.qin{max-width:1180px;margin:0 auto;padding:clamp(60px,8vw,86px) var(--pad) 70px;
  display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(28px,4vw,54px);align-items:start}
.qx{position:fixed;top:18px;right:20px;z-index:95;border:1px solid var(--slate);
  color:var(--stone);width:44px;height:44px;cursor:pointer;font-size:17px;
  transition:all .25s;background:rgba(0,0,0,.6)}
.qx:hover{color:var(--paper);border-color:var(--paper)}
.qx:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qstage{background:var(--coal)}
.qstage img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.qnav{display:flex;gap:8px;margin-top:10px}
.qth{width:64px;border:1px solid transparent;padding:0;cursor:pointer;opacity:.48;
  transition:opacity .28s,border-color .28s}
.qth img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.qth[aria-current="true"]{opacity:1;border-color:var(--gold)}
.qth:hover{opacity:1}
.qth:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.qplate{font-size:9px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.ql h2{font-weight:900;text-transform:uppercase;font-size:clamp(22px,3.2vw,38px);
  line-height:1.04;letter-spacing:-.018em;margin:15px 0 0}
.qpr{font-size:23px;font-weight:600;color:var(--champagne);margin-top:15px;
  font-variant-numeric:tabular-nums}
.qmto{margin-top:16px;border:1px solid var(--gold);padding:12px 15px;font-size:9.5px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.qmto.ready{border-color:var(--slate);color:var(--stone)}
.qd{font-size:14.5px;font-weight:300;line-height:1.8;color:var(--champagne);margin-top:20px}
.qsl{font-size:8.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--stone);margin:22px 0 10px}
.qsz{display:flex;gap:6px;flex-wrap:wrap}
.qsz span{font-size:10px;font-weight:600;padding:7px 11px;border:1px solid var(--slate);
  color:var(--champagne)}
.qgo{display:inline-block;margin-top:28px;background:var(--gold);color:var(--void);
  padding:16px 30px;font-size:9.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;transition:background .3s}
.qgo:hover{background:var(--champagne)}
.qgo:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

.colo{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(66px,9vw,110px);
  border-top:1px solid var(--coal);margin-top:clamp(30px,4vw,60px)}
.comark{width:190px;opacity:.85;margin-bottom:28px}
.comark img{width:100%;display:block}
.coline{font-weight:900;text-transform:uppercase;font-size:clamp(16px,2.6vw,28px);
  line-height:1.3;max-width:21ch;margin:0}
.coline em{font-style:normal;color:var(--gold)}
.colinks{display:flex;gap:24px;flex-wrap:wrap;margin-top:32px;font-size:9px;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.colinks a:hover{color:var(--gold)}
.costamp{margin-top:26px;font-size:8.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);line-height:2.2}

.toIndex{position:fixed;right:18px;bottom:18px;z-index:60;border:1px solid var(--slate);
  background:rgba(0,0,0,.82);backdrop-filter:blur(8px);color:var(--stone);
  padding:11px 15px;font-size:8.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .4s ease,color .25s,border-color .25s}
.toIndex.show{opacity:1;pointer-events:auto}
.toIndex:hover{color:var(--gold);border-color:var(--gold)}
.toIndex:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .plate{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media (max-width:1000px){ .plate{grid-column:span 6!important} }
@media (max-width:860px){ .qin{grid-template-columns:1fr} }
@media (max-width:620px){
  .ilist{grid-template-columns:repeat(2,1fr)}
  .plates{gap:24px 10px}
  .cap{flex-wrap:wrap;gap:6px}
  .cap .nm{flex-basis:100%}
}

.plate[data-w="7"] .shot img,.plate[data-w="6"] .shot img{aspect-ratio:5/4}
.plate[data-w="5"] .shot img{aspect-ratio:4/5}
@media (max-width:1000px){
  .plate[data-w="7"] .shot img,.plate[data-w="6"] .shot img,
  .plate[data-w="5"] .shot img{aspect-ratio:3/4}
}
