/* ============================================================
   Miskatonic Repository — Web Template Stylesheet
   Faithfully adapted from the official Chaosium MSWord template
   ============================================================ */

/* ----- Google Fonts import (Georgia fallback built-in) ----- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Trebuchet+MS:wght@400;700&display=swap');

/* ====== CSS Custom Properties ============================== */
:root {
  /* Brand palette */
  --color-maroon:       #72000D;   /* Heading 1 / brand primary */
  --color-maroon-dark:  #5a000a;   /* hover / accent */
  --color-brown:        #442E0F;   /* Example box / table header */
  --color-brown-light:  #6b4a1a;   /* subtle border */
  --color-parchment:    #EEECE1;   /* page background / alt rows */
  --color-parchment-dk: #DDD9C0;   /* section separator */
  --color-text:         #111111;   /* body text */
  --color-white:        #FFFFFF;

  /* Typography */
  --font-heading:       'Trebuchet MS', 'Trebuchet', Verdana, sans-serif;
  --font-body:          Georgia, 'Times New Roman', serif;

  /* Sizing (base = 9pt ≈ 12px, matching the Word doc) */
  --fs-body:            0.875rem;    /* 14px ~ 9pt at standard screen dpi */
  --fs-h4:              0.875rem;    /* 9pt */
  --fs-h3:              1.0625rem;   /* ~11pt */
  --fs-h2:              1.3125rem;   /* ~14pt */
  --fs-h1:              1.75rem;     /* ~18pt display; original 25pt scaled for screen */
  --fs-table:           0.8125rem;   /* ~8pt */
  --fs-stat:            0.8125rem;

  /* Layout */
  --page-max-width:     900px;
  --page-padding:       2rem;
  --column-gap:         1.5rem;

  /* Ornament colours */
  --rule-color:         var(--color-maroon);
  --rule-thick:         3px;
  --rule-thin:          1px;
}

/* ====== Reset & Base ======================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  background: #d9d5c2;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(0,0,0,.025) 28px,
      rgba(0,0,0,.025) 29px
    );
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

/* ====== Page Wrapper ======================================= */
.mk-page {
  max-width: var(--page-max-width);
  margin: 2.5rem auto;
  background: var(--color-parchment);
  box-shadow: 0 4px 40px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
  border-top: var(--rule-thick) solid var(--color-maroon);
}

/* ====== Cover / Title Page ================================= */
.mk-cover {
  background: var(--color-brown);
  background-image:
    radial-gradient(ellipse at 50% 0%, #5a3a10 0%, #1a0d04 100%);
  color: var(--color-white);
  padding: 3.5rem var(--page-padding) 3rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mk-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.mk-cover-logo {
  display: block;
  width: 200px;
  margin: 0 auto 1.5rem;
  position: relative;
  z-index: 1;
}

.mk-cover-title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f0e8d0;
  text-shadow: 2px 2px 8px rgba(0,0,0,.8);
  line-height: 1.1;
  margin-bottom: .5rem;
  position: relative;
  z-index: 1;
}

.mk-cover-subtitle {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.0625rem;
  color: #c8b89a;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

.mk-cover-author {
  font-family: var(--font-heading);
  font-size: .875rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #a08060;
  position: relative;
  z-index: 1;
}

.mk-cover-rule {
  display: block;
  width: 60%;
  margin: 1rem auto;
  border: none;
  border-top: 1px solid rgba(255,255,255,.2);
  position: relative;
  z-index: 1;
}

/* ====== Header / Navigation Bar ============================ */
.mk-header {
  background: var(--color-maroon);
  padding: .4rem var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid var(--color-brown);
}

.mk-header-title {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .8125rem;
  color: rgba(255,255,255,.8);
  letter-spacing: .04em;
}

.mk-header-page {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8125rem;
  color: rgba(255,255,255,.9);
}

/* ====== Credits Page ======================================= */
.mk-credits {
  padding: 2rem var(--page-padding);
  text-align: center;
  background: var(--color-parchment);
  border-bottom: var(--rule-thin) solid var(--color-parchment-dk);
}

.mk-credits p,
.mk-credits-text {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: .5rem;
}

.mk-credits-legal {
  font-style: italic;
  font-size: .8125rem;
  color: #555;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: var(--rule-thin) solid var(--color-parchment-dk);
}

/* ====== Table of Contents ================================== */
.mk-toc {
  padding: 1.5rem var(--page-padding) 1rem;
  background: var(--color-parchment);
  border-bottom: var(--rule-thick) solid var(--color-maroon);
}

.mk-toc-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-maroon);
  letter-spacing: .06em;
  margin-bottom: 1rem;
  padding-bottom: .35rem;
  border-bottom: var(--rule-thin) solid var(--color-maroon);
}

