/* Contents occupy the top of the notes column, above the first note. */
html[data-essay-scrolling] {
 scroll-behavior:auto !important;
 overflow-anchor:none;
}
body[data-essay-id] .essay-head {
 max-width:min(100%,900px);
}
body[data-essay-id] .essay-jump {
 position:relative;
 width:100%;
 max-width:360px;
 margin:0 auto 36px;
 padding:22px 22px 22px 40px;
 box-sizing:border-box;
 border:1px solid color-mix(in srgb,var(--logic-gold) 45%,transparent);
}
body[data-essay-id] .contents-heading {
 margin:0 0 22px;
 color:var(--ink-50);
 font:400 9px/1.4 var(--font-mono);
 letter-spacing:.1em;
 text-transform:uppercase;
}
body[data-essay-id] .essay-jump-track {
 display:flex;
 flex-direction:column;
 align-items:stretch;
 gap:26px;
 overflow:visible;
 padding:0;
}
body[data-essay-id] .essay-jump-row {
 position:relative;
 display:grid;
 grid-template-columns:max-content minmax(0,1fr) max-content;
 align-items:baseline;
 gap:8px;
 white-space:normal;
}
body[data-essay-id] .essay-jump-row::before {
 content:'';
 position:absolute;
 left:-20px;
 top:7.55px;
 width:5px;
 height:5px;
 border:1px solid var(--border-50);
 border-radius:50%;
 background:var(--bg);
 z-index:1;
 transition:border-color .2s ease,background-color .2s ease;
}
body[data-essay-id] .essay-jump-row:not(:last-child)::after {
 content:'';
 position:absolute;
 left:-17px;
 top:11.05px;
 width:1px;
 height:calc(100% + 26px);
 background:var(--border-25);
}
body[data-essay-id] .essay-jump a:hover::before,
body[data-essay-id] .essay-jump a:focus-visible::before {
 border-color:var(--logic-gold);
 background:var(--logic-gold);
}
body[data-essay-id] .essay-jump-numeral {
 display:block;
 align-self:start;
 line-height:22.1px;
 min-width:0;
 width:auto;
 height:auto;
 transform:none;
}
body[data-essay-id] .essay-jump a .essay-jump-title {
 font-size:17px;
 line-height:1.3;
}
body[data-essay-id] .essay-jump-intro .essay-jump-title {
 grid-column:1 / 3;
 line-height:22px;
}
body[data-essay-id] .essay-jump-time {
 margin:0 0 0 5px;
 font-size:14px;
 line-height:1;
 color:var(--ink-50);
 transform:none;
}
body[data-essay-id] .essay-jump a:focus-visible {
 outline:1px solid var(--border-50);
 outline-offset:5px;
}

body[data-essay-id] .contents-corner {
 position:absolute;
 width:8px;
 height:8px;
 pointer-events:none;
 border-color:var(--logic-gold);
 border-style:solid;
 border-width:0;
}
body[data-essay-id] .contents-corner-tl { top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
body[data-essay-id] .contents-corner-tr { top:-1px; right:-1px; border-top-width:1px; border-right-width:1px; }
body[data-essay-id] .contents-corner-bl { bottom:-1px; left:-1px; border-bottom-width:1px; border-left-width:1px; }
body[data-essay-id] .contents-corner-br { bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }
@media(min-width:1025px) {
 body[data-essay-id] .essay-notes > .essay-jump { margin:0; max-width:none; }
}

/* Keep short titles centered; when space is tight, center the title and charm
   together instead of shrinking the type for an empty matching charm track. */
body[data-essay-id] .essay-title-row { grid-template-columns:58px minmax(0,var(--title-measure,1fr)) 58px; }
body[data-essay-id] .essay-title { font-size:1.95rem; white-space:nowrap; min-width:0; }
body[data-essay-id] .essay-subtitle { width:100%; max-width:560px; }
@media(min-width:701px) {
 body[data-essay-id] .essay-head.title-group-centered .essay-title-row {
  grid-template-columns:minmax(0,var(--title-measure,1fr)) 58px;
 }
 body[data-essay-id] .essay-head.title-group-centered .essay-title-row::after { display:none; }
 body[data-essay-id] .essay-head.title-group-centered .essay-title { grid-column:1; }
 body[data-essay-id] .essay-head.title-group-centered .essay-soundtrack { grid-column:2; }
}
@media(max-width:700px) {
 body[data-essay-id] .essay-title-row { display:block; padding:100px 0 0; }
 body[data-essay-id] .essay-soundtrack { position:absolute; right:10px; top:40px; margin:0; }
 body[data-essay-id] .essay-subtitle { max-width:34em; }
}

@media(min-width:701px) {
 body[data-essay-id] .essay-head { padding-left:40px; padding-right:40px; }
}
/* The cutouts include transparent breathing room, so keep their canvas large
   enough to remain readable at every viewport. */
body[data-essay-id] .essay-soundtrack {
 --soundtrack-size:58px;
 width:var(--soundtrack-size);
 flex-basis:var(--soundtrack-size);
}
body[data-essay-id] .essay-vibe-img {
 width:var(--soundtrack-size);
 height:var(--soundtrack-size);
}
body[data-essay-id] .soundtrack-note {
 /* Aim at the visible shoulder inside the transparent canvas. */
 left:calc(50% - var(--soundtrack-size) / 2 + 17px);
 right:auto;
 bottom:calc(72% - 18px);
}