/* ==========================================================
   medievalscroll.css  -  HORIZONTAL scroll with turning pages
   Everything is scoped under .ms-root so it will not leak
   into (or be broken by) the host page's own styles.
   ========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=IM+Fell+English:ital@0;1&family=MedievalSharp&display=swap");

.ms-root {
  --ms-vellum: #f5ebd6;
  --ms-ink: #120c06;
  --ms-gold-light: #be920d;
  --ms-gold-dark: #9a6c0a;
  --ms-open-dur: 2.2s;     /* handles parting */
  --ms-turn: 1.1s;         /* turning a page  */
  --ms-index: 0;
  --ms-count: 1;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px;
  font-family: 'IM Fell English', 'Palatino Linotype', Georgia, serif;
  color: var(--ms-ink);

  /* Keep the vellum's own colours: stop browser "force dark" modes and
     Windows high-contrast mode from repainting the sheet with the page
     background colour. */
  color-scheme: only light;
  forced-color-adjust: none;
}
.ms-root *, .ms-root *::before, .ms-root *::after { box-sizing: border-box; }

/* ---------- Button ---------- */
.ms-controls { margin: 0 0 14px; display: flex; gap: 12px; }
.ms-root .ms-button {
  font-family: 'MedievalSharp', serif;
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: #2b170a;
  background: linear-gradient(#e9c866, #b88a1c);
  border: 2px solid #5a3a0c;
  border-radius: 6px;
  padding: 9px 22px;
  cursor: pointer;
  box-shadow: 0 3px 0 #5a3a0c, 0 6px 14px rgba(0,0,0,.45);
  transition: transform .1s, box-shadow .1s, filter .15s;
}
.ms-root .ms-button:hover { filter: brightness(1.08); }
.ms-root .ms-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #5a3a0c; }

/* ---------- Stage: [rod][roll][ window ][roll][rod] ----------
   The width of one page defaults to the viewport width minus the handles
   (max 760px). To use a fixed width instead (for example inside a narrow
   column), set  data-page-width="600"  on the scroll element, or set
   --ms-page-width: 600px  in your own CSS. */
.ms-stage {
  --ms-h-w: var(--ms-page-width, clamp(240px, calc(100vw - 170px), 760px));
  display: flex;
  justify-content: center;
  align-items: stretch;
  max-width: 100%;
  padding: 26px 0;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.55));
}

