/* Short screens (a phone turned sideways) and narrow tablets. Loaded last so it can adjust every screen.
   Rule: on a short screen the photograph gets the height; header, bottom bar and margins shrink. */

/* nothing in the bars breaks onto two lines */
.logo,.copy-link,.next-label,.get-print,.site-nav a{white-space:nowrap}

/* Tablet held upright (768 to 1023 wide): the same layout, a little tighter so the header stays on one line */
@media (min-width:768px) and (max-width:1023px){
	:root{--edge:28px}
	.logo{font-size:20px}
	.site-nav{gap:16px;font-size:13px}
	.controls{gap:14px}
}

/* Short screen, sideways */
@media (orientation:landscape) and (max-height:500px){
	:root{--edge:24px;--edge-phone:24px}
	.site-header{top:12px;left:24px;right:24px;gap:16px}
	.logo{font-size:18px}
	.site-nav{gap:18px;font-size:13px}
	.menu-btn{font-size:11px}

	/* stream: the photograph takes everything between a slim header and a one-line bottom bar */
	.stage{top:44px;bottom:60px;left:24px;right:24px}
	.bottom-bar{left:24px;right:24px;bottom:12px;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
	.caption{position:static;gap:2px}
	.cap-title{font-size:14px;line-height:1.2}
	.cap-desc{display:none}
	.cap-date,.cap-meta{font-size:10px}
	.center{grid-column:2;grid-row:1;align-items:center;gap:6px;padding:0}
	.dashes i{width:10px}
	.year{font-size:11px}
	.controls{grid-column:3;grid-row:1;gap:12px}
	.copy-link,.next-label,.get-print{font-size:11px}
	.btn{width:34px;height:34px;font-size:13px}
	.toast{bottom:64px}
	.end-title,.textpost-title{font-size:24px}
	.end-body{font-size:15px}
	.textpost{margin-top:0;gap:14px}
	.textpost-body{font-size:16px}
	.empty{inset:44px 24px 60px}
	.empty-title{font-size:26px}
	.empty-body{font-size:15px}

	/* photo + text side by side, as on a computer */
	.phototext,.phototext.pt-left{display:grid;position:absolute;inset:0;overflow:hidden;column-gap:32px}
	.phototext{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
	.phototext.pt-left{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr)}
	.pt-photo{height:100%}
	.pt-text{margin-top:0}
	.pt-words{font-size:clamp(14px,calc(var(--fs)*.4),24px)}
	/* mosaic: the wide arrangement */
	.split{width:min(100cqw,calc(100cqh*var(--da)));aspect-ratio:var(--da)}
	.split-item{left:var(--dx);top:var(--dy);width:var(--dw);height:var(--dh)}
	/* carousel: bars instead of thumbnails */
	.slides{top:0;bottom:22px;left:56px;right:56px}
	.thumbs{display:none}
	.bars{display:flex;position:absolute;left:0;right:0;bottom:4px;justify-content:center;gap:4px}
	.bars i{display:block;width:18px;height:3px;background:var(--ink);opacity:.4}
	.bars i.on{opacity:1}
	.lightbox{padding:44px 24px}
	.lb-close{top:12px;right:24px}
	.lb-dashes{bottom:12px}

	/* collection */
	.coll{--ph:clamp(150px,calc(100vh - 140px),900px)}
	.coll-strip{top:60px;bottom:54px}
	.c-statement{width:min(300px,50vw);gap:12px}
	.c-name{font-size:56px}
	.c-text{font-size:15px}
	.c-end{width:300px;padding:22px}
	.c-end-cover{height:110px;width:calc(110px*var(--ar))}
	.c-end-name{font-size:44px}
	.c-bar{left:24px;right:24px;bottom:14px;font-size:11px}
	.hfoot{bottom:14px;left:24px;right:24px;font-size:11px}
	.coll-index .hscroll{top:56px;height:calc(100dvh - 110px);gap:32px;padding:0 24px}
	.cover-photo{--hh:min(var(--h),calc(100dvh - 190px));height:var(--hh);width:calc(var(--hh)*var(--ar))}
	.cover-name{font-size:18px;margin-top:8px}
	.cover-meta{font-size:11px}

	/* years, journal, about */
	.years{position:static;padding:56px 24px 24px}
	.years-list{position:static;width:auto;gap:18px}
	.years-preview{display:none}
	.yr{font-size:28px}
	.journal-index .hscroll{top:64px;bottom:50px;gap:32px;padding:0 24px}
	.card{width:300px;gap:8px}
	.card-photo{height:calc(100dvh - 250px)}
	.card-photo .photo{width:min(100%,calc((100dvh - 250px)*var(--ar)))}
	.card-title{font-size:22px}
	.card-dek{font-size:14px}
	.about .hscroll{top:52px;bottom:48px;gap:40px;padding:0 24px}
	.ab-statement{width:min(520px,70vw)}
	.ab-lead,.ab-closing{font-size:20px}
	.ab-text{font-size:15px}
	.ab-email{font-size:22px}
	.entry{padding:52px 0 40px}
	.entry-title{font-size:52px}
	.entry-dek{font-size:20px}
	.entry-intro{padding:0 24px}

	/* the menu overlay of the phone: items in rows so they fit */
	.menu-head{top:12px}
	.menu-items{top:56px;flex-direction:row;flex-wrap:wrap;gap:6px 28px}
	.menu-items a{font-size:26px}
	.menu-note{bottom:14px}
}