/* The photo book page. The ground, header, footer and viewer follow the light gallery
   (photography-alternatives.css); the sheets are laid out in the book's own unit. */

@font-face{font-family:"Bodoni Moda";src:url(fonts/BodoniModa.woff2) format("woff2");font-weight:400 900;font-display:swap}

/* ---------- page ---------- */
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:#f7f6f2;color:#262623;font-family:"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
a:focus-visible,button:focus-visible,.reader:focus-visible{outline:2px solid #866247;outline-offset:6px}
header,.intro,.turn,.view,.words,.sheets,.colophon,footer{width:min(1320px,88%);margin-inline:auto}
header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px 0;border-bottom:1px solid #25251f25}
.signature{font-size:18px;font-weight:500;letter-spacing:-.04em}
header nav{display:flex;gap:24px;font-size:12px}
header nav a{min-height:44px;display:inline-flex;align-items:center;padding:10px 0;color:#6c6b64}
header nav a[aria-current]{color:#262623;border-bottom:1px solid}
.intro{display:flex;justify-content:space-between;align-items:end;padding:48px 0 30px}
h1{font-size:clamp(40px,5.3vw,76px);font-weight:400;letter-spacing:-.055em;line-height:1;margin:0}
h1 span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:20px;color:#6c6b64}
.intro p{font-size:15px;line-height:1.6;margin:0;color:#6c6b64;text-align:right}
h2{font-size:24px;font-weight:400;letter-spacing:-.04em;margin:0}
footer{display:flex;justify-content:space-between;padding:28px 0 40px;border-top:1px solid #25251f25;font-size:11px;color:#6c6b64}

/* ---------- the reader: the spreads side by side, one in view ---------- */
.reader{--room:calc(100dvh - 170px);container-type:inline-size;display:flex;align-items:center;width:min(1680px,96vw);
 margin-inline:auto;padding-block:18px 40px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.js .reader{scrollbar-width:none}.js .reader::-webkit-scrollbar{display:none}
.spread{--u:calc(100cqw/var(--W));flex:0 0 100cqw;display:grid;justify-items:center;scroll-snap-align:center;scroll-snap-stop:always}
.back{display:none}

/* read a page at a time: every sheet at one scale, pages as the stops */
[data-view=page] .reader{--page:min(100cqw,calc(var(--room)*2700/2050));--pu:calc(var(--page)/2700)}
[data-view=page] .reader::before,[data-view=page] .reader::after{content:"";flex:0 0 calc((100cqw - var(--page))/2)}
[data-view=page] .spread{flex:0 0 auto;width:calc(var(--vis,var(--W))*var(--pu));justify-items:start;overflow:clip;
 scroll-snap-align:none;margin-right:calc(var(--page)*.05)}
[data-view=page] .spread:last-of-type{margin-right:0}
[data-view=page] .sheet{width:calc(var(--W)*var(--pu));margin-left:calc(var(--off,0)*var(--pu)*-1)}
[data-view=page] .pg.stop{scroll-snap-align:center;scroll-snap-stop:always}
[data-view=page] .back{display:grid}

/* ---------- a sheet: every length is the book's, in tenths of a millimetre ---------- */
.sheet{position:relative;container-type:inline-size;aspect-ratio:var(--W)/var(--H);overflow:clip;background:#fff;
 width:min(100cqw,calc(var(--room)*var(--W)/var(--H)));box-shadow:0 1px 3px #2625231a,0 22px 34px -24px #26252359}
.sheet>*,.ph img,.win{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));
 width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.sheet>*{rotate:var(--r,0deg)}
.pg{--y:0;--h:var(--H)}
.spread:not(#cover,.back) .sheet::after{content:"";position:absolute;inset:0 auto 0 50%;width:1.6%;translate:-50%;pointer-events:none;
 background:linear-gradient(90deg,#0000,#00000008 35%,#00000014 50%,#00000008 65%,#0000)}

.ph{display:block;overflow:hidden;cursor:zoom-in;-webkit-mask:var(--m,none) center/100% 100% no-repeat;mask:var(--m,none) center/100% 100% no-repeat}
.ph img{display:block;max-width:none}
.ph:focus-visible{outline-offset:-4px}
.ph.frame{overflow:visible;background:#fafdfa}
.win{display:block;overflow:hidden}
.rule::before{content:"";position:absolute;inset:50% .6% auto;height:calc(var(--h)*var(--u)*8/60);translate:0 -50%;background:#000}

.tx{padding:calc(var(--mt)*var(--u)) calc(var(--mr)*var(--u)) 0 calc(var(--ml)*var(--u));color:#000;white-space:pre;
 font-family:"Bodoni Moda","Bodoni 72","Bodoni MT",Didot,"Times New Roman",serif;font-variation-settings:"opsz" 11,"wght" 430;
 font-optical-sizing:none;font-variant-ligatures:none;text-rendering:geometricPrecision}
/* Bodoni Moda at 91.5%, lightly tracked, sits on the book's Bodoni; --k is the tracking that gives a
   line the width it has in print (capitals need more), and the trailing space is taken back */
.tx p{--t:var(--k,.016em);margin:0;font-size:calc(var(--f)*var(--u)*.915);line-height:calc(var(--l)*var(--u));letter-spacing:var(--t)}
.tx .k{--t:var(--k,.052em)}
.tx .c{text-align:center;padding-left:var(--t)}.tx .r{text-align:right;margin-right:calc(var(--t)*-1)}
.tx.over{pointer-events:none}

/* ---------- turning pages ---------- */
.turn{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:12px}
.turn button,.view button,dialog button{border:0;background:none;padding:12px;min-height:44px}
.turn button{margin-inline:-12px}.turn button:disabled{opacity:.3;cursor:default}
.turn p{display:flex;gap:18px;margin:0;color:#6c6b64;letter-spacing:.025em}
#where{color:#262623}
.view{margin-block:2px 0;text-align:center;font-size:11px;color:#6c6b64}
html:not(.js) .turn,html:not(.js) .view{display:none}

/* the spread's words, set large enough to read when the sheet is small */
.words{display:none;max-width:34em;padding-top:26px;text-align:center;
 font-family:"Bodoni Moda","Bodoni 72","Bodoni MT",Didot,"Times New Roman",serif;font-variation-settings:"opsz" 11,"wght" 430}
.small-type #words:not(:empty){display:block}
.words h3{font-size:22px;font-weight:inherit;letter-spacing:.06em;margin:0 0 6px}
.words p{font-size:16px;line-height:1.6;margin:0 0 14px}
.words .sub{font-size:18px;margin-bottom:18px}

/* ---------- all pages ---------- */
.sheets{margin-block:70px 60px;border-top:1px solid #25251f25;padding-top:36px;display:grid;grid-template-columns:1fr 3fr;gap:40px}
.sheets nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}
.sheets a{display:block;font-size:11px;color:#6c6b64;letter-spacing:.025em}
.sheets img{display:block;width:100%;height:auto;margin-bottom:10px;box-shadow:0 1px 2px #2625231f}
.sheets a[aria-current]{color:#262623}
.sheets a[aria-current] img{outline:1px solid #262623;outline-offset:4px}
.colophon{font-size:12px;line-height:1.7;color:#6c6b64;margin-block:0 56px;max-width:none}

/* ---------- photograph viewer, as in the gallery ---------- */
dialog{border:0;padding:22px;background:#faf9f6;color:#262623;width:96vw;max-width:1600px;max-height:96dvh}
dialog::backdrop{background:#141719ed}
dialog>img{display:block;width:100%;height:72dvh;object-fit:contain}
.viewer-tools,.viewer-navigation{display:flex;justify-content:space-between;align-items:center;font-size:12px}
dialog p{font-size:12px;text-align:center;margin:12px 0 0;min-height:1.3em}
#shot{font-size:11px;letter-spacing:.025em;color:#6c6b64;margin:4px 0 10px}
.viewer-navigation{max-width:360px;margin:auto}
body:has(dialog[open]){overflow:hidden}

@view-transition{navigation:auto}
::view-transition-old(root){animation:passage-fade-out .4s both}
::view-transition-new(root){animation:passage-fade-in .6s both}
@keyframes passage-fade-out{to{opacity:0}}
@keyframes passage-fade-in{from{opacity:0}}

@media(max-width:900px){.sheets{display:block}.sheets h2{margin-bottom:24px}.sheets nav{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}}
@media(max-width:640px){
 header,.intro,.turn,.view,.words,.sheets,.colophon,footer{width:90%}
 header{display:block;padding:22px 0}header nav{margin-top:18px}
 .intro{padding:32px 0 14px;align-items:start}.intro p{display:none}
 .reader{--room:calc(100dvh - 190px);width:100%;padding-block:12px 30px}
 .sheets{margin-block:54px 40px}.sheets nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 dialog{padding:12px}dialog>img{height:65dvh}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}@view-transition{navigation:none}}
@media(pointer:coarse){.signature,footer a{position:relative}.signature::after,footer a::after{content:"";position:absolute;left:-6px;right:-6px;top:50%;height:44px;translate:0 -50%}}