/* Fateforce reading system — shared rhythm for text-heavy detail pages.
   Long-form copy stays quiet and readable; display serif is reserved for headings. */

:root{
  --ff-reading-width:820px;
  --ff-reading-text:#3b3833;
  --ff-reading-muted:#6f685f;
  --ff-reading-line:#d8d0c4;
  --ff-reading-soft:#f7f3ed;
  --ff-reading-paper:#fffdf9;
}

/* Comfortable measure: tables/stat blocks can remain wide, prose should not. */
.race-content-section>p,
.race-edition-comparison>p,
.class-detail-main #class-overview>p,
.class-build-note>p,
.class-srd-copy>p,
.class-feature-content>p,
.class-feature-content>ul,
.class-srd-copy>ul,
.class-topic-links,
.class-detail-main>#class-tips,
.class-detail-main>#class-mistakes,
.class-detail-main>#class-faq,
.class-related,
.spell-article>p,
.spell-article>.catalog-editorial-summary,
.spell-article>.upcast,
.spell-article>.catalog-source-note,
.item-sheet-copy,
.feat-content-section>p,
.feat-benefit-list,
.catalog-detail-copy>p,
.catalog-detail-copy>ul,
.catalog-srd-copy>p,
.catalog-srd-copy>ul,
.catalog-source-note,
.compendium-body>section>p,
.compendium-body>section>ul,
.bestiary-related-sections{
  max-width:var(--ff-reading-width);
}

