/* ==========================================================================
   LITTERMATE : page compositions
   ========================================================================== */

/* --- Home hero ------------------------------------------------------------ */

.hero { padding-block: clamp(52px, 7vw, 104px) clamp(40px, 5vw, 72px); }

.hero__word {
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 18, "WONK" 0, "opsz" 144;
	font-weight: 600;
	font-size: var(--fs-hero);
	line-height: 0.94;
	letter-spacing: -0.035em;
	text-transform: uppercase;
	margin: 0;
}

.hero__tagline {
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 46, "opsz" 60;
	font-style: italic;
	font-size: clamp(1.2rem, 0.9rem + 1.3vw, 1.75rem);
	line-height: 1.34;
	color: var(--ink);
	margin-top: 18px;
	padding-bottom: 0.12em;
}

.hero__standfirst {
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--graphite);
	margin-top: 12px;
	max-width: 46ch;
}

.hero__meta {
	margin-top: var(--sp-3);
	padding-top: var(--sp-2);
	border-top: 1px solid var(--rule);
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	align-items: center;
}

.hero__actions { margin-top: var(--sp-3); }

/* --- Lead feature --------------------------------------------------------- */

.lead { display: grid; gap: var(--sp-3); align-items: start; }

@media (min-width: 900px) {
	.lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
	.lead__body { padding-top: 4px; }
}

/* --- Teaser row ----------------------------------------------------------- */

.teasers { display: grid; gap: var(--sp-3); }

.teaser { padding-top: 16px; border-top: 1px solid var(--ink); display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 640px) { .teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); } }
@media (min-width: 1180px) { .teasers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Library index on home ------------------------------------------------ */

.libindex { display: grid; gap: 0; border-top: 1px solid var(--ink); }

.libindex__item { border-bottom: 1px solid var(--rule); }

.libindex__link {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2px;
	padding: 14px 0;
	color: var(--ink);
}

.libindex__link:hover .libindex__name { color: var(--cobalt); }

.libindex__name {
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 26, "opsz" 40;
	font-weight: 600;
	font-size: 1.16rem;
	letter-spacing: -0.01em;
}

.libindex__class {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	color: var(--graphite);
	line-height: 1.6;
}

@media (min-width: 640px) {
	.libindex__link { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: baseline; }
}

@media (min-width: 900px) {
	.libindex { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-4); }
}

/* --- Method list ---------------------------------------------------------- */

.methods { display: grid; gap: var(--sp-3); counter-reset: method; }

.method { border-top: 1px solid var(--rule); padding-top: 16px; counter-increment: method; }

.method__num {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	color: var(--cobalt);
	letter-spacing: 0.1em;
}

.method__num::before { content: counter(method, decimal-leading-zero); }

.method__title { margin-top: 8px; }

.method__body { margin-top: 8px; font-size: var(--fs-small); line-height: 1.65; color: var(--graphite); }

@media (min-width: 640px) { .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); } }
@media (min-width: 1180px) { .methods { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --- Two-column explainer ------------------------------------------------- */

.duo { display: grid; gap: var(--sp-3); }

@media (min-width: 900px) {
	.duo { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--sp-5); }
}

/* --- Library page --------------------------------------------------------- */

.libpage { display: grid; gap: var(--sp-4); }

@media (min-width: 1180px) {
	.libpage { grid-template-columns: 236px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
	.libpage__rail { position: sticky; top: 32px; }
}

.railtags { display: flex; flex-wrap: wrap; gap: 8px; }

.railtag {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	text-transform: uppercase;
	letter-spacing: 0.13em;
	color: var(--graphite);
	border: 1px solid var(--rule);
	padding: 6px 10px;
}

.profile { padding-top: var(--sp-4); border-top: 1px solid var(--ink); }

.profile + .profile { margin-top: var(--sp-4); }

.profile__label {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--graphite);
	line-height: 1.75;
}

.profile__label b { color: var(--cobalt); font-weight: 500; }

.profile__title { margin-top: 12px; }

.profile__sub {
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 44, "opsz" 30;
	font-style: italic;
	font-size: 1.1rem;
	line-height: 1.45;
	color: var(--graphite);
	margin-top: 10px;
	max-width: 54ch;
	padding-bottom: 0.1em;
}

.profile__body { margin-top: var(--sp-3); }

.profile__h {
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: var(--ink);
	margin-top: 1.9em;
	margin-bottom: 0.55em;
}

.profile__body > p:first-child + .profile__h { margin-top: 1.5em; }

.profile__xref {
	margin-top: var(--sp-3);
	padding-top: 12px;
	border-top: 1px solid var(--rule);
	font-family: var(--font-mono);
	font-size: var(--fs-mono-sm);
	line-height: 1.7;
	color: var(--graphite);
}

/* --- Dispatches ----------------------------------------------------------- */

.dlead { display: grid; gap: var(--sp-3); }

@media (min-width: 900px) {
	.dlead { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-4); align-items: center; }
}

