/*
Theme Name: Ledger
Theme URI: https://example.com/
Template: generatepress
Author: Faisal
Description: GeneratePress child theme for software download sites. Single-tier top navigation, ledger-style listing, sticky download rail on detail pages, gated countdown page, dark mode.
Version: 3.0.0
License: GNU General Public License v2 or later
Text Domain: ledger
*/

/* =========================================================================
   DESIGN NOTES

   The listing is a ledger, not a wall of cards. Twenty separately bordered
   cards make twenty boxes compete; one container with hairline rules makes
   a single scannable column, which is what a person browsing a software
   index actually does — read down a list, not survey a grid.

   Detail pages split: prose on the left, a sticky rail on the right holding
   the download action and the file facts. The decision to download and the
   evidence for it stay on screen together while the reader scrolls.

   Violet carries every action. Download sites default to blue or green;
   violet reads as deliberate rather than borrowed, and holds up against
   both the porcelain and the deep-space background.

   Numerals are monospaced and tabular throughout — sizes, versions, counts,
   the countdown. Figures that sit in a column should line up in a column.
   ====================================================================== */

:root {
	/* The page is tinted, the panels are white. Pure white on both is hard
	   on the eyes over a long scan and leaves every panel depending on a
	   1px line to exist; a barely-there tint lets the surfaces separate
	   themselves without the page ever reading as grey. */
	--lg-bg:        #f6f7f9;
	--lg-surface:   #ffffff;
	--lg-surface-2: #f1f3f6;
	--lg-line:      #e4e7ee;
	--lg-line-2:    #c7ccd8;
	--lg-text:      #14161d;
	--lg-text-2:    #5a6173;
	--lg-text-3:    #8a91a3;

	--lg-violet:      #5b3df5;
	--lg-violet-ink:  #4429d6;
	--lg-violet-soft: #eeebfe;

	/* Peer-to-peer routes carry their own colour. Green is what torrent
	   software has used for years, so it is already read as "swarm" rather
	   than as a second, competing primary action. */
	--lg-p2p:      #0f7a52;
	--lg-p2p-ink:  #0b6142;
	--lg-p2p-soft: #e2f3ea;

	--lg-ok:        #17794a;
	--lg-ok-soft:   #e3f3ea;
	--lg-warn:      #96550a;
	--lg-warn-soft: #faeedd;
	--lg-hot:       #ab332a;
	--lg-hot-soft:  #fbeae7;

	--lg-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--lg-num: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--lg-r: 7px;
	--lg-r-lg: 12px;
	--lg-nav: 58px;
	--lg-max: 1140px;
}

html[data-theme="dark"] {
	--lg-bg:        #0f1116;
	--lg-surface:   #171a21;
	--lg-surface-2: #1e222b;
	--lg-line:      #272c36;
	--lg-line-2:    #38404e;
	--lg-text:      #e9ebf0;
	--lg-text-2:    #9aa1b2;
	--lg-text-3:    #6f778a;

	--lg-violet:      #9b85ff;
	--lg-violet-ink:  #b4a4ff;
	--lg-violet-soft: #211c3d;

	--lg-p2p:      #4cbe89;
	--lg-p2p-ink:  #6ed3a1;
	--lg-p2p-soft: #12301f;

	--lg-ok:        #5cc487;
	--lg-ok-soft:   #14301f;
	--lg-warn:      #d8a34a;
	--lg-warn-soft: #2c2413;
	--lg-hot:       #ef8a7c;
	--lg-hot-soft:  #331b17;
}

/* -------------------------------------------------------------------------
   Base
   ---------------------------------------------------------------------- */

