/* Shared site stylesheet — tokens, dark theme, palettes, dividers, global element
   styles, rich .post-body typography, and responsive breakpoints.
   Ported verbatim from the design's Header/Footer/Home/Post/Diary/Contact/Search
   .dc.html <helmet> blocks. Per-element layout stays inline in the markup (the
   design's pixel-faithful approach); this file holds everything shared. */

:root{
  --bg:#FFFFFF;--ink:#111111;--body:#444444;--muted:#555555;
  --surface:#F2F3F4;--sidebar:#F8ECF0;--border:#E4D7DC;--accent:#C25C79;
  --header-bg:rgba(255,255,255,.68);--overlay-bg:#FFFFFF;
  --btn-bg:var(--ink);--btn-fg:var(--bg);--shadow:rgba(0,0,0,.15);
  --ph1:#F5EEF1;--ph2:#FCF8FA;--footer-bg:#FCF7F9;
  --radius:2px;--radius-pill:999px;
  --sp-1:5px;--sp-2:10px;--sp-3:15px;--sp-4:20px;--sp-5:25px;--sp-6:30px;--sp-7:40px;--sp-8:50px;--sp-9:60px;--sp-10:80px;
  /* Type scale — Compact. small 13 · body 16 · h4 18 · h3 21 · h2 28 · h1 38 · display 56 (desktop; fluid) */
  --fs-eyebrow:clamp(11px,0.68rem + 0.1vw,12px);
  --fs-small:clamp(12px,0.72rem + 0.12vw,13px);
  --fs-body:clamp(15px,0.92rem + 0.1vw,16px);
  --fs-h4:clamp(16px,0.95rem + 0.2vw,18px);
  --fs-h3:clamp(18px,1rem + 0.35vw,21px);
  --fs-h2:clamp(22px,1.2rem + 0.7vw,28px);
  --fs-h1:clamp(28px,1.5rem + 1.4vw,38px);
  --fs-display:clamp(34px,1.6rem + 3vw,56px);
  --lh-tight:1.06;--lh-snug:1.2;--lh-body:1.6;
}
[data-theme="dark"]{
  --bg:#0F0F10;--ink:#F4F1EE;--body:#B9B5B0;--muted:#8E8A85;
  --surface:#1B181A;--sidebar:#241A1E;--border:#332830;--accent:#E0A9BA;
  --header-bg:rgba(17,17,19,.55);--overlay-bg:#0F0F10;
  --shadow:rgba(0,0,0,.55);--ph1:#1D171A;--ph2:#262023;--footer-bg:#181113;
}
[data-palette="mono"] { --accent:#111111; --sidebar:#F1F1F2; --footer-bg:#FAFAFA; --border:#E3E3E5; }
[data-theme="dark"][data-palette="mono"] { --accent:#F4F1EE; --sidebar:#151515; --footer-bg:#131313; --border:#2B2B2D; }
[data-palette="sand"] { --accent:#A9744F; --sidebar:#F4EEE6; --footer-bg:#FCF9F4; --border:#E7DDCF; }
[data-theme="dark"][data-palette="sand"] { --accent:#C99A73; --sidebar:#1B1712; --footer-bg:#151210; --border:#2E2720; }
[data-palette="ink"] { --accent:#3A6EA5; --sidebar:#EEF2F6; --footer-bg:#F8FAFC; --border:#DBE2EA; }
[data-theme="dark"][data-palette="ink"] { --accent:#7FB0E0; --sidebar:#12161B; --footer-bg:#0F1216; --border:#242B33; }

*{box-sizing:border-box}
html,body{background:var(--bg);}
body{margin:0;font-family:'Inter',system-ui,sans-serif;color:var(--body);}
h1,h2,h3,h4{font-family:'Newsreader',Georgia,serif;letter-spacing:-.01em;color:var(--ink);margin:0;}
code,kbd,samp,pre{font-family:'JetBrains Mono',ui-monospace,monospace;}
blockquote p, blockquote{font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400;}
a{text-decoration:none;color:var(--ink);}
img{max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px;}
/* Hindi ([lang="hi"], auto-applied by render.js): body in Noto Sans Devanagari with a
   roomier line-height; headings in Vesper Libre with extra leading so matras don't clip. */
[lang="hi"], .hi { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; font-weight: 400; line-height: 1.7; }
h1.hi, h1[lang="hi"], [lang="hi"] h1, h2.hi, h2[lang="hi"], [lang="hi"] h2, h3.hi, h3[lang="hi"], [lang="hi"] h3, h4.hi, h4[lang="hi"], [lang="hi"] h4, .hi-heading { font-family: 'Vesper Libre', 'Noto Sans Devanagari', serif; font-weight: 700; line-height: 1.4; }
select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; padding-right: 32px; }
.brand-text{font-family:'Newsreader',Georgia,serif;}
.nav-link:hover{color:var(--accent)!important;}
#dc-footer-scope a.uline { text-decoration: underline; text-underline-offset: 3px; }
#dc-footer-scope a.uline:hover, #dc-footer-scope a.soc:hover { color: var(--accent); }

/* ---- shared content styles (Home/Post/Diary/Contact/Search designs) ---- */
[data-divider="line"] .mag-divider .d-orn { display: none; }
[data-divider="dots"] .mag-divider .d-orn { border-radius: 50% !important; transform: none !important; }
a { transition: color .25s ease; }
main a:hover { color: var(--accent); }
.cover { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
a:hover .cover { transform: scale(1.045); }
.post-card .card-title { transition: color .25s ease; }
.post-card:hover .card-title { color: var(--accent); }
.post-card:hover .cover { transform: scale(1.05); }
.author-feature .cover { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.author-feature:hover .cover { transform: scale(1.04); }
.diary-title { transition: color .25s ease; }
.diary-row:hover .diary-title { color: var(--accent); }
.diary-row:hover .cover { transform: scale(1.05); }
.fld { width: 100%; font-family: inherit; font-size: 16px; color: var(--ink); padding: 12px 0; background: transparent; border: none; border-bottom: 1px solid var(--ink); outline: none; }
.fld:focus { border-color: var(--accent); }
.fld::placeholder { color: var(--muted); }

/* ---- reading rhythm — vertical spacing capped at 24px (post + story bodies) ----
   Scale: 4 (list items) · 8 (paragraphs) · 16 (lists) · 20 (table/code) · 24 (media,
   quote, callouts, before-headings, hr). Margins collapse in flow, so a heading's
   large top + small bottom resolves to big-before / small-after automatically. */
.post-body { font-size: var(--fs-body); line-height: 1.6; color: var(--body); }
.post-body > :first-child { margin-top: 0; }
.post-body > p, .post-body > div { margin: 8px 0; }
.post-body > p:first-child { font-size: var(--fs-h4); line-height: 1.55; color: var(--ink); margin: 0 0 8px; }
.post-body h2 { font-size: var(--fs-h2); line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 24px 0 8px; }
.post-body h3 { font-size: var(--fs-h3); line-height: 1.25; color: var(--ink); margin: 20px 0 8px; }
.post-body h4 { font-size: var(--fs-h4); line-height: 1.3; color: var(--ink); margin: 16px 0 6px; }
.post-body a { text-decoration: underline; text-underline-offset: 2px; }
.post-body img { width: 100%; height: auto; border: 1px solid var(--border); display: block; margin: 24px auto; }
.post-body figure { margin: 24px 0; }
.post-body figure img { margin: 0; }
.post-body figcaption { margin-top: 8px; text-align: center; font-size: var(--fs-small); color: var(--muted); }
.post-body ul { list-style: disc; padding-left: 22px; margin: 16px 0; }
.post-body ol { list-style: decimal; padding-left: 22px; margin: 16px 0; }
.post-body li { margin: 4px 0; line-height: 1.5; }
.post-body ul ul, .post-body ol ol, .post-body ul ol, .post-body ol ul { margin: 4px 0; }
.post-body ul ul { list-style: circle; }
.post-body ul ul ul { list-style: square; }
.post-body blockquote { margin: 24px 0; padding: 5px 0 5px 30px; border-left: 3px solid var(--accent); }
.post-body blockquote p { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-style: normal; font-size: var(--fs-h3); line-height: 1.35; color: var(--ink); margin: 0; }
.post-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.post-body code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--fs-small); background: var(--surface); padding: 2px 6px; border-radius: 3px; color: var(--ink); }
.post-body pre { background: var(--surface); padding: 18px 20px; border-radius: var(--radius); overflow-x: auto; margin: 20px 0; }
.post-body pre code { background: none; padding: 0; }
.post-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); margin: 20px 0; }
.post-body th { text-align: left; font-weight: 700; color: var(--ink); padding: 12px 14px; border-bottom: 2px solid var(--ink); }
.post-body td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
/* callout blocks (Answer box + Key takeaways) — insertable from the editor */
.post-body .answer { background: var(--sidebar); border-left: 3px solid var(--accent); padding: var(--sp-5) var(--sp-6); margin: 24px 0; }
.post-body .answer .answer-label { display: block; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-2); }
.post-body .answer p { font-size: var(--fs-body); line-height: 1.6; color: var(--ink); margin: 0; }
.post-body .takeaways { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); margin: 24px 0; }
.post-body .takeaways .tk-title { display: block; font-weight: 700; font-size: var(--fs-h3); color: var(--ink); margin-bottom: var(--sp-4); }
.post-body .takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.post-body .takeaways li { display: flex; gap: var(--sp-3); font-size: var(--fs-body); line-height: 1.6; color: var(--body); margin: 0; }
.post-body .takeaways li::before { content: "\2713"; color: var(--accent); font-weight: 700; flex: none; }
/* FAQ accordion (native <details>, responsive, no JS) */
.post-body .faq { margin: 24px 0; border-top: 1px solid var(--border); }
.post-body .faq details { border-bottom: 1px solid var(--border); }
.post-body .faq summary { cursor: pointer; list-style: none; padding: 14px 36px 14px 0; position: relative; font-weight: 700; font-size: var(--fs-h4); color: var(--ink); line-height: 1.3; }
.post-body .faq summary::-webkit-details-marker { display: none; }
.post-body .faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font-size: 22px; font-weight: 400; color: var(--accent); }
.post-body .faq details[open] summary::after { content: "\2212"; }
.post-body .faq .faq-a { padding: 0 0 16px; }
.post-body .faq .faq-a p { margin: 0 0 8px; font-size: var(--fs-body); line-height: 1.6; }
.post-body .faq .faq-a > :last-child { margin-bottom: 0; }
/* sticky table of contents (blog-style posts) */
html { scroll-behavior: smooth; }
.post-body h2, .post-body h3 { scroll-margin-top: 90px; }
.has-toc { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 200px minmax(0, 720px); gap: var(--sp-7); justify-content: center; align-items: start; }
.has-toc .toc-main { min-width: 0; }
.post-toc { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 120px); overflow: auto; font-size: var(--fs-small); }
.post-toc-title { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-3); }
.post-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.post-toc li { margin: 0; }
.post-toc a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.4; }
.post-toc a:hover { color: var(--ink); }
.post-toc a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 700; }
.post-toc li.toc-l3 a { padding-left: 26px; }
@media (max-width: 900px) { .has-toc { grid-template-columns: 1fr; max-width: 720px; } .post-toc { display: none; } }

