@font-face{font-family:"Notes Serif";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/notes-serif.woff2") format("woff2")}
.notebook-page{--notes-serif:"Notes Serif",Georgia,"Songti SC","SimSun",serif;background:#fff;letter-spacing:0}
.notebook-page main{max-width:1180px;margin:auto;padding:0 36px 80px;background:#fff}
.notebook-masthead{padding:44px 0 0}
.notebook-name{margin:0 0 14px;color:#315448;font:italic 27px/1.2 Georgia,"Times New Roman",serif}
.notebook-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;padding-bottom:30px}
.notebook-heading h1{margin:0;font:500 76px/1.25 var(--notes-serif);color:#193e32;overflow-wrap:anywhere}
.notebook-intro{max-width:420px;padding-bottom:9px}
.notebook-intro p{margin:0;color:#66706c;font-size:14px;line-height:1.9}
.notebook-intro p:first-child{color:#263b33;font-size:16px;margin-bottom:5px}
.notebook-edition{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-top:2px solid #223e32;border-bottom:1px solid #d7dfda}
.notebook-edition .section-kicker{margin:0;font-size:12px;color:#315448}
.notebook-edition>span{font-size:12px;color:#758078}
.notebook-page .notes-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;border:0}
.notebook-page .note-row{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0;min-height:0;padding:32px 0 36px;border-bottom:1px solid #ccd6d0;position:relative}
.notebook-page .note-row:hover{text-decoration:none}
.notebook-page .note-row:focus-visible{outline:2px solid #315448;outline-offset:6px}
.notebook-page .note-row>span:first-child{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 18px;font-size:12px;color:#5b6c63;line-height:1.6}
.notebook-page .note-row-meta>br{display:none}
.notebook-page .note-row .vn-date{margin:0;min-width:91px;min-height:38px}
.notebook-page .note-row .vn-date-day{font-size:32px}
.notebook-page .note-row .post-views{margin:0 0 0 auto;width:auto;font-size:12px;gap:5px;color:#758078}
.notebook-page .note-row .post-views span{font-size:12px;color:inherit}
.notebook-page .note-row-media{order:1;display:block;overflow:hidden;background:#edf1ef;margin-bottom:23px}
.notebook-page .note-row-media img{width:100%;height:auto;aspect-ratio:2.34;object-fit:cover;transition:opacity .2s ease}
.notebook-page .note-row:hover .note-row-media img{opacity:.91}
.notebook-page .note-row-copy{order:2;display:block}
.notebook-page .note-row h2{margin:0 0 14px;font-size:inherit;text-wrap:pretty}
.notebook-page .note-row strong{display:block;font:500 27px/1.55 var(--notes-serif);color:#202e28;overflow-wrap:anywhere;hyphens:none}
.notebook-page .note-row:hover strong{color:#315b46;text-decoration:none}
.notebook-page .note-row em{display:block;font:400 15px/1.9 var(--sans);color:#64706b;max-width:620px}
.notebook-page .note-row .note-row-read{display:inline-block;margin-top:18px;padding-bottom:4px;border-bottom:1px solid #acbab0;font-size:12px;color:#315448;line-height:1.6}
.notebook-page .note-row:first-child{grid-column:1/-1;padding:25px 0 35px}
.notebook-page .note-row:first-child .note-row-copy{order:0;margin-bottom:25px}
.notebook-page .note-row:first-child strong{font-size:38px;line-height:1.45}
.notebook-page .note-row:first-child em{max-width:820px;font-size:16px}
.notebook-page .note-row:first-child .note-row-media{margin:0}
.notebook-page .note-row:first-child .note-row-media img{aspect-ratio:1918/820;object-fit:contain}
.notebook-page .note-row:first-child .note-row-read{position:absolute;right:0;top:30px;margin:0}
.notebook-page .note-row:first-child .post-views{margin-left:8px;margin-right:150px}
.notebook-page .note-row:nth-child(n+4){grid-column:1/-1;display:grid;grid-template-columns:116px minmax(0,1fr) 250px;column-gap:28px;align-items:start}
.notebook-page .note-row:nth-child(n+4)>.note-row-meta{flex-direction:column;align-items:flex-start;gap:8px;margin:0}
.notebook-page .note-row:nth-child(n+4) .post-views{margin:0}
.notebook-page .note-row:nth-child(n+4) .note-row-copy{order:0}
.notebook-page .note-row:nth-child(n+4) .note-row-media{order:1;margin:3px 0 0}
.notebook-page .note-row:nth-child(n+4) .note-row-media img{aspect-ratio:3/2}
.notebook-page .note-row:nth-child(n+4) strong{font-size:25px}
.notebook-image-credit{margin:22px 0 0;text-align:right;font-size:11px;color:#78827d}
@media(min-width:1600px){.notebook-page main{max-width:1260px;padding-inline:48px}}
@media(max-width:900px){.notebook-heading h1{font-size:62px}.notebook-intro{max-width:340px}.notebook-page .notes-list{gap:0 28px}.notebook-page .note-row:nth-child(n+4){grid-template-columns:96px minmax(0,1fr) 190px;column-gap:22px}.notebook-page .note-row strong{font-size:24px}}
@media(max-width:680px){
 .notebook-page main{padding:0 22px 48px}
 .notebook-masthead{padding-top:28px}
 .notebook-name{font-size:22px;margin-bottom:12px}
 .notebook-heading{display:block;padding-bottom:24px}
 .notebook-heading h1{font-size:54px;margin-bottom:16px}
 .notebook-intro{max-width:none;padding:0}.notebook-intro p{font-size:12px}.notebook-intro p:first-child{font-size:14px}
 .notebook-edition{padding:12px 0}.notebook-edition>span{font-size:11px}
 .notebook-page .notes-list{display:block}
 .notebook-page .note-row,.notebook-page .note-row:nth-child(n+4){display:flex;padding:25px 0 28px}
 .notebook-page .note-row:nth-child(n+4)>.note-row-meta{flex-direction:row;align-items:center;gap:12px;margin-bottom:18px}
 .notebook-page .note-row .post-views,.notebook-page .note-row:nth-child(n+4) .post-views{margin-left:auto}
 .notebook-page .note-row:first-child .post-views{margin-left:auto;margin-right:0}
 .notebook-page .note-row:first-child .note-row-read{position:static;margin-top:16px}
 .notebook-page .note-row:first-child strong{font-size:28px}
 .notebook-page .note-row:first-child em{font-size:14px}
 .notebook-page .note-row:first-child .note-row-copy{margin-bottom:20px}
 .notebook-page .note-row strong,.notebook-page .note-row:nth-child(n+4) strong{font-size:24px;line-height:1.6}
 .notebook-page .note-row em{font-size:14px;line-height:1.85}
 .notebook-page .note-row:nth-child(n+4) .note-row-copy{order:2}
 .notebook-page .note-row:nth-child(n+4) .note-row-media{margin:0 0 21px}
 .notebook-page .note-row:nth-child(n+4) .note-row-media img{aspect-ratio:2}
 .notebook-page .note-row h2{margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce){.notebook-page .note-row-media img{transition:none}}