/* Chitthi: what theme.json cannot say. */

:root {
	--chitthi-wash: linear-gradient(150deg, rgb(168 56 42 / 0.10), rgb(236 227 211 / 0.22) 55%, rgb(42 36 32 / 0.08));
}

/* ---------- one family of images: colour kept, warmed and softened, a faint paper wash on top ---------- */
.chitthi-wash,
.wp-block-post-featured-image.chitthi-wash {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--paper-deep);
}
.chitthi-wash img,
.entry-content img {
	filter: saturate(0.86) sepia(0.1) contrast(0.97) brightness(1.01);
}
.chitthi-wash::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--chitthi-wash);
	mix-blend-mode: multiply;
	box-shadow: inset 0 0 0 1px rgb(42 36 32 / 0.08);
	pointer-events: none;
}
.chitthi-wash img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s ease; }
a:hover .chitthi-wash img, .chitthi-wash:hover img { filter: saturate(1) sepia(0) contrast(1); }

/* ---------- masthead ---------- */
.chitthi-header { border-bottom: 1px solid var(--wp--preset--color--line); }
.chitthi-header .wp-block-site-title b,
.chitthi-header .wp-block-site-title strong { font-weight: 500; }
.chitthi-hindi, [lang="hi"] { font-family: var(--wp--preset--font-family--hindi); }
.chitthi-header .chitthi-hindi { color: var(--wp--preset--color--sindoor); font-size: 1.15rem; }
.chitthi-header .wp-block-navigation a { color: var(--wp--preset--color--soft); }
.chitthi-header .wp-block-navigation a:hover { color: var(--wp--preset--color--sindoor); }

/* ---------- small type ---------- */
.chitthi-kicker, .chitthi-meta, .chitthi-meta p, .wp-block-post-date {
	font-family: var(--wp--preset--font-family--ui);
}
.chitthi-meta, .chitthi-meta p { font-size: 0.82rem; color: var(--wp--preset--color--soft); }
.chitthi-section-title { font-style: italic; }
.chitthi-section-title .chitthi-hindi { font-style: normal; font-size: 0.55em; color: var(--wp--preset--color--sindoor); margin-left: 0.6em; vertical-align: middle; }
.chitthi-read a, a.chitthi-read {
	display: inline-block; font: 600 0.85rem/1 var(--wp--preset--font-family--ui);
	border-bottom: 2px solid var(--wp--preset--color--sindoor); padding-bottom: 4px; text-decoration: none;
}

/* ---------- the lead essay: a drop cap in sindoor ---------- */
.chitthi-lead .wp-block-post-excerpt__excerpt::first-letter,
.single .entry-content .chitthi-first::first-letter {
	float: left; font: 400 4.6rem/0.8 var(--wp--preset--font-family--display);
	padding: 0.45rem 0.6rem 0 0; color: var(--wp--preset--color--sindoor);
}
.chitthi-lead .wp-block-post-featured-image { aspect-ratio: 4 / 3; }

/* ---------- the notebook: essays as a table of contents ---------- */
.chitthi-toc > li {
	display: grid; grid-template-columns: 8rem 1fr 8.5rem; gap: 1.8rem; align-items: center;
	padding: 1.4rem 0; border-bottom: 1px solid var(--wp--preset--color--line); margin: 0 !important;
}
.chitthi-toc .wp-block-post-title { font-size: 1.45rem; line-height: 1.25; margin: 0 0 0.35rem; }
.chitthi-toc .wp-block-post-title a { text-decoration: none; }
.chitthi-toc .wp-block-post-excerpt { margin: 0; color: var(--wp--preset--color--soft); font-size: 1rem; line-height: 1.5; }
.chitthi-toc .wp-block-post-excerpt__more-text { display: none; }
.chitthi-toc .wp-block-post-featured-image { aspect-ratio: 1; margin: 0; }
.chitthi-toc .chitthi-when { display: flex; flex-direction: column; gap: 0.15rem; }
.chitthi-toc .chitthi-when p, .chitthi-toc .chitthi-when .wp-block-post-date { margin: 0; }