/* ---- story reader (Chapter.dc.html) — same capped rhythm, roomier line-height ---- */
.story-body { font-size: var(--fs-body); line-height: 1.75; color: var(--body); }
.story-body > :first-child { margin-top: 0; }
.story-body > p, .story-body > div { margin: 8px 0; }
.story-body > p:first-of-type { font-size: var(--fs-h4); color: var(--ink); }
.story-body:not(.hi) > p:first-of-type::first-letter { font-size: 4.4em; font-weight: 700; float: left; line-height: .82; padding: 6px 12px 0 0; color: var(--accent); }
.story-body h2 { font-size: var(--fs-h2); margin: 24px 0 8px; color: var(--ink); }
.story-body h3 { font-size: var(--fs-h3); margin: 20px 0 8px; color: var(--ink); }
.story-body h4 { font-size: var(--fs-h4); margin: 16px 0 6px; color: var(--ink); }
.story-body a { text-decoration: underline; text-underline-offset: 2px; }
.story-body ul, .story-body ol { padding-left: 22px; margin: 16px 0; }
.story-body li { margin: 4px 0; line-height: 1.5; }
.story-body blockquote { margin: 24px 0; padding: 5px 0 5px 28px; border-left: 3px solid var(--accent); }
.story-body blockquote p { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-style: normal; font-size: var(--fs-h3); line-height: 1.4; color: var(--ink); margin: 0; }
.story-body hr { border: none; border-top: 1px solid var(--border); margin: 24px 0; }
.story-body img { width: 100%; height: auto; border: 1px solid var(--border); display: block; margin: 24px auto; }
.series-card:hover .cover, .work:hover .cover { transform: scale(1.05); }
.work .work-title { transition: color .25s ease; }
.work:hover .work-title, .series-card:hover .work-title { color: var(--accent); }
.chap:hover .chap-title { color: var(--accent); }
.navcard:hover .navcard-title { color: var(--accent); }
@media (max-width: 860px) {
  .series-card { grid-template-columns: 1fr !important; }
  .series-cover { aspect-ratio: 16 / 9 !important; }
  .short-grid { grid-template-columns: 1fr !important; }
  .series-hero { grid-template-columns: 1fr !important; }
  .series-hero-cover { aspect-ratio: 16 / 9 !important; max-width: 100% !important; }
}
@media (max-width: 640px) { .chap-nav { grid-template-columns: 1fr !important; } }

