@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/eb-garamond-latin-ext-400-italic.woff2) format("woff2");unicode-range:U+0100-02BA,U+1E00-1E9F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/eb-garamond-latin-600-normal.woff2) format("woff2")}

:root{
  --ground:#f3eee5;
  --paper:#faf7f1;
  --ink:#2a2420;
  --muted:#6a5f55;
  --line:#ddd3c4;
  --accent:#8a4a2b;
  --serif:"EB Garamond",Garamond,"Times New Roman",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:1.1875rem;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%}
a{color:var(--accent)}
a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;height:86vh;min-height:520px;color:#fff;overflow:hidden;background:#1a1410}
.mosaic{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:4px}
.mosaic img{width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;display:block}
.m-main{grid-column:1;grid-row:1 / 3;object-position:30% 50%}
.m-tall{grid-column:2;grid-row:1 / 3;object-position:50% 30%}
.m-a{grid-column:3;grid-row:1;object-position:50% 58%}
.m-b{grid-column:3;grid-row:2;object-position:50% 38%}
.hero::after{content:"";position:absolute;left:0;top:0;bottom:0;width:54.5%;background:linear-gradient(to top,rgba(20,14,10,.72) 0%,rgba(20,14,10,.28) 38%,rgba(20,14,10,0) 62%);pointer-events:none}
.hero-text{position:absolute;left:0;bottom:0;z-index:1;max-width:54%;padding:0 clamp(16px,4vw,64px) clamp(32px,7vh,80px)}
.kicker{margin:0;font-style:italic;font-size:1.25rem;opacity:.92}
.hero h1{margin:0;font-weight:400;font-style:italic;font-size:clamp(5.5rem,13vw,12rem);line-height:.95;letter-spacing:-.02em}
.formal{margin:2.1rem 0 0;font-size:clamp(.95rem,1.5vw,1.125rem);letter-spacing:.22em;text-transform:uppercase}
.dates{margin:.45rem 0 0;font-size:1.0625rem;letter-spacing:.04em;opacity:.88;font-style:italic}

/* contents */
.toc{max-width:1120px;margin:0 auto;padding:40px 16px 8px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center}
.toc a{text-decoration:none;color:var(--muted);font-size:1.0625rem;padding:6px 0;display:inline-block;min-height:44px;line-height:32px}
.toc a:hover{color:var(--accent)}

/* chapters */
main{max-width:1120px;margin:0 auto;padding:0 16px}
.chapter{padding:96px 0 32px}
.toc + main .chapter:first-child{border-top:0}
.ch-head{max-width:680px;margin:0 auto 40px;text-align:center}
.ch-head::before{content:"";display:block;width:56px;height:1px;background:var(--accent);opacity:.55;margin:0 auto 28px}
.span{margin:0 0 .3rem;color:var(--muted);font-size:1rem;letter-spacing:.08em;text-transform:uppercase}
.ch-head h2{margin:0;font-weight:400;font-size:clamp(2.5rem,5.5vw,3.75rem);line-height:1.08;letter-spacing:-.01em}
.intro{margin:1rem 0 0;font-size:1.25rem}
.prose{max-width:640px;margin:0 auto}
.prose p{margin:0 0 1.1em;font-size:1.25rem}

/* show record */
.table-wrap{max-width:860px;margin:64px auto 0;overflow-x:auto}
.shows{width:100%;border-collapse:collapse;font-size:1.0625rem}
.shows caption{text-align:left;font-style:italic;color:var(--muted);padding-bottom:8px}
.shows th{text-align:left;font-weight:600;border-bottom:1px solid var(--ink);padding:8px 12px 8px 0}
.shows td{border-bottom:1px solid var(--line);padding:9px 12px 9px 0;vertical-align:top}
.shows td:first-child{white-space:nowrap;color:var(--muted)}

