/* ============================================================================
   fhs-house.css  -  FHS canonical house stylesheet v1
   ----------------------------------------------------------------------------
   ONE source of truth for the studio palette and the print colour law. Every
   FHS document master (story, companion, bios, family group sheets, timeline,
   production pages) LINKS this file first, then adds only its own layout classes.

   Why this exists: skills used to author their own colours inline, so each family
   drifted (cream backgrounds, renamed classes) and fhs-printpack needed a
   luminance "whiten_cream()" hack to undo it. With this base, WHITE IS WHITE
   because the stylesheet says so - that hack is retired.

   RULES FOR SKILLS (enforced by fhs-verify):
     1. Link this file: <link rel="stylesheet" href="fhs-house.css">. Do NOT paste
        a palette or page-background colour into the document's own <style>.
     2. Take every colour from the var(--fhs-*) tokens below. Never hard-code a hex.
     3. PAGES ARE WHITE. Colour appears ONLY inside boxes (vignette, sidebar,
        letter, family-group-sheet header, placeholder). Never tint the page/body.
     4. Use the class names in the CLASS CONTRACT below. Do not invent a new name
        for a concept that already has one (that is what caused class-name drift).

   House rule: plain hyphens only, never em or en dashes.
   ============================================================================ */

:root{
  /* ---- ink & rule ---- */
  --fhs-ink:      #2c2519;   /* body text                                   */
  --fhs-slate:    #6a614e;   /* muted text, captions, footnotes             */
  --fhs-line:     #d8c7a3;   /* hairlines, table borders                    */
  --fhs-dark:     #241b10;   /* dark banners / headers                      */

  /* ---- accents ---- */
  --fhs-gold:     #9c7b43;   /* story/keepsake accent, rules, eyebrows      */
  --fhs-brown:    #7a4a25;   /* headings, warm accent                       */
  --fhs-burgundy: #6d1f2c;   /* Companion Guide accent                      */

  /* ---- surfaces ---- */
  --fhs-paper:    #ffffff;   /* THE PAGE - always white                     */
  --fhs-box:      #fbf7ec;   /* neutral warm box fill (sidebars, panels)    */
  --fhs-box-line: #e6dcc2;   /* box border                                  */
  --fhs-vignette-accent: #6b4fa0;  /* vignette left accent bar (violet)     */
  --fhs-tint-cool: #eef2f7;  /* cool tint for sidebars if used              */

  /* ---- type ---- */
  --fhs-serif:  Georgia, "Times New Roman", serif;
  --fhs-sans:   Arial, Helvetica, sans-serif;
  --fhs-display: "Cormorant Garamond", Georgia, serif;  /* web/showcase pages */
}

/* ---- global page law: white paper, dark ink, serif body ---- */
html,body{ background:var(--fhs-paper); color:var(--fhs-ink); }
body{ font-family:var(--fhs-serif); line-height:1.62; }

/* The page/wrap is ALWAYS white. Type-specific skins may set width/shadow on
   screen but must not repaint the page a warm colour. */
.page, .wrap, .book, main{ background:var(--fhs-paper); }

