/* LoudMemories — the policy documents (terms, privacy, cookies) and the 404.
   Page-only rules; the design system and the chrome live in
   core/css/lm-base.css.

   These are pages people read rather than use, so the measure is narrow, the
   type is the serif the body already uses, and the numbered sections come from
   the markup rather than from hand-typed "1." prefixes that drift. */

:root {
	--lm-max: 1040px;
	--h1: 2.25rem;
	--doc-measure: 42rem;
}
@media (min-width: 480px) { :root { --h1: 2.75rem; } }
@media (min-width: 768px) { :root { --h1: 3.5rem; } }
@media (min-width: 1024px) { :root { --h1: 4.25rem; } }

/* ------------------------------------------------------------ the hero */

.pl-title {
	margin: 0;
	font-family: var(--lm-sans);
	font-size: var(--h1);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.01em;
	text-transform: uppercase;
}
.pl-lead {
	margin: 16px 0 0;
	max-width: var(--doc-measure);
	font-size: clamp(0.9375rem, 3.2vw, 1.0625rem);
	line-height: 1.6;
	color: var(--lm-muted);
	text-wrap: pretty;
}
.pl-updated {
	margin: 18px 0 0;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}

/* -------------------------------------------------------- the document */

.pl-body { max-width: var(--doc-measure); }
.pl-body.is-wide { max-width: none; }

.pl-body p,
.pl-body li {
	font-size: clamp(0.9375rem, 3.4vw, 1rem);
	line-height: 1.75;
	color: var(--lm-muted);
	text-wrap: pretty;
}
.pl-body p { margin: 0 0 18px; }
.pl-body a { border-bottom: 1px solid rgba(var(--lm-gold-rgb), .5); }
.pl-body a:hover { border-bottom-color: var(--lm-ink); }

.pl-body h2,
.pl-body h3:not(.pl-sub) {
	margin: clamp(2rem, 6vw, 2.75rem) 0 14px;
	padding-top: clamp(1.5rem, 5vw, 2rem);
	border-top: 1px solid var(--lm-line);
	font-family: var(--lm-sans);
	font-size: clamp(1.125rem, 4.5vw, 1.375rem);
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.pl-body > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.pl-body h4 {
	margin: clamp(1.75rem, 5vw, 2.25rem) 0 12px;
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}
/* A subheading inside a section, which is an h3 by the document's own
   structure — it used to be an h5 chosen for how it looked, which skipped two
   levels under the h2 above it. The class carries the look; the tag carries
   the level. */
.pl-body .pl-sub {
	margin: 24px 0 10px;
	font-family: var(--lm-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--lm-ink);
}

/* Numbering from the list itself, so a clause can be added or moved without
   anybody renumbering the one after it by hand. */
.pl-body ol { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: pl-item; }
.pl-body ol > li {
	position: relative;
	counter-increment: pl-item;
	padding: 0 0 14px 2.5rem;
	margin: 0 0 14px;
	border-bottom: 1px solid var(--lm-line);
}
.pl-body ol > li:last-child { border-bottom: 0; margin-bottom: 0; }
.pl-body ol > li::before {
	content: counter(pl-item, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 2px;
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--lm-green-lt);
}
.pl-body ul { margin: 0 0 18px; padding-left: 1.25rem; }
.pl-body ul li { margin: 0 0 8px; }

/* ------------------------------------------------------------- tables */

.pl-table-wrap {
	/* The cookie declaration is five columns wide and will not fold. It gets
	   its own scroller rather than pushing the whole page sideways. */
	overflow-x: auto;
	margin: 0 0 24px;
	border: 1px solid var(--lm-line-strong);
	border-radius: 3px;
	-webkit-overflow-scrolling: touch;
}
.pl-table { width: 100%; min-width: 40rem; border-collapse: collapse; }
.pl-table caption {
	caption-side: top;
	padding: 12px 14px;
	text-align: left;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-muted);
	background: var(--lm-panel);
	border-bottom: 1px solid var(--lm-line-strong);
}
.pl-table th,
.pl-table td {
	padding: 11px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--lm-line);
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--lm-muted);
}
.pl-table thead th {
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--lm-ink);
	background: var(--lm-panel-2);
	white-space: nowrap;
}
.pl-table tbody tr:last-child th,
.pl-table tbody tr:last-child td { border-bottom: 0; }
.pl-table tbody tr:hover td { background: rgba(var(--lm-panel-rgb), .7); }
.pl-table .pl-cell-name { font-family: var(--lm-mono); color: var(--lm-ink); white-space: nowrap; }
.pl-table .pl-cell-when { font-family: var(--lm-mono); white-space: nowrap; }

.pl-group { margin: clamp(1.75rem, 5vw, 2.25rem) 0 0; }
.pl-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.pl-group-head h3 { margin: 0; padding: 0; border: 0; }
.pl-count {
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .08em;
	color: var(--lm-green-lt);
}

/* -------------------------------------------------------- what is next */

