@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(./fonts/inter.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@view-transition {
    navigation: auto;
}

:root {
	--accent-red: color(display-p3 0.75 0.045 0.045);
	--text: color(display-p3 0 0 0 / 1);
}

* { box-sizing: border-box; }

html {
	font: 100%/1.4 'Inter', system-ui, sans-serif;
	color: var(--text);
}

a {
	color: var(--accent-red);
	text-decoration: none;
}

dl {
	display: grid;
	grid-template-columns: 1fr 2fr;
    margin-block-start: 0;
    margin-block-end: 1.5rem;
}

h1, h2, h3 {
	font-weight: 550;
}

h1 { font-size: 1.25rem; margin: 0 0 1.5rem 0; }
h2 { font-size: 1.5rem; margin: 0 0 1rem 0; }
h3 { font-size: 1.25rem; margin: 0 0 0.25rem 0; }
h4 { font-size: 1.0rem; margin: 0 0 0.25rem 0; }

h2 + h4 {
    margin-block-end: 2rem;
}

:is(dd, dt) {
	margin: 0;
	padding-block: 0.4em 0.45em;
}

:is(dd, dt):nth-of-type(n+2) {
	border-block-start: 2px solid currentColor;
}

dt { font-weight: 550; }
dd { display: flex; }
dd .sep { padding-inline: 1ch; }

dd input,
dd textarea,
.l-name input {
    flex: 1;
    font-size: 1rem;
    width: 100%;
    border: 0;
}

dd textarea {
    resize: vertical;
    field-sizing: normal;
    line-height: 1.4;
    min-height: 4lh;
}

input[type="submit"],
button,
.btn {
    font-size: 0.9rem;
    font-weight: 550;
    line-height: inherit;
    appearance: none;
    display: inline-block;
    border: 0;
    padding: 0.2em 0.6em;
    margin-trim: block;
    text-decoration: none;
    background: var(--text);
    border: 2px solid var(--text);
    color: #fff;
    cursor: pointer;
}

input[type="submit"].secondary,
button.secondary,
.btn.secondary {
    background-color: transparent;
    color: var(--text);
    border: 2px solid currentColor;
}

input[type="submit"]:is(:hover, :focus),
button:is(:hover, :focus),
.btn:is(:hover, :focus) {
    background: var(--accent-red);
    border-color: var(--accent-red);
    color: #fff;
}

.container {
	width: min(96%, 60ch);
	margin: 2rem auto 6rem;
	display: grid;
	grid-template-columns: 1fr;
}

#container > * {
	outline: 0px solid red;
}

header .signet {
	width: 200px;
	height: auto;
}

.signet .letter { fill: var(--text); }
.signet .logo { fill: var(--accent-red); }

header + nav {
    margin-block-end: 1rem;
}

nav ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

nav ul li {
	text-transform: uppercase;
	font-weight: 550;
	text-align: center;
}

nav ul a {
	display: block;
	font-size: 0.9rem;
	color: var(--text);
	padding: 0.2em 0.6em;
	border: 2px solid currentColor;
}

nav ul a:hover {
	background: var(--accent-red);
	border-color: var(--accent-red);
	color: #fff;
}

nav ul + h2 {
	font-size: 1.17em;
	margin-block-start: 2rem;
}

main h3:first-of-type {
	font-size: 1.5em;
}

main h3:nth-of-type(n+2) {
	margin-block-start: 4rem;
}

main em { font-weight: bold; font-style: normal; }

.overview-grid {
    --column-amount: 6;
    display: grid;
    grid-template-columns: 6ch repeat(calc(var(--column-amount) - 1), 1fr);
    grid-row-gap: 0.5rem;
    border: 0px solid red;
}

.overview-grid article {
    display: contents;
}

.overview-grid article .vintage { grid-column-start: span 1; }
.overview-grid article .name { grid-column-start: span 4; }
.overview-grid article .sweetness { grid-column-start: span 1; text-align: right; }
.overview-grid article .meta {
    margin-block-start: 0.5rem;
    display: flex;
    gap: 0.5ch;
}

