@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/cormorant-garamond/CormorantGaramond-normal-latin-400.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../assets/fonts/cormorant-garamond/CormorantGaramond-italic-latin-400.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
/* Paper-based overview. Chapter labels inherit the inner-page serif family. */
.contents,.garden-dialog .contents{display:grid;grid-template-columns:38% 59%;grid-template-rows:auto;gap:3%;align-items:center;min-height:100svh;padding:130px 6% 90px;background:var(--paper);color:#000}
.contents::before{display:none}
.gatherings-background{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;height:auto;object-fit:contain;object-position:center;z-index:0;transform:translateX(-18.04vw)}
.contents-nav,.garden-dialog .contents-nav{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-self:center;gap:28px;width:100%;min-height:0;margin:0;padding:0;z-index:1;transform:translate(-18.04vw,calc(17.258vw - 50% - 32px))}
.contents-nav .gathering{color:#fff;text-align:center;text-shadow:none}
.echoes-heading h1{font-size:20px;font-weight:600;line-height:1.4;letter-spacing:.16em}
.contents .contents-name{font:400 26px/1.12 'Cormorant Garamond',Bradford,Georgia,serif;letter-spacing:-.01em;margin:0}
.echoes-heading>div>p{font-size:11px;font-weight:400;line-height:1.4;letter-spacing:.06em}
.contents .contents-subtitle{font:italic 400 16px/1.25 'Cormorant Garamond',Bradford,Georgia,serif;letter-spacing:.01em;margin:4px 0 0;color:inherit;opacity:1}
.contents .gatherings-header{background:var(--paper)}
.contents .gatherings-header .gatherings-label,.contents .gatherings-header .contents-brand{font:500 13px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.08em}
.contents-nav button:hover{color:#fff}
.contents .gatherings-header button:hover{color:#000}
.contents .gatherings-header button:focus-visible{outline:none;text-decoration:underline;text-decoration-color:#858b7d;text-decoration-thickness:1px;text-underline-offset:6px}
.contents-nav button:focus-visible{outline-color:#fff;outline-offset:5px}
@media(max-width:800px){
 .contents,.garden-dialog .contents{grid-template-columns:1fr;gap:36px;align-items:start;align-content:start;padding:115px 6% 60px}
 .gatherings-background{grid-column:1;grid-row:1;transform:none}
 .contents-nav,.garden-dialog .contents-nav{grid-column:1;grid-row:2;gap:24px;align-self:start;transform:none;margin:0}
 .contents-nav .gathering{color:#000;text-shadow:none}
 .contents-nav button:focus-visible{outline-color:#000}
 .echoes-heading h1{font-size:18px;letter-spacing:.12em}
 .contents .contents-name{font-size:26px;letter-spacing:-.01em}
 .contents .gatherings-header .gatherings-label,.contents .gatherings-header .contents-brand{font-size:12px}
}

/* The overview photograph stays centered in both opening states. */
.opening.is-open .opening-photo.gatherings-source{left:50%;top:50%;transform:translate(-50%,-50%)}

/* Foreword fades away while the overview photograph develops in place. */
.opening.is-departing .intro{transition:opacity 1.8s ease}
.contents .contents-nav .gathering{transition:opacity .9s ease}
@media(hover:hover){
 .contents .contents-nav:has(.gathering:hover) .gathering:not(:hover){opacity:.12!important}
}
.contents .contents-nav:has(.gathering:focus-visible) .gathering:not(:focus-visible){opacity:.12!important}
@media(prefers-reduced-motion:reduce){
 .opening.is-departing .intro,.contents .contents-nav .gathering{transition:none}
}

/* Reserve the photograph before decode, including a return from Roots. */
.gatherings-background{aspect-ratio:1444/960}
.roots-route-leaving .contents-nav .gathering{transition:none}

/* Return focus anchors the navigation without drawing a frame around its container. */
.contents-nav[tabindex="-1"]:focus{outline:none}