/* ---- library (Library/Work.dc.html) ---- */
@media (max-width: 900px) { .lib-feature { grid-template-columns: 1fr !important; } .lib-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 820px) { .work-hero { grid-template-columns: 1fr !important; } .work-cover { max-width: 260px !important; margin: 0 auto !important; } .rel-grid { grid-template-columns: 1fr 1fr !important; } }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .hero-wrap { display: block !important; }
  .hero-img { width: 100% !important; }
  .hero-card { position: static !important; transform: none !important; width: 100% !important; }
  .home-grid { grid-template-columns: 1fr 1fr !important; gap: 45px 30px !important; }
  .author-feature { grid-template-columns: 1fr !important; }
  .author-portrait { aspect-ratio: 16 / 10 !important; }
  .home-feature-grid { grid-template-columns: 1fr !important; }
  .search-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .menu-word { display: none; }
  .brand-text { font-size: 24px !important; }
  .hdr-inner { padding: 15px 18px !important; }
  .hdr-right { gap: 16px !important; }
  .nav-link { font-size: 30px !important; }
  .search-form { flex-direction: column !important; align-items: stretch !important; gap: 18px !important; }
  .search-input { font-size: 26px !important; }
  .search-btn { padding: 16px !important; font-size: 16px !important; }
  #dc-footer-scope .foot-grid { grid-template-columns: 1fr !important; gap: 35px !important; padding: 45px 25px !important; }
  #dc-footer-scope .nl-wrap { padding: 40px 25px !important; }
  .home-grid { grid-template-columns: 1fr !important; }
  .home-grid > a:nth-child(n+5) { display: none !important; }
  .search-grid { grid-template-columns: 1fr !important; }
  .rel-grid { grid-template-columns: 1fr !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .diary-h1 { font-size: 40px !important; }
  .diary-row { grid-template-columns: 96px 1fr !important; gap: 18px !important; }
  .diary-thumb { width: 96px !important; }
  .diary-day { font-size: 34px !important; }
  .diary-title { font-size: 21px !important; }
  .hero-card { padding: 30px !important; }
}