/* Contact page in the homepage's look: a title, the email, a plain form and the comments as a list.
   No glowing boxes, no emoji, sentence case. Loaded after site-skin.css. */
body.s2 .page { max-width: 1120px !important; margin: 0 auto !important; padding: clamp(110px, 14vw, 160px) max(20px, env(safe-area-inset-left, 0px)) 72px !important; }
body.s2 .page-header { margin-bottom: clamp(36px, 5vw, 56px) !important; text-align: left; }
body.s2 .page-tag { display: none !important; }
body.s2 .page-title { font-family: var(--n-display) !important; font-weight: 600 !important; font-size: clamp(40px, 6vw, 72px) !important; letter-spacing: 0 !important; line-height: 1.1 !important; margin: 0 0 14px !important; }
html[lang="zh"] body.s2 .page-title { font-weight: 700 !important; }
body.s2 .page-sub { font-family: var(--n-display) !important; font-weight: 300 !important; font-size: 18px !important; line-height: 1.7 !important; color: var(--n-soft) !important; max-width: 34em; margin: 0 0 14px !important; }
body.s2 .email-link { font-family: var(--n-display) !important; font-weight: 500 !important; font-size: 17px !important; color: var(--n-fg) !important; border: 0 !important; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* the form and the list side by side on wide screens */
@media (min-width: 960px) {
  body.s2 .page { display: grid !important; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 88px); align-items: start; }
  body.s2 .page-header { grid-column: 1 / -1; }
  body.s2 .form-card { position: sticky; top: 100px; }
}

body.s2 .form-card, body.s2 .comments-card { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 48px !important; border-radius: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.s2 .form-card::before, body.s2 .form-card::after, body.s2 .comments-card::before, body.s2 .comments-card::after { content: none !important; }
body.s2 .form-card h2, body.s2 .comments-header h2 { font-family: var(--n-display) !important; font-weight: 600 !important; font-size: 24px !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 18px !important; color: var(--n-fg) !important; }
body.s2 .comments-header { display: flex; align-items: baseline; gap: 10px; margin: 0 !important; padding-bottom: 6px; border-bottom: 1px solid var(--n-line); }
body.s2 .comments-header h2 { margin: 0 0 12px !important; }
body.s2 .comment-count { background: none !important; border: 0 !important; padding: 0 !important; font-family: var(--n-display) !important; font-size: 16px !important; font-weight: 400 !important; color: var(--n-mute) !important; }

body.s2 .form-group { margin-bottom: 14px !important; }
body.s2 .form-group label { display: block; margin-bottom: 6px !important; font-family: var(--n-display) !important; font-size: 14px !important; font-weight: 400 !important; letter-spacing: 0.01em !important; text-transform: none !important; color: var(--n-mute) !important; }
body.s2 .form-group input, body.s2 .form-group textarea { width: 100%; box-sizing: border-box; padding: 12px 14px !important; border: 1px solid var(--n-line) !important; border-radius: 6px !important; background: #05070b !important; color: var(--n-fg) !important; font-family: var(--n-display) !important; font-size: 16px !important; box-shadow: none !important; }
body.s2 .form-group textarea { height: 140px !important; resize: vertical; }
body.s2 .form-group input:focus, body.s2 .form-group textarea:focus { border-color: rgba(255,255,255,0.5) !important; outline: none; box-shadow: none !important; }
body.s2 .send-btn { width: auto !important; min-height: 46px; padding: 0 24px !important; border: 0 !important; border-radius: 6px !important; background: var(--n-fg) !important; color: #0b0e15 !important; font-family: var(--n-display) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; transform: none !important; }
body.s2 .send-btn::after { content: none !important; }
body.s2 .send-btn:hover { background: #fff !important; }

/* comments: a list with light lines */
body.s2 .comment-item { padding: 18px 0 !important; margin: 0 !important; background: none !important; border: 0 !important; border-bottom: 1px solid var(--n-line) !important; border-radius: 0 !important; box-shadow: none !important; }
body.s2 .comment-item:hover { background: none !important; }
body.s2 .comment-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px !important; }
body.s2 .comment-avatar { display: none !important; }
body.s2 .comment-author { font-family: var(--n-display) !important; font-weight: 600 !important; font-size: 16px !important; color: var(--n-fg) !important; }
body.s2 .comment-time { font-family: var(--n-display) !important; font-size: 14px !important; color: var(--n-mute) !important; white-space: nowrap; }
body.s2 .comment-text { font-family: var(--n-display) !important; font-weight: 400 !important; font-size: 16px !important; line-height: 1.7 !important; color: var(--n-soft) !important; margin: 0 0 10px !important; overflow-wrap: anywhere; }
body.s2 .comment-actions { gap: 18px !important; }
body.s2 .like-btn, body.s2 .delete-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; font-family: var(--n-display) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--n-mute) !important; cursor: pointer; }
body.s2 .like-btn svg { width: 15px; height: 15px; }
body.s2 .like-btn:hover { color: var(--n-sun) !important; }
body.s2 .delete-btn { opacity: 0; }
body.s2 .comment-item:hover .delete-btn, body.s2 .delete-btn:focus-visible { opacity: 1; }
body.s2 .delete-btn:hover { color: #f08a8a !important; }
@media (hover: none) { body.s2 .delete-btn { opacity: .6; } }
body.s2 .no-comments { text-align: left !important; padding: 22px 0 !important; font-family: var(--n-display) !important; font-size: 16px !important; color: var(--n-mute) !important; }
body.s2 .back-link { display: none !important; }

/* the confirmation: hidden until it is shown */
body.s2 #toast { opacity: 0; visibility: hidden; bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important; transform: translateX(-50%) translateY(8px) !important; background: var(--n-fg) !important; color: #0b0e15 !important; border: 0 !important; border-radius: 6px !important; font-family: var(--n-display) !important; font-weight: 500 !important; font-size: 15px !important; padding: 12px 20px !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; transition: opacity .25s, transform .25s, visibility 0s .25s !important; }
body.s2 #toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) !important; transition: opacity .25s, transform .25s !important; }

/* admin bar (only Kainar sees it) */
body.s2 .adm-bar { font-family: var(--n-display); text-transform: none; letter-spacing: 0; }

/* footer: no quote */
body.s2 #site-footer .footer-quote { display: none !important; }
body.s2 .like-btn.on { color: var(--n-sun) !important; }
body.s2 .like-btn.on svg path { fill: currentColor; }