/*
Theme Name: Peptides TIL
Theme URI: https://peptidestil.local/
Author: Peptides TIL
Description: A dense, wire-service style news aggregator theme for Peptides TIL. Bordered story panels, a sponsor rail, a discussion-board digest, plus dedicated article, video and links-directory templates.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: peptidestil
Tags: news, magazine, custom-menu, featured-images, right-sidebar, block-styles
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--til-ink: #000000;
	--til-body: #1c1c1c;
	--til-muted: #4a4a4a;
	--til-link: #0000cc;
	--til-link-hover: #cc0000;
	--til-page: #ffffff;
	--til-shell: #f2f2f2;
	--til-hairline: #000000;
	--til-soft-line: #bbbbbb;

	--til-panel-border: 3px;
	--til-shell-width: 1024px;
	--til-rail-width: 210px;
	--til-gutter: 22px;

	--til-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
	--til-display: "Arial Black", "Arial Bold", Gadget, Arial, sans-serif;
}

/* ==========================================================================
   2. Reset / base
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--til-shell);
	color: var(--til-body);
	font-family: var(--til-sans);
	font-size: 14px;
	line-height: 1.4;
}

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

a {
	color: var(--til-link);
	text-decoration: underline;
}

a:hover,
a:focus {
	color: var(--til-link-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
	outline: 2px solid var(--til-link-hover);
	outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 8px;
	line-height: 1.15;
	color: var(--til-ink);
	overflow-wrap: break-word;
}

/* A pasted URL or long compound must never widen the page. */
p,
li,
td,
th,
figcaption {
	overflow-wrap: break-word;
}

p {
	margin: 0 0 10px;
}

ul,
ol {
	margin: 0 0 10px;
	padding-left: 20px;
}

figure {
	margin: 0;
}

/* Accessibility helpers */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: #fff;
	border: 2px solid var(--til-ink);
	padding: 8px 14px;
	font-weight: bold;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

/* ==========================================================================
   3. Shell
   ========================================================================== */

.til-shell {
	max-width: var(--til-shell-width);
	margin: 0 auto;
	background: var(--til-page);
	min-height: 100vh;
	padding: 0 14px;
	border-left: 1px solid #d8d8d8;
	border-right: 1px solid #d8d8d8;
}

.til-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--til-rail-width);
	gap: var(--til-gutter);
	align-items: start;
	padding: 14px 0 30px;
}

/* ==========================================================================
   4. Masthead
   ========================================================================== */

.til-masthead {
	display: grid;
	grid-template-columns: auto minmax(140px, 240px) 1fr;
	align-items: center;
	gap: 18px;
	padding: 14px 0 12px;
	border-bottom: 4px double var(--til-hairline);
}

/* Grid children default to min-width:auto, which lets the nowrap nav push the
   masthead wider than the viewport. */
.til-masthead > * {
	min-width: 0;
}

.til-brand {
	margin: 0;
	font-family: var(--til-display);
	font-size: 30px;
	line-height: 1;
	letter-spacing: -0.6px;
}

.til-brand a {
	color: var(--til-ink);
	text-decoration: none;
}

.til-brand a:hover {
	color: var(--til-ink);
}

.til-brand__tagline {
	display: block;
	font-family: var(--til-sans);
	font-size: 11px;
	font-weight: normal;
	letter-spacing: 0;
	color: var(--til-muted);
	margin-top: 3px;
}

/* Search */

.til-search {
	display: flex;
}

.til-search__field {
	width: 100%;
	font-family: var(--til-sans);
	font-size: 13px;
	padding: 4px 8px;
	border: 1px solid #767676;
	background: #fff;
	color: var(--til-body);
	border-radius: 3px;
}

.til-search__submit {
	position: absolute;
	left: -9999px;
}

/* Primary nav */

.til-nav {
	justify-self: end;
}

.til-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: flex-end;
}

