/* ==============================================================
 * Stilographa — writing-extras.css
 * Additions NOT present in the original design, kept in the theme's
 * editorial style: previous/next post navigation and the comments area.
 * Loaded after writing.css on single posts and blog views.
 * ============================================================== */

/* ——— Previous / next post navigation ——— */
.post-nav{
	max-width:760px;margin:48px auto 0;padding-top:28px;
	border-top:1px solid var(--line);
	display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.post-nav-link{
	display:flex;flex-direction:column;gap:9px;
	text-decoration:none;color:var(--ink);transition:.25s;
}
.post-nav-link.next{text-align:right;align-items:flex-end}
.pn-label{
	font-family:var(--mono);font-size:.74rem;letter-spacing:.07em;
	text-transform:uppercase;color:var(--accent);
}
.pn-title{
	font-family:var(--display);font-size:1.15rem;font-weight:500;
	line-height:1.2;max-width:34ch;
}
.post-nav-link:hover .pn-title{color:var(--accent)}

/* ——— Comments ——— */
.comments-area{max-width:760px;margin:64px auto 0;padding-top:40px;border-top:1px solid var(--line)}
.comments-title,
.comment-reply-title{
	font-family:var(--display);font-weight:500;
	font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:-.015em;
	line-height:1.1;margin-bottom:30px;
}
.comment-list{list-style:none;margin:0 0 44px;padding:0}
.comment-list ol.children{list-style:none;margin:0 0 0 clamp(16px,3vw,34px);padding:0}
.comment-body{padding:24px 0;border-bottom:1px solid var(--line)}
.comment-list .children .comment-body{border-bottom:1px solid var(--line)}
.comment-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.comment-author{display:flex;align-items:center;gap:11px}
.comment-author .avatar{border-radius:50%;display:block}
.comment-author .fn{font-family:var(--sans);font-weight:600;font-size:.98rem;font-style:normal;color:var(--ink)}
.comment-author .says{display:none}
.comment-metadata{margin-left:auto}
.comment-metadata a{
	font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;
	text-transform:uppercase;color:var(--ink-soft);text-decoration:none;
}
.comment-metadata a:hover{color:var(--accent)}
.comment-content{color:#332E25;font-size:1.02rem;line-height:1.7}
.comment-content p{margin:0 0 14px}
.comment-content :last-child{margin-bottom:0}
.comment-awaiting-moderation{font-family:var(--mono);font-size:.76rem;letter-spacing:.04em;color:var(--accent);margin-bottom:10px}
.reply{margin-top:12px;display:flex;gap:16px}
.comment-reply-link,
.comment-edit-link{
	font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;
	text-transform:uppercase;color:var(--accent);text-decoration:none;
}
.comment-reply-link:hover,
.comment-edit-link:hover{color:var(--accent-deep)}
.bypostauthor > .comment-body .fn::after{
	content:"· Author";font-family:var(--mono);font-size:.68rem;
	letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-left:8px;
}

/* Comment pagination + closed notice */
.comment-navigation{
	display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
	margin-bottom:40px;font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;
}
.comment-navigation a{color:var(--accent);text-decoration:none}
.no-comments{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink-soft);margin-top:20px}

/* ——— Comment form (matches page.css field styling) ——— */
.comment-respond{max-width:760px;margin:0 auto}
.comment-form{display:flex;flex-direction:column;gap:22px;max-width:560px;margin-top:8px}
.comment-form .comment-notes,
.comment-form .logged-in-as{font-size:.94rem;color:var(--ink-soft);margin:0}
.comment-form .logged-in-as a{color:var(--accent);text-decoration:none}
.comment-form label{
	font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
	text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:8px;
}
.comment-form .comment-form-comment,
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url{display:flex;flex-direction:column}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
	font-family:var(--sans);font-size:1rem;color:var(--ink);background:transparent;
	border:none;border-bottom:1px solid var(--line);padding:10px 0;width:100%;
	transition:border-color .25s ease;
}
.comment-form input:focus,
.comment-form textarea:focus{outline:none;border-color:var(--ink)}
.comment-form textarea{min-height:150px;line-height:1.5;resize:vertical}
.comment-form .comment-form-cookies-consent{flex-direction:row;align-items:flex-start;gap:10px}
.comment-form .comment-form-cookies-consent input{width:auto;margin-top:4px}
.comment-form .comment-form-cookies-consent label{
	margin:0;text-transform:none;letter-spacing:normal;font-family:var(--sans);
	font-size:.9rem;color:var(--ink-soft);
}
.comment-form .form-submit{margin-top:4px}
.comment-form .submit{
	display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);
	font-weight:600;font-size:.92rem;padding:13px 26px;border-radius:999px;
	background:var(--ink);color:var(--paper);border:1px solid transparent;
	cursor:pointer;transition:.3s cubic-bezier(.16,1,.3,1);
}
.comment-form .submit:hover{background:var(--accent);transform:translateY(-2px)}

@media(max-width:880px){
	.post-nav{grid-template-columns:1fr;gap:18px}
	.post-nav-link.next{text-align:left;align-items:flex-start}
}