/* Body copy: screen-friendly sans; serif remains for display hierarchy. */
.race-content-section>p,
.race-rule-item p,
.class-detail-main #class-overview>p,
.class-build-note>p,
.class-srd-copy>p,
.class-feature-content>p,
.class-feature-content>ul li,
.class-srd-copy>ul li,
.spell-article>p,
.spell-article .upcast p,
.spell-article .catalog-editorial-summary p,
.item-prose,
.item-prose p,
.item-prose li,
.feat-benefit-item p,
.feat-description p,
.catalog-detail-copy p,
.catalog-detail-copy li,
.catalog-srd-copy p,
.catalog-srd-copy li,
.compendium-body>section>p{
  color:var(--ff-reading-text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:17px;
  line-height:1.72;
}

.race-overview>p:first-of-type,
.class-detail-main #class-overview>p:first-of-type,
.spell-article .catalog-editorial-summary>p:first-of-type,
.catalog-editorial-summary>p:first-of-type{
  color:#2f2c28;
  font-size:18px;
  line-height:1.7;
}

/* Paragraph rhythm is deliberately modest: enough air without turning pages into cards. */
.race-content-section>p,
.class-detail-main #class-overview>p,
.class-srd-copy>p,
.class-feature-content>p,
.spell-article>p,
.item-prose p,
.feat-description p,
.catalog-detail-copy p,
.catalog-srd-copy p,
.compendium-body>section>p{
  margin-top:0;
  margin-bottom:18px;
}

/* Headings use one hierarchy across reference pages. */
.race-content-section>h2,
.class-detail-main section>h2,
.spell-article>.content-heading,
.item-sheet-copy>.content-heading,
.feat-content-section>h2,
.catalog-detail-copy>h2,
.bestiary-related-sections>h2,
.compendium-body>section>h2{
  color:#17191e;
  font-family:Georgia,serif;
  font-weight:700;
  letter-spacing:-.012em;
}

.race-content-section>h2,
.feat-content-section>h2,
.catalog-detail-copy>h2,
.compendium-body>section>h2{
  font-size:clamp(29px,3.2vw,38px);
  line-height:1.08;
}

.class-srd-copy>h3,
.class-feature-content h3,
.item-prose h3,
.catalog-srd-copy h3{
  color:#24211e;
  font-family:Georgia,serif;
  font-weight:700;
  line-height:1.2;
}

/* Lists: normal editorial lists, not decorative cards everywhere. */
.class-feature-content>ul,
.class-srd-copy>ul,
.item-prose ul,
.item-prose ol,
.catalog-detail-copy ul,
.catalog-srd-copy ul,
.compendium-body section ul{
  margin:14px 0 22px;
  padding-left:23px;
}
.class-feature-content>ul li,
.class-srd-copy>ul li,
.item-prose li,
.catalog-detail-copy li,
.catalog-srd-copy li,
.compendium-body section li{
  margin:7px 0;
}
.class-feature-content>ul li::marker,
.class-srd-copy>ul li::marker,
.item-prose ul li::marker,
.catalog-detail-copy ul li::marker,
.catalog-srd-copy ul li::marker,
.compendium-body section ul li::marker{
  color:#a34439;
}

/* One calm pattern for in-page navigation across content types. */
.race-section-nav,
.feat-section-nav,
.class-detail-main .class-srd-nav,
.spell-jump{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px 20px;
  margin:4px 0 34px;
  padding:14px 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--ff-reading-line);
  border-bottom:1px solid var(--ff-reading-line);
}
.class-detail-main .class-srd-nav{padding:14px 0}
.race-section-nav strong,
.feat-section-nav strong,
.class-srd-nav strong,
.spell-jump strong{
  margin:0 4px 0 0;
  color:#756d62;
  font:900 10px/1 Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.race-section-nav a,
.feat-section-nav a,
.class-srd-nav a,
.spell-jump a{
  min-height:0;
  padding:3px 0;
  background:transparent;
  border:0;
  color:#312e29;
  font:800 13px/1.35 Arial,Helvetica,sans-serif;
  text-decoration:none;
}
.race-section-nav a:hover,
.race-section-nav a:focus-visible,
.feat-section-nav a:hover,
.feat-section-nav a:focus-visible,
.class-srd-nav a:hover,
.class-srd-nav a:focus-visible,
.spell-jump a:hover,
.spell-jump a:focus-visible{
  color:#8a2f25;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Keep rule/features easy to scan without adding more cards. */
.race-rules-list,
.feat-benefit-list{
  border-top:1px solid var(--ff-reading-line);
}
.race-rule-item,
.feat-benefit-item{
  border-bottom:1px solid var(--ff-reading-line);
}
.race-rule-item{padding:17px 0}
.feat-benefit-item{padding-top:21px;padding-bottom:21px}
.feat-benefit-item p{font-size:16.5px}

/* Class rules are wide for tables, but prose/features use a human reading measure. */
.class-detail-main #class-overview{max-width:var(--ff-reading-width)}
.class-build-note{
  width:100%;
  max-width:none;
  padding:26px 28px 27px;
  background:#fff;
  border:1px solid #d8d0c4;
  border-left:4px solid #8a4439;
}
.class-feature-block{
  grid-template-columns:minmax(190px,250px) minmax(0,1fr);
  gap:34px;
  max-width:1040px;
}
.class-feature-content{max-width:760px}
.class-feature-content>p,
.class-feature-content>ul li,
.class-srd-copy>p,
.class-srd-copy>ul li{font-family:Arial,Helvetica,sans-serif}
.class-srd-copy>h2{
  max-width:100%;
  border-bottom:1px solid #cfc5b8;
}
.class-srd-copy>h2.class-creation-heading{
  width:100%;
  max-width:none;
  padding:18px 20px;
  background:#fff;
  border:1px solid #d8d0c4;
  border-left:4px solid #8a4439;
}

/* Spell and item long descriptions follow the same typography. */
.spell-article{min-width:0}
.spell-article>.content-heading{margin-bottom:17px}
.spell-article .upcast{
  margin:28px 0;
  padding:18px 20px;
  background:var(--ff-reading-soft);
  border:1px solid #ded5c9;
  border-left:4px solid #8a4439;
}
.spell-article .upcast>strong{
  display:block;
  margin-bottom:7px;
  color:#211f1c;
  font:700 19px/1.2 Georgia,serif;
}
.item-prose{font-family:Arial,Helvetica,sans-serif}
.item-sheet-copy{max-width:var(--ff-reading-width)}
.item-sheet-copy .content-heading{font-size:clamp(28px,3vw,36px);line-height:1.08}
.item-prose h3{margin:28px 0 10px;font-size:22px}

/* Catalog/bestiary text gets the same reading width without narrowing stat blocks. */
.catalog-detail-copy{max-width:none}
.catalog-srd-copy>p,
.catalog-srd-copy>ul{max-width:var(--ff-reading-width)}
.catalog-editorial-summary{
  max-width:var(--ff-reading-width);
  padding:0 0 28px;
  border-bottom:1px solid var(--ff-reading-line);
}
.catalog-editorial-summary ul{
  display:grid;
  gap:0;
  margin:14px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid #e1d9ce;
}
.catalog-editorial-summary li{
  position:relative;
  margin:0;
  padding:10px 0 10px 20px;
  border-bottom:1px solid #e1d9ce;
  font-size:14px;
  line-height:1.5;
}
.catalog-editorial-summary li::before{
  content:"";
  position:absolute;
  left:2px;
  top:17px;
  width:6px;
  height:6px;
  background:#a34439;
}

/* Source/legal notes are deliberately quiet. */
.catalog-source-note,
.class-srd-source{
  max-width:var(--ff-reading-width);
  margin-top:24px;
  padding:14px 16px;
  background:#f4f0e9;
  border:0;
  border-left:3px solid #b8aea0;
  color:#6b645b;
  font:13px/1.55 Arial,Helvetica,sans-serif;
}

/* Related blocks should read as navigation, not another content card wall. */
.class-related-links,
.bestiary-related-links,
.item-sheet-links{font-family:Arial,Helvetica,sans-serif}
.bestiary-related-sections{
  padding:22px 0 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--ff-reading-line);
}
.bestiary-related-links a{
  padding:11px 0;
  font-size:13px;
}

/* Background and other compendium prose follows the same screen rhythm. */
.compendium-body:not(.class-detail-main)>section{
  max-width:var(--ff-reading-width);
  margin-bottom:38px;
}
.compendium-body:not(.class-detail-main)>section+section{
  padding-top:34px;
  border-top:1px solid var(--ff-reading-line);
}

/* Desktop keeps generous whitespace; mobile reduces it without shrinking readability. */
@media(max-width:900px){
  .class-feature-block{
    grid-template-columns:1fr;
    gap:10px;
    max-width:var(--ff-reading-width);
    padding-top:24px;
  }
  .class-srd-copy .class-feature-block>.class-feature-heading{margin-bottom:2px}
  .class-feature-content{max-width:var(--ff-reading-width)}
}

@media(max-width:700px){
  .race-content-section>p,
  .race-rule-item p,
  .class-detail-main #class-overview>p,
  .class-build-note>p,
  .class-srd-copy>p,
  .class-feature-content>p,
  .class-feature-content>ul li,
  .class-srd-copy>ul li,
  .spell-article>p,
  .spell-article .upcast p,
  .item-prose,
  .item-prose p,
  .item-prose li,
  .feat-benefit-item p,
  .feat-description p,
  .catalog-detail-copy p,
  .catalog-detail-copy li,
  .catalog-srd-copy p,
  .catalog-srd-copy li,
  .compendium-body>section>p{
    font-size:16px;
    line-height:1.68;
  }

  .race-section-nav,
  .feat-section-nav,
  .class-detail-main .class-srd-nav,
  .spell-jump{
    gap:7px 14px;
    margin-bottom:28px;
    padding:12px 0;
  }
  .race-section-nav a,
  .feat-section-nav a,
  .class-srd-nav a,
  .spell-jump a{font-size:12px}

  .class-build-note{padding:17px 16px}
  .class-srd-copy>h2.class-creation-heading{padding:14px 15px}
  .spell-article .upcast{padding:16px}
  .catalog-source-note,.class-srd-source{padding:12px 13px}
}


/* Class practical blocks: useful structure without a wall of cards. */
.class-advice-list{
  max-width:var(--ff-reading-width);
  margin:14px 0 0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--ff-reading-line);
}
.class-advice-list li{
  position:relative;
  margin:0;
  padding:13px 0 13px 23px;
  border-bottom:1px solid var(--ff-reading-line);
  color:var(--ff-reading-text);
  font:16px/1.65 Arial,Helvetica,sans-serif;
}
.class-advice-list li::before{
  content:"";
  position:absolute;
  left:2px;
  top:22px;
  width:7px;
  height:7px;
  background:#a34439;
}
.class-advice-list--mistakes li::before{
  background:#7b7064;
}
.class-faq-list{
  max-width:var(--ff-reading-width);
  border-top:1px solid var(--ff-reading-line);
}
.class-faq-list details{
  margin:0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--ff-reading-line);
}
.class-faq-list summary{
  position:relative;
  padding:15px 34px 15px 0;
  cursor:pointer;
  list-style:none;
  color:#211f1c;
  font:700 18px/1.35 Georgia,serif;
}
.class-faq-list summary::-webkit-details-marker{display:none}
.class-faq-list summary::after{
  content:"+";
  position:absolute;
  right:2px;
  top:14px;
  color:#8a4439;
  font:700 20px/1 Arial,Helvetica,sans-serif;
}
.class-faq-list details[open] summary::after{content:"−"}
.class-faq-list details p{
  max-width:760px;
  margin:0;
  padding:0 34px 16px 0;
  color:var(--ff-reading-text);
  font:16px/1.65 Arial,Helvetica,sans-serif;
}
.class-topic-links,
.class-related{
  padding-top:24px;
  border-top:1px solid var(--ff-reading-line);
}
.class-related-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}
.class-related-links a{
  padding:5px 0;
  color:#3b3732;
  font-size:13px;
  font-weight:800;
  text-decoration:underline;
  text-decoration-color:#c2b7aa;
  text-underline-offset:3px;
}
.class-related-links a:hover,
.class-related-links a:focus-visible{
  color:#8a2f25;
  text-decoration-color:currentColor;
}