.mk-toc-list {
  list-style: none;
  columns: 2;
  column-gap: var(--column-gap);
}

.mk-toc-list li { break-inside: avoid; }

.mk-toc-h1 a,
.mk-toc-h2 a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem;
  text-decoration: none;
  padding: .2rem 0;
}

.mk-toc-h1 a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-body);
  text-transform: uppercase;
  color: var(--color-maroon);
}

.mk-toc-h2 {
  padding-left: 1rem;
}

.mk-toc-h2 a {
  font-family: var(--font-body);
  font-size: .8125rem;
  color: var(--color-text);
}

.mk-toc-dots {
  flex: 1;
  border-bottom: 1px dotted #888;
  margin: 0 .3rem .15rem;
}

.mk-toc-page { white-space: nowrap; color: #555; font-size: .8125rem; }

/* ====== Main Content Area ================================== */
.mk-content {
  padding: 1.5rem var(--page-padding);
}

.mk-two-col {
  columns: 2;
  column-gap: var(--column-gap);
  column-rule: var(--rule-thin) solid var(--color-parchment-dk);
}

@media (max-width: 640px) {
  .mk-two-col { columns: 1; }
  .mk-toc-list { columns: 1; }
}

/* ====== Typography ========================================= */

/* -- Heading 1: Trebuchet MS Bold, ALL CAPS, maroon, 25pt -- */
.mk-h1,
.mk-two-col h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-maroon);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-top: 1.4rem;
  margin-bottom: .35rem;
  break-after: avoid;
  column-span: all;  /* H1 spans both columns */
  border-bottom: var(--rule-thin) solid var(--color-maroon);
  padding-bottom: .2rem;
}

/* -- Heading 2: Trebuchet MS Bold, ALL CAPS, maroon, 14pt -- */
.mk-h2,
.mk-two-col h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-maroon);
  line-height: 1.15;
  margin-top: 1.1rem;
  margin-bottom: .25rem;
  break-after: avoid;
}

/* -- Heading 3: Georgia Bold, 11pt, maroon -- */
.mk-h3,
.mk-two-col h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-maroon);
  line-height: 1.2;
  margin-top: .9rem;
  margin-bottom: .2rem;
  break-after: avoid;
}

/* -- Heading 4: Georgia Bold Italic, 9pt -- */
.mk-h4,
.mk-two-col h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 700;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.2;
  margin-top: .7rem;
  margin-bottom: .15rem;
  break-after: avoid;
}

/* -- Body No Indent: Georgia 9pt, justified, first paragraph -- */
.mk-body,
.mk-two-col p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  text-align: justify;
  hyphens: auto;
  line-height: 1.6;
  margin-bottom: .45rem;
}

/* -- Body Indent: subsequent paragraphs -- */
.mk-body-indent,
.mk-two-col p + p {
  text-indent: 0.75em;
}

/* First paragraph after a heading — no indent */
.mk-two-col h1 + p,
.mk-two-col h2 + p,
.mk-two-col h3 + p,
.mk-two-col h4 + p {
  text-indent: 0 !important;
}