.til-nav a {
	font-weight: bold;
	font-size: 14px;
	white-space: nowrap;
}

.til-nav .current-menu-item > a,
.til-nav .current_page_item > a,
.til-nav .is-current > a {
	color: var(--til-link-hover);
}

/* ==========================================================================
   5. Panels (shared black-bordered container)
   ========================================================================== */

.til-panel {
	border: var(--til-panel-border) solid var(--til-hairline);
	padding: 14px 16px;
	margin-bottom: 14px;
	background: var(--til-page);
}

.til-panel--flush {
	padding: 10px 12px;
}

/* ==========================================================================
   6. Story cards (home stream)
   ========================================================================== */

.til-card {
	border: var(--til-panel-border) solid var(--til-hairline);
	padding: 10px 12px;
	margin-bottom: 12px;
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 4px 14px;
	align-items: start;
}

.til-card--no-thumb {
	grid-template-columns: minmax(0, 1fr);
}

.til-card__media {
	grid-row: span 2;
}

.til-card__media img {
	width: 92px;
	height: 62px;
	object-fit: cover;
	border: 1px solid #d0d0d0;
}

.til-card__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.2;
}

.til-card__title a {
	color: #11235e;
	text-decoration: none;
}

.til-card__title a:hover {
	color: var(--til-link-hover);
	text-decoration: underline;
}

.til-card__excerpt {
	margin: 0;
	font-size: 13.5px;
	color: var(--til-body);
}

.til-card__more {
	grid-column: 2;
	text-align: right;
	font-size: 13px;
	font-style: italic;
	margin: 4px 0 0;
}

.til-card--no-thumb .til-card__more {
	grid-column: 1;
}

/* ==========================================================================
   7. Article / single
   ========================================================================== */

