/* Reading panels share the paper, ink and serif type of the botanical scene. */
#reading-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(650px, 52vw);
  min-width: 550px;
  max-width: none;
  height: var(--visible-viewport-height, 100svh);
  max-height: var(--visible-viewport-height, 100svh);
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  border: 0;
  border-left: 1px solid #b9a58780;
  border-radius: 0;
  background: linear-gradient(135deg, #fbf6eae8, #f5ecdc), #f7f0e2;
  color: #514637;
  box-shadow: -16px 0 80px #4437261c;
}
#reading-panel::backdrop { background: #4035222b; backdrop-filter: blur(1px); }
#reading-panel[open] { animation: open-reading-panel .32s ease both; }
@keyframes open-reading-panel { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
.reading-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 72px;
  padding: max(12px, env(safe-area-inset-top)) 26px 12px;
  border-bottom: 1px solid #c5b4944d;
  background: #f8f2e6f5;
}
.reading-toolbar button { min-height: 44px; letter-spacing: 0; }
.tree-return { padding: 0 8px; font: italic 14px/1.4 Georgia, serif; color: #725d42; }
.tree-return span { margin-right: 6px; font-style: normal; }
.panel-close, .media-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; font: 28px/1 Georgia, serif; }
#reading-content { width: 100%; max-width: 660px; margin: auto; padding: 34px 52px 48px; }
#reading-panel .reading-heading { position: static; display: block; width: auto; max-width: none; margin: 0 0 28px; }
#reading-title { font: normal 42px/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -1.1px; margin: 0; color: #4d3c2c; outline: none; }
#reading-panel p { font: 17px/1.8 Georgia, 'Times New Roman', serif; color: #665947; margin: 0 0 23px; }
#reading-panel .story-question { font: italic 19px/1.5 Georgia, serif; color: #8b7155; margin: 0 0 12px; }
#reading-panel .story-subtitle { font-size: 23px; line-height: 1.35; color: #655039; margin: -8px 0 24px; }
#reading-panel .opening-line { font-size: 20px; line-height: 1.55; color: #594631; }
.about-portrait { float: right; width: 39%; height: auto; margin: 1px 0 20px 27px; border-radius: 2px; box-shadow: 0 2px 18px #5b44200e; }
.about-flow::after { content: ''; display: table; clear: both; }
#reading-panel .root-statement { clear: both; margin: 30px 0 8px; padding: 0 0 0 18px; border-left: 2px solid #a68b665e; font-size: 24px; line-height: 1.45; color: #6c4b32; }
.root-statement strong { font-weight: normal; }
.story-body h3 { font: normal 25px/1.35 Georgia, serif; color: #634a32; margin: 32px 0 14px; }
.story-figure { margin: 31px 0 34px; }
.image-button { position: relative; display: block; width: 100%; padding: 0; border: 1px solid #a7906b55; border-radius: 3px; overflow: hidden; cursor: zoom-in; }
.image-button img { display: block; width: 100%; height: auto; }
.image-action { position: static; display: block; padding: 7px 10px; text-align: right; background: #faf5e8; border-top: 1px solid #a8927144; font: 11px/1.3 Arial, sans-serif; letter-spacing: .2px; color: #6a4e32; }
.story-figure figcaption { font: italic 13px/1.6 Georgia, serif; color: #8b7963; margin-top: 10px; }
.story-figure.compact { width: min(100%, 360px); margin-left: auto; margin-right: auto; }
.story-figure.portrait, .story-figure.certificate { width: min(100%, 340px); margin-left: auto; margin-right: auto; }
.story-figure.art .image-button { background: #fff; }
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; margin: 30px 0; }
.media-grid .story-figure { margin: 0; min-width: 0; }
.contribution-steps { list-style: none; padding: 0; margin: 24px 0; border-left: 1px solid #aa93715c; }
.contribution-steps li { font: italic 17px/1.6 Georgia, serif; color: #82674a; padding: 7px 0 7px 18px; }
#reading-panel p.story-note { font-size: 14px; line-height: 1.75; font-style: italic; color: #8b7963; padding-top: 10px; }
.ground-stories-heading { font: italic 23px/1.45 Georgia, serif; color: #8d7356; margin: 35px 0 21px; }
.project-link-row { min-width: 0; }
.project-domain { max-width: 100%; overflow-wrap: anywhere; }
.project-link-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 18px; row-gap: 6px; margin: 27px 0 5px; }
.project-domain { font: 11px/1.6 Arial, sans-serif; letter-spacing: .4px; color: #8b7963; }
.panel-link, .contact-link, .next-story { color: #775039; text-decoration: none; }
.panel-link { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; font: 15px/1.5 Georgia, serif; letter-spacing: 0; text-decoration: underline; text-decoration-color: #a58a6066; text-underline-offset: 6px; }
.main-link { font-style: italic; font-size: 18px; }
.panel-link:hover, .contact-link:hover, .next-story:hover, .story-index-link:hover { color: #80546a; }
#reading-panel .reading-footer { position: static; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 12px 25px; margin-top: 35px; padding-top: 24px; border-top: 1px solid #b9a78755; font: inherit; }
#reading-panel .about-footer { flex-direction: column; gap: 20px; }
.contact-link { display: flex; flex-direction: column; gap: 6px; font: 14px/1.4 Georgia, serif; min-height: 44px; }
.email-address { font: 12px/1.6 Arial, sans-serif; letter-spacing: .1px; color: #8a7358; }
.next-story { width: 100%; display: flex; flex-direction: column; gap: 7px; padding: 0 0 16px; }
.next-label { font: 10px/1.5 Arial, sans-serif; text-transform: uppercase; letter-spacing: 1.5px; color: #9b8569; }
.next-title { font: 23px/1.25 Georgia, serif; }
.next-question { font: italic 15px/1.5 Georgia, serif; color: #8b7559; }
#reading-panel .list-introduction { margin-bottom: 28px; color: #8b755a; }
.story-index { list-style: none; padding: 0; margin: 0; }
.story-index li { border-top: 1px solid #bca98a3b; }
.story-index-link { display: grid; grid-template-columns: 24px 1fr 18px; gap: 13px; align-items: baseline; min-height: 62px; padding: 17px 0; color: #66513b; text-decoration: none; }
.story-index-number { font: 10px/1.6 Arial, sans-serif; color: #9a8362; }
.story-index-copy { display: flex; flex-direction: column; gap: 7px; }
.story-index-title { font: 20px/1.3 Georgia, serif; }
.story-index-question { font: italic 14px/1.5 Georgia, serif; color: #9b8569; }
.story-index-arrow { font: 15px/1 Georgia, serif; color: #a18c6e; }
.featured-story .story-index-title { color: #734e37; }
#media-lightbox { width: min(1240px, 96vw); max-width: none; max-height: calc(var(--visible-viewport-height, 100dvh) - 24px); padding: 0; margin: auto; border-radius: 3px; background: #f8f2e5; overflow: hidden; }
#media-lightbox::backdrop { background: #392f26a3; backdrop-filter: blur(3px); }
.media-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: #f8f2e5; border-bottom: 1px solid #bca98a44; }
#media-title { flex: 1; min-width: 0; margin: 0; font: 19px/1.3 Georgia, serif; color: #68513b; }
.media-close { position: static; flex: 0 0 44px; }
#media-zoom { min-height: 44px; padding: 0 8px; font: 13px/1.4 Georgia, serif; letter-spacing: 0; text-decoration: underline; text-decoration-color: #a58a6066; text-underline-offset: 4px; }
#media-viewport { overflow: auto; max-height: calc(var(--visible-viewport-height, 100dvh) - 142px); padding: 16px; overscroll-behavior: contain; }
#expanded-media { display: block; width: 100%; height: auto; max-height: calc(var(--visible-viewport-height, 100dvh) - 180px); object-fit: contain; }
#media-lightbox.is-zoomed #expanded-media { width: var(--media-natural-width); max-width: none; max-height: none; height: auto; }
#media-pan-hint { margin: 0; padding: 9px 16px; font: italic 12px/1.4 Georgia, serif; color: #8b7963; border-top: 1px solid #bca98a44; }
@media(max-width:1023px) {
  #reading-panel { inset: 12px; width: calc(100% - 24px); min-width: 0; height: calc(var(--visible-viewport-height, 100svh) - 24px); max-height: calc(var(--visible-viewport-height, 100svh) - 24px); border: 1px solid #b9a58780; border-radius: 5px; }
  #reading-content { max-width: 650px; }
}
@media(max-width:600px) {
  #reading-panel { inset: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); width: calc(100% - 16px); height: calc(var(--visible-viewport-height, 100svh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))); max-height: calc(var(--visible-viewport-height, 100svh) - 16px); }
  .reading-toolbar { min-height: 64px; padding: 8px 12px; gap: 8px; }
  .tree-return { font-size: 13px; }
  #reading-content { padding: 26px 23px 36px; }
  #reading-title { font-size: 36px; letter-spacing: -.8px; }
  #reading-panel .reading-heading { margin-bottom: 26px; }
  #reading-panel p { font-size: 16px; line-height: 1.8; margin-bottom: 22px; }
  #reading-panel .opening-line { font-size: 19px; line-height: 1.6; }
  #reading-panel .story-question { font-size: 17px; margin-bottom: 12px; }
  #reading-panel .story-subtitle { font-size: 21px; }
  .about-portrait { float: none; display: block; width: min(200px, 70%); margin: 0 auto 26px; }
  #reading-panel .root-statement { font-size: 22px; padding-left: 15px; margin-top: 27px; }
  .story-body h3 { font-size: 23px; }
  .story-figure { margin: 26px 0; }
  .story-figure figcaption { font-size: 12px; }
  .story-index-link { grid-template-columns: 20px 1fr 16px; gap: 10px; }
  .story-index-title { font-size: 19px; }
  .story-index-question { font-size: 13px; }
  .media-grid { display: block; }
  .media-grid .story-figure + .story-figure { margin-top: 27px; }
  .media-toolbar { gap: 5px; padding: 7px; }
  #media-title { font-size: 16px; }
  #media-viewport { padding: 8px; }
}

.opened-mark{font:10px Arial;letter-spacing:.06em;margin-left:10px;color:#806d56;white-space:nowrap}