body {
	background: var(--lg-bg);
	color: var(--lg-text);
	font-family: var(--lg-ui);
	font-size: 15px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

body.ledger #masthead,
body.ledger .site-info,
body.ledger .main-navigation:not(.lg-cats) { display: none; }

body.ledger #page { max-width: var(--lg-max); padding: 0 20px; }
body.ledger .site-content { padding-top: 0; }

a, a:hover, a:focus { color: var(--lg-violet-ink); text-decoration: none; }
body.ledger a, body.ledger a:hover { text-decoration: none; }

.lg-i { width: 18px; height: 18px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lg-hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.num { font-family: var(--lg-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* -------------------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------------- */

.lg-nav {
	position: sticky; top: 0; z-index: 90;
	background: var(--lg-surface);
	border-bottom: 1px solid var(--lg-line);
}
.lg-nav-in {
	max-width: var(--lg-max); margin: 0 auto;
	height: var(--lg-nav); padding: 0 20px;
	display: flex; align-items: center; gap: 14px;
}

.lg-mark {
	display: flex; align-items: center; gap: 9px;
	font-size: 16.5px; font-weight: 650; letter-spacing: -0.02em;
	color: var(--lg-text); flex-shrink: 0;
}
.lg-mark:hover { text-decoration: none; color: var(--lg-text); }
.lg-mark span {
	width: 26px; height: 26px; border-radius: 7px;
	background: var(--lg-violet); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.lg-mark span .lg-i { width: 15px; height: 15px; stroke-width: 2.1; }
.lg-mark img { max-height: 30px; width: auto; }

.lg-pills {
	flex: 1; min-width: 0;
	display: flex; gap: 3px;
	overflow-x: auto; scrollbar-width: none;
	padding: 0 4px;
}
.lg-pills::-webkit-scrollbar { display: none; }
.lg-pills ul, .lg-pills li { list-style: none; margin: 0; padding: 0; display: contents; }
.lg-pill-item { display: inline-flex; }
.lg-pills .current-menu-item > .lg-pill,
.lg-pills .current_page_item > .lg-pill { background: var(--lg-violet-soft); color: var(--lg-violet-ink); font-weight: 550; }

.lg-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border-radius: 20px;
	font-size: 13.5px; color: var(--lg-text-2);
	white-space: nowrap;
}
.lg-pill:hover { background: var(--lg-surface-2); color: var(--lg-text); text-decoration: none; }
.lg-pill.on { background: var(--lg-violet-soft); color: var(--lg-violet-ink); font-weight: 550; }
.lg-pill u { text-decoration: none; font-family: var(--lg-num); font-size: 11px; opacity: .6; }

.lg-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.lg-icon-btn {
	display: flex; padding: 7px; border: 0; background: none;
	color: var(--lg-text-2); cursor: pointer; border-radius: 6px;
}
.lg-icon-btn:hover { background: var(--lg-surface-2); color: var(--lg-text); }
html[data-theme="dark"] .lg-moon { display: none; }
html:not([data-theme="dark"]) .lg-sun { display: none; }

.lg-searchbar { border-top: 1px solid var(--lg-line); background: var(--lg-surface); display: none; }
.lg-searchbar.open { display: block; }
.lg-searchbar form {
	max-width: var(--lg-max); margin: 0 auto; padding: 10px 20px;
	display: flex; align-items: center; gap: 9px;
}
.lg-searchbar input {
	flex: 1; height: 36px; padding: 0 12px;
	background: var(--lg-surface-2); border: 1px solid var(--lg-line);
	border-radius: var(--lg-r); font: inherit; font-size: 14px;
	color: var(--lg-text); outline: none;
}
.lg-searchbar input:focus { border-color: var(--lg-violet); }

/* -------------------------------------------------------------------------
   Page head
   ---------------------------------------------------------------------- */

.lg-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 14px; flex-wrap: wrap; padding: 28px 0 14px;
}
.lg-head h1 { margin: 0; font-size: 25px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.2; }
.lg-head p { margin: 5px 0 0; font-size: 14px; color: var(--lg-text-2); }

.lg-sort { display: flex; gap: 2px; font-size: 13px; }
.lg-sort a, .lg-sort strong {
	padding: 5px 11px; border-radius: 20px;
	color: var(--lg-text-2); font-weight: 400;
}
.lg-sort a:hover { background: var(--lg-surface); text-decoration: none; color: var(--lg-text); }
.lg-sort strong { background: var(--lg-violet-soft); color: var(--lg-violet-ink); font-weight: 550; }

/* -------------------------------------------------------------------------
   The ledger — one container, hairline rules
   ---------------------------------------------------------------------- */

.lg-list {
	background: var(--lg-surface);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-r-lg);
	overflow: hidden;
}

.lg-item {
	display: flex; align-items: center; gap: 15px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--lg-line);
	transition: background .12s ease;
}
.lg-item:last-child { border-bottom: 0; }
.lg-item:hover { background: var(--lg-surface-2); }
.lg-list { background: var(--lg-surface); }

.lg-thumb {
	width: 50px; height: 50px; flex-shrink: 0;
	border-radius: 12px; overflow: hidden;
	background: var(--lg-surface-2);
	display: flex; align-items: center; justify-content: center;
	color: var(--lg-text-3);
}
.lg-item:hover .lg-thumb { background: var(--lg-bg); }
.lg-thumb img { width: 100%; height: 100%; object-fit: contain; }

.lg-body { flex: 1; min-width: 0; }
.lg-title {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin: 0 0 2px; font-size: 16px; font-weight: 600;
	letter-spacing: -0.012em; line-height: 1.3;
}
.lg-title a { color: var(--lg-text); }
.lg-title a:hover { color: var(--lg-violet-ink); text-decoration: none; }
.lg-title .v { font-family: var(--lg-num); font-size: 12.5px; font-weight: 500; color: var(--lg-text-3); letter-spacing: -0.02em; }

.lg-sub {
	margin: 0; font-size: 13.5px; color: var(--lg-text-2); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.lg-facts {
	flex-shrink: 0; width: 118px;
	display: flex; flex-direction: column; gap: 2px;
	text-align: right;
}
.lg-fact { font-family: var(--lg-num); font-size: 12px; color: var(--lg-text-3); font-variant-numeric: tabular-nums; }
.lg-fact b { color: var(--lg-text); font-weight: 500; font-size: 14px; }

.lg-go {
	flex-shrink: 0;
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 0 16px;
	background: var(--lg-violet); color: #fff;
	border-radius: 20px; font-size: 13.5px; font-weight: 550;
}
.lg-go:hover { text-decoration: none; color: #fff; background: var(--lg-violet-ink); }
.lg-go .lg-i { width: 15px; height: 15px; }

/* Tags */
.lg-tag {
	font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase;
	padding: 2px 7px; border-radius: 4px;
	background: var(--lg-ok-soft); color: var(--lg-ok); white-space: nowrap;
}
.lg-tag-u { background: var(--lg-violet-soft); color: var(--lg-violet-ink); }
.lg-tag-h { background: var(--lg-hot-soft); color: var(--lg-hot); }
.lg-tag-t { background: var(--lg-warn-soft); color: var(--lg-warn); }

/* -------------------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------------- */

.lg-pages { display: flex; justify-content: center; gap: 5px; margin: 24px 0 44px; flex-wrap: wrap; }
.lg-pages .page-numbers {
	min-width: 34px; height: 34px; padding: 0 11px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--lg-surface); border: 1px solid var(--lg-line);
	border-radius: var(--lg-r); font-family: var(--lg-num); font-size: 13px;
	color: var(--lg-text-2);
}
.lg-pages .page-numbers:hover { border-color: var(--lg-line-2); text-decoration: none; }
.lg-pages .page-numbers.current { background: var(--lg-violet); border-color: var(--lg-violet); color: #fff; }

/* -------------------------------------------------------------------------
   Detail page — prose left, sticky rail right
   ---------------------------------------------------------------------- */

.lg-crumbs { font-size: 12.5px; color: var(--lg-text-3); padding: 20px 0 0; }
.lg-crumbs a { color: var(--lg-text-2); }
.lg-crumbs i { font-style: normal; padding: 0 7px; opacity: .5; }

.lg-split { display: grid; grid-template-columns: minmax(0, 1fr) 322px; gap: 30px; align-items: start; padding-bottom: 44px; }

.lg-hero { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0 22px; }
.lg-hero-thumb {
	width: 84px; height: 84px; flex-shrink: 0;
	border-radius: 19px; overflow: hidden;
	background: var(--lg-surface); border: 1px solid var(--lg-line);
	display: flex; align-items: center; justify-content: center; color: var(--lg-text-3);
}
.lg-hero-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lg-hero h1 {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	margin: 0 0 6px; font-size: 27px; font-weight: 650;
	letter-spacing: -0.028em; line-height: 1.18;
}
.lg-hero h1 .v { font-family: var(--lg-num); font-size: 16px; font-weight: 500; color: var(--lg-text-3); letter-spacing: -0.02em; }
.lg-hero p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--lg-text-2); max-width: 70ch; }

.lg-sec { margin-bottom: 30px; }
.lg-sec > h2 {
	margin: 0 0 12px; font-size: 11.5px; font-weight: 650;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--lg-text-3);
}