.til-article__title {
	font-family: var(--til-display);
	font-size: 30px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.til-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.til-article__date {
	font-size: 13px;
	color: var(--til-body);
}

.til-article__date b {
	text-transform: uppercase;
}

.til-share {
	font-size: 13px;
	font-weight: normal;
	background: none;
	border: 0;
	padding: 0;
	color: var(--til-link);
	text-decoration: underline;
	cursor: pointer;
	font-family: var(--til-sans);
}

.til-share:hover {
	color: var(--til-link-hover);
}

.til-share__icon {
	font-size: 11px;
	text-decoration: none;
	display: inline-block;
	margin-left: 2px;
}

/* Lede: image sits left of the opening copy, and longer stories wrap back
   underneath it rather than leaving a dead column. */

.til-article__lede::after {
	content: "";
	display: block;
	clear: both;
}

.til-article__figure {
	float: left;
	width: 260px;
	margin: 0 18px 12px 0;
}

.til-article__lede--no-media .til-article__figure {
	float: none;
	width: auto;
	margin: 0 0 12px;
}

.til-article__figure img {
	width: 100%;
	border: 1px solid #d0d0d0;
}

.til-article__figure figcaption {
	font-size: 11px;
	color: var(--til-muted);
	padding-top: 4px;
}

.til-article__body {
	font-size: 13.5px;
}

.til-article__body h2 {
	font-size: 17px;
	margin-top: 16px;
}

.til-article__body h3 {
	font-size: 15px;
	margin-top: 14px;
}

.til-article__body blockquote {
	margin: 12px 0;
	padding-left: 12px;
	border-left: 3px solid var(--til-hairline);
	font-style: italic;
}

.til-article__body a {
	text-decoration: underline;
}

.til-article__body img {
	height: auto;
}

/* Editor content the theme does not control: keep anything intrinsically wide
   scrolling inside itself rather than widening the page. */

.til-article__body pre,
.til-article__body .wp-block-code {
	overflow-x: auto;
	max-width: 100%;
}

.til-article__body table,
.til-article__body .wp-block-table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.til-article__body iframe,
.til-article__body embed,
.til-article__body object,
.til-article__body video {
	max-width: 100%;
}

/* Follow-on teasers below an article */

.til-teasers {
	margin-top: 18px;
	border-top: 1px solid var(--til-soft-line);
	padding-top: 12px;
}

.til-teaser {
	margin-bottom: 14px;
}

.til-teaser__title {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 3px;
}

.til-teaser__title a {
	color: var(--til-ink);
	text-decoration: none;
}

.til-teaser__title a:hover {
	color: var(--til-link-hover);
	text-decoration: underline;
}

.til-teaser p {
	margin: 0;
	font-size: 13.5px;
}

/* ==========================================================================
   8. Video templates
   ========================================================================== */

.til-video__stage {
	max-width: 470px;
	margin: 0 auto 6px;
}

.til-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.til-embed iframe,
.til-embed video,
.til-embed object,
.til-embed embed {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Poster fallback when no embeddable source is set */

.til-embed__poster {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.til-embed__poster img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.til-embed__play {
	position: relative;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-weight: bold;
	font-size: 15px;
	letter-spacing: 1px;
	padding: 10px 22px;
	border: 2px solid #fff;
}

.til-video__caption {
	max-width: 470px;
	margin: 0 auto 4px;
	font-size: 12px;
	color: var(--til-muted);
	text-align: center;
}

.til-video__more {
	margin-top: 16px;
	border-top: 3px solid var(--til-hairline);
	padding-top: 12px;
}

.til-section-title {
	font-family: var(--til-display);
	font-size: 20px;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.til-video-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 14px;
}

.til-video-grid__item {
	font-size: 13px;
}

.til-video-grid__item img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid #d0d0d0;
	margin-bottom: 6px;
}

.til-video-grid__item a {
	color: var(--til-ink);
	text-decoration: none;
	font-weight: bold;
	display: block;
	line-height: 1.25;
}

.til-video-grid__item a:hover {
	color: var(--til-link-hover);
	text-decoration: underline;
}

.til-video-grid__placeholder {
	width: 100%;
	aspect-ratio: 16 / 10;
	background: #e8e8e8;
	border: 1px solid #d0d0d0;
	margin-bottom: 6px;
}

/* ==========================================================================
   9. Links directory
   ========================================================================== */

.til-directory__title {
	font-family: var(--til-display);
	font-size: 26px;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.til-directory__intro {
	font-size: 13.5px;
	margin-bottom: 14px;
}

.til-directory__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: 14px;
	align-items: start;
}

.til-linkbox {
	border: 1px solid var(--til-hairline);
	padding: 10px 12px 12px;
}

.til-linkbox__title {
	font-size: 14px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	margin: 0 0 8px;
	line-height: 1.2;
}

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

.til-linkbox li {
	margin-bottom: 6px;
	font-size: 13.5px;
	line-height: 1.3;
}

.til-linkbox li:last-child {
	margin-bottom: 0;
}

.til-linkbox__note {
	display: block;
	font-size: 11px;
	color: var(--til-muted);
}

/* ==========================================================================
   10. Discussion board digest
   ========================================================================== */

.til-board {
	margin-top: 6px;
}

.til-board__title {
	font-size: 19px;
	font-weight: bold;
	margin: 0 0 6px;
}

.til-board__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.til-board__table th {
	text-align: left;
	font-weight: bold;
	color: var(--til-ink);
	padding: 0 8px 4px 0;
	border-bottom: 1px solid var(--til-soft-line);
	white-space: nowrap;
}

.til-board__table td {
	padding: 3px 8px 3px 0;
	vertical-align: top;
}

.til-board__table tr + tr td {
	border-top: 1px solid #eee;
}

.til-board__col--replies,
.til-board__col--posted {
	white-space: nowrap;
}

.til-board__col--replies {
	text-align: left;
}

.til-board__footer {
	margin-top: 8px;
	font-size: 13px;
}


/* ==========================================================================
   11. Sponsor rail
   ========================================================================== */

.til-rail__title {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin: 0 0 10px;
}

.til-ad {
	border: 1px solid var(--til-hairline);
	min-height: 168px;
	margin-bottom: 14px;
	padding: 6px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

.til-ad__label {
	position: absolute;
	top: 4px;
	left: 6px;
	font-size: 11px;
	color: var(--til-muted);
}

.til-ad img {
	max-height: 220px;
	width: auto;
}

.til-ad__link {
	display: block;
	text-decoration: none;
}

.til-rail__widget {
	margin-bottom: 18px;
	font-size: 13px;
}

.til-rail__widget .widget-title {
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid var(--til-hairline);
	padding-bottom: 3px;
	margin-bottom: 6px;
}

/* ==========================================================================
   12. Archive headers, pagination, footer, misc
   ========================================================================== */

.til-page-title {
	font-family: var(--til-display);
	font-size: 24px;
	text-transform: uppercase;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 3px solid var(--til-hairline);
}

.til-pagination {
	margin: 4px 0 0;
	font-size: 13px;
}

.til-pagination .page-numbers {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid var(--til-hairline);
	margin-right: 4px;
	text-decoration: none;
}

.til-pagination .page-numbers.current {
	background: var(--til-ink);
	color: #fff;
}

.til-empty {
	border: 3px solid var(--til-hairline);
	padding: 18px;
	font-size: 14px;
}

.til-footer {
	border-top: 4px double var(--til-hairline);
	padding: 12px 0 26px;
	font-size: 12px;
	color: var(--til-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	justify-content: space-between;
}

.til-footer__nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   12b. Comments
   ========================================================================== */

.til-comments {
	margin-top: 18px;
	border-top: 1px solid var(--til-soft-line);
	padding-top: 12px;
}

.til-comments__title {
	font-size: 17px;
	font-weight: bold;
	margin: 0 0 10px;
}

.til-comments__list,
.til-comments__list .children {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
}

.til-comments__list .children {
	margin: 10px 0 0 22px;
	padding-left: 12px;
	border-left: 1px solid var(--til-soft-line);
}

.til-comments__list li.comment {
	margin-bottom: 12px;
	font-size: 13.5px;
}

.til-comments__list .comment-meta {
	font-size: 12px;
	color: var(--til-muted);
	margin-bottom: 4px;
}

.til-comments__list .comment-author img {
	display: inline-block;
	vertical-align: middle;
	margin-right: 6px;
}

.til-comments__closed {
	font-size: 13px;
	color: var(--til-muted);
}

/* Form fields. The default comment textarea carries a cols attribute, which
   forces the page wider than a phone viewport unless width is pinned. */

.til-comments input[type="text"],
.til-comments input[type="email"],
.til-comments input[type="url"],
.til-comments textarea {
	width: 100%;
	max-width: 100%;
	font-family: var(--til-sans);
	font-size: 13.5px;
	padding: 5px 7px;
	border: 1px solid #767676;
	background: #fff;
	color: var(--til-body);
}

.til-comments input[type="text"],
.til-comments input[type="email"],
.til-comments input[type="url"] {
	max-width: 320px;
}

.til-comments .comment-form-comment,
.til-comments .comment-form-author,
.til-comments .comment-form-email,
.til-comments .comment-form-url,
.til-comments .comment-form-cookies-consent {
	margin-bottom: 10px;
}

.til-comments label {
	display: block;
	font-size: 13px;
	font-weight: bold;
	margin-bottom: 3px;
}

.til-comments .comment-form-cookies-consent label {
	display: inline;
	font-weight: normal;
}

.til-comments .comment-notes,
.til-comments .form-submit {
	font-size: 12.5px;
	color: var(--til-muted);
}

.til-comments .submit {
	font-family: var(--til-sans);
	font-size: 13px;
	font-weight: bold;
	padding: 6px 16px;
	border: 2px solid var(--til-hairline);
	background: #fff;
	color: var(--til-ink);
	cursor: pointer;
}

.til-comments .submit:hover {
	background: var(--til-ink);
	color: #fff;
}

/* WordPress core alignment / caption classes */

.alignleft {
	float: left;
	margin: 0 14px 10px 0;
}

.alignright {
	float: right;
	margin: 0 0 10px 14px;
}

.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

.wp-caption-text,
.wp-element-caption {
	font-size: 11px;
	color: var(--til-muted);
}

.sticky .til-card {
	border-color: var(--til-link-hover);
}

/* ==========================================================================
   12c. bbPress
   Restyles the plugin's default chrome to match the wire-service look.
   ========================================================================== */

#bbpress-forums {
	font-family: var(--til-sans);
	font-size: 13.5px;
	color: var(--til-body);
	margin-bottom: 14px;
}

#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-permalink {
	font-weight: bold;
}

/* Column headers: same rule treatment as the home digest table. */

#bbpress-forums li.bbp-header {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--til-hairline);
	padding: 0 0 4px;
	font-weight: bold;
	font-size: 13px;
	color: var(--til-ink);
	text-transform: none;
}

#bbpress-forums li.bbp-footer {
	display: none;
}