@media(max-width:700px){
  .class-detail-main .class-srd-nav,
  .race-section-nav,
  .feat-section-nav,
  .spell-jump{
    flex-wrap:wrap;
    overflow:visible;
  }
  .class-srd-nav a{flex:0 1 auto}
  .class-advice-list li{padding:12px 0 12px 21px;font-size:15px}
  .class-advice-list li::before{top:20px}
  .class-faq-list summary{font-size:17px}
  .class-faq-list details p{padding-right:20px;font-size:15px}
}


/* Shared column rhythm and content blocks for text-only editorial pages. */
:root{
  --ff-detail-aside-width:300px;
  --ff-detail-column-gap:40px;
}

.editorial-article-layout,
.race-2024-layout,
.compendium-detail-layout,
.spell-detail-layout,
.feat-detail-layout,
.race-profile-layout{
  column-gap:var(--ff-detail-column-gap);
}
.editorial-article-layout,
.race-2024-layout,
.compendium-detail-layout,
.spell-detail-layout,
.feat-detail-layout,
.race-profile-layout{
  grid-template-columns:minmax(0,var(--ff-detail-aside-width)) minmax(0,1fr);
}
.catalog-detail-layout,
.race-detail-grid,
.race-article-layout,
.article-layout{
  column-gap:var(--ff-detail-column-gap);
}
.catalog-detail-layout{
  grid-template-columns:minmax(0,1fr) var(--ff-detail-aside-width);
}
.race-detail-grid,
.race-article-layout,
.article-layout{
  grid-template-columns:minmax(0,1fr) var(--ff-detail-aside-width);
}
.item-sheet-grid{grid-template-columns:var(--ff-detail-aside-width) minmax(0,1fr)}