@media print{
  html,body,.page,.wrap,.book,main{ background:#ffffff !important; }
  /* colour survives ONLY inside declared boxes (below); everything else prints white */
}

/* ============================================================================
   SHARED PRIMITIVES  -  the same small classes every document reuses.
   Author these ONCE here so a story, a bio and the companion all match.
   ============================================================================ */

/* eyebrow: the small spaced uppercase label above a title */
.eyebrow{ font-family:var(--fhs-sans); letter-spacing:.22em; text-transform:uppercase;
          font-size:11px; color:var(--fhs-gold); }

/* a thin decorative rule under a heading */
.rule, .chrule{ border:0; border-top:2px solid var(--fhs-gold); width:64px; margin:10px 0; }

/* footnote / small-print */
.fn, .foot{ font-family:var(--fhs-sans); font-size:12px; color:var(--fhs-slate); }

/* pull-quote */
.pull{ font-style:italic; color:var(--fhs-brown); border-left:3px solid var(--fhs-gold);
       padding-left:14px; margin:14px 0; }

/* evidence cues (bios/timeline): qualify = italic, tradition = brown */
.qual{ font-style:italic; }
.trad{ color:var(--fhs-brown); }

/* a subtitle line */
.sub{ font-style:italic; color:var(--fhs-slate); }

/* ============================================================================
   COLOURED BOXES  -  the ONLY places colour is allowed on a printed page.
   ============================================================================ */

/* Vignette: a scene box. White fill, violet left accent + fleurons. */
.vig, .vignette{
  background:var(--fhs-paper);
  border-left:4px solid var(--fhs-vignette-accent);
  padding:14px 18px; margin:18px 0; font-style:italic;
}
/* .vunit is a pure centring WRAPPER around .vig - it must NOT draw the box
   itself, or a second (detached) accent bar appears to the left. */
.vunit{ background:none; border:0; padding:0; font-style:normal; }
.fleuron, .flr-top, .flr-bot{ text-align:center; color:var(--fhs-vignette-accent); }

/* Sidebar: a topic panel. Neutral warm box, gold accent bar. */
.sb, .sidebar{
  background:var(--fhs-box); border:1px solid var(--fhs-box-line);
  border-top:3px solid var(--fhs-gold); border-radius:6px;
  padding:12px 16px; margin:16px 0; clear:both;
}

/* Letter / quoted-record box */
.letter{
  background:var(--fhs-box); border:1px solid var(--fhs-box-line);
  border-radius:6px; padding:12px 16px; margin:14px 0;
}

/* Family group sheet: header banner tinted; body white */
.sheet{ border:1px solid var(--fhs-box-line); border-radius:8px; background:var(--fhs-paper); margin:16px 0; overflow:hidden; }
.sheet > h2, .sheet h3.blkhead{ background:var(--fhs-gold); color:#fff; margin:0; padding:9px 16px; }

/* image placeholder card */
.imgslot.ph, .placeholder{ background:var(--fhs-box); border:1px dashed var(--fhs-box-line); color:var(--fhs-slate); }

/* ============================================================================
   COMPANION GUIDE skin  -  burgundy accent instead of gold.
   ============================================================================ */
.companion .eyebrow, .companion .movement{ color:var(--fhs-burgundy); }
.companion .rule{ border-top-color:var(--fhs-burgundy); }
.companion .lens{ font-family:var(--fhs-sans); text-transform:uppercase; letter-spacing:.14em;
                  font-size:11px; color:var(--fhs-burgundy); }
.companion .pull{ border-left-color:var(--fhs-burgundy); color:var(--fhs-burgundy); }

/* ============================================================================
   CLASS CONTRACT  (documentation - fhs-verify checks masters use THESE names)
   ----------------------------------------------------------------------------
   Concept              Class name(s)          Used by
   -------------------  ---------------------  ----------------------------------
   eyebrow label        .eyebrow               all
   heading rule         .rule / .chrule        all / story
   footnote / small     .fn / .foot            all
   pull-quote           .pull                  story, companion
   qualify cue          .qual                  bios, timeline
   tradition cue        .trad                  bios, timeline
   subtitle             .sub                   all
   vignette box         .vig (+ .vunit)        story, children
   fleuron              .fleuron/.flr-top/-bot story
   sidebar box          .sb                    story
   letter/record box    .letter                story
   family group sheet   .sheet                 bios/FGS, story appendix
   chapter opener       .chopen                story
   bio entry            .bioentry / .entry     bios, story appendix
   cover / cover image  .cover / .coverimg     story, children
   back page            .backpage              story
   vital line           .vital                 bios
   context row          .ctx                   timeline
   ============================================================================ */