/* Straylight download page. Loaded after straylight.css; depends only on its tokens,
   .wrap, .btn, .site-header, .brand, .nav-a, .theme-btn, .kicker and .lit. */

/* ---------- hero: the city lit under a night sky ---------- */
.dl-hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: clamp(660px, 92svh, 960px); background: var(--ground); }
.dl-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 62%; }
.dl-hero::after {
	/* dark over the trees on the left where the type sits; the skyline at center right stays lit */
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(90deg, rgba(8,7,6,.94) 0%, rgba(8,7,6,.86) 40%, rgba(8,7,6,.3) 62%, rgba(8,7,6,0) 82%),
		linear-gradient(0deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.35) 34%, rgba(8,7,6,0) 58%),
		linear-gradient(180deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,0) 22%);
}
.dl-hero .site-header { z-index: 5; }
.dl-hero-body { position: relative; z-index: 2; width: 100%; margin-top: auto; padding-top: 168px; padding-bottom: clamp(48px, 8vh, 96px); }
.dl-hero h1 { margin-top: 20px; font-size: clamp(56px, 8.4vw, 128px); line-height: .92; max-width: 9ch; }
.dl-hero .lead { margin-top: 28px; max-width: 40ch; }

.get { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 40px; }
.get .btn { padding: 20px 30px; font-size: 17px; }
.get-meta { font: 400 12px/1.5 var(--mono); letter-spacing: .08em; color: var(--text-3); }
.get-meta a { color: var(--text-2); }
.preview-note { margin-top: 32px; max-width: 58ch; font-size: 14.5px; color: var(--text-3); }
.preview-note strong { color: var(--text-2); }

/* ---------- shared section rhythm ---------- */
.dl-section { padding: clamp(80px, 10vw, 136px) 0; border-top: 1px solid var(--line); }
.dl-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.dl-head h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1; max-width: 14ch; }
.dl-head .lead { justify-self: end; }

/* ---------- every system: ruled rows, not cards ---------- */
.systems { border-top: 1px solid var(--line-strong); }
.sys {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .9fr);
	gap: 24px clamp(28px, 4vw, 64px);
	padding: clamp(32px, 4vw, 48px) 0;
	border-bottom: 1px solid var(--line);
	align-items: start;
}
.sys-name h3 { font: 400 clamp(36px, 3.8vw, 54px)/1 var(--display); letter-spacing: -.015em; }
.sys-name .tag { display: none; margin-top: 14px; }
.sys.recommended .sys-name .tag { display: inline-block; }
.sys-req { color: var(--text); font-weight: 400; margin-bottom: 14px; max-width: 52ch; }
.sys ol { list-style: decimal; padding-left: 20px; display: grid; gap: 8px; color: var(--text-2); font-size: 15.5px; max-width: 60ch; }
.sys ol strong { font-weight: 600; }
.sys code, .sums-how code {
	font: 400 12.5px/1.6 var(--mono); color: var(--text);
	background: var(--raised-2); padding: 1px 6px; border-radius: var(--r); overflow-wrap: anywhere;
}
.files { display: grid; gap: 18px; justify-items: start; }
.file { display: grid; gap: 8px; justify-items: start; }
.file small { font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--text-3); }
.sys.recommended .btn-primary { background: var(--ember); color: var(--on-ember); }
.sys.recommended .btn-primary:hover { background: var(--ember-hover); }

/* ---------- first steps ---------- */
.first { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); counter-reset: step; }
.first li { border-top: 1px solid var(--line-strong); padding-top: 24px; }
.first li::before { counter-increment: step; content: "0" counter(step); display: block; font: 400 48px/1 var(--display); color: var(--ember); margin-bottom: 20px; }
.first h3 { font-size: 20px; margin-bottom: 10px; }
.first p { color: var(--text-2); }

/* ---------- checksums, folded away ---------- */
.sums-box { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sums-box summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font: 600 19px/1.3 var(--sans); }
.sums-box summary::-webkit-details-marker { display: none; }
.sums-box summary::after { content: "+"; font: 300 28px/1 var(--sans); color: var(--ember); }
.sums-box[open] summary::after { content: "\2212"; }
.sums-box summary span { display: block; font: 300 15.5px/1.5 var(--sans); color: var(--text-2); margin-top: 4px; }
.sums li { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 24px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--text-2); }
.sums .hash { font: 400 13.5px/1.5 var(--mono); color: var(--text); overflow-wrap: anywhere; user-select: all; }
.sums-how { padding: 18px 0 30px; color: var(--text-3); font-size: 14.5px; line-height: 2.1; }

/* ---------- known limits ---------- */
.limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 80px); }
.limits li { padding: 20px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.limits strong { font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
	.dl-head { grid-template-columns: 1fr; gap: 20px; }
	.dl-head .lead { justify-self: start; }
	.sys { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.sys-name { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; }
	.sys-name .tag { margin-top: 0; }
	.first { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.dl-hero > img { object-position: 62% 40%; }
	.dl-hero::after { background: linear-gradient(0deg, rgba(8,7,6,.96) 0%, rgba(8,7,6,.84) 50%, rgba(8,7,6,.3) 100%); }
	.dl-hero-body { padding-top: 132px; }
	.get .btn { width: 100%; justify-content: center; }
	.sys { grid-template-columns: 1fr; }
	.limits { grid-template-columns: 1fr; }
	.sums li { grid-template-columns: 1fr; gap: 4px; }
}