#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-lead-topic {
	border: 0;
	background: none;
	margin-bottom: 14px;
}

#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic {
	border-top: 1px solid #eee;
	padding: 7px 0;
}

#bbpress-forums div.even,
#bbpress-forums ul.even {
	background: none;
}

#bbpress-forums div.odd,
#bbpress-forums ul.odd {
	background: #fafafa;
}

/* Topic and reply bodies */

#bbpress-forums div.bbp-topic-content,
#bbpress-forums div.bbp-reply-content {
	font-size: 13.5px;
}

#bbpress-forums div.bbp-topic-header,
#bbpress-forums div.bbp-reply-header {
	background: #f4f4f4;
	border-top: 1px solid var(--til-soft-line);
	font-size: 12px;
	padding: 5px 8px;
}

#bbpress-forums div.bbp-topic-author,
#bbpress-forums div.bbp-reply-author {
	font-size: 12px;
}

#bbpress-forums div.bbp-topic-author .bbp-author-name,
#bbpress-forums div.bbp-reply-author .bbp-author-name {
	font-weight: bold;
}

#bbpress-forums .bbp-author-role {
	font-style: italic;
	color: var(--til-muted);
}

/* Forms: match the comment form treatment. */

#bbpress-forums fieldset.bbp-form {
	border: 3px solid var(--til-hairline);
	padding: 12px 14px;
	margin-bottom: 14px;
}

