/* ============================================================
   Kit's Weather Club — Chapter 1
   STAGE 1: Illuminated Static Folio System
   Scoped manuscript layer. Loads AFTER style.css.
   All folio rules namespaced under .ms / .ms-* to avoid leaking
   into other pages. Static only — no animation in Stage 1.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

/* ---------- scoped tokens ---------- */
.ms{
  --ms-parchment:   #F4EAD2;
  --ms-parchment-2: #ECDDBC;
  --ms-matte:       #FBF5E6;
  --ms-ink:         #4A3A26;
  --ms-ink-soft:    #6E5C44;
  --ms-sepia:       #9C7B3E;
  --ms-sepia-deep:  #6F5526;
  --ms-sky:         #6E9DB8;
  --ms-sky-soft:    #DCEAF1;
  --ms-rose:        #C98B72;
  --ms-gold-grad:   linear-gradient(135deg,#7a5a16 0%,#c9a338 16%,#f6e3a0 36%,#fff8da 50%,#ecca62 64%,#b3892b 82%,#876619 100%);
  --ms-gold-line:   linear-gradient(90deg, transparent 0%, #b3892b 12%, #f3df9c 50%, #b3892b 88%, transparent 100%);
  --ms-shadow:      0 18px 44px rgba(74,58,38,.20), 0 4px 12px rgba(74,58,38,.10);
  --ms-shadow-sm:   0 6px 16px rgba(74,58,38,.14);
}

/* ---------- desk ground behind the folio ---------- */
body.book-body.ms{
  background:
    radial-gradient(circle at 50% 0%, #efe2c2 0%, transparent 60%),
    linear-gradient(180deg, #e4d3ac 0%, #d8c59a 100%);
  background-attachment: fixed;
  color: var(--ms-ink);
}

/* gold helper (large display text only — never body) */
.ms-gold{
  background: var(--ms-gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}

/* ============================================================
   FOLIO SHELL
   ============================================================ */
.ms-folio{
  position:relative;
  max-width: 820px;
  margin: 26px auto 40px;
  background:
    /* faint paper fibre — tiny inline SVG noise, very low opacity */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.035'/></svg>"),
    radial-gradient(circle at 50% 18%, #faf2dd 0%, transparent 55%),
    linear-gradient(180deg, var(--ms-parchment) 0%, var(--ms-parchment-2) 100%);
  border-radius: 6px;
  box-shadow: var(--ms-shadow);
  /* layered frame: sepia outer rule + gold hairline inside */
  outline: 2px solid var(--ms-sepia-deep);
  outline-offset: 0;
}
/* gold hairline just inside the sepia rule */
.ms-folio::before{
  content:"";
  position:absolute;
  inset: 7px;
  border: 1.5px solid transparent;
  border-image: var(--ms-gold-line) 1;
  pointer-events:none;
  z-index:1;
}
/* second, finer sepia keyline for a printed-folio feel */
.ms-folio::after{
  content:"";
  position:absolute;
  inset: 12px;
  border: 1px solid rgba(111,85,38,.35);
  border-radius: 3px;
  pointer-events:none;
  z-index:1;
}
.ms-folio-inner{
  position:relative;
  z-index:2;
  padding: clamp(22px, 4.5vw, 56px);
}

/* restrained corner ornaments (gold) via small SVG data URIs */
.ms-corner{
  position:absolute;
  width: 42px; height: 42px;
  z-index:3;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.9;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><g fill='none' stroke='%23b3892b' stroke-width='1.6' stroke-linecap='round'><path d='M3 12 V3 H12'/><path d='M3 3 Q22 8 30 30'/><circle cx='9' cy='9' r='1.6' fill='%23b3892b' stroke='none'/></g></svg>");
}
.ms-corner.tl{ top:10px; left:10px; }
.ms-corner.tr{ top:10px; right:10px; transform:scaleX(-1); }
.ms-corner.bl{ bottom:10px; left:10px; transform:scaleY(-1); }
.ms-corner.br{ bottom:10px; right:10px; transform:scale(-1,-1); }

/* ============================================================
   TITLE PLATE
   ============================================================ */
.ms-titleplate{ text-align:center; margin-bottom: 8px; }
.ms-series{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size: clamp(15px, 2.4vw, 18px);
  letter-spacing:.34em;
  text-transform:uppercase;
  margin: 0 0 14px;
}
.ms-title{
  margin: 0 0 6px;
  line-height:1.04;
}
.ms-chap{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-style:italic;
  font-size: clamp(18px, 3vw, 24px);
  letter-spacing:.06em;
  color: var(--ms-sepia-deep);
  margin-bottom: 6px;
}
.ms-title-main{
  display:block;
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size: clamp(30px, 6.4vw, 56px);
  letter-spacing:.005em;
}
.ms-titleplate-rule{
  width: min(320px, 70%);
  height: 14px;
  margin: 18px auto 24px;
  background: var(--ms-gold-line);
  -webkit-mask: radial-gradient(circle at center, #000 38%, transparent 39%) center/14px 14px no-repeat,
        linear-gradient(#000,#000);
  /* simple gold rule with a small central diamond accent */
  position:relative;
}
.ms-titleplate-rule::after{
  content:"❖";
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-52%);
  font-size:14px;
  background: var(--ms-gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}

/* hero plate */
.ms-plate-hero{ margin: 8px 0 0; }

/* ============================================================
   ILLUSTRATION PLATES
   ============================================================ */
.ms-plate{
  margin: 30px auto;
  text-align:center;
}
.ms-plate-img{
  background: var(--ms-matte);
  padding: 12px;
  border-radius: 8px;
  box-shadow: var(--ms-shadow-sm);
  outline: 1px solid rgba(111,85,38,.45);
  outline-offset: 0;
  position:relative;
}
.ms-plate-img::before{
  /* gold hairline inside the cream matte */
  content:"";
  position:absolute;
  inset: 6px;
  border:1px solid transparent;
  border-image: var(--ms-gold-line) 1;
  pointer-events:none;
  z-index:2;
}
.ms-plate-img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
}
.ms-caption{
  margin-top: 12px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size: clamp(15px, 2.3vw, 18px);
  color: var(--ms-ink-soft);
  letter-spacing:.01em;
}
.ms-caption::before{ content:"— "; color:var(--ms-sepia); }
.ms-caption::after{ content:" —"; color:var(--ms-sepia); }

/* smaller specimen plate (Tiny Weather Tools) */
.ms-plate-specimen{
  max-width: 460px;
}
.ms-plate-specimen .ms-plate-img img{
  aspect-ratio: 5 / 3;
}

/* ============================================================
   ORNAMENTAL DIVIDER (paw-print weather divider)
   ============================================================ */
.ms-divider{
  display:flex;
  align-items:center;
  gap: 16px;
  margin: 30px auto;
  max-width: 560px;
}
.ms-divider::before,
.ms-divider::after{
  content:"";
  flex:1;
  height:2px;
  background: var(--ms-gold-line);
}
.ms-divider img{
  width: clamp(180px, 50%, 300px);
  height:auto;
  mix-blend-mode: multiply;
}

/* ============================================================
   INCIPIT (opening note)
   ============================================================ */
.ms-incipit{
  max-width: 600px;
  margin: 8px auto 4px;
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size: clamp(17px, 2.6vw, 21px);
  line-height:1.55;
  color: var(--ms-ink-soft);
  padding: 14px 18px;
}

/* ============================================================
   STORY BEATS / BODY TYPE
   ============================================================ */
.ms-beat{ max-width: 620px; margin: 0 auto; }
.ms-beat-title{
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size: clamp(24px, 4vw, 34px);
  margin: 14px 0 22px;
  color: var(--ms-ink);
}
.ms-beat-title::after{
  content:"";
  display:block;
  width: 90px; height:10px;
  margin: 12px auto 0;
  background: var(--ms-gold-line);
}
.ms-beat p{
  font-family:'Lora',serif;
  font-weight:400;
  font-size: clamp(17px, 2.5vw, 19px);
  line-height: 1.78;
  color: var(--ms-ink);
  margin: 0 0 16px;
}
.ms-beat p.ms-emph{
  text-align:center;
  font-style:italic;
  font-weight:500;
  color: var(--ms-sepia-deep);
  font-size: clamp(18px, 2.7vw, 20.5px);
  margin: 22px 0;
}
.ms-beat p.ms-closing{
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-weight:600;
  font-size: clamp(21px, 3.4vw, 27px);
  color: var(--ms-ink);
  margin: 26px 0 6px;
}

/* in-world inscriptions (KIT'S WEATHER CLUB / Cloud Spotter Journal) */
.ms-inscription{
  text-align:center;
  font-family:'Cormorant Garamond',serif !important;
  font-weight:700 !important;
  letter-spacing:.12em;
  font-size: clamp(22px,3.6vw,30px) !important;
  margin: 22px auto !important;
  padding: 14px 10px;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-image: var(--ms-gold-line) 1;
  color: var(--ms-sepia-deep) !important;
  line-height:1.2 !important;
}
.ms-inscription.small{
  font-size: clamp(18px,2.8vw,23px) !important;
  font-style:italic;
  letter-spacing:.04em;
}

/* ---------- drop caps (4–5 major beats) ---------- */
.ms-dropcap .ms-dc{
  float:left;
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size: 4.4em;
  line-height:.72;
  padding: .02em .1em 0 0;
  margin: .04em .08em 0 0;
  background: var(--ms-gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

/* ============================================================
   WEATHER CLUB RULE — charter scroll
   ============================================================ */
.ms-rule{
  position:relative;
  max-width: 560px;
  margin: 32px auto;
  background:
    radial-gradient(circle at 50% 0%, #fdf7e6 0%, transparent 60%),
    linear-gradient(180deg, #f8efd6 0%, #efe1bf 100%);
  border-radius: 10px;
  padding: 30px 30px 34px;
  box-shadow: var(--ms-shadow-sm);
  outline: 1.5px solid var(--ms-sepia);
  text-align:center;
}
.ms-rule::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid transparent;
  border-image: var(--ms-gold-line) 1;
  pointer-events:none;
}
/* rolled ends of the scroll */
.ms-rule-roll{
  height: 14px;
  margin: -10px -10px 14px;
  background: linear-gradient(180deg,#e4cf9c,#cdb074);
  border-radius: 8px;
  box-shadow: inset 0 2px 4px rgba(111,85,38,.3);
}
.ms-rule-roll.bottom{ margin: 18px -10px -10px; }
.ms-rule-eyebrow{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size: 12.5px;
  color: var(--ms-sepia-deep);
}
.ms-rule-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size: clamp(22px, 3.6vw, 30px);
  margin: 6px 0 14px;
  background: var(--ms-gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.ms-rule-text{
  font-family:'Lora',serif;
  font-style:italic;
  font-weight:500;
  font-size: clamp(17px, 2.6vw, 20px);
  line-height:1.6;
  color: var(--ms-ink);
  max-width: 420px;
  margin: 0 auto;
}
/* wax seal with paw print */
.ms-seal{
  width: 64px; height:64px;
  margin: 20px auto 0;
  border-radius:50%;
  background: radial-gradient(circle at 38% 32%, #d98a73 0%, #b85c46 55%, #8f4231 100%);
  box-shadow: 0 4px 10px rgba(143,66,49,.4), inset 0 2px 6px rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center;
  font-size: 28px;
  color: #f7e6cf;
}
.ms-seal span{ filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

/* ============================================================
   LEARNING FOLIO (field-guide)
   ============================================================ */
.ms-learn{
  max-width: 660px;
  margin: 36px auto 8px;
  background:
    linear-gradient(180deg, var(--ms-sky-soft) 0%, #fbf5e6 70%);
  border-radius: 12px;
  padding: 28px clamp(20px,4vw,34px) 30px;
  box-shadow: var(--ms-shadow-sm);
  outline: 1.5px solid var(--ms-sepia);
  position:relative;
}
.ms-learn::before{
  content:"";
  position:absolute; inset:6px;
  border:1px solid transparent;
  border-image: var(--ms-gold-line) 1;
  pointer-events:none;
}
.ms-learn-eyebrow{
  display:block;
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:13px;
  color: var(--ms-sepia-deep);
  margin-bottom: 6px;
}
.ms-learn h2{
  text-align:center;
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size: clamp(22px,3.6vw,30px);
  color: var(--ms-ink);
  margin-bottom: 16px;
}
.ms-specimen{
  text-align:center;
  margin: 0 auto 18px;
}
.ms-specimen img{
  width:100%;
  max-width: 440px;
  height:auto;
  aspect-ratio: 5 / 3;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.ms-specimen figcaption{
  margin-top: 6px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size: 15px;
  color: var(--ms-ink-soft);
}
.ms-notes{
  list-style:none;
  counter-reset: ms-note;
  display:flex;
  flex-direction:column;
  gap: 12px;
  max-width: 540px;
  margin: 4px auto 0;
}
.ms-notes li{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  background: rgba(255,255,255,.55);
  border-radius: 10px;
  padding: 13px 16px;
  font-family:'Lora',serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ms-ink);
}
.ms-notes li::before{
  counter-increment: ms-note;
  content: counter(ms-note, upper-roman);
  flex-shrink:0;
  min-width: 34px;
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size: 20px;
  line-height:1.4;
  text-align:center;
  background: var(--ms-gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
.ms-notes li strong{ font-family:'Cormorant Garamond',serif; font-weight:700; }

/* ============================================================
   COLOPHON / NEXT CHAPTER
   ============================================================ */
.ms-colophon{
  max-width: 560px;
  margin: 34px auto 6px;
  text-align:center;
}
.ms-colophon-eyebrow{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  font-size:12.5px;
  color: var(--ms-sepia-deep);
  margin-bottom:8px;
}
.ms-colophon h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  font-size: clamp(22px,3.6vw,30px);
  color: var(--ms-ink);
  margin-bottom:10px;
}
.ms-colophon p{
  font-family:'Lora',serif;
  font-style:italic;
  font-size: 16.5px;
  line-height:1.6;
  color: var(--ms-ink-soft);
  margin-bottom: 20px;
}
.ms-next-btn{
  display:inline-block;
  font-family:'Cormorant Garamond',serif;
  font-weight:700;
  letter-spacing:.06em;
  font-size: 17px;
  color: var(--ms-sepia-deep);
  background: linear-gradient(180deg,#f8efd6,#e9d6a8);
  border: 1.5px solid var(--ms-sepia);
  border-radius: 999px;
  padding: 13px 28px;
  cursor: not-allowed;
  box-shadow: var(--ms-shadow-sm);
}
.ms-colophon-rule{
  width: 120px; height:10px;
  margin: 26px auto 0;
  background: var(--ms-gold-line);
}
.ms-back{
  margin-top: 18px;
  font-family:'Lora',serif;
  font-size: 14.5px;
}
.ms-back a{
  color: var(--ms-sepia-deep);
  border-bottom:1px dotted var(--ms-sepia);
  padding-bottom:1px;
}
.ms-back a:hover{ color: var(--ms-ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 680px){
  .ms-folio{ margin: 14px 10px 28px; max-width:none; }
  .ms-folio-inner{ padding: 26px 18px; }
  .ms-corner{ width:30px; height:30px; }
  .ms-plate{ margin: 24px auto; }
}
@media (max-width: 400px){
  .ms-folio{ margin: 10px 7px 22px; }
  .ms-folio-inner{ padding: 22px 14px; }
  .ms-corner{ width:24px; height:24px; }
  .ms-dropcap .ms-dc{ font-size: 3.6em; }
  .ms-beat p{ font-size: 16.5px; line-height:1.72; }
  .ms-divider{ gap:10px; }
  .ms-rule{ padding: 24px 18px 28px; }
  .ms-notes li{ font-size: 15.5px; padding: 12px 13px; }
  .ms-notes li::before{ min-width: 28px; font-size:18px; }
}

/* ============================================================
   ACCESSIBILITY — forced-colors / high-contrast fallback
   Gold text uses background-clip:text which renders invisible in
   forced-colors mode; restore solid system ink there.
   ============================================================ */
@media (forced-colors: active){
  .ms-gold,
  .ms-title-main,
  .ms-dropcap .ms-dc,
  .ms-rule-title,
  .ms-notes li::before,
  .ms-titleplate-rule::after{
    -webkit-text-fill-color: currentColor;
    color: CanvasText;
    background: none;
    forced-color-adjust: none;
  }
  .ms-folio::before,
  .ms-plate-img::before,
  .ms-rule::before,
  .ms-learn::before,
  .ms-divider::before,
  .ms-divider::after,
  .ms-titleplate-rule,
  .ms-beat-title::after,
  .ms-colophon-rule{
    border-color: CanvasText;
    background: CanvasText;
  }
}

/* respect reduced-motion (no animation in Stage 1 anyway) */
@media (prefers-reduced-motion: reduce){
  .ms *{ animation:none !important; transition:none !important; }
}