.lg-prose { font-size: 15.5px; line-height: 1.68; }
.lg-prose p { margin: 0 0 16px; }
.lg-prose ul, .lg-prose ol { margin: 0 0 16px; padding-left: 21px; }
.lg-prose li { margin-bottom: 7px; }
.lg-prose > *:last-child { margin-bottom: 0; }
.lg-prose h2, .lg-prose h3 { margin: 26px 0 10px; font-size: 18px; letter-spacing: -0.015em; }
.lg-prose code { font-family: var(--lg-num); font-size: .88em; background: var(--lg-surface-2); padding: 1px 5px; border-radius: 4px; }

.lg-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.lg-shots a { display: block; border-radius: var(--lg-r); overflow: hidden; border: 1px solid var(--lg-line); background: var(--lg-surface); }
.lg-shots img { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 16 / 10; }
.lg-shots a:hover { border-color: var(--lg-violet); }

/* The rail */
.lg-rail { position: sticky; top: calc(var(--lg-nav) + 18px); display: flex; flex-direction: column; gap: 12px; }

.lg-card {
	background: var(--lg-surface);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-r-lg);
	padding: 16px;
}

/* Download controls post to the gate, so each button sits inside a form.
   The form is layout-transparent — the button keeps every visual property. */
.lg-form { margin: 0; display: contents; }
button.lg-dl, button.lg-go, button.lg-gate-btn { border: 0; font: inherit; cursor: pointer; width: 100%; }