#bbpress-forums fieldset.bbp-form legend {
	font-family: var(--til-display);
	font-size: 15px;
	text-transform: uppercase;
	padding: 0 6px;
}

#bbpress-forums fieldset.bbp-form label {
	font-weight: bold;
	font-size: 13px;
}

#bbpress-forums input[type="text"],
#bbpress-forums input[type="password"],
#bbpress-forums input[type="email"],
#bbpress-forums input[type="url"],
#bbpress-forums select,
#bbpress-forums textarea {
	font-family: var(--til-sans);
	font-size: 13.5px;
	padding: 5px 7px;
	border: 1px solid #767676;
	background: #fff;
	color: var(--til-body);
	max-width: 100%;
}

#bbpress-forums input[type="text"],
#bbpress-forums input[type="password"],
#bbpress-forums input[type="email"],
#bbpress-forums input[type="url"],
#bbpress-forums textarea,
#bbpress-forums .wp-editor-container {
	width: 100%;
}

#bbpress-forums button,
#bbpress-forums input[type="submit"],
.bbp-login-form input[type="submit"] {
	font-family: var(--til-sans);
	font-size: 13px;
	font-weight: bold;
	padding: 6px 16px;
	border: 2px solid var(--til-hairline);
	background: #fff;
	color: var(--til-ink);
	cursor: pointer;
}

