@import url('./essay-font.css');
@font-face{font-family:'GT America';src:url('../assets/fonts/gt-america/GT-America-Standard-Black.woff2') format('woff2');font-style:normal;font-weight:900;font-display:swap}
/* Echoes trial · 2026-10-12. Paper, type, and pace inherited from Gatherings. */
body[data-view="echoes"]>.top{display:none}
#echoes{font-family:var(--sans);background:var(--paper);color:#111;min-height:100svh}
.echoes-top{position:fixed;inset:0 0 auto;z-index:42;height:80px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:var(--paper)}
.echoes-top button{padding:12px 0;font-size:14px;font-weight:600;letter-spacing:-.025em}
.echoes-index{padding:145px 6.5% 100px;max-width:1600px;margin:auto}
.echoes-heading{margin-bottom:80px}.echoes-heading h1{font-size:clamp(38px,4vw,64px);font-weight:400;letter-spacing:-.045em;line-height:1.1;margin:0 0 14px}.echoes-heading p{font-size:16px;font-weight:600;margin:0}
.echoes-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);gap:7%;align-items:start;margin-bottom:100px}
.echoes-summary{padding-top:8px;max-width:370px}.echoes-summary h2{font-size:clamp(24px,2.2vw,34px);font-weight:400;line-height:1.18;letter-spacing:-.025em;margin:0 0 24px}.echoes-summary h2 button{text-align:left;padding:0;line-height:inherit;letter-spacing:inherit}.echoes-summary p{font-size:19px;line-height:1.55;margin:0 0 28px}.echoes-summary small{font-size:11px;color:#6a6a62;line-height:1.5;display:block}.echoes-photo{display:block;padding:0;width:100%;position:relative}.echoes-photo img{width:100%;height:auto}.echoes-photo span{display:block;text-align:right;margin-top:12px;font-size:12px}.echoes-photo:hover span{text-decoration:underline;text-underline-offset:4px}
.echoes-detail{position:fixed;inset:80px 0 0;z-index:40;background:var(--paper);overflow:hidden}
.echoes-detail-back{position:absolute;top:12px;left:4%;padding:12px 0;font-size:12px;z-index:2}
.echoes-image-side{position:absolute;left:4%;top:85px;width:40%;margin:0}.echoes-main-photo{width:100%;padding:0;display:block}.echoes-main-photo img{width:100%;max-height:calc(100svh - 280px);object-fit:contain;object-position:left top}.echoes-image-side figcaption{font-size:12px;line-height:1.5;margin-top:16px;color:#55564d}.echoes-thumbs{display:flex;gap:12px;margin-top:20px}.echoes-thumbs button{width:64px;padding:0;opacity:.65}.echoes-thumbs button:hover,.echoes-thumbs button:focus-visible{opacity:1}.echoes-thumbs img{aspect-ratio:1.5;object-fit:cover}
.echoes-text-scroll{position:absolute;left:50%;right:4%;top:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;padding:85px 28px 80px 0;scrollbar-width:thin;scrollbar-color:#bbbcb2 transparent;outline-offset:-3px}
.echoes-article{max-width:650px;margin:0 auto}.echoes-article h1{font-size:clamp(30px,3vw,46px);font-weight:400;letter-spacing:-.035em;line-height:1.15;margin:0 0 48px}.echoes-article h1:focus{outline:none}.echoes-prose p{font-size:19px;line-height:1.75;margin:0 0 30px}.echoes-prose strong{font-weight:600}.echoes-end{margin-top:65px;padding-top:24px;border-top:1px solid #c9cbbd;display:flex;flex-direction:column;align-items:start;gap:20px}.echoes-end button{text-align:left;padding:5px 0;font-size:15px;line-height:1.4}.echoes-end small{display:block;color:#66685e;font-size:11px;margin-bottom:7px}
body.echoes-is-reading{overflow:hidden}.echoes-bridge{position:fixed!important;z-index:48;pointer-events:none;object-fit:contain;transform-origin:top left;margin:0}
.echoes-lightbox{border:0;background:var(--paper);padding:28px;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;color:#111}.echoes-lightbox::backdrop{background:var(--paper)}.echoes-lightbox header{display:flex;justify-content:space-between;height:50px;font-size:13px}.echoes-lightbox img{height:calc(100svh - 155px);width:100%;object-fit:contain}.echoes-lightbox footer{display:flex;justify-content:space-between;gap:20px;font-size:12px;padding-top:20px}.echoes-lightbox button:disabled{opacity:.3}
@media(max-width:800px){.echoes-top{height:70px;padding:0 6%}.echoes-top button{font-size:12px}.echoes-index{padding:115px 6% 50px}.echoes-heading{margin-bottom:55px}.echoes-heading h1{font-size:40px}.echoes-heading p{font-size:14px}.echoes-row{grid-template-columns:1fr;gap:25px;margin-bottom:65px}.echoes-summary{max-width:100%}.echoes-summary h2{font-size:27px;margin-bottom:16px}.echoes-summary p{font-size:17px;margin-bottom:14px}.echoes-detail{inset:70px 0 0;overflow-y:auto;overscroll-behavior:contain}.echoes-detail-back{position:relative;display:block;left:0;top:0;margin:10px 6% 22px}.echoes-image-side{position:relative;inset:auto;width:auto;margin:0 6% 35px}.echoes-main-photo img{max-height:45svh;object-position:center}.echoes-thumbs{margin-top:14px}.echoes-text-scroll{position:static;overflow:visible;padding:0 6% 60px}.echoes-article h1{font-size:32px;margin-bottom:30px}.echoes-prose p{font-size:17px;line-height:1.75;margin-bottom:25px}.echoes-lightbox{padding:20px}.echoes-lightbox footer span{max-width:55%}}
/* Reference refinement: continuous, unscaled photograph; a fixed reading aperture. */
.echoes-index{padding:130px 6% 90px;max-width:none}
.echoes-heading{display:grid;grid-template-columns:38% 59%;gap:3%;align-items:start;margin-bottom:125px}
.echoes-heading h1{font-size:clamp(27px,2.7vw,42px);letter-spacing:0;line-height:1.2;margin:0 0 15px;font-weight:400}
.echoes-heading .echoes-chapter-description{font-size:clamp(18px,1.65vw,24px);line-height:1.5;font-weight:400;letter-spacing:.015em;max-width:850px}
.echoes-chapter-description strong{font-weight:600}
.echoes-row{grid-template-columns:38% 59%;gap:3%;margin-bottom:36px}
.echoes-summary{max-width:95%;padding-top:0}
.echoes-summary h2{font-size:clamp(22px,1.95vw,29px);line-height:1.2;letter-spacing:0;margin-bottom:20px}
.echoes-summary p{font-size:clamp(18px,1.65vw,24px);line-height:1.4;letter-spacing:.018em;margin-bottom:25px}
.echoes-photo span{position:absolute;bottom:18px;right:20px;margin:0;padding:9px 13px;background:#f5f5efe8;font-size:11px}
.echoes-detail{--reading-top:85px;--hero-width:52vw;--hero-height:34.6vw}
.echoes-image-side{left:0;top:var(--reading-top);width:39%;margin:0}
.echoes-main-photo{position:relative;height:var(--hero-height);overflow:hidden}
.echoes-main-photo img{position:absolute;right:0;top:0;width:var(--hero-width);height:var(--hero-height);max-width:none;max-height:none;object-fit:fill}
.echoes-image-side figcaption{padding-left:28px;padding-right:12px;margin-top:15px;font-size:11px}
.echoes-text-scroll{left:44%;right:4.5%;top:var(--reading-top);bottom:0;padding:0 20px 75px 0}
.echoes-article{max-width:none;margin:0}
.echoes-article h1{font-size:clamp(27px,2.35vw,38px);font-weight:400;letter-spacing:0;line-height:1.25;margin:0 0 55px;padding-top:0}
.echoes-prose p{font-size:clamp(18px,1.65vw,24px);line-height:1.55;letter-spacing:.01em;margin-bottom:35px}
.echoes-inline-photo{margin:45px 0 50px}.echoes-inline-photo button{display:block;width:100%;padding:0}.echoes-inline-photo img{width:100%;height:auto}.echoes-inline-photo figcaption{font-size:11px;line-height:1.5;margin-top:12px;color:#64655e}
.echoes-motion-photo{position:fixed;z-index:48;pointer-events:none;max-width:none!important;margin:0;transform-origin:top left;object-fit:fill}
.echoes-motion-mask{position:fixed;inset:0;z-index:47;pointer-events:none;overflow:hidden}
@media(max-width:800px){.echoes-index{padding:115px 6% 60px}.echoes-heading{grid-template-columns:1fr;gap:25px;margin-bottom:65px}.echoes-heading h1{font-size:32px}.echoes-heading .echoes-chapter-description{font-size:18px;line-height:1.5}.echoes-row{grid-template-columns:1fr;gap:25px;margin-bottom:55px}.echoes-summary{max-width:none}.echoes-summary h2{font-size:24px}.echoes-summary p{font-size:17px;line-height:1.5}.echoes-image-side{position:relative;inset:auto;width:auto;margin:0 6% 30px}.echoes-main-photo{height:auto;overflow:visible}.echoes-main-photo img{position:static;width:100%;height:auto;max-height:none}.echoes-image-side figcaption{padding:0}.echoes-text-scroll{position:static;padding:0 6% 60px;overflow:visible}.echoes-article h1{font-size:29px;margin-bottom:30px}.echoes-prose p{font-size:17px;line-height:1.7;letter-spacing:0;margin-bottom:26px}.echoes-inline-photo{margin:32px 0 38px}}
@media(min-width:801px){.echoes-image-side{width:36%}.echoes-text-scroll{left:41%;right:5%}}
#echoes-title:focus{outline:none}
/* Typography trial: modest reading scale and publication rules. */
.echoes-top button{font-weight:600;letter-spacing:-.025em}
.echoes-heading h1{font-size:20px;font-weight:600;letter-spacing:.16em;line-height:1.4;margin-bottom:14px}
.echoes-heading p{font-size:11px;font-weight:400;letter-spacing:.06em;line-height:1.4}
.echoes-heading .echoes-chapter-description{font-size:16px;font-weight:400;line-height:1.4;letter-spacing:.035em}
.echoes-chapter-description strong{font-weight:400}
.echoes-summary h2{font-size:19px;font-weight:400;line-height:1.3;letter-spacing:.025em;margin-bottom:16px}
.echoes-summary p{font-size:16px;font-weight:400;line-height:1.4;letter-spacing:.025em;margin-bottom:18px}
.echoes-summary small{font-size:10px;letter-spacing:.025em}
.echoes-article h1{font-size:23px;font-weight:400;line-height:1.3;letter-spacing:.025em;text-align:center;border-top:1px solid #73746a;border-bottom:1px solid #73746a;padding:20px 12px;margin:0 0 38px}
.echoes-prose p{font-size:17px;font-weight:400;line-height:1.45;letter-spacing:.012em;margin-bottom:24px}
.echoes-inline-photo{margin:30px 0 34px}
.echoes-inline-photo figcaption{font-size:10px;line-height:1.4;letter-spacing:.025em;margin-top:10px}
.echoes-end{margin-top:42px}.echoes-end button{font-size:13px}
@media(max-width:800px){.echoes-heading h1{font-size:18px;letter-spacing:.12em}.echoes-heading .echoes-chapter-description{font-size:15px;line-height:1.45}.echoes-summary h2{font-size:18px}.echoes-summary p{font-size:15px;line-height:1.45}.echoes-article h1{font-size:21px;padding:18px 8px;margin-bottom:28px}.echoes-prose p{font-size:16px;line-height:1.5;margin-bottom:22px}.echoes-inline-photo{margin:26px 0 30px}}

/* Inherited navigation weight and fine rules for the five essay entries. */
.echoes-detail-back{font-weight:600}
.echoes-summary{border-top:1px solid #73746a;padding-top:18px;font-family:var(--sans)}
.echoes-summary p{font-family:var(--sans);letter-spacing:.012em}

.echoes-summary h2,.echoes-article h1{font-weight:600}

/* The index ends shortly after its final photograph. */
.echoes-index{padding-bottom:60px}
.echoes-row:last-child{margin-bottom:0}

/* One navigation style shared by Echoes and the Gatherings overview. */
.echoes-top,.contents .gatherings-header{height:80px;padding:0 4%}
.echoes-top button,.contents .gatherings-header .gatherings-label,.contents .gatherings-header .contents-brand{font:600 14px var(--sans);letter-spacing:-.025em;padding:12px 0;text-transform:none;color:#000}
.garden-dialog .contents .gatherings-header{padding-right:120px}
@media(max-width:800px){
 .echoes-top,.contents .gatherings-header{height:70px;padding:0 6%}
 .echoes-top button,.contents .gatherings-header .gatherings-label,.contents .gatherings-header .contents-brand{font-size:12px}
 .garden-dialog .contents .gatherings-header{padding-right:86px}
}

/* Continuous chapter reader, retaining the original quiet photo-and-text layout. */
.echoes-reading-nav{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:30px;padding:0 4%;height:66px;background:var(--paper);z-index:4}
.echoes-reading-chapter{font-size:13px;font-weight:600;white-space:nowrap}
.echoes-reading-nav nav{display:flex;gap:20px;margin-left:auto}
.echoes-reading-nav button{font-size:12px;padding:10px 0;color:#77786f;white-space:nowrap}
.echoes-reading-nav button[aria-current]{color:#111;text-decoration:underline;text-underline-offset:6px}
.echoes-reading-nav #echoes-back{color:#111;margin:0;font-size:13px;font-weight:600;text-align:left}
.echoes-reading-nav #echoes-back:hover{text-decoration:none}
.echoes-continuous-article{padding-bottom:110px;scroll-margin-top:0}
.echoes-continuous-article:last-of-type{padding-bottom:0;min-height:calc(100svh - 200px)}
.echoes-mobile-photo{display:none}
.echoes-photo-crossfade{pointer-events:none}
.echoes-text-scroll{scroll-behavior:auto;overflow-anchor:none}
@media(max-width:800px){
 .echoes-reading-nav{position:sticky;top:0;height:auto;min-height:92px;display:grid;grid-template-columns:1fr auto;gap:6px;padding:12px 6%;}
 .echoes-reading-nav nav{grid-column:1/-1;grid-row:2;justify-content:space-between;gap:12px;margin:0;overflow-x:auto}
 .echoes-reading-nav #echoes-back{grid-column:1/-1;grid-row:1;margin:0}
 .echoes-reading-nav button{font-size:11px;padding:5px 0}
 .echoes-detail .echoes-image-side{display:none}
 .echoes-mobile-photo{display:block;width:100%;height:auto;margin:18px 0 28px}
 .echoes-continuous-article{padding-bottom:65px}
 .echoes-text-scroll{padding-top:0}
}

/* Native reading scroll; explicit chapter navigation handles title alignment. */
.echoes-text-scroll{scroll-snap-type:none}
.echoes-continuous-article{scroll-snap-align:none}

/* Shared chapter typography; quieter long-form reading. */
#echoes .echoes-heading h1{font-family:'GT America','Helvetica Neue',Arial,sans-serif;font-size:clamp(30px,3vw,44px);font-weight:900;line-height:1.15;letter-spacing:-.025em}
#echoes .echoes-heading p:not(.echoes-chapter-description){font-family:Bradford,Georgia,serif;font-size:13px;letter-spacing:0}
.echoes-heading .echoes-chapter-description,.echoes-summary p{font-family:Bradford,Georgia,serif;font-size:19px;line-height:1.6;letter-spacing:0;font-weight:400}
.echoes-summary h2{font-family:Bradford,Georgia,serif;font-size:24px;font-weight:400;line-height:1.3;letter-spacing:0}
.echoes-summary h2 button{font-family:inherit;font-size:inherit;font-weight:inherit}
.echoes-article h1{font-family:Bradford,Georgia,serif;font-size:30px;font-weight:400;line-height:1.3;letter-spacing:0;text-align:left;border:0;padding:0;margin-bottom:32px}
.echoes-prose p{font-family:Bradford,Georgia,serif;font-size:20px;font-weight:400;line-height:1.65;letter-spacing:0;margin-bottom:28px}
.echoes-prose strong{font-weight:700}
@media(min-width:801px){.echoes-article{max-width:620px}}
@media(max-width:800px){
 #echoes .echoes-heading h1{font-size:34px}
 .echoes-heading .echoes-chapter-description,.echoes-summary p{font-size:18px}
 .echoes-summary h2{font-size:23px}
 .echoes-article h1{font-size:27px;margin-bottom:26px}
 .echoes-prose p{font-size:19px;line-height:1.6;margin-bottom:26px}
}