/* Markdown article sections and hand-authored rule sections share one light panel. */
.editorial-prose>section.article-content-block,
.editorial-prose>section:not(.article-quick-answer):not(.article-summary-card):not(.article-related):not(.article-checklist):not(.article-faq):not(.article-source-note){
  max-width:820px;
  margin:0 0 18px;
  padding:23px 26px 20px;
  background:#fff;
  border:1px solid #d8d0c4;
  border-left:4px solid #a34439;
}
.editorial-prose>section.article-content-block>h2,
.editorial-prose>section:not(.article-quick-answer):not(.article-summary-card):not(.article-related):not(.article-checklist):not(.article-faq):not(.article-source-note)>h2{
  margin:0 0 13px;
  padding:0;
  border:0;
  font-size:clamp(25px,3vw,34px);
  line-height:1.1;
}
.editorial-prose>section.article-content-block>p:last-child,
.editorial-prose>section:not(.article-quick-answer):not(.article-summary-card):not(.article-related):not(.article-checklist):not(.article-faq):not(.article-source-note)>p:last-child{
  margin-bottom:0;
}

@media(max-width:900px){
  .editorial-article-layout,
  .race-2024-layout,
  .compendium-detail-layout,
  .spell-detail-layout,
  .feat-detail-layout,
  .catalog-detail-layout,
  .race-profile-layout,
  .race-detail-grid,
  .race-article-layout,
  .article-layout{
    grid-template-columns:minmax(0,1fr);
    row-gap:28px;
  }
  .editorial-prose>section.article-content-block,
  .editorial-prose>section:not(.article-quick-answer):not(.article-summary-card):not(.article-related):not(.article-checklist):not(.article-faq):not(.article-source-note){
    padding:20px 20px 18px;
  }
}
@media(max-width:650px){
  .editorial-prose>section.article-content-block,
  .editorial-prose>section:not(.article-quick-answer):not(.article-summary-card):not(.article-related):not(.article-checklist):not(.article-faq):not(.article-source-note){
    margin-bottom:12px;
    padding:17px 16px 15px;
  }
  .editorial-prose>section.article-content-block>h2,
  .editorial-prose>section:not(.article-quick-answer):not(.article-summary-card):not(.article-related):not(.article-checklist):not(.article-faq):not(.article-source-note)>h2{
    font-size:26px;
  }
}