/* Journal index and entry (docs design.md → Journal index, Journal entry). */

/* Index: story cards in a strip, top 130, bottom 90 */
.journal-index{position:absolute;inset:0}
.journal-index .hscroll{position:absolute;top:130px;bottom:90px;left:0;right:0;gap:56px;padding:0 var(--edge);align-items:flex-end}
.card{flex:none;width:440px;display:flex;flex-direction:column;gap:16px;text-decoration:none;align-items:flex-start}
.card-photo{display:flex;align-items:flex-end;height:330px;width:100%}
.card-photo .photo{width:min(100%,calc(330px*var(--ar)));aspect-ratio:var(--ar)}
.card-meta{font:400 12px var(--font-mono);color:var(--muted)}
.card-title{font-weight:700;font-size:34px;line-height:1.05;letter-spacing:-.025em}
.card-dek{font-weight:300;font-size:17px;line-height:1.5;color:var(--ink-2)}
.card:hover .card-title{text-decoration:underline;text-underline-offset:6px}

/* Entry: scrolls vertically, the header scrolls with the page */
body.is-entry .site-header{position:absolute}
.entry{padding:90px 0 60px}
.entry-intro{padding:0 var(--edge);display:flex;flex-direction:column;gap:26px}
.entry-meta{margin:0;font:400 13px var(--font-mono);color:var(--muted)}
.entry-title{margin:0;font-weight:700;font-size:104px;line-height:.9;letter-spacing:-.045em;overflow-wrap:anywhere}
.entry-dek{margin:0;max-width:780px;font-weight:300;font-size:28px;line-height:1.35;color:var(--ink-2)}
.entry-body{margin-top:60px}

.jb{margin:0 0 60px}
.jb-fig{margin:0}
.jb-cap{display:block;margin-top:10px;font:400 12px var(--font-mono);color:var(--muted)}
.jb .photo,.jb-fig .photo{width:100%;aspect-ratio:var(--ar)}

.jb-text{max-width:640px;margin-left:auto;margin-right:auto;padding:0 var(--edge);box-sizing:content-box;font-weight:300;font-size:20px;line-height:1.65}
.jb-text p{margin:0 0 26px}
.jb-text p:last-child{margin-bottom:0}
.jb-text a{color:var(--ink)}

.jb-photo{padding:0 var(--edge)}
.jb-photo .jb-fig{margin:0 auto;width:min(100%,calc(760px*var(--ar)))}
.jb-wide{padding:0 var(--edge)}
.jb-bleed{padding:0}
.jb-bleed .jb-cap{padding:0 var(--edge)}

.jb-pair{padding:0 var(--edge)}
.jb-pair-row{display:flex;gap:14px;margin:0 auto;width:min(100%,calc(760px*var(--sum) + 14px))}
.jb-pair-item{flex:var(--ar) 1 0;min-width:0}
.jb-pair .jb-cap{width:min(100%,calc(760px*var(--sum) + 14px));margin:10px auto 0}

.jb-textphoto{display:flex;align-items:flex-end;justify-content:center;gap:64px;padding:0 var(--edge)}
.jb-tp-text{flex:0 1 520px;font-weight:300;font-size:20px;line-height:1.65}
.jb-tp-text p{margin:0 0 26px}
.jb-tp-text p:last-child{margin-bottom:0}
.jb-tp-photo{margin:0;flex:none;height:640px}
.jb-tp-photo .jb-fig{height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.jb-tp-photo .photo{height:calc(640px - 26px);width:auto;aspect-ratio:var(--ar)}

.jb-quote{max-width:760px;margin-left:auto;margin-right:auto;padding:0 var(--edge);box-sizing:content-box;display:flex;flex-direction:column;gap:22px}
.jb-quote p{margin:0;font-weight:500;font-size:40px;line-height:1.15;letter-spacing:-.02em}

.entry-end{margin:96px var(--edge) 0;border-top:1px solid var(--ink);padding-top:28px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px}
.end-col{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.end-label{font:400 12px var(--font-mono);color:var(--muted)}
.end-next{font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.02em;text-decoration:none}
.end-related{font-weight:500;font-size:22px;text-decoration:none}
.end-next:hover,.end-related:hover{text-decoration:underline;text-underline-offset:6px}
.end-actions{align-items:flex-end;font:400 13px var(--font-mono)}
.end-actions a{text-decoration:none;color:var(--ink)}

@media (max-width:767px){
	.journal-index{position:static;padding:96px 0 40px}
	.journal-index .hscroll{position:static;padding:0 var(--edge-phone);gap:24px;height:auto;align-items:flex-start}
	.card{width:min(300px,78vw)}
	.card-photo{height:220px}
	.card-photo .photo{width:min(100%,calc(220px*var(--ar)))}
	.card-title{font-size:26px}
	.journal-index .hfoot{position:static;margin:28px var(--edge-phone) 0}

	.entry{padding:96px 0 40px} /* the 48px under the header, plus the header itself */
	.entry-intro{padding:0 var(--edge-phone);gap:18px}
	.entry-title{font-size:46px;line-height:.92}
	.entry-dek{font-size:18px;line-height:1.4}
	.entry-body{margin-top:40px}
	.jb{margin-bottom:40px}
	.jb-text,.jb-quote{padding:0 var(--edge-phone)}
	.jb-text,.jb-tp-text{font-size:17px;line-height:1.6}
	.jb-photo,.jb-wide,.jb-pair{padding:0}
	.jb-photo .jb-fig,.jb-pair-row{width:100%}
	.jb-cap{padding:0 var(--edge-phone)}
	.jb-pair-row{flex-direction:column;gap:8px}
	.jb-pair-item{flex:none}
	.jb-pair .jb-cap{width:auto}
	.jb-textphoto{flex-direction:column;align-items:stretch;gap:20px;padding:0}
	.jb-tp-text{flex:none;padding:0 var(--edge-phone)}
	.jb-tp-photo{height:auto}
	.jb-tp-photo .photo{height:auto;width:100%}
	.jb-quote p{font-size:28px}
	.entry-end{margin:56px var(--edge-phone) 0;grid-template-columns:1fr;gap:24px}
	.end-actions{align-items:flex-start;flex-direction:row;justify-content:space-between}
}