/* ====== Bullet Lists ======================================= */
.mk-bullets,
.mk-two-col ul {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  list-style-type: disc;
  padding-left: 1.25em;
  margin-bottom: .45rem;
}

.mk-bullets li,
.mk-two-col ul li {
  margin-bottom: .2rem;
  line-height: 1.55;
}

/* ====== Numbered Lists ===================================== */
.mk-numbered,
.mk-two-col ol {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-bottom: .45rem;
}

.mk-numbered li,
.mk-two-col ol li {
  margin-bottom: .2rem;
  line-height: 1.55;
}

/* ====== Example Box Text =================================== */
.mk-example,
.mk-two-col .example-box {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-body);
  color: var(--color-brown);
  background: #f5f2e8;
  border-left: 3px solid var(--color-brown-light);
  padding: .6rem .75rem;
  margin: .5rem 0;
  line-height: 1.55;
  break-inside: avoid;
}

/* ====== NPC Stat Block ===================================== */
.mk-stats {
  font-family: var(--font-body);
  font-size: var(--fs-stat);
  color: var(--color-text);
  background: #f0edd9;
  border: 1px solid var(--color-parchment-dk);
  padding: .5rem .65rem;
  margin: .5rem 0;
  break-inside: avoid;
  tab-size: 8;
}

.mk-stats .stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1.25rem;
  margin-bottom: .2rem;
}

.mk-stats .stat-item {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mk-stats .stat-item strong { color: var(--color-maroon); }

.mk-stats .stat-label {
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--color-maroon);
  display: block;
  margin-bottom: .25rem;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--color-parchment-dk);
  padding-bottom: .2rem;
}

.mk-stats .stat-attack { margin-top: .3rem; }
.mk-stats .stat-skills { font-style: italic; }
.mk-stats .stat-armor { font-weight: 700; }

/* ====== Tables ============================================= */
.mk-table-wrap {
  break-inside: avoid;
  margin: .6rem 0;
  overflow-x: auto;
}

.mk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-heading);
  font-size: var(--fs-table);
}

.mk-table thead tr {
  background: var(--color-brown);
  color: var(--color-white);
}

.mk-table thead th {
  padding: .35rem .5rem;
  text-align: left;
  font-weight: 700;
  font-size: var(--fs-table);
  letter-spacing: .03em;
  border: 1px solid var(--color-brown-light);
}

.mk-table tbody tr:nth-child(even) {
  background: var(--color-parchment);
}

.mk-table tbody tr:nth-child(odd) {
  background: #f9f7ef;
}

.mk-table td {
  padding: .3rem .5rem;
  vertical-align: top;
  border: 1px solid var(--color-parchment-dk);
  color: var(--color-text);
  line-height: 1.45;
}

/* ====== Drop Cap (for opening paragraphs) ================== */
.mk-dropcap::first-letter {
  font-family: var(--font-body);
  font-size: 3.2em;
  font-weight: 700;
  color: var(--color-maroon);
  float: left;
  line-height: .75;
  margin: .05em .08em -.05em 0;
}

/* ====== Section Divider ==================================== */
.mk-rule {
  border: none;
  border-top: var(--rule-thick) solid var(--color-maroon);
  margin: 1.25rem 0 .75rem;
}

.mk-rule-thin {
  border: none;
  border-top: var(--rule-thin) solid var(--color-parchment-dk);
  margin: .75rem 0;
}

/* ====== Callout / Sidebar ================================== */
.mk-callout {
  background: #1a0d04;
  color: #f0e8d0;
  padding: .75rem 1rem;
  margin: .6rem 0;
  break-inside: avoid;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  border-left: 3px solid var(--color-maroon);
}