.overview-grid article > * {
    border-block-end: 1px solid currentColor;
    padding-block-end: 1rem;
}

.overview-grid article:last-of-type > * {
    border-block-end: 0;
}

.overview-grid h3 {
    font-size: 1rem;
    margin: 0;
}

.overview-grid h3 a { color: currentColor; }
.overview-grid h3 a:is(:hover, :focus) { color: var(--accent-red); }

.varieties {
    list-style: none;
    padding: 0;
    display: flex;
}

.tag {
    background: #eee;
    padding: 0.3em 0.6em 0.2em;
    border-radius: 1rem;
    font-size: 0.85rem;
    color: color-mix(in srgb, currentColor 50%, #eee 50%)
}

.tag.outline {
    background: transparent;
    border: 1px solid currentColor;
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 500;
    color: currentColor;
}

.message {
    background: #ffde00;
    padding: 0.3rem 0.6rem 0.4rem;
    color: #73520a;
    border-radius: 0.35rem;
}

.message.error {
    background: #e1788a;
    padding: 0.3rem 0.6rem 0.4rem;
    color: #55051b;
    border-radius: 0.35rem;
}

footer {
	margin-block-start: 5rem;
}

.list-overview {
	border-collapse: collapse;
	border: 0;
}

.list-overview :is(td, th) {
	border: 0;
	text-align: left;
	font-weight: normal;
	padding: 0.5rem 0;
}

.list-overview td {
	border-block-start: 1px solid #000;
}

.list-overview :is(td, th):last-child {
	text-align: right;
	opacity: 0.2;
	transition: opacity 0.35s ease;
}

.list-overview tr:hover :is(td, th):last-child {
	opacity: 1;
}

.list-overview a:not(.btn) {
	color: currentColor;
}

.list-builder {
    display: flex;
    gap: 1rem;
    margin-block-end: 2rem;
}

.list-builder .all-wines,
.list-builder .selected-wines {
    flex: 1;
}

.list-builder ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid currentColor;
    min-height: 50vh;
}

.list-builder li {
    padding: 0.5rem 1.0rem;
    border-block-end: 1px solid currentColor;
    cursor: pointer;
}

.list-builder li:hover {
    background-color: #eee;
}

.list-builder li:last-child {
    /* border-block-end: 0; */
}

.l-name {
	display: flex;
	gap: 1rem;
}

.l-name input {
	border-block-end: 1px solid currentColor;
}

.list-view ol {
	list-style: none;
	padding: 0;
}

.list-view ol > li {
	list-style: none;
	padding-block: 1.5rem;
}

.list-view ol > li + li {
	border-block-start: 0.0rem solid currentColor;
}

.list-view h3 {
	font-weight: 450;
}

.list-view .l-varieties {
	display: flex;
	gap: 1ch;
}

.footer-nav a {
	color: currentColor;
	text-decoration: underline;
}

@media (max-width: 35rem) {
	html {
		font-size: 1.1875em;
	}

	nav ul {
		gap: 0.5ch;
	}

	dl {
		grid-template-columns: 1fr;
	}

	dt {
		padding-block-end: 0;
	}

	dd {
		font-size: 1.375rem;
		padding-block-start: 0;
	}

	dd:nth-of-type(n) {
		border-block-start: 0;
	}
}

@media print {

	@page {
		size: A4 portrait;
		margin: 5mm;
	}

	header,
	nav,
	footer {
		display: none !important;
	}

	.list-view h1 { display: none; }

	.list-view .pages > li {
		height: calc(100vh - 10mm);
		overflow: hidden;
		outline: 0px solid red;

		/*
		page-break-after: always;
		break-after: page;
		*/
	}

	.list-view .pages > li:nth-child(n+2) {
		background: red;

		break-before: page;
	}
}