.lg-dl {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; height: 48px;
	background: var(--lg-violet); color: #fff;
	border-radius: var(--lg-r); font-size: 15.5px; font-weight: 600;
}
.lg-dl:hover { text-decoration: none; color: #fff; background: var(--lg-violet-ink); }
.lg-dl small { font-family: var(--lg-num); font-size: 12.5px; font-weight: 400; opacity: .82; }

.lg-alt { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lg-alt a, .lg-alt button {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; height: 46px;
	border: 1px solid transparent; border-radius: var(--lg-r);
	font-size: 14.5px; font-weight: 550;
	color: var(--lg-text-2); background: var(--lg-surface-2);
}

/* The two torrent routes share one colour, because they are two doors to
   the same swarm rather than two different offers. The official site is the
   one control that leaves for somewhere else, so it stays a plain outline
   and does not compete with either. */
.lg-alt .lg-magnet, .lg-alt .lg-torrent {
	background: var(--lg-p2p-soft);
	color: var(--lg-p2p-ink);
}
.lg-alt .lg-magnet:hover, .lg-alt .lg-torrent:hover {
	background: var(--lg-p2p); color: #fff; border-color: var(--lg-p2p);
}
.lg-alt .lg-official {
	background: var(--lg-surface);
	border-color: var(--lg-line);
	color: var(--lg-text-2);
}
.lg-alt a:hover, .lg-alt button:hover { text-decoration: none; }
.lg-alt .lg-official:hover { color: var(--lg-text); border-color: var(--lg-line-2); }
.lg-alt button { font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.lg-alt .lg-i { width: 17px; height: 17px; }

.lg-spec { display: flex; flex-direction: column; }
.lg-spec div {
	display: flex; align-items: baseline; gap: 12px;
	padding: 8px 0; border-bottom: 1px solid var(--lg-line); font-size: 13.5px;
}
.lg-spec div:last-child { border-bottom: 0; padding-bottom: 0; }
.lg-spec div:first-child { padding-top: 0; }
.lg-spec dt { flex-shrink: 0; width: 112px; color: var(--lg-text-3); font-size: 12.5px; margin: 0; }
.lg-spec dd { margin: 0; flex: 1; min-width: 0; color: var(--lg-text); word-break: break-word; text-align: right; }
.lg-spec dd.num { font-size: 13px; }

.lg-card-title {
	margin: 0 0 8px; font-size: 11.5px; font-weight: 650;
	letter-spacing: .08em; text-transform: uppercase; color: var(--lg-text-3);
}

.lg-more { display: flex; flex-direction: column; gap: 2px; }
.lg-more a { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.lg-more a:hover { text-decoration: none; }
.lg-more-thumb { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--lg-surface-2); }
.lg-more-thumb img { width: 100%; height: 100%; object-fit: contain; }
.lg-more b { display: block; font-size: 13.5px; font-weight: 550; color: var(--lg-text); }
.lg-more span { display: block; font-family: var(--lg-num); font-size: 11px; color: var(--lg-text-3); }

.lg-empty {
	background: var(--lg-surface); border: 1px solid var(--lg-line);
	border-radius: var(--lg-r-lg); padding: 48px 20px;
	text-align: center; color: var(--lg-text-2);
}

/* -------------------------------------------------------------------------
   Previous versions

   The structure is a table because a release history is one. What was
   missing was containment and contrast: on a white page the rows had
   nothing holding them, and label and value were the same grey, so the
   eye had no order to follow.

   Now the whole history sits in a framed panel with a tinted header. The
   date splits across two lines — day above, year below — which lets a
   narrow column carry a long date without wrapping awkwardly. Labels
   recede, values step forward. The two controls share one colour family
   so they read as a pair of options rather than two competing buttons.
   ---------------------------------------------------------------------- */

.lg-vtable {
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-r-lg);
	overflow: hidden;
	background: var(--lg-surface);
}

.lg-vhead, .lg-vrow {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) 168px;
	gap: 18px; align-items: start;
	padding: 15px 18px;
}

.lg-vhead {
	padding: 10px 18px;
	background: var(--lg-surface-2);
	border-bottom: 1px solid var(--lg-line);
	font-size: 11px; font-weight: 650;
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--lg-text-3);
}
.lg-vhead span:last-child { text-align: center; }

