/* Exhibitions: "documentary and spatial" (Doc 01). Where the work has existed physically and how it was met.
   The same type as Ordinary, Process and About: Williwaw for reading, small Arial labels. */
@font-face{font-family:Williwaw;src:url('../assets/fonts/williwaw-book.otf');font-display:swap}
:root{--g:clamp(20px,5vw,88px);--paper:#fff;--ink-p:#000;--ink:#fff;--soft:#b5b5b5;--dim:#8a8a8a;--serif:Williwaw,Georgia,serif;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--ink);font:19px/1.65 var(--serif);-webkit-font-smoothing:antialiased}
p{margin:0}h1,h2,h3{font-weight:400;margin:0}img{display:block;max-width:100%;height:auto}figure{margin:0}a{color:inherit}
.skip{position:fixed;z-index:100;left:20px;top:-100px;padding:10px 18px;background:#fff;color:#000}.skip:focus{top:12px}
.lbl{font:12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.rise{opacity:0;transform:translateY(18px);transition:opacity 1.8s ease,transform 2.2s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
.go{display:inline-flex;align-items:center;gap:12px;font:15px/1 var(--sans);letter-spacing:.02em;border-bottom:1px solid currentColor;padding:8px 0;text-decoration:none}
.go svg{width:20px;transition:transform .6s ease}
a:hover .go svg,.go:hover svg{transform:translateX(5px)}
.cap{font:italic 15px/1.5 var(--serif);color:var(--dim);margin-top:12px}
.site-ft{display:flex;flex-wrap:wrap;gap:12px 28px;padding:6svh var(--g);border-top:1px solid #ffffff1a;font:14px/1.6 var(--sans);color:#a7a7a7}
.site-ft a{text-decoration:none}.site-ft a:hover{color:#fff}

/* ----- a smaller exhibition, opened in place ----- */
.more{border-top:1px solid #ffffff22}
.more summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:5.2em minmax(0,1fr) auto;gap:0 20px;align-items:baseline;padding:22px 0}
.more summary::-webkit-details-marker{display:none}
.more summary .yr{font-size:17px;color:var(--soft)}
.more summary .t{font-size:clamp(22px,2vw,32px);line-height:1.2}
.more summary .t i{font-style:italic}
.more summary .t span{display:block;font:15px/1.5 var(--sans);color:var(--dim);margin-top:6px;font-style:normal}
.more summary .pm{font:14px/1 var(--sans);color:var(--soft);white-space:nowrap}
.more summary .pm::after{content:'Open';}
.more[open] summary .pm::after{content:'Close'}
.more summary:focus-visible{outline:2px solid #fff;outline-offset:4px}
.more .body{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:0 20px;padding:0 0 48px}
.more .body>*{grid-column:2}
.more .body p{max-width:34em;font-size:clamp(18px,1.3vw,21px);line-height:1.7;color:#d4d4d4}
.more .body p+p{margin-top:1em}
.more .body blockquote{margin:28px 0 0;max-width:30em}
.more .body blockquote p{font-size:clamp(21px,1.7vw,27px);line-height:1.42;color:var(--ink)}
.more .body blockquote footer{font:13px/1.5 var(--sans);color:var(--dim);margin-top:10px}
.more .pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px;margin-top:34px;max-width:1100px}
.more .pics img{width:100%;aspect-ratio:1;object-fit:cover}
@media(max-width:800px){
 .more summary{grid-template-columns:3.4em minmax(0,1fr)}
 .more summary .pm{grid-column:2;margin-top:10px}
 .more .body{grid-template-columns:1fr}.more .body>*{grid-column:1}
}

/* ----- the film, as on Ordinary (film-h, the projector screening) ----- */
.film{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16svh 32px;background:linear-gradient(#000,#050505 22%);color:#f2f2f2;text-align:center}
.film-beam{position:absolute;top:0;left:50%;width:150%;height:75%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(ellipse 55% 65% at 50% 0%,rgba(139,139,139,.18) 0%,transparent 70%)}
.film-kicker{position:relative;margin:0 0 16px;font:12px/1 var(--sans);letter-spacing:.4em;text-transform:uppercase;color:rgba(239,239,239,.6)}
.film-title{position:relative;margin:0 0 10px;font:italic 400 clamp(30px,3.6vw,50px)/1.1 var(--serif);color:#fff}
.film-cap{position:relative;margin:0 0 36px;font:italic 16px/1.6 var(--serif);color:rgba(239,239,239,.6)}
.film-frame{position:relative;width:min(52.9vw,644px);aspect-ratio:4/3;background:#000;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(239,239,239,.08),0 60px 160px rgba(0,0,0,.8)}
.film-frame.wide{aspect-ratio:16/9;width:min(70vw,900px)}
.film-frame.playing{width:min(84vw,1200px);aspect-ratio:16/9;cursor:auto}
.film-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.film-frame::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 60% at 50% 46%,rgba(6,6,6,.3) 0%,transparent 68%),linear-gradient(180deg,rgba(5,5,5,.2) 0%,rgba(5,5,5,.04) 30%,rgba(5,5,5,.08) 60%,rgba(5,5,5,.55) 100%)}
.film-frame.playing::after{display:none}
.film-play{position:relative;z-index:2;width:clamp(52px,5.6vw,72px);height:clamp(52px,5.6vw,72px);padding:0;color:#fff;background:none;border:0;cursor:pointer;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.film-frame:hover .film-play{transform:scale(1.07)}
.film-play svg{width:100%;height:100%;display:block}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:750px){.film{padding:12svh 20px}.film-frame,.film-frame.wide,.film-frame.playing{width:100%}.film-cap{font-size:14px}}
@media(prefers-reduced-motion:reduce){.rise{transition:none;opacity:1;transform:none}}

/* ----- the individual exhibition pages (shared pieces) ----- */
.xp-top{padding:12svh var(--g) 0}
.xp-top .lbl{margin-bottom:26px}
.xp-top h1{font-size:clamp(46px,6.8vw,124px);line-height:.96;letter-spacing:-.02em}
.xp-top h1 i{font-style:italic}
.xp-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px clamp(20px,3vw,56px);margin:clamp(40px,6svh,70px) 0 0;padding-top:22px;border-top:1px solid #ffffff22;max-width:1100px}
.xp-meta dt{font:12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.xp-meta dd{margin:0;font-size:clamp(18px,1.35vw,21px);line-height:1.4}
.xp-read{padding:0 var(--g)}
.xp-read .in{max-width:34em;margin-left:50%}
.xp-read p{font-size:clamp(19px,1.4vw,22px);line-height:1.72;color:#d4d4d4;text-wrap:pretty}
.xp-read p+p{margin-top:1.1em}
.xp-said{padding:0 var(--g)}
.xp-said blockquote{margin:0}
.xp-said p{max-width:17em;font-size:clamp(28px,3.1vw,50px);line-height:1.24;letter-spacing:-.01em;text-indent:-.4em;text-wrap:balance}
.xp-said footer{font:12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:24px}
.xp-next{display:grid;grid-template-columns:50% minmax(0,1fr);align-items:end;padding:22svh var(--g) 14svh}
.xp-next .back{width:fit-content;color:var(--soft)}
.xp-next .nx{display:flex;flex-direction:column;gap:12px;text-decoration:none;width:fit-content}
.xp-next .nt{font-size:clamp(30px,3vw,52px);line-height:1.05;letter-spacing:-.012em}
.xp-next .nt i{font-style:italic}
.xp-next .nx:hover .nt{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:1px}
@media(max-width:800px){
 .xp-read .in{margin-left:0}
 .xp-next{grid-template-columns:1fr;gap:48px}
}

/* ===== Type system for the exhibition pages =====
   display  h1        46 to 124px, the page title
   heading  .xp-h2    38 to 80px, a section
   label    .lbl      12px Arial capitals, what a section is
   byline   .xp-by    17px italic, who wrote or said it
   lede     .xp-lede  24 to 36px, the opening paragraph
   body     .xp-body  19 to 22px at 1.72, never wider than 34em
   quote    .xp-said  28 to 50px, a short quote (one or two sentences)
   long     .xp-long  22 to 29px, a long quote, set as reading, not as display
   caption  .cap      15px italic
   A section sets its heading first, then its words stepped in beneath. */
.xp-sec{padding:20svh var(--g) 0}
.xp-sec .hd{margin-bottom:clamp(34px,5svh,64px)}
.xp-sec .xp-body,.xp-sec .xp-long{margin-left:clamp(0px,16vw,300px)}

.xp-h2{font-size:clamp(38px,4.6vw,80px);line-height:1;letter-spacing:-.015em;text-wrap:balance}
.xp-h2 i{font-style:italic}
.xp-by{font:italic 17px/1.5 var(--serif);color:var(--soft);margin-top:20px}
.xp-lede{font-size:clamp(24px,2.2vw,36px);line-height:1.38;letter-spacing:-.006em;max-width:24em;text-wrap:pretty}
.xp-body p{font-size:clamp(19px,1.4vw,22px);line-height:1.72;color:#d4d4d4;max-width:34em;text-wrap:pretty}
.xp-body p+p{margin-top:1.1em}
.xp-body i,.xp-lede i{font-style:italic}
.xp-long{margin:0;max-width:26em}
.xp-long p{font-size:clamp(22px,1.8vw,29px);line-height:1.46;color:var(--ink);text-indent:-.42em;text-wrap:pretty}
.xp-long footer{font:12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:26px}
@media(max-width:800px){.xp-sec{padding-top:14svh}.xp-sec .hd{margin-bottom:26px}.xp-sec .xp-body,.xp-sec .xp-long{margin-left:0}}