.pl-more { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
@media (min-width: 640px) { .pl-more { grid-template-columns: repeat(3, 1fr); } }
.pl-more a {
	color: inherit;
	height: 100%;
	display: block;
	padding: 16px 12px;
	border-top: 2px solid var(--lm-line-strong);
	border-bottom: 1px solid var(--lm-line);
	transition: background .16s;
}
.pl-more a:hover { background: rgba(var(--lm-panel-rgb), .85); color: inherit; }
.pl-more b {
	display: block;
	margin-bottom: 6px;
	font-family: var(--lm-sans);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.pl-more span { font-size: 0.8125rem; line-height: 1.55; color: var(--lm-muted); }

/* -------------------------------------------------------------- the 404 */

.er-main { display: flex; align-items: center; min-height: 68vh; }
.er-in { width: 100%; max-width: var(--lm-max); margin: 0 auto; padding: clamp(2.5rem, 8vw, 4.5rem) var(--lm-gutter); }

.er-code {
	margin: 0;
	font-family: var(--lm-mono);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}
.er-title {
	margin: 14px 0 0;
	font-family: var(--lm-sans);
	font-size: clamp(2.25rem, 10vw, 4.5rem);
	font-weight: 700;
	line-height: .95;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: var(--lm-ink);
}
.er-lead {
	margin: 16px 0 0;
	max-width: 34rem;
	font-size: clamp(0.9375rem, 3.4vw, 1.0625rem);
	line-height: 1.65;
	color: var(--lm-muted);
	text-wrap: pretty;
}

.er-search { margin: clamp(1.75rem, 5vw, 2.5rem) 0 0; display: flex; flex-wrap: wrap; gap: 10px; max-width: 34rem; }
.er-search-field {
	flex: 1 1 14rem;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 3.25rem;
	padding: 0 16px;
	border: 1px solid var(--lm-line-strong);
	border-radius: 3px;
	background: var(--lm-panel);
	--lm-field-fill: var(--lm-panel);
}
.er-search-field:focus-within { border-color: var(--lm-green-lt); }
.er-search-field > span { flex: 0 0 auto; color: var(--lm-green-lt); }
.er-search-field input {
	flex: 1 1 auto;
	width: 0;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--lm-ink);
	font-family: var(--lm-mono);
	font-size: 0.875rem;
}
.er-search .lm-btn { flex: 0 0 auto; min-height: 3.25rem; padding: 0 clamp(1.25rem, 4vw, 1.75rem); }

.er-links { margin: clamp(2rem, 6vw, 2.75rem) 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
@media (min-width: 560px) { .er-links { grid-template-columns: 1fr 1fr; } }
.er-links a {
	color: inherit;
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 14px 12px;
	border-bottom: 1px solid var(--lm-line);
	transition: background .16s;
}
.er-links a:hover { background: rgba(var(--lm-panel-rgb), .85); color: inherit; }
.er-links i { font-style: normal; font-family: var(--lm-mono); font-size: 0.6875rem; color: var(--lm-green-lt); }
.er-links b { font-family: var(--lm-sans); font-size: 0.9375rem; font-weight: 600; letter-spacing: .02em; color: var(--lm-ink); }
.er-links span { font-size: 0.8125rem; color: var(--lm-muted); }

/* ------------------------------------------------- dated entry list

   A list of things that happened, each with a date, a tag and a body.

   This began as .ab-updates in about.css, where it was the only caller.
   /news is the second, and a second caller is exactly where a component
   either moves or gets copied - the copy being how .fr-* / .rm-* and the
   six songkick importers all started. It lives here rather than in
   lm-base.css because both callers already load this file, so nothing
   site-wide has to be re-downloaded for it, and it is out-specified by
   nobody: no page stylesheet declares these names. */

.pl-log { margin: 0; padding: 0; list-style: none; }
.pl-log > li {
	display: grid;
	gap: 4px 24px;
	grid-template-columns: 1fr;
	padding: clamp(1.25rem, 4vw, 1.75rem) 0;
	border-top: 1px solid var(--lm-line-strong);
}
.pl-log > li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 768px) {
	.pl-log > li { grid-template-columns: 9rem 1fr; }
}

.pl-log-when { display: flex; align-items: baseline; gap: 10px; }
@media (min-width: 768px) { .pl-log-when { flex-direction: column; align-items: flex-start; gap: 6px; } }
.pl-log-date {
	font-family: var(--lm-mono);
	font-size: 1rem;
	font-weight: 700;
	color: var(--lm-ink);
}
.pl-log-tag {
	padding: 3px 8px;
	border: 1px solid rgba(var(--lm-green-lt-rgb), .5);
	border-radius: 3px;
	font-family: var(--lm-mono);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}

.pl-log-body h3 {
	margin: 0 0 8px;
	font-family: var(--lm-sans);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--lm-ink);
}
.pl-log-body p {
	margin: 0 0 12px;
	font-size: clamp(0.9375rem, 3.4vw, 1rem);
	line-height: 1.75;
	color: var(--lm-muted);
	text-wrap: pretty;
}
.pl-log-body ul { margin: 0 0 12px; padding-left: 1.25rem; }
.pl-log-body ul li {
	margin: 0 0 8px;
	font-size: clamp(0.9375rem, 3.4vw, 1rem);
	line-height: 1.7;
	color: var(--lm-muted);
}
.pl-log-body ul li:last-child { margin-bottom: 0; }
.pl-log-body > :last-child { margin-bottom: 0; }

/* The one-line summary under the heading. It is also what the periodical
   mail prints, so it is set apart from the body rather than being its
   first paragraph. */
.pl-log-lead {
	font-size: clamp(0.9375rem, 3.4vw, 1rem);
	line-height: 1.7;
	color: var(--lm-ink);
}

/* A worked example inside an entry - a couple of dated lines showing what
   the feature produces. Not a quotation from anybody, so no quote marks. */
.pl-log-quote {
	margin: 0 0 12px;
	padding: 12px 14px;
	background: rgba(var(--lm-panel-rgb), .85);
	border-left: 2px solid rgba(var(--lm-green-lt-rgb), .5);
	border-radius: 3px;
	font-size: 0.9375rem;
	line-height: 1.9;
	color: var(--lm-muted);
}
.pl-log-quote span {
	display: inline-block;
	min-width: 5.5rem;
	font-family: var(--lm-mono);
	font-size: 0.6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--lm-green-lt);
}

.pl-log-go { margin: 4px 0 0; }