/*
 * Shared structure of the inner pages (posts, lists, pages, 404) and of the look switcher.
 * Each look sets the variables and draws the frame in its own looks/<slug>/look.css.
 * Nothing here styles the home pages: those carry their styling inline, as ported from the canvas.
 */

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

.screen-reader-text,
.tdc-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tdc-skip:focus { position: fixed; top: 8px; left: 8px; z-index: 10; padding: 10px 16px; background: #ffffff; color: #000000; }

/* The column */

.tdc-main { overflow-wrap: break-word; }
.tdc-main > * { max-width: var(--measure, 40em); margin-left: var(--side, auto); margin-right: auto; }

.tdc-kicker,
.tdc-meta,
.tdc-label,
.tdc-more,
.tdc-main .page-numbers,
.tdc-main label {
	font-family: var(--label-font, inherit);
	font-weight: var(--label-weight, 600);
	font-size: var(--label-size, 13px);
	letter-spacing: var(--label-track, 0.16em);
	text-transform: var(--label-case, uppercase);
	font-variant-caps: var(--label-caps, normal);
	line-height: 1.3;
}

.tdc-title,
.tdc-entry-title,
.tdc-comments-title,
.tdc-content h2,
.tdc-content h3,
.tdc-content h4 {
	font-family: var(--head-font, inherit);
	font-weight: var(--head-weight, 700);
	letter-spacing: var(--head-track, 0);
	text-transform: var(--head-case, none);
}

/* The name over the door */

.tdc-banner { margin-top: 0; margin-bottom: 34px; padding-bottom: 20px; border-bottom: 3px double var(--ink); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tdc-banner a { color: var(--accent); text-decoration: none; }

/* Page head */

.tdc-head { margin-bottom: 30px; }
.tdc-kicker { margin: 0; color: var(--accent); }
.tdc-kicker a { color: inherit; }
.tdc-title { margin: 8px 0 0; font-size: clamp(32px, 5vw, 60px); line-height: 1.05; }
.tdc-lede { margin-top: 14px; }
.tdc-lede p { margin: 0; }

/* Lists of posts */

.tdc-archive-nav { margin-bottom: 24px; }
.tdc-archive-nav summary { display: inline-block; padding: 12px 0; color: var(--accent); cursor: pointer; text-decoration: underline; }
.tdc-archive-nav summary::-webkit-details-marker { display: none; }
.tdc-archive-nav summary::after { content: " +"; }
.tdc-archive-nav details[open] summary::after { content: " \2212"; }
.tdc-label { margin: 0; }
.tdc-archive-nav ul { list-style: none; margin: 8px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tdc-archive-nav a { display: inline-block; padding: 9px 12px; border: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-size: 0.9em; line-height: 1.2; }
.tdc-archive-nav a:hover,
.tdc-archive-nav a[aria-current] { background: var(--ink); color: var(--paper); }

.tdc-entries { border-bottom: 1px solid var(--ink); }
.tdc-entry { padding: 22px 0; border-top: 1px solid var(--soft); }
.tdc-entry:first-child { border-top-color: var(--ink); }
.tdc-meta { margin: 0; color: var(--accent); }
.tdc-entry-title { margin: 6px 0 8px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.14; }
.tdc-entry-title a { color: var(--ink); text-decoration: none; }
.tdc-entry-title a:hover { color: var(--accent); }
.tdc-excerpt p { margin: 0; }
.tdc-more { display: inline-block; padding: 12px 0 2px; }
.tdc-none { margin: 0 0 24px; }

.tdc-main .pagination { margin-top: 28px; }
.tdc-main .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tdc-main .page-numbers { display: inline-block; min-width: 44px; padding: 12px 12px; border: 2px solid var(--ink); color: var(--ink); text-align: center; text-decoration: none; }
.tdc-main .page-numbers.current,
.tdc-main a.page-numbers:hover { background: var(--ink); color: var(--paper); }
.tdc-main .page-numbers.dots { border-color: transparent; }

/* What the authors wrote */

.tdc-content > * { margin-top: 0; margin-bottom: 1.1em; }
.tdc-content::after { content: ""; display: table; clear: both; }
.tdc-content h2,
.tdc-content h3,
.tdc-content h4 { margin: 1.5em 0 0.5em; line-height: 1.15; }
.tdc-content h2 { font-size: 1.6em; }
.tdc-content h3 { font-size: 1.3em; }
.tdc-content h4 { font-size: 1.1em; }
.tdc-content img,
.tdc-content video,
.tdc-content iframe,
.tdc-content embed,
.tdc-content object { max-width: 100%; }
.tdc-content img { height: auto; }
.tdc-content .alignleft { float: left; max-width: 50%; margin: 0.3em 1.4em 1em 0; }
.tdc-content .alignright { float: right; max-width: 50%; margin: 0.3em 0 1em 1.4em; }
.tdc-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.tdc-content .wp-caption { max-width: 100%; }
.tdc-content .wp-caption-text,
.tdc-content figcaption { margin: 0.4em 0 0; font-size: 0.85em; font-style: italic; text-align: center; }
.tdc-content blockquote { margin-left: 0; margin-right: 0; padding: 0.1em 0 0.1em 1.2em; border-left: 4px solid var(--accent); font-style: italic; }
/* Old posts carry tables with fixed pixel widths (width="1244"). Let them size to their content, and let a table
   that is still too wide scroll inside the text column, not the page. */
.tdc-content { overflow-x: auto; }
.tdc-content table { width: auto; max-width: 100%; border-collapse: collapse; }
.tdc-content th,
.tdc-content td { width: auto; padding: 8px 10px; border: 1px solid var(--soft); text-align: left; vertical-align: top; }
.tdc-content pre { overflow-x: auto; }
.tdc-content hr { border: 0; border-top: 3px double var(--ink); }
.tdc-content .gallery { display: flex; flex-wrap: wrap; gap: 10px; }
.tdc-content .gallery-item { flex: 1 1 140px; margin: 0; }
.tdc-content .gallery br { display: none; }

@media (max-width: 560px) {
	.tdc-content .alignleft,
	.tdc-content .alignright { float: none; display: block; max-width: 100%; margin: 0 0 1em; }
}

.tdc-foot { margin-top: 36px; padding-top: 18px; border-top: 3px double var(--ink); }
.tdc-tags { margin: 0 0 16px; font-size: 0.9em; }
.tdc-foot .nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 40px; }
.tdc-foot .nav-links > * { flex: 1 1 240px; }
.tdc-foot .nav-next { text-align: right; }
.tdc-foot .nav-links a { display: block; padding: 6px 0; text-decoration: none; }
.tdc-foot .nav-links .tdc-label { display: block; color: var(--ink); }

/* Forms: search, comments, the password box of a protected page */

.tdc-main input[type="text"],
.tdc-main input[type="search"],
.tdc-main input[type="email"],
.tdc-main input[type="url"],
.tdc-main input[type="password"],
.tdc-main textarea { width: 100%; max-width: 100%; padding: 11px 12px; border: 2px solid var(--ink); border-radius: 0; background: #ffffff; color: #1d1612; font: inherit; }
.tdc-main button,
.tdc-main input[type="submit"] {
	padding: 14px 24px; border: 0; border-radius: 0; background: var(--button, var(--accent)); color: var(--button-ink, #ffffff); cursor: pointer;
	font-family: var(--label-font, inherit); font-weight: var(--label-weight, 600); font-size: var(--label-size, 13px); letter-spacing: var(--label-track, 0.16em); text-transform: var(--label-case, uppercase); font-variant-caps: var(--label-caps, normal);
}
.tdc-main button:hover,
.tdc-main input[type="submit"]:hover { background: var(--ink); color: var(--paper); }
.tdc-main label { display: block; margin-bottom: 4px; }
.tdc-main .grunion-field-wrap { margin-bottom: 16px; } /* Jetpack's contact form: room between its fields */
.tdc-search { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.tdc-search input { flex: 1 1 220px; }

.tdc-comments { margin-top: 44px; }
.tdc-comments-title { margin: 0 0 14px; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; }
.tdc-comments .comment-list,
.tdc-comments .children { list-style: none; margin: 0; padding: 0; }
.tdc-comments .children { padding-left: clamp(14px, 4vw, 36px); }
.tdc-comments .comment-body { padding: 16px 0; border-top: 1px solid var(--soft); }
.tdc-comments .comment-author { font-weight: 700; }
.tdc-comments .comment-metadata { font-size: 0.82em; }
.tdc-comments .comment-metadata a,
.tdc-comments .reply a { color: inherit; }
.tdc-comments .comment-content p { margin: 8px 0; }
.tdc-comments .comment-respond { margin-top: 30px; }
.tdc-comments .comment-form p { margin: 0 0 14px; }
.tdc-comments .comment-form-cookies-consent label { display: inline; font: inherit; letter-spacing: 0; text-transform: none; font-variant-caps: normal; }

/* The look switcher, last thing in every footer. It takes its colour from the footer it sits in. */

.tdc-switch { flex: 1 1 100%; width: 100%; margin-top: 18px; padding-top: 14px; border-top: 1px solid; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; font-family: inherit; font-size: 14px; font-style: normal; font-weight: 400; font-variant-caps: normal; letter-spacing: 0.02em; line-height: 1.4; text-align: left; text-transform: none; }
.tdc-switch p { margin: 0; }
.tdc-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.tdc-switch a { display: inline-block; padding: 12px 0; color: inherit; }
.tdc-switch a:hover { color: inherit; text-decoration-thickness: 2px; } /* each look's own a:hover would turn it the colour of a dark footer */
.tdc-switch form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.tdc-switch button { padding: 9px 14px; border: 1px solid; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tdc-switch button:hover { text-decoration: underline; }