/* Manuscript design system - shared by every pre-app page.
   Scoped under .mh-page so it never touches the app's own styles. */

/* app.css's body.landing-page rule fetches assets/img/landing-bg.webp as a
   background image on every page using this design, purely to be covered
   up a moment later by .mh-page's own opaque background below - a wasted
   image request that also caused a visible flash while it loaded. This
   stops that fetch at the source instead of only masking it once it
   arrives. gateHead() adds .mh-body to <body> whenever a page passes
   manuscriptDesign: true. !important is required: app.css and this file
   both target `body` at the same specificity, and load order alone would
   only be a coincidental, fragile win. */
body.mh-body{
  background: #F5F6F3 !important;
}

.mh-page{
  --mh-paper:#F5F6F3; --mh-paper-raised:#FFFFFF; --mh-ink:#1B2430;
  --mh-ink-soft:#4B5563; --mh-oxblood:#7A2E3A; --mh-forest:#3B5A45; --mh-line:#DCDDD5;
  background:var(--mh-paper); color:var(--mh-ink);
  font-family:'Work Sans',sans-serif; font-size:17px; line-height:1.6;
  margin:0 -2rem; padding:0 0 2rem;
  min-height:100vh;
}
.mh-page h1,.mh-page h2,.mh-page h3{font-family:'Fraunces',serif;font-weight:600;margin:0;letter-spacing:-0.01em;}
.mh-wrap{max-width:1080px;margin:0 auto;padding:0 2.5rem;}

.mh-nav{display:flex;align-items:center;justify-content:space-between;padding:1.5rem 2.5rem;max-width:1080px;margin:0 auto;flex-wrap:wrap;gap:1rem;}
.mh-logo{display:inline-block;text-decoration:none;}
.mh-logo:hover{text-decoration:none;}
.mh-logo img{height:24px;width:auto;display:block;}
.mh-navlinks{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;}
.mh-navlinks a{color:var(--mh-ink-soft);text-decoration:none;font-size:0.92rem;}
.mh-navlinks a:hover{color:var(--mh-ink);}
.mh-navlinks a.signin{color:var(--mh-ink);border:1px solid var(--mh-ink);border-radius:3px;padding:0.4rem 0.9rem;}

.mh-hero{padding:3rem 2.5rem 3rem;max-width:1080px;margin:0 auto;}
.mh-hero-inner{max-width:34rem;}
.mh-hero h1{font-size:2.5rem;line-height:1.16;margin-bottom:0.9rem;}
.mh-hero p.lede{font-size:1.1rem;color:var(--mh-ink-soft);margin-bottom:1.2rem;}
.mh-hero p.sub{font-size:0.95rem;color:var(--mh-ink-soft);}

/* Homepage only: full-bleed photo hero. .mh-page is already edge-to-edge
   (see its own negative margin above), so a plain block child here already
   spans the full browser width with no extra width/margin math needed. */
.mh-hero-photo{position:relative;overflow:hidden;min-height:560px;display:flex;align-items:center;}
@media (max-width:860px){.mh-hero-photo{min-height:460px;}}
.mh-hero-photo img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:0;}
.mh-hero-photo .scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(245,246,243,0) 0%, rgba(245,246,243,0) 30%,
    rgba(245,246,243,0.3) 48%, rgba(245,246,243,0.62) 62%,
    rgba(245,246,243,0.85) 76%, rgba(245,246,243,0.85) 100%);
}
@media (max-width:860px){
  .mh-hero-photo .scrim{
    background:linear-gradient(180deg,
      rgba(245,246,243,0) 0%, rgba(245,246,243,0) 30%,
      rgba(245,246,243,0.3) 48%, rgba(245,246,243,0.65) 65%,
      rgba(245,246,243,0.88) 80%, rgba(245,246,243,0.88) 100%);
  }
}
.mh-hero-photo .content{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:0 2.5rem;width:100%;display:flex;justify-content:flex-end;}
.mh-hero-photo .content-inner{max-width:30rem;}
.mh-cta-row{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;}
.mh-btn{display:inline-block;padding:0.8rem 1.5rem;border-radius:3px;font-size:0.94rem;font-weight:500;text-decoration:none;}
.mh-btn-primary{background:var(--mh-ink);color:var(--mh-paper);}
.mh-btn-ghost{color:var(--mh-ink);border:1px solid var(--mh-ink);}

