/* The Observatory and Margin share one page, with only essential interface copy. */
:root { --bar-height: 0px; }
html { scroll-padding-top: 24px; }
body { background: #080808; }
.combined-experience { min-height: 100svh; }
.combined-experience .site-header { height: 102px; }
.combined-experience .header-actions { gap: 34px; }
.combined-experience .observatory-hero {
  min-height: calc(100svh - 102px);
  padding-top: 50px;
  padding-bottom: 60px;
}
.combined-experience .observatory-copy { padding-bottom: 0; }
.combined-experience .observatory-copy h1 { margin-top: 0; }
.combined-experience .observatory-read { margin-top: 45px; }
.combined-experience .globe-figure { margin-top: 0; }
.globe-controls {
  display: flex;
  justify-content: flex-end;
  padding: 0 36px;
  margin-top: -6px;
  color: #939393;
}
.globe-controls .globe-pause { font-size: 9px; min-height: 44px; }
.globe-options {
  display: flex;
  align-items: center;
  gap: 25px;
  margin: 0 36px;
  border-top: 1px solid #292929;
}
.globe-options button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border-top: 1px solid transparent;
  margin-top: -1px;
  font: 400 11px var(--sans);
  color: #888;
  transition: color .2s, border-color .2s;
}
.globe-options button span { font: 400 8px var(--mono); color: #888; }
.globe-options button[aria-pressed=true] { color: #eee; border-color: #bbb; }
.globe-options button:hover { color: #eee; }
.globe-options .globe-original { margin-left: auto; font-size: 19px; min-width: 35px; justify-content: center; }
.globe-gesture-hint { margin-right: auto; font: 400 8px var(--mono); color: #838383; }
.globe-controls { align-items: center; justify-content: space-between; gap: 15px; }
#globe { touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
#globe[data-effect]:not([data-effect=original]) { cursor: crosshair; }
#globe[data-held=true] { cursor: grabbing; }
#globe:focus-visible { border-radius: 50%; outline-color: #aaa; outline-offset: -2px; }
@media (max-width: 850px) {
  .globe-options { gap: 17px; margin: 0 20px; }
  .globe-options button { font-size: 10px; gap: 6px; }
  .globe-controls { padding: 0 20px; }
}
@media (max-width: 600px) {
  .globe-options { gap: 24px; margin: 0 22px; }
  .globe-controls { padding: 0 22px; margin-top: 0; }
  .globe-gesture-hint { font-size: 7px; }
}
@media (max-width: 360px) {
  .globe-options { gap: 15px; }
  .globe-options button { font-size: 9px; }
  .globe-options button span { font-size: 7px; }
}
#writings {
  --paper: #101010;
  --line: #303030;
  min-height: 0;
  border-top: 1px solid #2d2d2d;
  scroll-margin-top: -24px;
}
.reader-toolbar {
  max-width: 1600px;
  margin: auto;
  padding: 24px 64px 0;
  display: flex;
  justify-content: space-between;
  gap: 30px;
  color: #aaa;
}
.reader-toolbar .text-button { font-size: 11px; }
.combined-experience .manuscript-grid { padding-top: 34px; }
.combined-experience .sidebar-volume { margin-top: 0; }
.manuscript-title {
  font: 400 clamp(58px, 7vw, 102px)/.95 var(--serif);
  letter-spacing: -.025em;
  margin: 29px 0 34px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.manuscript-title em { color: #c0c0c0; }
.manuscript-title:focus { outline: none; }
.combined-experience .marginalia { padding-top: 268px; }
.combined-experience .margin-note {
  width: 100%;
  padding-bottom: 5px;
  text-align: left;
  align-items: flex-start;
  color: #939393;
}
.combined-experience .margin-note:first-child { margin-top: 0; }
.combined-experience .margin-note:hover { color: #eee; }
.letter-paragraph[tabindex]:focus { outline: none; }
.letter-paragraph[tabindex]:focus-visible { outline: 1px solid #777; outline-offset: 10px; }
.combined-experience .is-focused .manuscript-title { font-size: 104px; }
.combined-experience .site-footer { background: #080808; }
.combined-experience .site-footer .text-button { color: #aaa; }
.index-filters button { min-width: 28px; }
.index-dialog h2 { margin-top: 35px; }
.skip-link { top: 16px; }

@media (max-width: 1150px) {
  .manuscript-title { font-size: 85px; }
  .reader-toolbar { padding-left: 38px; padding-right: 38px; }
}
@media (max-width: 850px) {
  .combined-experience .site-header { height: 91px; }
  .combined-experience .observatory-hero { min-height: calc(100svh - 91px); }
  .combined-experience .header-actions { gap: 24px; }
  .combined-experience .globe-figure { margin-top: 0; }
  .manuscript-title { font-size: 71px; }
  .reader-toolbar { padding-left: 28px; padding-right: 28px; }
  .combined-experience .is-focused .manuscript-title { font-size: 88px; }
}
@media (max-width: 600px) {
  .combined-experience .site-header { height: 85px; }
  .combined-experience .header-actions { gap: 19px; }
  .combined-experience .observatory-hero { min-height: 0; padding: 43px 24px 35px; }
  .combined-experience .observatory-read { margin-top: 25px; }
  .combined-experience .globe-figure { margin: 19px -7px 0; }
  .globe-controls { padding: 0 22px; margin-top: -12px; }
  .globe-controls .globe-pause { font-size: 8px; }
  .reader-toolbar { padding: 17px 24px 0; }
  .reader-toolbar .text-button { font-size: 10px; }
  .combined-experience .manuscript-grid { padding-top: 12px; }
  .manuscript-title { font-size: 76px; margin: 25px 0 28px; }
  .combined-experience .is-focused .manuscript-grid { padding-top: 24px; }
  .combined-experience .is-focused .manuscript-title { font-size: 76px; }
  .combined-experience .site-footer { margin: 0 24px; }
}
@media (max-width: 360px) {
  .combined-experience .header-actions { gap: 14px; }
  .combined-experience .brand { font-size: 18px; }
  .manuscript-title, .combined-experience .is-focused .manuscript-title { font-size: 65px; }
  .combined-experience .observatory-copy h1 { font-size: 60px; }
}
@media (min-width: 851px) and (max-height: 950px) {
  .combined-experience .observatory-hero { padding-top: 24px; padding-bottom: 24px; }
  .combined-experience .globe-figure {
    width: 100%;
    max-width: min(100%, calc(100svh - 250px));
    justify-self: center;
  }
}
/* Bloom fills the edge of the scene while the reading and control layout stays fixed. */
.combined-experience .observatory-hero[data-globe=bloom] {
  max-width: none;
  overflow: clip;
  isolation: isolate;
}
.observatory-hero[data-globe=bloom] .observatory-copy { z-index: 2; }
.observatory-hero[data-globe=bloom] .globe-stage { z-index: 0; }
.observatory-hero[data-globe=bloom] #globe {
  position: absolute;
  width: 180%;
  height: 180%;
  max-width: none;
  left: -22%;
  top: -40%;
}
.observatory-hero[data-globe=bloom]::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 210px;
  background: linear-gradient(transparent, #080808 83%);
  pointer-events: none;
  z-index: 1;
}
.observatory-hero[data-globe=bloom] .globe-options,
.observatory-hero[data-globe=bloom] .globe-controls {
  position: relative;
  z-index: 2;
}
@media (max-width: 850px) {
  .observatory-hero[data-globe=bloom] #globe { width: 160%; height: 160%; left: -12%; top: -30%; }
}
@media (max-width: 600px) {
  .observatory-hero[data-globe=bloom] #globe { width: 150%; height: 150%; left: -6%; top: -25%; }
  .observatory-hero[data-globe=bloom]::after { height: 150px; }
}
@media print {
  .reader-toolbar, .combined-experience .marginalia { display: none; }
  #writings { border: 0; }
  .manuscript-title { font-size: 40pt; color: black; }
  .manuscript-title em, .manuscript-body .signature-name { color: black; }
}