#bbpress-forums button:hover,
#bbpress-forums input[type="submit"]:hover,
.bbp-login-form input[type="submit"]:hover {
	background: var(--til-ink);
	color: #fff;
}

/* Notices and pagination */

#bbpress-forums div.bbp-template-notice,
#bbpress-forums div.indicator-hint {
	border: 1px solid var(--til-soft-line);
	background: #fffbe6;
	font-size: 13px;
	padding: 8px 10px;
	border-radius: 0;
}

#bbpress-forums div.bbp-template-notice.error {
	background: #ffecec;
	border-color: #cc0000;
}

#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span.current {
	display: inline-block;
	padding: 3px 8px;
	border: 1px solid var(--til-hairline);
	margin-right: 4px;
	text-decoration: none;
	font-size: 13px;
}

#bbpress-forums .bbp-pagination-links span.current {
	background: var(--til-ink);
	color: #fff;
}

/* Breadcrumb and the logged-out prompt */

.bbp-breadcrumb {
	font-size: 12px;
	margin-bottom: 10px;
}

.til-forum-notice {
	border: 1px solid var(--til-hairline);
	background: #f7f7f7;
	padding: 10px 12px;
	margin-bottom: 14px;
	font-size: 13px;
}

.til-forum-notice a {
	font-weight: bold;
}

@media (max-width: 720px) {
	#bbpress-forums li.bbp-header .bbp-forum-info,
	#bbpress-forums li.bbp-header .bbp-topic-title {
		width: 100%;
	}

	#bbpress-forums div.bbp-topic-author,
	#bbpress-forums div.bbp-reply-author {
		float: none;
		width: 100%;
		text-align: left;
		border-bottom: 1px solid var(--til-soft-line);
		padding-bottom: 6px;
		margin-bottom: 6px;
	}

	#bbpress-forums div.bbp-topic-author img.avatar,
	#bbpress-forums div.bbp-reply-author img.avatar {
		float: left;
		margin-right: 8px;
		width: 32px;
		height: 32px;
	}

	#bbpress-forums div.bbp-topic-content,
	#bbpress-forums div.bbp-reply-content {
		margin-left: 0;
		padding: 0;
	}
}

/* ==========================================================================
   13. Responsive
   ========================================================================== */

@media (max-width: 900px) {
	.til-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.til-rail {
		border-top: 3px solid var(--til-hairline);
		padding-top: 12px;
	}

	.til-ad {
		min-height: 120px;
	}
}

@media (max-width: 720px) {
	.til-masthead {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		text-align: center;
	}

	.til-nav {
		justify-self: center;
	}

	.til-nav ul {
		justify-content: center;
		gap: 14px;
	}

	.til-article__figure {
		float: none;
		width: auto;
		margin: 0 0 12px;
	}

	.til-article__title {
		font-size: 24px;
	}

	.til-board__table thead {
		display: none;
	}

	.til-board__table,
	.til-board__table tbody,
	.til-board__table tr,
	.til-board__table td {
		display: block;
		width: 100%;
	}

	.til-board__table tr {
		border-top: 1px solid var(--til-soft-line);
		padding: 6px 0;
	}

	.til-board__table tr + tr td {
		border-top: 0;
	}

	.til-board__table td::before {
		content: attr(data-label) ": ";
		font-weight: bold;
	}

	.til-board__table td.til-board__col--title::before {
		content: none;
	}
}

@media (max-width: 480px) {
	.til-card {
		grid-template-columns: 70px minmax(0, 1fr);
	}

	.til-card__media img {
		width: 70px;
		height: 52px;
	}

	.til-brand {
		font-size: 26px;
	}
}

@media print {
	.til-rail,
	.til-nav,
	.til-search,
	.til-footer {
		display: none;
	}

	body {
		background: #fff;
	}
}