.mh-section{padding:3rem 2.5rem;max-width:1080px;margin:0 auto;}
.mh-split{display:grid;grid-template-columns:0.9fr 1.1fr;gap:3rem;align-items:start;}
@media (max-width:860px){.mh-split{grid-template-columns:1fr;}}
.mh-split h2{font-size:1.9rem;margin-bottom:1rem;}
.mh-split .lede{color:var(--mh-ink-soft);font-size:1.03rem;max-width:26rem;}
.mh-tool-list{border-top:1px solid var(--mh-line);}
.mh-tool-row{display:grid;grid-template-columns:9.5rem 1fr;gap:1.4rem;padding:1.3rem 0;border-bottom:1px solid var(--mh-line);}
.mh-tool-row .name{font-family:'Fraunces',serif;font-weight:600;font-size:1.02rem;}
.mh-tool-row p{margin:0;color:var(--mh-ink-soft);font-size:0.95rem;}

.mh-ai-brief{background:var(--mh-paper-raised);border-top:1px solid var(--mh-line);border-bottom:1px solid var(--mh-line);}
.mh-ai-brief-inner{max-width:640px;margin:0 auto;padding:2.6rem 2.5rem;}
.mh-ai-brief h2{font-size:1.4rem;margin-bottom:0.8rem;}
.mh-ai-brief p{color:var(--mh-ink-soft);font-size:0.98rem;margin-bottom:1rem;}

.mh-more{font-size:0.9rem;color:var(--mh-forest);text-decoration:none;border-bottom:1px solid var(--mh-forest);}

.mh-process{background:var(--mh-paper-raised);border-top:1px solid var(--mh-line);border-bottom:1px solid var(--mh-line);}
.mh-process-inner{max-width:1080px;margin:0 auto;padding:3rem 2.5rem;}
.mh-process h2{font-size:1.8rem;margin-bottom:1.8rem;}
.mh-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;}
@media (max-width:860px){.mh-steps{grid-template-columns:1fr;}}
.mh-step{border-left:1px solid var(--mh-line);padding-left:1.2rem;}
.mh-step .num{font-family:'Fraunces',serif;color:var(--mh-oxblood);font-size:1.5rem;font-weight:600;}
.mh-step h3{font-size:1.05rem;margin:0.4rem 0 0.4rem;}
.mh-step p{margin:0;color:var(--mh-ink-soft);font-size:0.92rem;}

.mh-paths-head{max-width:36rem;margin-bottom:2.2rem;}
.mh-paths-head h2{font-size:1.9rem;margin-bottom:0.7rem;}
.mh-paths-head p{color:var(--mh-ink-soft);font-size:1.02rem;}
.mh-paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;}
@media (max-width:860px){.mh-paths-grid{grid-template-columns:1fr;}}
.mh-paths-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2.2rem;}
@media (max-width:860px){.mh-paths-grid-3{grid-template-columns:1fr;}}
.mh-path h3{font-size:1.2rem;margin-bottom:0.5rem;}
.mh-path p.desc{color:var(--mh-ink-soft);font-size:0.95rem;margin-bottom:1.1rem;}
.mh-path h3 .mh-tag{font-family:'Work Sans',sans-serif;font-weight:600;font-size:0.68rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--mh-ink-soft);background:var(--mh-paper-raised);border:1px solid var(--mh-line);border-radius:99px;padding:0.2rem 0.6rem;margin-left:0.5rem;vertical-align:middle;}

.mh-board,.mh-shelf{background:var(--mh-paper-raised);border:1px solid var(--mh-line);border-radius:2px;padding:1.3rem 1.5rem;margin-bottom:1.1rem;}

/* A wide section for prose content, replacing the older narrow bordered
   .mh-article card. The section itself runs the same 1080px width as
   every other homepage section; .mh-prose keeps paragraph text at a
   comfortable reading measure without boxing it in a card. */
.mh-section h2{font-size:1.9rem;margin-bottom:1rem;}
.mh-prose{max-width:46rem;}
.mh-prose p{margin:0 0 1.1rem;color:var(--mh-ink-soft);font-size:1rem;line-height:1.6;}
.mh-prose p:last-child{margin-bottom:0;}
.mh-prose p strong{color:var(--mh-ink);}
.mh-board .thread{padding:0.75rem 0;border-bottom:1px dashed var(--mh-line);}
.mh-board .thread:last-child{border-bottom:none;}
.mh-board .who{font-weight:600;font-size:0.86rem;color:var(--mh-forest);}
.mh-board .msg{margin:0.2rem 0 0;font-size:0.88rem;color:var(--mh-ink-soft);}
.mh-shelf .book{display:flex;gap:1rem;align-items:center;padding:0.65rem 0;border-bottom:1px dashed var(--mh-line);}
.mh-shelf .book:last-child{border-bottom:none;}
.mh-shelf .cover{width:32px;height:46px;background:var(--mh-forest);border-radius:2px;flex-shrink:0;}
.mh-shelf .meta{flex:1;}
.mh-shelf .book-title{font-weight:600;font-size:0.9rem;}
.mh-shelf .genre{font-size:0.78rem;color:var(--mh-ink-soft);}
.mh-shelf .continue{font-size:0.8rem;color:var(--mh-forest);border:1px solid var(--mh-forest);border-radius:3px;padding:0.28rem 0.65rem;}

