/* Night theme: the original dark, starry 12Stages look (Guardian cat behind the
   Discover / Understand / Reflect panels), plus dark styles for the parts added
   in October 2026 — homepage introduction and "Where to begin", "Read next" on
   posts, and the About essay. Replaces reading-theme.css (the paper theme),
   which is kept in css/ so the site can be switched back from base.html. */

/* Font stacks. Inter and Bodoni Moda are named by the layouts but no font files
   are shipped, so English text fell through to Noto Serif SC, whose full-width
   apostrophe printed "founder’ s". Latin fonts come first; Chinese characters
   fall through to the CJK fonts at the end. */
.night-site{--night-sans:'Inter','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,'PingFang SC','Microsoft YaHei','Noto Sans SC',sans-serif;--night-serif:'Bodoni Moda','Bodoni 72','Bodoni MT',Didot,Georgia,'Noto Serif SC','Songti SC','SimSun',serif;font-family:var(--night-sans)}
.night-site h1,.night-site h2,.night-site h3,.night-site .serif,.night-site .sn-logo{font-family:var(--night-serif)}
.night-site .sn,.night-site .sf{font-family:var(--night-sans)}

/* The local utility reset does not make form fields inherit the page colour,
   so typed text would be black on the dark background. */
.night-site input,.night-site textarea,.night-site button{color:inherit}
/* Without this the browser's light-grey button fill sits under light text. */
.night-site button{background-color:transparent}
.night-site input::placeholder,.night-site textarea::placeholder{color:rgba(233,213,255,.6);opacity:1}
/* Contact form layout. The utility sheet has none of the form's width,
   padding or spacing classes, so without this the fields sat side by side,
   tiny, in the browser's white boxes. */
/* Utility classes the dark layouts use that the local utility sheet lacks
   (the original dark site loaded the full Tailwind library from a CDN). */
.night-site .text-5xl{font-size:3rem;line-height:1}
.night-site .max-w-xl{max-width:36rem}
.night-site .pb-32{padding-bottom:8rem}
.night-site .pb-0\.5{padding-bottom:.125rem}
.night-site .hidden{display:none}
.night-site #contactForm input,.night-site #contactForm textarea{box-sizing:border-box;display:block;width:100%;margin:0 0 24px;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.16);font-size:14px;line-height:1.6;transition:border-color .3s ease}
.night-site #contactForm input:focus,.night-site #contactForm textarea:focus{border-color:#c084fc}
.night-site #contactForm textarea{min-height:180px;resize:vertical}
.night-site #contactForm button{display:block;width:100%;padding:16px;border:1px solid rgba(168,85,247,.45);font-size:10px;letter-spacing:.5em;text-transform:uppercase;transition:background-color .7s ease,color .7s ease}
.night-site #contactForm button:hover{background-color:#fff;color:#000}
.night-site #contactForm button:disabled{opacity:.6;cursor:wait}
.night-site .contact-notice{font-size:13px;line-height:1.8;color:rgba(233,213,255,.72);margin:0 0 28px}
.night-site #status{margin-top:20px}

.night-site a:focus-visible,.night-site button:focus-visible,.night-site input:focus-visible,.night-site textarea:focus-visible,.night-site summary:focus-visible{outline:2px solid #c084fc;outline-offset:4px}

/* Faint labels from the original design (dates, "Back to Blog", page
   subtitles) fell below readable contrast on black. Raised just enough to pass
   WCAG AA (4.5:1) while keeping the same soft purple. */
.night-site .text-purple-200\/30{color:rgba(233,213,255,.62)}
.night-site .text-purple-400\/50{color:rgba(192,132,252,.85)}
.night-site .text-purple-100\/40{color:rgba(243,232,255,.62)}
.night-site .text-purple-100\/50{color:rgba(243,232,255,.66)}
.night-site .text-purple-200\/60{color:rgba(233,213,255,.7)}
.night-site .text-purple-300\/70{color:rgba(216,180,254,.85)}
.night-site .prose-12stages blockquote{color:rgba(216,180,254,.78)}
.night-site .prose-12stages .hashtags{color:rgba(192,132,252,.9)}
.night-site .sf{color:rgba(233,213,255,.6)}
.night-site .sn-links a{color:rgba(233,213,255,.7)}

/* Text on pictures. The Guardian cat is near-white behind the panel text, so
   the original 50% veil let the small line under each heading fade, and the
   light purple hover tint made it fainter still. */
.night-site .content-overlay{background:rgba(0,0,0,.62)}
.night-site .parallax-box:hover .content-overlay{background:rgba(46,16,101,.72);border-color:rgba(196,181,253,.5)}
.night-site .content-overlay p{color:rgba(243,232,255,.92)}
.night-site header[style*="background-image"] h1,
.night-site header[style*="background-image"] p,
.night-site header[style*="background-image"] span{text-shadow:0 1px 14px rgba(0,0,0,.7)}

/* Homepage opening question */
.night-site .hero-question{max-width:680px;margin:0 auto;font-size:1.05rem;line-height:1.9;letter-spacing:.04em;color:rgba(233,213,255,.82)}

/* Essay text outside blog posts (the About page). Posts define the same rules
   in their own layout. */
.night-site .prose-12stages p,.night-site .prose-12stages li{color:rgba(233,213,255,.85);font-size:1.05rem;line-height:1.95;font-weight:300;margin-bottom:1.6rem}
.night-site .prose-12stages h2{font-family:var(--night-serif);font-style:italic;font-size:1.7rem;color:#e9d5ff;margin:3rem 0 1rem;line-height:1.4}
.night-site .prose-12stages strong{color:#e9d5ff;font-weight:400}
.night-site .prose-12stages a{color:#d8b4fe;border-bottom:1px solid rgba(168,85,247,.4)}
.night-site .prose-12stages a:hover{color:#fff}

/* Homepage: "What is 12Stages" and "Where to begin" */
.night-site .start-here{max-width:1160px;margin:0 auto;padding:96px 24px 24px;text-align:center}
.night-site .start-paths{padding-top:24px;padding-bottom:96px}
.night-site .start-eyebrow{font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:#d8b4fe;margin-bottom:22px}
.night-site .start-intro{max-width:720px;margin:0 auto;font-size:1.1rem;line-height:2;font-weight:300;color:rgba(233,213,255,.85)}
.night-site .start-heading{font-family:var(--night-serif);font-style:italic;font-size:2.4rem;color:#fff;margin-bottom:40px}
.night-site .start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:left}
.night-site .start-card{display:flex;flex-direction:column;background:rgba(255,255,255,.02);border:1px solid rgba(168,85,247,.22);padding:36px 30px;color:#f4f4f5;transition:border-color .5s ease,background .5s ease}
.night-site .start-card:hover{border-color:rgba(168,85,247,.55);background:rgba(255,255,255,.04)}
.night-site .start-step{font-size:10px;letter-spacing:.4em;color:rgba(216,180,254,.85)}
.night-site .start-title{font-family:var(--night-serif);font-style:italic;font-size:1.75rem;line-height:1.35;color:#fff;margin:10px 0 14px}
.night-site .start-card:hover .start-title{color:#e9d5ff}
.night-site .start-text{flex:1;font-size:15px;line-height:1.9;font-weight:300;color:rgba(233,213,255,.78)}
.night-site .start-cta{align-self:flex-start;margin-top:24px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#d8b4fe;border-bottom:1px solid rgba(168,85,247,.45);padding-bottom:2px}
.night-site .start-card:hover .start-cta{color:#fff}
.night-site .start-more{margin-top:32px;font-size:14px;line-height:1.9;font-weight:300;color:rgba(233,213,255,.75)}
.night-site .start-more a,.night-site .continue-more a{color:#d8b4fe;border-bottom:1px solid rgba(168,85,247,.45)}
.night-site .start-more a:hover,.night-site .continue-more a:hover{color:#fff}

/* End of each post: "Read next" */
.night-site .continue-block{margin-top:64px}
.night-site .continue-label{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:rgba(216,180,254,.85);margin-bottom:16px}
.night-site .continue-card{display:block;background:rgba(255,255,255,.02);border:1px solid rgba(168,85,247,.22);padding:28px 30px;transition:border-color .5s ease,background .5s ease}
.night-site .continue-card:hover{border-color:rgba(168,85,247,.55);background:rgba(255,255,255,.04)}
.night-site .continue-title{display:block;font-family:var(--night-serif);font-style:italic;font-size:1.4rem;line-height:1.45;color:#fff;margin-bottom:10px}
.night-site .continue-excerpt{display:block;font-size:14px;line-height:1.9;font-weight:300;color:rgba(233,213,255,.75)}
.night-site .continue-more{margin-top:22px;font-size:14px;line-height:1.9;font-weight:300;color:rgba(233,213,255,.75)}

/* About page */
.night-site .about-essay .prose-12stages h2:first-child{margin-top:0}
.night-site .about-figure{margin:48px 0}
.night-site .about-figure img{display:block;width:100%;height:auto;border:1px solid rgba(168,85,247,.22)}
.night-site .prose-12stages .about-quote{border:0;border-top:1px solid rgba(168,85,247,.3);border-bottom:1px solid rgba(168,85,247,.3);padding:30px 8px;margin:40px 0;text-align:center;font-family:var(--night-serif);font-style:italic;font-size:1.8rem;line-height:1.5;color:#e9d5ff}
.night-site .about-paths{margin-top:56px}

/* Soul Road Map / 灵魂路线图 page. Chinese headings stay upright — slanted CJK
   is synthesised by the browser and reads poorly; English keeps the italic. */
.night-site .srm-hero{position:relative;padding:120px 24px 104px;text-align:center;background-size:cover;background-position:center;overflow:hidden}
.night-site .srm-hero-veil{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.night-site .srm-hero-inner{position:relative;max-width:760px;margin:0 auto}
.night-site .srm-eyebrow{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:#d8b4fe;margin-bottom:22px}
.night-site .srm-title{font-family:var(--night-serif);font-style:italic;font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.15;color:#fff;margin-bottom:22px}
.night-site .srm-lead{font-size:1.1rem;line-height:1.9;color:rgba(243,232,255,.88);margin:0 auto 36px;max-width:620px}
.night-site .srm-cta{display:inline-block;min-height:48px;padding:15px 34px;border:1px solid rgba(196,181,253,.6);background:rgba(139,92,246,.18);color:#fff;font-size:12px;letter-spacing:.3em;text-transform:uppercase;transition:background-color .5s ease,color .5s ease}
.night-site .srm-cta:hover{background:#fff;color:#000}
.night-site .srm-page{max-width:880px;margin:0 auto;padding:80px 24px 104px}
.night-site .srm-section{margin-bottom:80px}
.night-site .srm-page h2{font-family:var(--night-serif);font-style:italic;font-size:2rem;line-height:1.35;color:#e9d5ff;margin-bottom:22px}
.night-site .srm-page h3{font-family:var(--night-serif);font-style:italic;font-size:1.35rem;line-height:1.4;color:#fff;margin-bottom:6px}
.night-site .srm-page p{font-size:1.05rem;line-height:1.95;font-weight:300;color:rgba(233,213,255,.85);margin-bottom:1.1rem}
.night-site .srm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:8px}
.night-site .srm-card{background:rgba(255,255,255,.02);border:1px solid rgba(168,85,247,.22);padding:28px 26px}
.night-site .srm-card p:last-child{margin-bottom:0}
.night-site .srm-page .srm-term{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#d8b4fe;margin-bottom:12px;font-weight:400}
.night-site .srm-sample{max-width:440px;margin:8px auto 0;text-align:center}
.night-site .srm-sample svg{display:block;width:100%;height:auto;border:1px solid rgba(168,85,247,.22)}
.night-site .srm-page .srm-sample-tag{display:inline-block;margin:0 0 14px;padding:4px 14px;border:1px dashed rgba(216,180,254,.6);font-size:12px;letter-spacing:.2em;color:#e9d5ff}
.night-site .srm-sample figcaption{margin-top:16px;font-size:.95rem;line-height:1.85;color:rgba(233,213,255,.78);text-align:left}
.night-site .srm-steps{list-style:none;padding:0;margin:0;counter-reset:srm}
.night-site .srm-steps li{counter-increment:srm;position:relative;padding:4px 0 8px 64px;margin-bottom:18px}
.night-site .srm-steps li::before{content:counter(srm);position:absolute;left:0;top:0;width:42px;height:42px;border:1px solid rgba(196,181,253,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--night-serif);font-size:1.15rem;color:#e9d5ff}
.night-site .srm-faq details{border-top:1px solid rgba(168,85,247,.22)}
.night-site .srm-faq details:last-child{border-bottom:1px solid rgba(168,85,247,.22)}
.night-site .srm-faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-size:1.08rem;line-height:1.6;color:#f4f4f5}
.night-site .srm-faq summary::-webkit-details-marker{display:none}
.night-site .srm-faq summary::after{content:"+";position:absolute;right:6px;top:16px;font-size:1.4rem;color:#d8b4fe}
.night-site .srm-faq details[open] summary::after{content:"−"}
.night-site .srm-faq details p{padding-right:40px}
.night-site .srm-end{text-align:center;padding-top:16px}
/* 12Stages Services: the line above a service title links back to the Services page. */
.night-site .srm-eyebrow a{color:inherit;border-bottom:1px solid rgba(216,180,254,.45);padding-bottom:2px}
.night-site .srm-eyebrow a:hover{color:#fff}
.night-site .srm-grid-single{grid-template-columns:minmax(0,560px);justify-content:center}
.night-site .srm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.night-site .srm-card-soon{border-style:dashed;background:transparent;opacity:.75}
.night-site .srm-choose{margin-top:28px}
.night-site .srm-card-link{display:block;color:inherit;transition:border-color .5s ease,background .5s ease}
.night-site .srm-card-link:hover{border-color:rgba(168,85,247,.55);background:rgba(255,255,255,.04)}
.night-site .srm-more{display:inline-block;margin-top:6px;font-size:12px;letter-spacing:.25em;text-transform:uppercase;color:#d8b4fe;border-bottom:1px solid rgba(168,85,247,.45);padding-bottom:2px}
html[lang^="zh"] .night-site .srm-more{font-size:14px;letter-spacing:.15em}
/* Unresolved service details. function-check.js fails the release build while
   any page still carries one, so a marked draft cannot be deployed. */
.night-site .draft-note{display:block;margin:14px 0;padding:10px 14px;border:1px dashed #f0d78c;background:rgba(240,215,140,.07);color:#f0d78c;font-size:.9rem;line-height:1.7}
.night-site .srm-page .draft-note{font-size:.9rem;font-weight:400;color:#f0d78c}
html[lang^="zh"] .night-site .srm-title,html[lang^="zh"] .night-site .srm-page h2,html[lang^="zh"] .night-site .srm-page h3{font-style:normal;letter-spacing:.04em}
html[lang^="zh"] .night-site .srm-page p{font-weight:400;line-height:2}
html[lang^="zh"] .night-site .srm-cta{font-size:15px;letter-spacing:.3em}
@media(max-width:767px){
 .night-site .srm-hero{padding:88px 20px 72px}
 .night-site .srm-page{padding:56px 20px 80px}
 .night-site .srm-section{margin-bottom:60px}
 .night-site .srm-page h2{font-size:1.65rem}
 .night-site .srm-grid{grid-template-columns:1fr;gap:14px}
 .night-site .srm-card{padding:24px 20px}
 .night-site .srm-steps li{padding-left:56px}
}
@media(max-width:400px){
 html[lang="en"] .night-site .srm-cta{letter-spacing:.16em;padding:15px 22px}
}
@media(max-width:767px){
 .night-site .start-here{padding:64px 20px 16px}
 .night-site .start-paths{padding-bottom:64px}
 .night-site .start-intro{font-size:1rem}
 .night-site .start-heading{font-size:2rem;margin-bottom:28px}
 .night-site .start-grid{grid-template-columns:1fr;gap:16px}
 .night-site .start-card{padding:28px 24px}
 /* Three full-height panels pushed "Where to begin" far down a phone screen. */
 .night-site .parallax-box{height:340px}
 .night-site .prose-12stages .about-quote{font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){.night-site *{scroll-behavior:auto!important;transition:none!important}}