/* .article *******************************/

.article {
	display: flex;
	flex-direction: column;
	gap: 10px;

	.graphic {

		img {
			opacity: 0.95;

			&:hover {
				opacity: 1;
			}
		}
	}

	.text {
		display: flex;
		flex-direction: column;
		gap: 5px;

		.topic {

			a {
				color: #c6503d;
				font-size: 1rem;
				font-weight: 800;
				text-decoration: none;
				text-transform: uppercase;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.title {
			font-size: 1.5rem;
			line-height: 1.8rem;

			a {
				color: #222;
				font-family: var(--font-headline);
				font-size: inherit;
				font-weight: 800;
				line-height: inherit;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		.tease {
			font-size: 1.2rem;
			line-height: 1.7rem;
			margin-bottom: 10px;
		}

		.author {
			background-color: transparent;
			border: 0;
			color: var(--color-subtle);
			outline: 0;
			padding: 0;
			text-align: inherit;
			text-transform: uppercase;

			&:hover {
				text-decoration: underline;
			}
		}

		.date {
			color: var(--color-subtle);
		}
	}
}

/* .article-main *******************************/

.article-main {
	margin-bottom: 40px;

	.text {
		padding: 0 20px;

		.title {
			font-size: 2.7rem;
			line-height: 3.0rem;

			a {
				font-size: inherit;
				line-height: inherit;

        h1 {
          font-family: var(--font-callout);
          font-size: 2rem;
          font-weight: 800;
          margin-bottom: 5px;
        }
			}
		}

		.tease {
			font-size: 1.5rem;
			line-height: 2.0rem;
		}

		.meta {
			align-items: center;
			display: flex;
			gap: 10px;
		}
	}
}

@media (min-width: 1000px) {

	.article-main {
		margin-bottom: 0;

		.text {
			padding: 0;

			.title {

				a {

    	    h1 {
  	        font-size: 2.5rem;
	        }
				}
			}

			.tease {
			}

			.meta {
			}
		}
	}
}

/* .article-list *******************************/

.article-list {
	border-top: 1px solid #ccc;
	padding: 20px 20px 0 20px;
	flex-direction: row;
	gap: 5px;

	.graphic {
		width: 120px;
	}

	.text {
		width: calc(100% - 130px);

		.title {
			font-size: 1.1rem;
			line-height: 1.3rem;

			a {
				font-size: inherit;
				line-height: inherit;
			}
		}
	}
}

@media (min-width: 1000px) {

	.article-list {
		border: 0;
		padding: 0;

		&:not(:last-child) {
			border-bottom: 1px solid #ccc;
			padding-bottom: 20px;
			margin-bottom: 20px;
		}

		.graphic {
		}

		.text {

			.title {

				a {
				}
			}
		}
	}
}

/* .article-freeform *******************************/

	.article-freeform {
		align-items: center;
		background-color: #f7f7f7;
		border: 1px solid #ccc;
		justify-content: center;
		min-height: 100px;
		padding: 20px;
		text-align: center;
	}


@media (min-width: 1000px) {
}