.mh-reader-cta{margin-top:1rem;}
.mh-reader-cta a{font-size:0.9rem;}

/* Article: the shared shape for About, Pricing, Terms, Privacy, DMCA,
   Get $5, Find Beta Readers, and AI Tools for Writers - a headline, an
   optional subline, then a single prose column. */
.mh-article-wrap{padding:0 2.5rem 3rem;max-width:1080px;margin:0 auto;}
.mh-article{max-width:640px;margin:0 auto;background:var(--mh-paper-raised);border:1px solid var(--mh-line);border-radius:2px;padding:2.2rem 2.4rem;}
.mh-article p{margin:0 0 1.1rem;}
.mh-article p:last-child{margin-bottom:0;}
.mh-article h2{font-size:1.4rem;margin:2rem 0 0.9rem;}
.mh-article h2:first-child{margin-top:0;}
.mh-article h3{font-size:1.1rem;margin:1.6rem 0 0.7rem;}
.mh-article ul,.mh-article ol{margin:0 0 1.1rem;padding-left:1.4rem;color:var(--mh-ink);}
.mh-article li{margin-bottom:0.5rem;}
.mh-article a{color:var(--mh-forest);}
.mh-article .fine{font-size:0.85rem;color:var(--mh-ink-soft);}

/* Blog */
.mh-blog-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem;}
.mh-blog-card{background:var(--mh-paper-raised);border:1px solid var(--mh-line);border-radius:2px;padding:1.6rem 1.8rem;}
.mh-blog-card img{width:100%;border-radius:2px;margin-bottom:1rem;display:block;}
.mh-blog-card h2{font-size:1.35rem;margin:0 0 0.3rem;}
.mh-blog-card h2 a{color:inherit;text-decoration:none;}
.mh-blog-card .meta{font-size:0.85rem;color:var(--mh-ink-soft);margin:0 0 0.7rem;}
.mh-blog-card p.snippet{color:var(--mh-ink-soft);margin:0 0 1rem;}
.mh-blog-empty{max-width:680px;margin:0 auto;background:var(--mh-paper-raised);border:1px solid var(--mh-line);border-radius:2px;padding:1.8rem;text-align:center;color:var(--mh-ink-soft);}
.mh-pagination{display:flex;justify-content:center;gap:0.5rem;margin-top:2rem;flex-wrap:wrap;}
.mh-pagination a{font-size:0.9rem;padding:0.5rem 0.9rem;border-radius:3px;border:1px solid var(--mh-line);color:var(--mh-ink-soft);text-decoration:none;}
.mh-pagination a.current{border-color:var(--mh-ink);color:var(--mh-ink);font-weight:600;}

.mh-blog-post{max-width:720px;margin:0 auto;}
.mh-blog-post .back{font-size:0.9rem;margin-bottom:1.2rem;display:inline-block;}
.mh-blog-post img.hero{width:100%;border-radius:2px;margin-bottom:1.4rem;display:block;}
.mh-blog-post h1{font-size:2.1rem;margin-bottom:0.4rem;}
.mh-blog-post .meta{font-size:0.9rem;color:var(--mh-ink-soft);margin-bottom:1.6rem;}
.mh-blog-post .body{background:var(--mh-paper-raised);border:1px solid var(--mh-line);border-radius:2px;padding:2.2rem 2.4rem;}
.mh-blog-post .body p{margin:0 0 1.1rem;}
.mh-blog-post .body p:last-child{margin-bottom:0;}
.mh-blog-post .body h2{font-size:1.4rem;margin:1.8rem 0 0.9rem;}
.mh-blog-post .body a{color:var(--mh-forest);}

.mh-foot{border-top:1px solid var(--mh-line);padding:2.2rem 2.5rem 0;max-width:1080px;margin:0 auto;text-align:center;}
.mh-foot-links{display:flex;justify-content:center;gap:1.4rem;margin-bottom:0.8rem;flex-wrap:wrap;}
.mh-foot-links a{color:var(--mh-ink-soft);text-decoration:none;font-size:0.88rem;}
.mh-foot-links a:hover{color:var(--mh-ink);}
.mh-foot p{color:var(--mh-ink-soft);font-size:0.85rem;}
.mh-foot p a{color:var(--mh-ink-soft);}