.lg-vrow { border-bottom: 1px solid var(--lg-line); transition: background .12s ease; }
.lg-vrow:last-of-type { border-bottom: 0; }
.lg-vrow:hover { background: var(--lg-surface-2); }

/* Day above, year below: a narrow column that never wraps mid-date. */
.lg-vdate { line-height: 1.35; }
.lg-vdate b {
	display: block;
	font-size: 13.5px; font-weight: 600; color: var(--lg-text);
	letter-spacing: -0.01em;
}
.lg-vdate span {
	display: block;
	font-family: var(--lg-num); font-size: 12px; color: var(--lg-text-3);
	font-variant-numeric: tabular-nums;
}

.lg-vinfo { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lg-vinfo > div { display: flex; gap: 10px; align-items: baseline; }
.lg-vinfo dt {
	flex-shrink: 0; width: 74px; margin: 0;
	font-size: 12px; font-weight: 500; color: var(--lg-text-3);
}
.lg-vinfo dd {
	margin: 0; min-width: 0;
	font-size: 13px; color: var(--lg-text); word-break: break-word;
}
.lg-vinfo dd.num { font-family: var(--lg-num); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.lg-vdl { display: flex; gap: 10px; align-items: flex-start; justify-content: flex-end; }

/* Each control and its size label stack as one cell. The form inside stays
   layout-transparent, so the button is a direct child of the cell. */
.lg-vcell { display: flex; flex-direction: column; align-items: center; }

.lg-vbtn {
	display: flex; align-items: center; justify-content: center;
	width: 42px; height: 36px; padding: 0;
	background: var(--lg-violet); color: #fff;
	border: 1px solid var(--lg-violet); border-radius: 8px;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.lg-vbtn:hover { background: var(--lg-violet-ink); border-color: var(--lg-violet-ink); }
.lg-vbtn .lg-i { width: 17px; height: 17px; }

/* The magnet control in the history carries the same peer-to-peer green,
   so the two routes are recognisable wherever they appear. */
.lg-vbtn-alt {
	background: var(--lg-p2p-soft);
	border-color: var(--lg-p2p-soft);
	color: var(--lg-p2p-ink);
}
.lg-vbtn-alt:hover {
	background: var(--lg-p2p); border-color: var(--lg-p2p); color: #fff;
}

.lg-vsize {
	display: block; margin-top: 6px;
	font-family: var(--lg-num); font-size: 11px;
	color: var(--lg-text-3); text-align: center;
	font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}

.lg-vmore {
	display: block; margin: 14px auto 0;
	padding: 8px 20px; border: 1px solid var(--lg-line); border-radius: 20px;
	background: var(--lg-surface); color: var(--lg-text-2);
	font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer;
	transition: border-color .12s ease, color .12s ease;
}
.lg-vmore:hover { color: var(--lg-text); border-color: var(--lg-line-2); }
.lg-vmore::after { content: " \2304"; }
.lg-vmore.is-open::after { content: " \2303"; }

/* -------------------------------------------------------------------------
   Comments
   ---------------------------------------------------------------------- */

.lg-comments { max-width: 760px; padding: 4px 0 48px; }

.lg-comments-title {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 16px; font-size: 16px; font-weight: 650; letter-spacing: -0.015em;
}
.lg-comments-title .lg-i { color: var(--lg-text-3); }

.lg-comment-list { list-style: none; margin: 0 0 24px; padding: 0; }
.lg-comment-list .children { list-style: none; margin: 10px 0 0 22px; padding: 0 0 0 16px; border-left: 2px solid var(--lg-line); }

.lg-comment { margin-bottom: 10px; }
.lg-comment > article {
	background: var(--lg-surface); border: 1px solid var(--lg-line);
	border-radius: var(--lg-r-lg); padding: 14px 16px;
}

.lg-comment-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lg-avatar { border-radius: 50%; display: block; }
.lg-comment-head b { display: block; font-size: 14px; font-weight: 600; }
.lg-comment-head span { display: block; font-size: 11.5px; color: var(--lg-text-3); }

.lg-comment-body { font-size: 14.5px; }
.lg-comment-body p { margin: 0 0 10px; }
.lg-comment-body p:last-child { margin-bottom: 0; }

.lg-comment-foot { margin-top: 10px; }
.lg-comment-foot a { font-size: 12.5px; color: var(--lg-text-2); }
.lg-comment-foot a:hover { color: var(--lg-violet-ink); }

.lg-comments-closed { font-size: 13.5px; color: var(--lg-text-3); }

.lg-comment-form, .comment-respond {
	background: var(--lg-surface); border: 1px solid var(--lg-line);
	border-radius: var(--lg-r-lg); padding: 18px;
}
.comment-reply-title { margin: 0 0 12px; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.comment-reply-title small { font-weight: 400; font-size: 12.5px; margin-left: 8px; }

.comment-form p { margin: 0 0 12px; }
.comment-form label { display: block; font-size: 12.5px; color: var(--lg-text-2); margin-bottom: 4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%; padding: 9px 12px;
	background: var(--lg-surface-2); color: var(--lg-text);
	border: 1px solid var(--lg-line); border-radius: var(--lg-r);
	font: inherit; font-size: 14px; outline: none;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--lg-violet); }
.comment-form textarea { resize: vertical; min-height: 92px; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-size: 12.5px; }
.comment-form .comment-form-cookies-consent input { width: auto; }

.lg-comment-submit, .comment-form .submit {
	height: 42px; padding: 0 22px; border: 0; border-radius: var(--lg-r);
	background: var(--lg-violet); color: #fff;
	font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.lg-comment-submit:hover, .comment-form .submit:hover { background: var(--lg-violet-ink); }

.comment-form-author, .comment-form-email, .comment-form-url { max-width: 420px; }

/* -------------------------------------------------------------------------
   Download gate page
   ---------------------------------------------------------------------- */

.lg-gate { max-width: 480px; margin: 0 auto; padding: 44px 0 64px; text-align: center; }

.lg-gate-card {
	background: var(--lg-surface);
	border: 1px solid var(--lg-line);
	border-radius: 16px;
	padding: 32px 26px;
}

.lg-gate-thumb {
	width: 72px; height: 72px; margin: 0 auto 16px;
	border-radius: 17px; overflow: hidden;
	background: var(--lg-surface-2);
	display: flex; align-items: center; justify-content: center; color: var(--lg-text-3);
}
.lg-gate-thumb img { width: 100%; height: 100%; object-fit: contain; }

.lg-gate h1 { margin: 0 0 5px; font-size: 21px; font-weight: 650; letter-spacing: -0.022em; }
.lg-gate-meta { margin: 0 0 26px; font-family: var(--lg-num); font-size: 12.5px; color: var(--lg-text-3); }

/* Countdown ring */
.lg-ring { position: relative; width: 108px; height: 108px; margin: 0 auto 20px; }
.lg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.lg-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.lg-ring .track { stroke: var(--lg-line); }
.lg-ring .bar { stroke: var(--lg-violet); transition: stroke-dashoffset 1s linear; }
.lg-ring b {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--lg-num); font-size: 30px; font-weight: 500;
	color: var(--lg-text); letter-spacing: -0.03em;
}

.lg-gate-note { margin: 0 0 20px; font-size: 13.5px; color: var(--lg-text-2); }

a.lg-gate-btn,
a.lg-gate-btn:link,
a.lg-gate-btn:visited,
a.lg-gate-btn:hover,
a.lg-gate-btn:focus,
a.lg-gate-btn:active { color: #fff; text-decoration: none; }
a.lg-gate-btn small { color: inherit; }
button.lg-gate-btn { text-decoration: none; }

.lg-gate-btn {
	display: flex; align-items: center; justify-content: center; gap: 9px;
	width: 100%; height: 50px; border: 0;
	border-radius: var(--lg-r); font: inherit;
	font-size: 15.5px; font-weight: 600;
	background: var(--lg-violet); color: #fff; cursor: pointer;
}
.lg-gate-btn:hover, a.lg-gate-btn:hover { background: var(--lg-violet-ink); text-decoration: none; color: #fff; }
.lg-gate-btn[hidden] { display: none; }
.lg-gate-btn:disabled, .lg-gate-btn.wait {
	background: var(--lg-surface-2); color: var(--lg-text-3); cursor: default;
}

.lg-gate-back { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--lg-text-2); }

/* Something to move on to once the file has started, rather than a page
   whose only purpose has just been served.

   The gate is a single narrow centred column, and hanging a list off the
   bottom of it only makes that column longer. Two columns of tiles give the
   section its own shape, which reads as a change of subject rather than a
   continuation, and the ruled heading marks the break without needing a
   second card around it.
   ---------------------------------------------------------------------- */

.lg-gr { margin-top: 34px; }

.lg-gr-title {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 14px;
	font-size: 11.5px; font-weight: 650;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--lg-text-3);
}
.lg-gr-title::before, .lg-gr-title::after {
	content: ""; flex: 1; height: 1px; background: var(--lg-line);
}
.lg-gr-title span { white-space: nowrap; }

.lg-gr-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.lg-gr-item {
	display: flex; align-items: center; gap: 11px;
	padding: 11px 12px;
	background: var(--lg-surface);
	border: 1px solid var(--lg-line);
	border-radius: var(--lg-r-lg);
	text-align: left;
	transition: border-color .14s ease, transform .14s ease;
}
.lg-gr-item:hover {
	text-decoration: none;
	border-color: var(--lg-line-2);
	transform: translateY(-1px);
}

.lg-gr-thumb {
	width: 40px; height: 40px; flex-shrink: 0;
	border-radius: 10px; overflow: hidden;
	background: var(--lg-surface-2);
	display: flex; align-items: center; justify-content: center;
	color: var(--lg-text-3);
}
.lg-gr-thumb img { width: 100%; height: 100%; object-fit: contain; }

.lg-gr-text { min-width: 0; }
.lg-gr-text b {
	display: block;
	font-size: 13.5px; font-weight: 600; color: var(--lg-text);
	letter-spacing: -0.012em; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lg-gr-text span {
	display: block; margin-top: 2px;
	font-family: var(--lg-num); font-size: 11px;
	color: var(--lg-text-3); font-variant-numeric: tabular-nums;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 520px) {
	.lg-gr-grid { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */

.lg-foot { border-top: 1px solid var(--lg-line); background: var(--lg-surface); margin-top: 8px; }
.lg-foot-in {
	max-width: var(--lg-max); margin: 0 auto; padding: 16px 20px;
	display: flex; align-items: center; justify-content: space-between;
	gap: 14px 22px; flex-wrap: wrap;
}
.lg-foot-name { font-size: 13.5px; font-weight: 600; color: var(--lg-text); }
.lg-foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lg-foot-links ul, .lg-foot-links li { list-style: none; margin: 0; padding: 0; display: contents; }
.lg-foot-links a { font-size: 13px; color: var(--lg-text-2); }
.lg-foot-links a:hover { color: var(--lg-violet-ink); }
.lg-foot-note { font-size: 12px; color: var(--lg-text-3); }

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */

@media (max-width: 1000px) {
	/* Description first, download rail below it, comments last. */
	.lg-split { display: flex; flex-direction: column; gap: 0; }
	.lg-main-col { order: 1; }
	.lg-rail { position: static; order: 2; margin-bottom: 28px; }
	.lg-comments { padding-bottom: 32px; }

	.lg-vhead { display: none; }
	.lg-vrow {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px 16px;
		align-items: center;
		padding: 14px;
	}
	.lg-vdate { grid-column: 1 / -1; display: flex; gap: 5px; align-items: baseline; }
	.lg-vdate b { font-size: 12.5px; color: var(--lg-text-3); font-weight: 500; }
	.lg-vdate span { font-size: 12.5px; }
	.lg-vinfo { grid-column: 1; }
	.lg-vdl { grid-column: 2; }
	.lg-vinfo dt { width: 66px; }
}

@media (max-width: 780px) {
	.lg-facts { display: none; }
}

@media (max-width: 600px) {
	.lg-item { flex-wrap: wrap; padding: 14px; gap: 12px; }
	.lg-body { flex: 1 1 calc(100% - 62px); }
	.lg-facts {
		display: flex; flex: 1 0 100%; flex-direction: row;
		justify-content: space-between; align-items: center; text-align: left;
		width: auto; padding-top: 11px; border-top: 1px solid var(--lg-line);
	}
	.lg-go { flex: 0 0 auto; }
	.lg-item .lg-go { position: static; }

	.lg-head { padding-top: 20px; }
	.lg-head h1 { font-size: 21px; }
	.lg-hero { gap: 14px; }
	.lg-hero-thumb { width: 62px; height: 62px; border-radius: 15px; }
	.lg-hero h1 { font-size: 22px; }
	.lg-gate-card { padding: 26px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.lg-item, .lg-ring .bar { transition: none; }
}

:focus-visible { outline: 2px solid var(--lg-violet); outline-offset: 2px; }