/* 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{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}

@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}}