.dgrid { display: grid; gap: var(--sp-4) var(--sp-3); }

@media (min-width: 640px) { .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Article -------------------------------------------------------------- */

.arthero { border-bottom: 1px solid var(--rule); }

.arthead { padding-block: clamp(36px, 4.5vw, 60px); }

.arthead__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	align-items: center;
	margin-bottom: var(--sp-3);
}

.artbody { position: relative; }

@media (min-width: 1180px) {
	.artbody { display: grid; grid-template-columns: minmax(0, var(--measure)) 250px; gap: var(--sp-5); align-items: start; }
	.artbody__margin { position: sticky; top: 40px; }
	.artbody__margin .marginal { margin-block: 0; }
}

.artfig { margin-block: var(--sp-4); }

.bio {
	border: 1px solid var(--rule);
	background: var(--vellum);
	padding: var(--sp-3);
	display: grid;
	gap: 16px;
}

@media (min-width: 640px) { .bio { grid-template-columns: 64px 1fr; gap: 20px; } }

.bio__mark {
	width: 64px;
	height: 64px;
	border: 1px solid var(--rule);
	background: var(--paper);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 20, "opsz" 60;
	font-weight: 600;
	font-size: 1.15rem;
}

.related { display: grid; gap: var(--sp-3); }

@media (min-width: 640px) { .related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.related__item { border-top: 1px solid var(--ink); padding-top: 14px; }

/* --- About ---------------------------------------------------------------- */

.creed {
	border: 1px solid var(--ink);
	background: var(--vellum);
	padding: clamp(24px, 3vw, 40px);
}

.creed__text {
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 40, "opsz" 72;
	font-size: clamp(1.25rem, 0.95rem + 1.3vw, 1.75rem);
	line-height: 1.36;
	letter-spacing: -0.012em;
	max-width: 44ch;
}

.standards { display: grid; gap: 0; border-top: 1px solid var(--ink); }

.standard {
	border-bottom: 1px solid var(--rule);
	padding: 18px 0;
	display: grid;
	gap: 6px;
}

@media (min-width: 640px) {
	.standard { grid-template-columns: 40px minmax(0, 1fr); gap: 20px; }
}

.standard__num { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--cobalt); }

.standard__text { font-size: var(--fs-small); line-height: 1.65; }
.standard__text b { font-weight: 600; }

.masthead-list { display: grid; gap: 0; border-top: 1px solid var(--ink); }

.person { border-bottom: 1px solid var(--rule); padding-block: var(--sp-3); display: grid; gap: 16px; }

@media (min-width: 640px) {
	.person { grid-template-columns: 88px minmax(0, 1fr); gap: 24px; align-items: start; }
}

@media (min-width: 1180px) {
	.person { grid-template-columns: 88px 220px minmax(0, 1fr); gap: 32px; }
}

.person__mark {
	width: 88px;
	height: 88px;
	border: 1px solid var(--rule);
	background: var(--vellum);
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-variation-settings: "SOFT" 20, "opsz" 72;
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.01em;
}

.person__name { font-family: var(--font-display); font-variation-settings: "SOFT" 26, "opsz" 40; font-weight: 600; font-size: 1.2rem; letter-spacing: -0.012em; }

.person__role { font-family: var(--font-mono); font-size: var(--fs-mono-sm); text-transform: uppercase; letter-spacing: 0.14em; color: var(--cobalt); margin-top: 6px; }

.person__bio { font-size: var(--fs-small); line-height: 1.68; color: var(--graphite); }

.contactgrid { display: grid; gap: var(--sp-3); }

@media (min-width: 640px) { .contactgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); } }
@media (min-width: 1180px) { .contactgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.contactgrid__block { border-top: 1px solid var(--rule); padding-top: 14px; }

.contactgrid__label { font-family: var(--font-mono); font-size: var(--fs-mono-sm); text-transform: uppercase; letter-spacing: 0.14em; color: var(--graphite); }

.contactgrid__body { margin-top: 8px; font-size: var(--fs-small); line-height: 1.7; }

/* --- Policies ------------------------------------------------------------- */

.policy { display: grid; gap: var(--sp-4); }

@media (min-width: 1180px) {
	.policy { grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
	.policy__rail { position: sticky; top: 32px; }
}

.policy__section { padding-top: var(--sp-4); border-top: 1px solid var(--ink); }

.policy__section + .policy__section { margin-top: var(--sp-4); }

.policy__sub { padding-top: var(--sp-3); }

.policy__sub + .policy__sub { border-top: 1px solid var(--rule); margin-top: var(--sp-3); }

.callout {
	border: 1px solid var(--ink);
	background: var(--vellum);
	padding: clamp(20px, 2.6vw, 32px);
	margin-top: var(--sp-3);
}

.callout .h3 { margin-bottom: 12px; }