/* Keep the original Selected panel and type scale. */
.essay-sample .index-project { --image-cap: 480px; }
.essay-sample .index-media img { height: calc(var(--image-height) * .85); border-radius: 4px; }
.essay-sample .story-panel-copy:focus { outline: none; }
html:has(#essay-reader[open]) { overflow: hidden; }
.essay-sample .panel-essay p { font: 400 16px/24px 'Geist', sans-serif; letter-spacing: -.04em; }
/* One quiet callout; all prose keeps the same size, weight and face. */
.essay-sample .essay-pullquote { margin: 32px 0; padding-left: 20px; border-left: 1px solid #aaa; }
.essay-annotation { position: relative; white-space: nowrap; }
.essay-annotation svg { position: absolute; left: 0; bottom: -5px; width: 100%; height: 9px; overflow: visible; pointer-events: none; }
.essay-annotation path { fill: none; stroke: #a7352b; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms ease; }
.essay-annotation.is-visible path { stroke-dashoffset: 0; }
@media(prefers-reduced-motion: reduce) { .essay-annotation path { transition: none; } }

.essay-sample .index-media, .essay-sample .index-media img { cursor: pointer; }




/* On this essay, reserve frosted glass for the mobile navigation. */
.essay-sample .story-panel::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
.essay-sample .story-panel-header { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
.essay-sample .story-panel-header::after { background: linear-gradient(#fff, transparent); }



/* Reuse the site's signature draw and staggered navigation entrance. */
.essay-sample.nav-entering .nav-label { animation-delay: calc(var(--nav-order) * 70ms); }
@media(prefers-reduced-motion: reduce) {
 .essay-sample.nav-entering .nav-label { animation: none; }
}

/* A photograph tucked behind the centered reading sheet. */
.essay-sample .story-panel::backdrop { background: transparent; }
.essay-sample .index-composition { transition: transform 750ms cubic-bezier(.22,1,.36,1); }
.essay-sample .index-media img { transition: box-shadow 650ms ease; }
.essay-reading .index-media img { box-shadow: -8px 12px 32px #00000012; }
.essay-reading .index-caption { visibility: hidden; }
@media (min-width: 601px) {
 .essay-sample .story-panel { width: min(520px, 60vw); left: 0; right: 0; }
 .essay-reading .index-composition { transform: translateX(calc(-1 * min(260px, 30vw) - 24px)) scale(.78); }
}
@media (max-width: 600px) {
 .essay-sample .story-panel { top: var(--mobile-panel-top, calc(50svh - 84px)); bottom: 12px; height: calc(100dvh - var(--mobile-panel-top, calc(50svh - 84px)) - 12px); }
 .essay-reading .index-composition { transform: translateY(-64px); }
}
@media (prefers-reduced-motion: reduce) {
 .essay-sample .index-composition, .essay-sample .index-media img { transition: none; }
}

/* Keep the close icon free of decorative focus borders. */
.essay-sample .story-panel-close,
.essay-sample .story-panel-close:focus,
.essay-sample .story-panel-close:focus-visible { text-decoration: none; }
.essay-sample .story-panel-close:focus-visible { outline: none; box-shadow: none; }
.essay-sample .story-panel { box-shadow: 0 8px 32px rgba(0, 0, 0, .055); }

@media (max-width: 600px) {
  .essay-sample .story-panel-close:focus,
  .essay-sample .story-panel-close:focus-visible { outline: none; box-shadow: none; }
}


/* Hide the piece only while its image is decoding for the entrance. */
.piece-reveal-pending .index-media, .piece-reveal-pending .index-caption { opacity: 0; }

/* Match the caption beneath the photograph. */
.essay-sample .story-panel-header h2 { font-size: 12px; }