/* ---------- stories ---------- */
.chitthi-stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.chitthi-story { text-decoration: none; display: flex; flex-direction: column; gap: 0.35rem; }
.chitthi-story .chitthi-wash { aspect-ratio: 16 / 10; }
.chitthi-story__title { font-size: 1.35rem; line-height: 1.3; margin-top: 0.4rem; }

/* ---------- the book ---------- */
.chitthi-links { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.chitthi-book { border: 1px solid var(--wp--preset--color--line); }
.chitthi-book img { box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.45); }

/* ---------- the bookshelf and the epigraph ---------- */
.chitthi-shelf .chitthi-cover img { width: 100%; max-width: 230px; height: auto; box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.45); }
.chitthi-shelf h3 { font-size: 1.5rem; margin: 1rem 0 0.2rem; }
.chitthi-shelf .chitthi-hindi { font-size: 1.7rem; color: inherit; }
.chitthi-epigraph { margin: 0 0 var(--wp--preset--spacing--40); padding-left: 1.4rem; }
.chitthi-epigraph p { font: italic 300 1.9rem/1.3 var(--wp--preset--font-family--display); }
.chitthi-epigraph cite { font: 600 0.75rem var(--wp--preset--font-family--ui); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--sindoor); font-style: normal; }

/* ---------- reading an essay ---------- */
.single .entry-content { font-size: 1.2rem; }
.single .entry-content p { hyphens: auto; }
.single .entry-content img { height: auto; }

/* his formatting, folded into the page: one typeface, one size, one accent colour (display only) */
.single .entry-content [style*="font-family"] { font-family: inherit !important; }
.single .entry-content [style*="font-size"] { font-size: inherit !important; line-height: inherit !important; }
.single .entry-content [style*="color"] { color: var(--wp--preset--color--sindoor) !important; }
.single .entry-content [style*="color: #000"], .single .entry-content [style*="color:#000"],
.single .entry-content [style*="color: #000000"], .single .entry-content [style*="color: rgb(0, 0, 0)"] { color: inherit !important; }
.single .entry-content [style*="background"] { background: none !important; }
.single .entry-content strong, .single .entry-content b { font-weight: 600; }
.single .entry-content p { margin: 0 0 1.15em; line-height: 1.75; }
.single .entry-content div:not([class*="wp-block"]) { font: inherit; color: inherit; }
.single .entry-content a { color: var(--wp--preset--color--sindoor); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.single .entry-content h1, .single .entry-content h2, .single .entry-content h3, .single .entry-content h4 {
	font-family: var(--wp--preset--font-family--display); font-weight: 400; line-height: 1.25; margin: 2.2em 0 0.7em;
}
.single .entry-content h1, .single .entry-content h2, .single .entry-content h3, .single .entry-content h4 { font-size: 1.55rem; }
.single .entry-content h5, .single .entry-content h6 { font: 600 0.8rem var(--wp--preset--font-family--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--soft); }
.single .entry-content :is(h1, h2, h3, h4) :is(strong, b, span) { font-weight: inherit; }
.single .entry-content blockquote {
	margin: 2em 0; padding: 0.2em 0 0.2em 1.4em; border-left: 3px solid var(--wp--preset--color--sindoor);
	font: italic 300 1.35rem/1.5 var(--wp--preset--font-family--display);
}
.single .entry-content blockquote p { margin: 0 0 0.6em; line-height: 1.5; }
.single .entry-content ul, .single .entry-content ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.single .entry-content li { margin: 0.35em 0; line-height: 1.65; }
.single .entry-content li::marker { color: var(--wp--preset--color--sindoor); }
.single .entry-content hr { border: 0; text-align: center; margin: 2.4em 0; }
.single .entry-content hr::after { content: "· · ·"; letter-spacing: 0.6em; color: var(--wp--preset--color--soft); }

/* his pictures: centred, one width, one warm treatment */
.single .entry-content img { display: block; max-width: 100%; margin: 2.2rem auto; border-radius: 2px; box-shadow: 0 1px 0 rgb(42 36 32 / 0.06), 0 14px 28px -20px rgb(42 36 32 / 0.45); }
.single .entry-content img.size-large, .single .entry-content img.size-full, .single .entry-content img[width="1024"], .single .entry-content img[width="800"] { width: 100%; }
.single .entry-content p:has(> img:only-child), .single .entry-content p:has(> a:only-child > img) { margin: 0; }
.single .entry-content .wp-caption { max-width: 100% !important; width: auto !important; margin: 2.2rem auto; }
.single .entry-content .wp-caption img { margin-bottom: 0.6rem; }
.single .entry-content .wp-caption-text, .single .entry-content figcaption {
	font: italic 0.9rem/1.5 var(--wp--preset--font-family--body); color: var(--wp--preset--color--soft); text-align: center;
}
.wp-block-post-terms a { text-decoration: none; }
.wp-block-comments { font-size: 1rem; }

/* ---------- comments ---------- */
.chitthi-letters { margin-top: var(--wp--preset--spacing--50); }
.chitthi-letters .chitthi-section-title { font-size: 2rem; margin-bottom: 0.2rem; }
.chitthi-letters__count { font: 500 0.8rem var(--wp--preset--font-family--ui); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--soft); margin: 0 0 1.6rem; }
.chitthi-letters .wp-block-comment-template { list-style: none; margin: 0; padding: 0; }
.chitthi-letters .wp-block-comment-template li { list-style: none; margin: 0; }
.chitthi-letter { padding: 1.4rem 0 1.2rem; border-top: 1px solid var(--wp--preset--color--line); gap: 1rem !important; }
.chitthi-letter__body { flex: 1; min-width: 0; }
.chitthi-letter .wp-block-avatar { flex: none; margin: 0.1rem 0 0; }
.chitthi-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; object-fit: cover;
	font: 600 1.05rem var(--wp--preset--font-family--display); color: var(--wp--preset--color--soft); box-shadow: inset 0 0 0 1px rgb(42 36 32 / 0.08); }