/* film */
.film-wrap{margin:0 auto;max-width:1000px}
.film-wrap video{width:100%;aspect-ratio:16/9;background:#111}

/* galleries */
.feature{margin:0 0 10px;width:100%}
.feature a{display:block;cursor:zoom-in}
.feature img{width:100%;height:auto;max-height:82vh;object-fit:cover}
.gallery{display:flex;flex-wrap:wrap;gap:10px}
.gallery::after{content:"";flex-grow:999999}
.ph{margin:0;flex-grow:var(--ar);flex-basis:calc(var(--ar) * 230px);min-width:0;background:var(--paper)}
.ph a{display:block;cursor:zoom-in;height:100%}
.ph img{width:100%;height:100%;aspect-ratio:var(--ar);object-fit:cover}
.ph figcaption,.clip figcaption{font-size:.9375rem;color:var(--muted);padding:6px 2px 2px}
.clips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:0 0 28px}
.clip{margin:0;flex:0 1 auto}
.clip video{max-height:70vh;width:auto;background:#111}

/* last day */
.last-day{padding-bottom:8px}
.closing{margin:0;position:relative;background:#120d09}
.closing img{width:100%;height:92vh;object-fit:cover;object-position:50% 62%}
.closing figcaption{position:absolute;left:0;right:0;bottom:0;padding:120px 16px clamp(40px,8vh,88px);text-align:center;color:#fff;font-style:italic;font-size:clamp(1.5rem,3vw,2.25rem);line-height:1.3;background:linear-gradient(to top,rgba(18,13,9,.7),rgba(18,13,9,0))}

/* guestbook */
.guestbook{padding-top:48px;padding-bottom:80px}
.gb-list{max-width:640px;margin:0 auto}
.gb-msg{margin:0 0 28px;padding:0 0 24px;border-bottom:1px solid var(--line)}
.gb-msg p{margin:0 0 .6em;font-size:1.25rem;white-space:pre-line}
.gb-msg footer{color:var(--muted);font-size:1rem;font-style:italic}
.gb-form{max-width:640px;margin:48px auto 0;display:grid;gap:18px}
.gb-field{display:grid;gap:6px}
.gb-field label{font-size:1rem;color:var(--muted);letter-spacing:.02em}
.gb-field input,.gb-field textarea{font:inherit;font-size:1.125rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:12px 14px;width:100%;min-height:48px}
.gb-field textarea{resize:vertical;min-height:140px;line-height:1.5}
.gb-field input:focus,.gb-field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.gb-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.gb-send{justify-self:start;font:inherit;font-size:1.0625rem;letter-spacing:.04em;color:#f3eee5;background:var(--ink);border:0;border-radius:2px;padding:12px 26px;min-height:48px;cursor:pointer}
.gb-send:hover,.gb-send:focus-visible{background:var(--accent)}
.gb-send[disabled]{opacity:.6;cursor:default}
.gb-status{margin:0;min-height:1.6em;color:var(--muted);font-style:italic}
.gb-status.err{color:#8a2b2b;font-style:normal}

.foot{text-align:center;color:var(--muted);padding:56px 16px 72px;max-width:1120px;margin:0 auto}
.foot-name{font-style:italic;font-size:2.5rem;color:var(--ink);line-height:1.1;margin-bottom:.5rem!important}
.foot p:not(.foot-name){font-size:.95rem;letter-spacing:.06em}
.foot p{margin:.2rem 0}

/* lightbox */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(18,14,11,.94);color:#eee}
.lb[open]{display:flex;align-items:center;justify-content:center;flex-direction:column}
.lb::backdrop{background:rgba(18,14,11,.94)}
.lb img{max-width:calc(100vw - 32px);max-height:calc(100vh - 110px);object-fit:contain}
.lb-cap{margin:12px 16px 0;font-size:1rem;color:#d8d0c6;text-align:center}
.lb-btn{position:absolute;background:transparent;border:0;color:#fff;font-family:var(--serif);font-size:2.5rem;line-height:1;width:56px;height:56px;cursor:pointer;opacity:.8}
.lb-btn:hover,.lb-btn:focus-visible{opacity:1}
.lb-prev{left:6px;top:50%;transform:translateY(-50%)}
.lb-next{right:6px;top:50%;transform:translateY(-50%)}
.lb-close{right:6px;top:6px}

@media (max-width:640px){
  body{font-size:1.125rem}
  .hero{height:auto;min-height:0}
  .mosaic{position:relative;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:64vh 40vw}
  .m-main{grid-column:1 / 4;grid-row:1;object-position:20% 50%}
  .m-tall{grid-column:1;grid-row:2}
  .m-a{grid-column:2;grid-row:2}
  .m-b{grid-column:3;grid-row:2}
  .hero::after{width:100%;bottom:calc(40vw + 4px)}
  .hero-text{max-width:none;bottom:calc(40vw + 4px);padding:0 16px 28px}
  .chapter{padding-top:64px}
  .gallery{gap:6px}
  .ph{flex-basis:calc(var(--ar) * 130px)}
  .feature{margin-bottom:6px}
  .closing img{height:80vh}
  .clip video{max-height:60vh}
  .shows td:first-child{white-space:normal}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