/* ---------- Weathered wooden handles (vertical) ---------- */
.ms-rod {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  z-index: 3;
  cursor: pointer;
  border-radius: 17px 16px 18px 15px / 16px;
  background:
    /* cracks in the wood */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='520'><path d='M2 40 l9 6 7 -4 10 7 8 -2 M1 176 l11 -5 6 7 13 -4 M4 301 l8 5 9 -6 11 6 M2 437 l12 -3 8 6 10 -2' fill='none' stroke='%23140a03' stroke-width='1.3' stroke-opacity='.85'/><path d='M20 105 v22 M14 360 v30 M26 242 v18' stroke='%23140a03' stroke-width='1' stroke-opacity='.55'/></svg>") 0 0 / 100% 520px repeat-y,
    /* worn, rubbed-bare patches */
    radial-gradient(ellipse 6px 90px at 26% 22%, rgba(205,160,95,.40), transparent 70%),
    radial-gradient(ellipse 5px 120px at 30% 63%, rgba(205,160,95,.32), transparent 70%),
    radial-gradient(ellipse 5px 70px at 24% 88%, rgba(205,160,95,.35), transparent 70%),
    /* dark stains and grime */
    radial-gradient(ellipse 10px 60px at 78% 40%, rgba(10,5,0,.55), transparent 70%),
    radial-gradient(ellipse 9px 80px at 72% 78%, rgba(10,5,0,.5), transparent 70%),
    /* wood grain (runs along the rod) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='320'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.75 0.012' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 0 0.01  0 0 0 1.7 -0.6'/></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>") 0 0 / 100% 320px repeat-y,
    /* base cylinder shading */
    linear-gradient(to right, #7d5430 0%, #5f3b1c 20%, #3f2511 58%, #1f1006 100%);
  background-color: #3f2511;
  box-shadow: inset 2px 0 3px rgba(255,215,150,.25), inset -5px 0 7px rgba(0,0,0,.65);
}

/* tarnished, dented brass finials at top and bottom */
.ms-rod::before, .ms-rod::after {
  content: "";
  position: absolute;
  left: -5px;
  width: 48px; height: 34px;
  border: 1px solid #2e1c03;
  background:
    radial-gradient(circle at 72% 70%, rgba(35,20,0,.7) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 30% 62%, rgba(35,20,0,.55) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 40%, rgba(30,15,0,.45) 41% 43%, transparent 44%),
    radial-gradient(circle at 24% 80%, rgba(60,110,85,.65) 0 5px, transparent 7px),
    radial-gradient(circle at 80% 28%, rgba(60,110,85,.5) 0 4px, transparent 6px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.09  0 0 0 0 0.01  0 0 0 1.5 -0.4'/></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>"),
    radial-gradient(circle at 34% 26%, #cdb15f 0%, #9b7620 38%, #5a3d0a 78%, #33200a 100%);
  background-color: #9b7620;
  box-shadow: 0 3px 6px rgba(0,0,0,.65), inset 0 -4px 6px rgba(40,22,0,.65);
}
.ms-rod::before { top: -17px;    border-radius: 14px 12px 10px 10px / 14px 14px 8px 8px; }
.ms-rod::after  { bottom: -17px; border-radius: 10px 10px 14px 12px / 8px 8px 14px 14px; }

.ms-rod:hover { filter: brightness(1.2); }
.ms-rod:focus-visible { outline: 2px solid #f1d36a; outline-offset: 4px; }
.ms-rod[aria-disabled="true"] { cursor: default; filter: none; opacity: .85; }

/* ---------- Rolled-up vellum beside each handle ----------
   The left roll grows as pages are turned past, and the right roll
   shrinks as the unread pages unwind. */
.ms-roll {
  position: relative;
  flex: 0 0 auto;
  z-index: 2;
  cursor: pointer;
  transition: width var(--ms-turn) cubic-bezier(.6, 0, .3, 1);
  background:
    linear-gradient(to bottom, rgba(50,28,8,.7) 0%, transparent 5%, transparent 95%, rgba(50,28,8,.7) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='200'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.05' numOctaves='3' seed='2'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.14  0 0 0 0 0.04  0 0 0 1.3 -0.35'/></filter><rect width='100%' height='100%' filter='url(%23r)'/></svg>") 0 0 / 100% 200px repeat-y,
    linear-gradient(to right, #7d5a2a 0%, #cfb078 35%, #e3cb98 50%, #b99458 75%, #5f4120 100%);
  background-color: #b99458;
  box-shadow: 0 0 4px rgba(0,0,0,.45);
}
.ms-roll-left  { width: calc(var(--ms-index) * 6px + 3px);                      border-radius: 0 5px 5px 0; }
.ms-roll-right { width: calc((var(--ms-count) - var(--ms-index)) * 6px);        border-radius: 5px 0 0 5px; }

/* ---------- The window the pages slide through ----------
   The VELLUM is painted here, on the visible window only (not on the long
   strip of pages behind it), so it stays small and cheap to draw on every
   browser. Its crinkles slide along with each page turn through
   background-position. The torn top and bottom edges are cut with
   clip-path (generated in medievalscroll.js). */
.ms-window {
  --ms-scroll-x: calc(var(--ms-index) * var(--ms-h-w) * -1);
  position: relative;
  flex: 0 0 auto;
  width: 0;
  overflow: hidden;
  z-index: 1;

  background-color: #e6cf9f;                    /* fallback if custom properties fail */
  background-color: var(--ms-vellum, #e6cf9f);
  background-image:
    /* scorched top and bottom edges */
    linear-gradient(to bottom, rgba(85,45,10,.7) 0%, rgba(85,45,10,.28) 3.5%, rgba(95,55,15,0) 9%, rgba(95,55,15,0) 91%, rgba(85,45,10,.28) 96.5%, rgba(85,45,10,.7) 100%),
    /* age stains */
    radial-gradient(ellipse 260px 180px at 20% 18%, rgba(150,100,40,.28), transparent 70%),
    radial-gradient(ellipse 300px 220px at 85% 45%, rgba(140,90,30,.25), transparent 70%),
    radial-gradient(ellipse 280px 200px at 25% 80%, rgba(150,100,40,.30), transparent 70%),
    radial-gradient(ellipse 200px 150px at 80% 92%, rgba(130,85,30,.30), transparent 70%),
    /* crinkled relief (seamless tile) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.02' numOctaves='5' seed='7' stitchTiles='stitch' result='n'/><feDiffuseLighting in='n' surfaceScale='5' diffuseConstant='1.05' lighting-color='%23f0dcaa'><feDistantLight azimuth='235' elevation='58'/></feDiffuseLighting></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
    /* fine grain (seamless tile) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.08  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 100% 100%, var(--ms-h-w) 100%, var(--ms-h-w) 100%, var(--ms-h-w) 100%, var(--ms-h-w) 100%, 600px 600px, 300px 300px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, var(--ms-scroll-x) 0, var(--ms-scroll-x) 0;
  background-blend-mode: normal, normal, normal, normal, normal, multiply, normal;

  transition:
    width var(--ms-open-dur) cubic-bezier(.5, .05, .3, 1),
    background-position var(--ms-turn) cubic-bezier(.6, 0, .3, 1);
}
.ms-is-open .ms-window { width: var(--ms-h-w); }

/* shadows the rolls cast across the vellum */
.ms-window::before, .ms-window::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 34px;
  z-index: 4;
  pointer-events: none;
}
.ms-window::before { left: 0;  background: linear-gradient(to right, rgba(45,22,5,.6), transparent); }
.ms-window::after  { right: 0; background: linear-gradient(to left,  rgba(45,22,5,.6), transparent); }

/* The strip of pages that slides behind the window (transparent: it only
   carries the text and pictures). */
.ms-track {
  display: flex;
  width: calc(var(--ms-count) * var(--ms-h-w));
  transform: translateX(calc(var(--ms-index) * var(--ms-h-w) * -1));
  transition: transform var(--ms-turn) cubic-bezier(.6, 0, .3, 1);
}

/* ---------- A page ---------- */
.ms-page {
  flex: 0 0 var(--ms-h-w);
  width: var(--ms-h-w);
  padding: 36px clamp(22px, calc(var(--ms-h-w) * .06), 46px) 40px;
  display: flex;
  flex-direction: column;
}

/* ---------- Typography inside a page ---------- */
.ms-page h1,
.ms-page h2,
.ms-page h3 {
  font-family: 'Cinzel Decorative', 'MedievalSharp', serif;
  text-align: center;
  margin: 0;
  background: linear-gradient(100deg, #7c5206 0%, #c99a1c 28%, #f1d36a 50%, #b98a14 72%, #7c5206 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(60,35,0,.55));
}
.ms-page h1 { font-size: clamp(1.4rem, 4.2vw, 2.1rem); line-height: 1.2; font-weight: 900; margin-bottom: .15em; }
.ms-page h2 { font-size: clamp(1.1rem, 3vw, 1.5rem); font-weight: 700; margin: .5em 0 .1em; }
.ms-page h3 { font-size: clamp(1rem, 2.6vw, 1.2rem); font-weight: 700; margin: 1em 0 .4em; }

.ms-page p {
  font-family: 'IM Fell English', 'Palatino Linotype', Georgia, serif;
  font-size: clamp(.96rem, 1.2vw + .62rem, 1.14rem);
  line-height: 1.62;
  margin: 0 0 .85em;
  text-align: justify;
  hyphens: auto;
  color: var(--ms-ink);
}
/* Illuminated gold drop cap: add class="ms-first" to a paragraph */
.ms-page p.ms-first::first-letter {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  float: left;
  font-size: 3.4em;
  line-height: .85;
  padding: .06em .1em 0 0;
  background: linear-gradient(135deg, #7c5206, #e2b93b 50%, #8a5d08);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ms-page .ms-subtitle {
  text-align: center;
  font-family: 'MedievalSharp', serif;
  font-size: .95rem;
  letter-spacing: .12em;
  color: #3a2410;
  margin: 0 0 .2em;
}
.ms-page .ms-flourish {
  text-align: center;
  font-size: 1.3rem;
  color: #7c5206;
  letter-spacing: .6em;
  margin: .2em 0;
}
.ms-page .ms-end { text-align: center; font-style: italic; margin-top: 1.2em; }

/* The picture slot at the top of each page; text sits beneath it */
.ms-page img.ms-illustration {
  display: block;
  width: 100%;
  height: auto;
  margin: .7em 0 1.1em;
  opacity: .93;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* ---------- Status line under the scroll ---------- */
.ms-status {
  margin-top: 4px;
  min-height: 1.5em;
  text-align: center;
  font-family: 'MedievalSharp', serif;
  font-size: .95rem;
  letter-spacing: .05em;
  color: var(--ms-status-color, #dcc17f);
}

@media (prefers-reduced-motion: reduce) {
  .ms-window, .ms-track, .ms-roll { transition-duration: .01s; }
}