.chitthi-avatar--a { background: #ece3d3; }
.chitthi-avatar--b { background: #e6d9c6; }
.chitthi-avatar--c { background: #efe1d6; }
.chitthi-avatar--d { background: #e2dccd; }
img.chitthi-avatar--author { box-shadow: 0 0 0 2px var(--wp--preset--color--paper), 0 0 0 3px var(--wp--preset--color--sindoor); }
.chitthi-letter__head { gap: 0.2rem 0.75rem !important; align-items: baseline; }
.chitthi-letter .wp-block-comment-author-name { font: 600 0.95rem var(--wp--preset--font-family--ui); color: var(--wp--preset--color--ink); margin: 0; }
.chitthi-letter .wp-block-comment-date { font: 400 0.8rem var(--wp--preset--font-family--ui); color: var(--wp--preset--color--soft); margin: 0; }
.chitthi-letter .wp-block-comment-content { margin: 0.55rem 0 0; line-height: 1.65; }
.chitthi-letter .wp-block-comment-content p { margin: 0 0 0.7rem; }
.chitthi-letter .wp-block-comment-content p:last-child { margin-bottom: 0; }
.chitthi-letter .wp-block-comment-reply-link { margin: 0.6rem 0 0; }
.chitthi-letter .wp-block-comment-reply-link a,
.chitthi-letters .comment-reply-title small a {
	font: 600 0.75rem var(--wp--preset--font-family--ui); letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--wp--preset--color--sindoor); text-decoration: none;
}
.chitthi-letter .wp-block-comment-reply-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* his own replies */
.bypostauthor > .chitthi-letter { border-left: 3px solid var(--wp--preset--color--sindoor); padding-left: 1.2rem; background: linear-gradient(90deg, rgb(168 56 42 / 0.05), transparent 70%); }
.bypostauthor > .chitthi-letter .wp-block-comment-author-name::after {
	content: "Author"; margin-left: 0.6rem; padding: 0.12rem 0.45rem; border: 1px solid var(--wp--preset--color--sindoor); border-radius: 2px;
	font: 600 0.62rem var(--wp--preset--font-family--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--sindoor); vertical-align: 0.12em;
}
/* replies, under a fine rule */
.chitthi-letters .wp-block-comment-template ol { margin: 0 0 0 0.4rem; padding: 0 0 0 1.4rem; border-left: 1px solid var(--wp--preset--color--line); }
.chitthi-letters .wp-block-comment-template ol .chitthi-letter { border-top: 0; padding-top: 0.9rem; }

/* the form: write a letter */
.chitthi-letters .comment-respond { margin-top: var(--wp--preset--spacing--40); padding: 1.8rem; background: var(--wp--preset--color--paper-deep); border: 1px solid var(--wp--preset--color--line); }
.chitthi-letters .comment-reply-title { font: italic 400 1.6rem var(--wp--preset--font-family--display); margin: 0 0 0.4rem; }
.chitthi-letters .comment-notes, .chitthi-letters .logged-in-as { font: 0.85rem var(--wp--preset--font-family--ui); color: var(--wp--preset--color--soft); }
.chitthi-letters .comment-form label { display: block; font: 600 0.75rem var(--wp--preset--font-family--ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--soft); margin-bottom: 0.35rem; }
.chitthi-letters .comment-form input[type="text"], .chitthi-letters .comment-form input[type="email"], .chitthi-letters .comment-form input[type="url"], .chitthi-letters .comment-form textarea {
	width: 100%; box-sizing: border-box; padding: 0.7rem 0.8rem; background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--line); border-radius: 2px; font: 1rem/1.5 var(--wp--preset--font-family--body);
}
.chitthi-letters .comment-form textarea { min-height: 9rem; }
.chitthi-letters .comment-form input:focus, .chitthi-letters .comment-form textarea:focus { outline: 2px solid rgb(168 56 42 / 0.35); outline-offset: 1px; border-color: var(--wp--preset--color--sindoor); }
.chitthi-letters .comment-form .comment-form-cookies-consent { display: flex; gap: 0.5rem; align-items: baseline; }
.chitthi-letters .comment-form .comment-form-cookies-consent label { display: inline; text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.85rem; }
.chitthi-letters .form-submit .submit, .chitthi-letters .wp-block-button__link {
	background: var(--wp--preset--color--sindoor); color: var(--wp--preset--color--paper); border: 0; border-radius: 2px; cursor: pointer;
	padding: 0.75rem 1.4rem; font: 600 0.85rem var(--wp--preset--font-family--ui); letter-spacing: 0.08em; text-transform: uppercase;
}
.chitthi-letters .form-submit .submit:hover { background: var(--wp--preset--color--ink); }
.chitthi-letters .wp-block-comments-pagination { font: 0.9rem var(--wp--preset--font-family--ui); margin-top: 1.2rem; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
	.chitthi-toc > li { grid-template-columns: 1fr 5.5rem; gap: 1rem; }
	.chitthi-toc .chitthi-when { grid-column: 1 / -1; flex-direction: row; gap: 0.8rem; }
	.chitthi-toc .wp-block-post-title { font-size: 1.2rem; }
	.chitthi-toc .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.chitthi-stories { grid-template-columns: 1fr; }
	.chitthi-lead .wp-block-post-excerpt__excerpt::first-letter { font-size: 3.6rem; }
	.chitthi-letters .wp-block-comment-template ol { padding-left: 0.9rem; margin-left: 0.1rem; }
	.chitthi-letters .comment-respond { padding: 1.2rem; }
}