/* ==========================================================================
   Tokens
   Colours pulled from the Figma export's styles.css custom properties;
   the rest (backgrounds, spacing) reverse-engineered from the PNG mockups
   since the export didn't carry real layout values.
   ========================================================================== */
:root {
	--c-dark: #1b1b1a;
	--c-white: #ffffff;
	--c-cream: #d7d0c6;
	--c-cream-light: #eae7e0;
	--c-grey-warm: #8b8680;

	--font-display: 'Suisse Intl', Arial, sans-serif;
	--font-body: 'Suisse Intl', Arial, sans-serif;
	--font-mono: 'Noto Sans Mono', 'Courier New', monospace;

	/* Content is boxed at --content-max and centred; backgrounds and photos
	   still bleed to the viewport edge. --edge is the horizontal inset every
	   section gives its content: the gutter, or whatever centres the column
	   once the viewport is wider than it. --edge-bleed is the same for
	   elements that run edge to edge in the design (tracks, dense grids):
	   nothing until the viewport outgrows the column. */
	--gutter: clamp(16px, 1.7vw, 24px);
	--content-max: 1920px;
	--edge: max(var(--gutter), calc((100vw - var(--content-max)) / 2));
	--edge-bleed: max(0px, calc((100vw - var(--content-max)) / 2));

	/* Todos los titulares de sección y de página miden lo mismo: 80px a 1440,
	   que es lo que dan los PNG del diseño. */
	--titular: clamp(40px, 5.6vw, 108px);
}

/* Suisse Int'l (titulares y textos) y Noto Sans Mono (datos, etiquetas y
   fechas), servidas desde el tema. Falta por recibir el peso Medium de la
   Suisse, que el tema usa en el listado del catálogo: mientras, el navegador
   lo saca del Book. */
@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-LightItalic.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-Book.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-BookIt.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Suisse Intl';
	src: url('../fonts/SuisseIntl-BoldItalic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Noto Sans Mono';
	src: url('../fonts/NotoSansMono-Light.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Noto Sans Mono';
	src: url('../fonts/NotoSansMono-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--c-dark);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
}

img, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

h1, h2, h3, p {
	margin: 0;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0;
}

.logo-mark {
	height: 20px;
	width: auto;
	display: block;
}