.mk-callout strong { color: #f0a060; }

/* ====== Footer ============================================= */
.mk-footer {
  background: var(--color-maroon);
  padding: .4rem var(--page-padding);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid var(--color-brown);
}

.mk-footer-text {
  font-family: var(--font-body);
  font-style: italic;
  font-size: .75rem;
  color: rgba(255,255,255,.7);
}

.mk-footer-page {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8125rem;
  color: rgba(255,255,255,.9);
  min-width: 2em;
  text-align: right;
}

/* ====== Markdown Input Panel =============================== */
.mk-editor-panel {
  background: #1a150e;
  border-top: var(--rule-thick) solid var(--color-maroon);
  padding: 1.5rem var(--page-padding);
}

.mk-editor-panel h2 {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #c8a060;
  margin-bottom: .75rem;
}

.mk-editor-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: .75rem;
}

.mk-editor-tab {
  font-family: var(--font-heading);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .3rem .75rem;
  border: 1px solid #5a3a10;
  background: transparent;
  color: #a08060;
  cursor: pointer;
  transition: all .2s;
}

.mk-editor-tab.active,
.mk-editor-tab:hover {
  background: var(--color-maroon);
  color: var(--color-white);
  border-color: var(--color-maroon);
}

.mk-editor-area {
  width: 100%;
  min-height: 220px;
  background: #100c07;
  color: #d4c9a8;
  border: 1px solid #5a3a10;
  padding: .75rem;
  font-family: 'Courier New', monospace;
  font-size: .8125rem;
  line-height: 1.5;
  resize: vertical;
  outline: none;
  tab-size: 2;
}

.mk-editor-area:focus { border-color: var(--color-maroon); }

.mk-editor-btn {
  font-family: var(--font-heading);
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .45rem 1.5rem;
  background: var(--color-maroon);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  margin-top: .6rem;
  transition: background .2s;
}

.mk-editor-btn:hover { background: var(--color-maroon-dark); }

.mk-editor-btn-secondary {
  background: #442E0F;
  margin-left: .5rem;
}

.mk-editor-btn-secondary:hover { background: #331f08; }

/* ====== Guide Panel ======================================== */
.mk-guide {
  background: #100c07;
  color: #a08060;
  padding: 1rem var(--page-padding);
  font-family: 'Courier New', monospace;
  font-size: .75rem;
  line-height: 1.6;
  display: none;
}

.mk-guide.visible { display: block; }

.mk-guide h3 {
  font-family: var(--font-heading);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #c8a060;
  margin: .75rem 0 .35rem;
}

.mk-guide h3:first-child { margin-top: 0; }

.mk-guide code {
  background: rgba(255,255,255,.06);
  padding: .1em .3em;
  border-radius: 2px;
  color: #d4c9a8;
}

.mk-guide pre {
  background: rgba(0,0,0,.35);
  padding: .5rem .7rem;
  margin: .25rem 0 .5rem;
  overflow-x: auto;
  color: #d4c9a8;
  white-space: pre;
}

.mk-guide .guide-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: .5rem;
}

@media (max-width: 600px) { .mk-guide .guide-row { grid-template-columns: 1fr; } }

/* ====== Print Styles ======================================= */
@media print {
  body { background: white; }
  .mk-page { box-shadow: none; margin: 0; max-width: 100%; }
  .mk-editor-panel, .mk-guide { display: none !important; }
  .mk-two-col { columns: 2; }
  h1 { column-span: all; page-break-after: avoid; }
  h2, h3, h4 { page-break-after: avoid; }
  .mk-example, .mk-stats, .mk-table-wrap, .mk-callout {
    page-break-inside: avoid;
  }
}

/* ====== Utility ============================================ */
.mk-no-col-span { column-span: none !important; }
.mk-col-span    { column-span: all !important; }
.mk-center      { text-align: center; }
.mk-italic      { font-style: italic; }
.mk-bold        { font-weight: 700; }
.mk-small       { font-size: .8125rem; }
.mk-maroon      { color: var(--color-maroon); }