.note-page{--yellow:#ffc900;background:var(--paper)}
.note-head{padding:9.5rem 1.4rem 3rem;border-bottom:1px solid}
.note-head>.page-breadcrumbs{margin-bottom:4rem}
.note-head .breadcrumbs{margin:0 0 4rem;font:.55rem var(--mono);text-transform:uppercase}.note-head .breadcrumbs a{color:#65665f}
.note-head__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,.34fr);gap:clamp(4rem,9vw,10rem);align-items:end}
.note-kicker{margin:0 0 1.5rem;color:var(--orange);font:500 .58rem var(--mono);text-transform:uppercase}
.note-head h1{max-width:11ch;margin:0;font-size:clamp(4.2rem,7.4vw,7.8rem);line-height:.91;letter-spacing:-.078em}
.note-head__aside{padding-top:1rem;border-top:1px solid}
.note-head__aside p{margin:0;font:400 .95rem/1.5 var(--sans)}
.note-head__meta{margin-top:4rem;padding-top:1rem;display:flex;justify-content:space-between;border-top:1px solid;font:.53rem var(--mono);text-transform:uppercase}

.notes-document{display:grid;grid-template-columns:280px minmax(0,1fr);width:100%;position:relative}
.notes-document::after{content:'';position:absolute;z-index:1;top:0;bottom:0;left:280px;width:1px;background:var(--ink);pointer-events:none}
.notes-sidebar{padding:3rem 1.4rem}
.notes-sidebar__inner{position:sticky;top:6rem;max-height:calc(100svh - 7rem);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.notes-sidebar__inner::-webkit-scrollbar{display:none}
.notes-sidebar__eyebrow{margin:0 0 .8rem;color:var(--orange);font:500 .53rem var(--mono);text-transform:uppercase}
.notes-sidebar h2{max-width:8ch;margin:0 0 2.5rem;font-size:2.8rem;line-height:.95;letter-spacing:-.06em}
.notes-sidebar nav{border-top:1px solid}
.note-link{display:grid;grid-template-columns:1.5rem minmax(0,1fr);gap:.7rem;padding:1.2rem .85rem;border-bottom:1px solid;transition:background-color .2s,color .2s}
.note-link:hover{color:var(--orange)}
.note-link[aria-current="page"]{color:var(--ink)}
.note-link>span{padding-top:.15rem;font:.5rem var(--mono)}
.note-link strong{font-size:.86rem;line-height:1.35;letter-spacing:-.02em}
.notes-sidebar__back{display:flex;justify-content:space-between;margin-top:2rem;padding-bottom:.5rem;border-bottom:1px solid;font:500 .54rem var(--mono);text-transform:uppercase}
.notes-nav-fab{display:none}
.notes-nav-sheet{width:100%;max-width:none;margin:auto 0 0;padding:0;color:var(--ink);background:var(--paper);border:0;border-top:1px solid;border-radius:1.5rem 1.5rem 0 0}
.notes-nav-sheet::backdrop{background:rgba(17,18,15,.68);backdrop-filter:blur(3px)}
.notes-nav-sheet__handle{width:3rem;height:3px;margin:.8rem auto 0;background:rgba(17,18,15,.3);border-radius:999px}
.notes-nav-sheet__header{padding:1.2rem;display:flex;align-items:start;justify-content:space-between;gap:2rem;border-bottom:1px solid}
.notes-nav-sheet__header span{font:500 .52rem var(--mono);text-transform:uppercase}
.notes-nav-sheet__header h2{margin:.45rem 0 0;font-size:clamp(2rem,8vw,3rem);line-height:1;letter-spacing:-.055em}
.notes-nav-sheet__header button{padding:.65rem .8rem;background:var(--cream);border:1px solid;font:500 .54rem var(--mono);text-transform:uppercase;cursor:pointer}
.notes-nav-sheet nav{padding:0 1.2rem calc(1.2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.notes-nav-sheet nav a{min-height:5.5rem;padding:1rem .8rem;display:grid;grid-template-columns:1.5rem minmax(0,1fr) auto;gap:.75rem;align-items:center;border-bottom:1px solid;transition:color .35s var(--ease),background-color .35s var(--ease)}
.notes-nav-sheet nav a[aria-current="page"]{background:var(--yellow)}
.notes-nav-sheet nav a:hover,.notes-nav-sheet nav a:focus-visible{color:var(--paper);background:var(--ink)}
.notes-nav-sheet nav a>span{font:.52rem var(--mono)}
.notes-nav-sheet nav a strong{font-size:clamp(1.05rem,4.6vw,1.35rem);line-height:1.2}
.notes-nav-sheet nav a i{font-size:1.25rem;font-style:normal}
.notes-sheet-open{overflow:hidden}

@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    .notes-nav-sheet[open] { animation: notes-sheet-enter 320ms var(--ease) both; }
}

@keyframes notes-sheet-enter {
    from { opacity: .7; transform: translate3d(0, 1.25rem, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.note-article{min-width:0;width:100%;max-width:1260px;margin-inline:auto;padding:clamp(3rem,6vw,6rem) clamp(2rem,6vw,7rem) clamp(6rem,10vw,10rem);font-family:var(--sans);line-height:1.5}
.note-cover{margin:0;border:1px solid;background:var(--cream)}
.note-cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.note-cover figcaption,.article-image figcaption{display:flex;justify-content:space-between;gap:2rem;padding:.7rem .8rem;border-top:1px solid;font:.5rem var(--mono);text-transform:uppercase}
.article-copy{max-width:760px;margin:clamp(4rem,7vw,7rem) auto 0}
.article-copy p.lead{font-size:clamp(1.35rem,2vw,1.75rem);line-height:1.5;letter-spacing:-.02em}
.article-copy .lead::first-letter{float:left;margin:.02em .12em 0 0;color:var(--orange);font-size:5.2em;font-weight:700;line-height:.78}
.article-copy p{margin:0;font:400 clamp(1rem,1.15vw,1.08rem)/1.5 var(--sans)}
.article-copy p+p{margin-top:1.8rem}
.article-copy .note-summary-label{margin:0 0 1.5rem;color:var(--orange);font:500 .55rem/1.5 var(--mono);text-transform:uppercase}
.article-copy .note-summary-label + p{margin-top:0}
.note-original{width:max-content;max-width:100%;margin-top:2rem;padding:.8rem 0;display:flex;gap:2rem;justify-content:space-between;border-bottom:1px solid;font:500 .6rem var(--mono);text-transform:uppercase}
.note-original:hover,.note-original:focus-visible{color:var(--orange)}
.article-image{max-width:980px;margin:clamp(4rem,7vw,7rem) auto;border:1px solid;background:var(--cream)}
.article-image img{width:100%;max-height:680px;object-fit:cover}
.article-image--pair{max-width:none;display:grid;grid-template-columns:1fr 1fr;border:0;background:transparent;gap:1.2rem}
.article-image--pair figure{margin:0;border:1px solid;background:var(--cream)}
.article-image--pair img{aspect-ratio:4/5}
.article-quote{max-width:900px;margin:clamp(4rem,7vw,7rem) auto;padding:clamp(2rem,5vw,5rem);color:var(--paper);background:var(--ink);border:1px solid var(--ink)}
.article-quote blockquote{max-width:14ch;margin:0;font-size:clamp(2.8rem,5.2vw,5.5rem);font-weight:700;line-height:.95;letter-spacing:-.065em}
.article-quote cite{display:block;margin-top:3rem;color:var(--yellow);font:normal .57rem var(--mono);text-transform:uppercase}
.poem-fragment{max-width:760px;margin:clamp(4rem,7vw,7rem) auto;padding:2rem 0;border-top:1px solid;border-bottom:1px solid;text-align:center}
.poem-fragment p{margin:0;font-size:clamp(2rem,4vw,4rem);font-weight:700;line-height:1.15;letter-spacing:-.05em}
.poem-fragment small{display:block;margin-top:1.5rem;font:.55rem var(--mono);text-transform:uppercase}
.article-signoff{max-width:760px;margin:5rem auto 0;padding-top:1.5rem;display:flex;justify-content:space-between;border-top:1px solid}
.article-signoff strong{font-size:1.2rem}.article-signoff span{font:.53rem var(--mono);text-transform:uppercase}
.note-next{margin-top:clamp(5rem,8vw,8rem);padding-top:1.5rem;display:grid;grid-template-columns:8rem 1fr auto;gap:2rem;align-items:start;border-top:1px solid}
.note-next>span{font:.53rem var(--mono);text-transform:uppercase}
.note-next strong{max-width:13ch;font-size:clamp(2rem,3.3vw,3.5rem);line-height:1;letter-spacing:-.055em}
.note-next i{font-size:2rem;font-style:normal}
.note-next:hover strong{color:var(--orange)}
.notes-continue{width:calc(min(100vw,1920px) - 280px);margin:clamp(1rem,2vw,2rem) 0 calc(-1 * clamp(6rem,10vw,10rem));padding:clamp(4rem,8vw,8rem) clamp(2rem,6vw,7rem);position:relative;left:calc(50% - min(50vw,960px) + 140px);color:var(--ink);background:var(--paper)}
.note-page--essay .notes-continue{margin-bottom:-6rem}
.notes-continue__inner{max-width:none;margin:auto}
.notes-continue__heading{display:grid;grid-template-columns:minmax(0,1fr) minmax(12rem,.45fr);gap:1.5rem;margin-bottom:3rem}
.notes-continue__heading>span{grid-column:1/-1;color:var(--orange);font:600 .55rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.notes-continue__heading h2{margin:0;font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.07em}
.notes-continue__heading p{max-width:24ch;align-self:end;margin:0;font:400 1rem/1.5 var(--sans)}
.notes-continue__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.notes-continue__card{min-height:16rem;padding:1.4rem;display:flex;flex-direction:column;color:inherit;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);transition:color .25s,background .25s}
.notes-continue__card>span{font:500 .53rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.notes-continue__card strong{max-width:11ch;margin:auto 0;font-size:clamp(1.8rem,3vw,3.15rem);line-height:.95;letter-spacing:-.055em}
.notes-continue__card i{align-self:flex-end;font-size:1.7rem;font-style:normal}
.notes-continue__card:hover,.notes-continue__card:focus-visible{color:var(--ink);background:var(--yellow)}
.notes-continue__card[aria-current="page"]{background:var(--yellow)}

/* Dedicated founder essays share this editorial treatment. */
.note-page--essay .notes-document{padding-top:calc(var(--site-header-height) + clamp(2.5rem,5vw,5rem))}
.note-page--essay .note-article{width:min(100%,830px);margin-inline:auto;padding:0 2.5rem 6rem}
.note-page--essay .note-cover{margin:0 0 2.5rem;padding:.7rem;border:1px solid var(--ink);background:var(--cream);box-shadow:.55rem .55rem 0 rgba(16,16,14,.16)}
.note-page--essay .note-cover img{height:auto;aspect-ratio:auto;object-fit:initial}
.note-page--essay .note-cover__placeholder{aspect-ratio:16/9;background:var(--paper)}
.note-page--essay .article-header{margin:0 0 3.5rem;padding:0 0 2.25rem;border-bottom:2px solid var(--ink)}
.note-page--essay .note-article>.page-breadcrumbs{margin-bottom:2rem}
.note-page--essay .article-byline{display:block;margin-bottom:.8rem;color:var(--orange);font:600 .58rem var(--mono);letter-spacing:.16em;text-transform:uppercase}
.note-page--essay .article-header h1{margin:0;color:var(--ink);font:700 clamp(3rem,6.2vw,5.8rem)/.98 var(--sans);letter-spacing:-.055em}
.note-page--essay .article-copy{max-width:750px;margin:0 auto}
.note-page--essay .article-copy p{margin:0 0 1.65em;font:400 1rem/1.55 var(--sans)}
.note-page--essay .article-copy h3{margin:3.5rem 0 1.25rem;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1;letter-spacing:-.045em}
.note-page--essay .article-copy a{color:var(--orange);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.note-page--essay .article-copy ol{margin:0 0 1.65rem;padding-left:1.4rem;font:400 1rem/1.65 var(--sans)}
.note-page--essay .article-copy li+li{margin-top:.45rem}
.note-page--essay .haiku-block{margin:3rem auto;padding:2rem;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);text-align:center}
.note-page--essay .haiku-block p{margin:0;font-size:1.08rem;line-height:1.6}
.note-page--essay .haiku-block p+p{margin-top:2rem}
.note-page--essay .haiku-block .haiku-translation{color:#65665f;font-style:italic}
.note-page--essay .article-gallery{margin:4rem 0 0}
.note-page--essay .article-gallery-label{display:block;margin-bottom:1rem;font:600 .55rem var(--mono);letter-spacing:.12em;text-transform:uppercase}
.note-page--essay .gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.note-page--essay .gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--ink);background:var(--cream)}
.note-page--essay .article-photo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:4rem}
.note-page--essay .article-photo-grid img{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--ink);background:var(--cream)}
.note-page--essay .article-image{margin:2.75rem 0;padding:.7rem;border:1px solid var(--ink);background:var(--cream);box-shadow:.55rem .55rem 0 rgba(16,16,14,.16);text-align:center}
.note-page--essay .article-image img{width:92%;height:auto;max-height:none;display:inline-block;object-fit:initial}
.note-page--essay .article-image figcaption{width:92%;margin:.65rem auto .05rem;padding:.65rem 0 0;border-top:1px solid var(--ink);color:var(--ink);font:.5rem var(--mono);opacity:.7}
.note-page--essay .article-figure-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin:2.75rem 0}
.note-page--essay .article-figure-duo figure{min-width:0;margin:0;padding:.7rem;border:1px solid var(--ink);background:var(--cream);box-shadow:.4rem .4rem 0 rgba(16,16,14,.16)}
.note-page--essay .article-figure-duo img{width:100%;height:auto;display:block}
.note-page--essay .article-figure-duo figcaption{width:100%;margin:.65rem auto .05rem;padding:.65rem 0 0;border-top:1px solid var(--ink);color:var(--ink);font:500 .5rem var(--mono);opacity:.7;text-transform:uppercase}
.note-page--essay .article-quote{max-width:750px;margin:3rem auto;padding:1.75rem 2.25rem;color:var(--paper);background:var(--ink);border:0;border-left:5px solid var(--yellow);box-shadow:.55rem .55rem 0 var(--yellow)}
.note-page--essay .article-quote blockquote{max-width:none;margin:0;font:600 1rem/1.55 var(--sans);letter-spacing:0}
.note-page--essay .article-quote p{margin:0}
.note-page--essay .article-quote cite{display:block;margin-top:1.25rem;color:var(--yellow);font:normal .55rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.note-page--essay .article-quote--excerpt{position:relative;display:block;margin:3rem auto;padding:1.75rem 2.25rem;color:var(--ink);background:#fffdf0;border:0;border-left:5px solid var(--yellow);box-shadow:none}
.note-page--essay .article-quote--excerpt blockquote{font:600 1rem/1.75 var(--sans)}
.note-page--essay .article-quote--excerpt .blockquote-attribution{display:block;margin-top:1.25rem;color:#888;font:600 .55rem var(--mono);letter-spacing:.1em;text-transform:uppercase}
.note-page--essay .article-divider{display:flex;align-items:center;gap:.9rem;margin:3.25rem 0 2.5rem}
.note-page--essay .article-divider::before,.note-page--essay .article-divider::after{content:'';flex:1;height:1px;background:var(--ink);opacity:.25}
.note-page--essay .article-divider-diamond{width:.5rem;height:.5rem;flex:0 0 auto;background:var(--yellow);transform:rotate(45deg)}
.note-page--essay .article-signature{display:inline-block;padding-top:1.25rem;color:var(--ink);border-top:2px solid var(--yellow);font:700 .65rem var(--mono);letter-spacing:.14em;text-transform:uppercase}
.note-page--essay .selva-line{padding:.85rem 0;color:var(--ink);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font:600 .7rem/1.4 var(--mono)!important;font-style:normal!important;letter-spacing:.12em;text-transform:uppercase}
.note-page--essay .article-cover-2{margin-bottom:3rem}
.note-page--essay .article-cover-2 img,.note-page--essay .article-cover-2 figcaption{width:88%}

@media(max-width:640px){
    .note-page--essay .notes-document{padding-top:calc(var(--site-header-height) + 2.5rem)}
    .note-page--essay .note-article{width:auto;margin-top:0;padding:0 1.2rem 6rem}
    .note-page--essay .article-figure-duo{grid-template-columns:1fr;gap:1.25rem}
    .note-page--essay .gallery-grid{grid-template-columns:1fr}
    .note-page--essay .article-photo-grid{grid-template-columns:1fr}
    .note-page--essay .article-cover-2 img,.note-page--essay .article-image img,.note-page--essay .article-image figcaption{width:100%}
    .note-page--essay .article-quote{margin-inline:0;padding:1.5rem 1.2rem}
    .note-page--essay .article-quote--excerpt{padding:1.5rem 1.2rem}
}

@media(max-width:1100px){.notes-document{grid-template-columns:220px minmax(0,1fr)}.notes-document::after{left:220px}.note-article{padding-inline:3rem}.note-head__grid{grid-template-columns:1fr .42fr}.notes-sidebar h2{font-size:2.3rem}}
@media(max-width:1100px) and (min-width:641px){.notes-continue{width:calc(100vw - 220px);left:calc(50% - 50vw + 110px)}}
@media(max-width:640px){
    .note-head{padding:7rem 1.2rem 2rem}
    .note-head .breadcrumbs{margin-bottom:3rem}
    .note-head__grid{grid-template-columns:minmax(0,1fr);gap:3rem}
    .note-head h1{font-size:clamp(2.9rem,14vw,5rem)}
    .note-head__meta{margin-top:3rem}
    .note-head__meta span:last-child{display:none}
    .notes-document{display:block}

    .notes-sidebar{display:none}
    .notes-nav-fab{position:fixed;z-index:85;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));min-width:9.5rem;padding:.85rem 1rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;color:var(--paper);background:var(--ink);border:1px solid var(--paper);box-shadow:4px 4px 0 var(--yellow);font:500 .62rem var(--mono);text-transform:uppercase;cursor:pointer}
    .notes-nav-fab strong{width:1.65rem;aspect-ratio:1;display:grid;place-items:center;color:var(--ink);background:var(--yellow);border-radius:50%;font-size:.52rem}
    .notes-nav-sheet[open]{max-height:min(78svh,38rem);overflow:auto}
    .notes-nav-sheet__header{position:sticky;top:0;z-index:2;background:var(--paper)}

    .note-article{padding:2.5rem 1.2rem 6rem}
    .note-cover figcaption,.article-image figcaption{align-items:flex-start;flex-direction:column;gap:.25rem}
    .article-copy{margin-top:4rem}
    .article-copy .lead::first-letter{font-size:4.5em}
    .article-image{margin-block:4rem}
    .article-image--pair{grid-template-columns:1fr;gap:1.5rem}
    .article-quote{margin-inline:-1.2rem;padding:3rem 1.2rem}
    .poem-fragment p{font-size:clamp(2rem,9vw,3rem)}
    .note-next{grid-template-columns:1fr auto}
    .note-next>span{grid-column:1/-1}
    .notes-continue{width:100vw;left:calc(50% - 50vw);margin-bottom:-6rem;padding-inline:1.2rem}
    .notes-document::after{display:none}
    .notes-continue__heading{grid-template-columns:1fr}
    .notes-continue__heading p{max-width:30ch}
    .notes-continue__grid{grid-template-columns:1fr}
    .notes-continue__card{min-height:12rem}
}

/* The page frame takes two pixels from the available content width. */
@media (min-width: 1980px) {
    .notes-continue { width: 1638px; left: calc(50% - 819px); }
}

/* UX spacing and readability refinements. */
.notes-sidebar__back { padding: .8rem; font-size: .7rem; }