:root {
  /* Midnight blue theme */
  --bg: #070d1c;        /* page background, very dark blue */
  --card: #0e1834;      /* panels and cards, a touch lighter */
  --text: #e9ecf5;      /* primary text */
  --muted: #a6b0c7;     /* secondary text */
  --accent: #6d7cff;    /* buttons and highlights */
  --border: #1a2546;    /* subtle outlines */
  --radius: 16px;
  --shadow: 0 12px 38px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  /* script sets --bg-fallback to the full gradient string */
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(109,124,255,.18), transparent 60%),
    radial-gradient(1000px 600px at 100% 0%, rgba(64, 160, 255, .10), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.6;
  transition: background .6s ease, background-color .6s ease;
}



a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section-head { margin-bottom: 22px; }

.eyebrow { color: #a5b4fc; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; font-size: 12px }
h1, h2, h3 { line-height: 1.2; margin: 8px 0 }
h1 { font-size: clamp(28px, 4vw, 42px) }
h2 { font-size: clamp(22px, 3vw, 32px) }
h3 { font-size: clamp(18px, 2.2vw, 24px) }

/* Brand and headings */
.brand {
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  letter-spacing: .6px;
  font-size: 22px;
}

h1, h2 {
  font-family: "Cinzel", serif;
  font-weight: 700;
}

h3 {
  font-family: "Cinzel", serif;
  font-weight: 600;
}

h1, h2, h3 { line-height: 1.2; margin: 8px 0; }
h1 { font-size: clamp(28px, 4vw, 42px); }
h2 { font-size: clamp(22px, 3vw, 32px); }
h3 { font-size: clamp(18px, 2.2vw, 24px); }
.lead { color: #cdd3e1; font-size: 18px; }
.muted { color: var(--muted); }

.grid { display: grid; gap: 20px; }
.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.align-center { align-items: center; }
@media (max-width: 900px) { .two, .three { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent 18%), var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.hr { height: 1px; background: var(--border); margin: 14px 0; }

.btn {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
  transition: transform .08s ease, filter .2s ease;
}
.btn.secondary { background: #1b254b; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

.audio-item { display: flex; gap: 12px; align-items: center; }
.audio-item audio { width: 100%; }
/* Audiobook layout with cover art */
.audio-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  align-items: center;
}
.audio-cover {
  width: 160px;
}
@media (max-width: 760px) {
  .audio-grid {
    grid-template-columns: 1fr;
  }
  .audio-cover {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
  }
}

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(11,16,32,.7);
  border-bottom: 1px solid var(--border);
}
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 0;
}
.brand { font-weight: 700; letter-spacing: .3px; font-size: 18px; }
.navlinks { display:flex; gap: 16px; align-items:center; }
.navlinks a { color: var(--muted); padding: 6px 10px; border-radius: 8px; }
.navlinks a:hover { color: white; background: rgba(255,255,255,.05); }

.site-footer {
  padding: 40px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
  text-align: center;
}
/* Header shrink and active link */
.site-header.scrolled { backdrop-filter: blur(12px); background: rgba(11,16,32,.85); }
.navlinks a.active { color: #ffffff; background: rgba(255,255,255,.08); }

/* Reveal on scroll */
.section.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .75s ease, transform .75s ease;
}

.section.reveal.reveal-in {
  opacity: 1;
  transform: translateY(0);
}


/* Lightbox */
.lightbox { position: fixed; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 100; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.lightbox-img { max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 12px; border: 1px solid #1f2a4a; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox-close {
  position: absolute; top: 18px; right: 18px; width: 40px; height: 40px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
  background: rgba(18,25,53,.8); color: #e6e9f2; font-size: 24px; line-height: 1;
}

/* Lightbox stacking fix */
.lightbox { position: fixed; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 100; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); z-index: 1; }
.lightbox-img { position: relative; z-index: 2; max-width: min(92vw, 1100px); max-height: 86vh; border-radius: 12px; border: 1px solid #1f2a4a; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); background: rgba(18,25,53,.8); color: #e6e9f2; font-size: 24px; line-height: 1; z-index: 3; }

/* Frame sizing: shrink-wrap to the image */
.frame{
  position: relative;
  display: inline-block;
  width: fit-content;       /* key: the frame is only as wide as its content */
  max-width: 100%;
  /* per-image knobs (defaults) */
  --w: 56px;                /* ornament thickness */
  --s: 170;                 /* slice (higher = thinner) */
  --overlap: 2px;           /* tiny outward overlap */
}

/* Image should not force the column width */
.frame img{
  display: block;
  width: var(--img-w, 520px);   /* default visual width; override per image if you like */
  max-width: 100%;              /* stay responsive on small screens */
  height: auto;
  border: 0;
  border-radius: 0;
  position: relative;
  z-index: 1;
}

/* Draw the ornate border ABOVE and OUTSIDE the image */
.frame::after{
  content: "";
  position: absolute;
  /* expand outward by the border width + a hair of overlap */
  inset: calc(var(--w) * -1 - var(--overlap));
  border: var(--w) solid transparent;
  border-image-source: url("/Images/BestBorder.png"); /* match Images vs images to your folder */
  border-image-slice: var(--s);
  border-image-repeat: round;
  pointer-events: none;
  z-index: 2;
}

/* optional: 1–2 px intentional overlap on all sides */
.frame.tight::after { inset: -1px; }     /* use -2px if you want a bit more overlap */
/* Card with no panel chrome */
.card--clear { background: transparent; border: 0; box-shadow: none; padding: 0; }

/* Safety: ensure the New Release right column is transparent even if a plain .card sneaks back in */
#new .card { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* Shrink-wrap figure around the image */
.art{
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  /* defaults, can be overridden inline on the figure */
  --img-w: 520px;  /* image width */
  --w: 56px;       /* ornament thickness */
  --s: 176;        /* slice, higher = thinner */
  --o: 2px;        /* outward overlap of the frame */
  --pad: 8px;      /* inward compensation to cancel PNG's inner padding */
}

.art img{
  display: block;
  width: var(--img-w);
  max-width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  position: relative;
  z-index: 1;
}

/* Transparent edge overlay with per-side inward padding and nudges */
.art .edge{
  position: absolute;

  /* outward overlap and slice are already on the figure */
  /* default inward padding for all sides */
  --pad: 10px;

  /* per-side pads fall back to --pad */
  --padL: var(--pad);
  --padR: var(--pad);
  --padT: var(--pad);
  --padB: var(--pad);

  /* per-side nudges, default 0 */
  --nL: 0px;  /* + pushes right,  − pulls left  */
  --nR: 0px;  /* + pushes left,   − pulls right */
  --nT: 0px;  /* + pushes down,   − pulls up    */
  --nB: 0px;  /* + pushes up,     − pulls down  */

  /* anchor and size so the opposite edge stays fixed while you nudge */
  left:   calc(-1*var(--o) - var(--padL) + var(--nL));
  top:    calc(-1*var(--o) - var(--padT) + var(--nT));
  width:  calc(100% + 2*var(--o) + var(--padL) + var(--padR) - var(--nL) + var(--nR));
  height: calc(100% + 2*var(--o) + var(--padT) + var(--padB) - var(--nT) + var(--nB));

  box-sizing: content-box;
  padding: var(--padT) var(--padR) var(--padB) var(--padL);
  border: var(--w) solid transparent;
  border-image-source: url("/Images/BestBorder.png"); /* match your casing */
  border-image-slice: var(--s);
  border-image-repeat: round;
  pointer-events: none;
  z-index: 2;
}


/* keep the column background clean */
.card--clear{ background: transparent; border: 0; box-shadow: none; padding: 0; }
#new .card{ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* Clean column panel */
.card--clear { background: transparent; border: 0; box-shadow: none; padding: 0; }
#new .card   { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }

/* New robust frame overlay */
.frame2{
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  --img-w: 520px;
  --in: 10px;   /* inward distance from image edge to rails */
  --out: 2px;   /* outward reach beyond the image */
  --sx: 1.00;   /* scale X */
  --sy: 1.00;   /* scale Y */
  --dx: 0px;    /* shift X */
  --dy: 0px;    /* shift Y */
}

/* The overlay that draws the ornate frame, grows inward + outward */
.frame2 > .overlay{
  position: absolute;

  /* grow OUTWARD by --out on every side */
  left:  calc(-1 * var(--out));
  top:   calc(-1 * var(--out));
  width:  calc(100% + 2 * var(--out));
  height: calc(100% + 2 * var(--out));

  /* grow INWARD toward the image by --in  */
  padding: var(--in);
  box-sizing: content-box;

  background: url("/Images/BestBorder.png") center / 100% 100% no-repeat;
  transform-origin: center;
  transform: translate(var(--dx), var(--dy)) scale(var(--sx), var(--sy));
  pointer-events: none;
  z-index: 2;
}
/* ===== New Mobile Menu, isolated ===== */

/* Show the mobile button, hide desktop nav, only on small screens */
@media (max-width: 760px) {
  .navlinks { display: none; }
  .mm-btn { display: inline-flex; align-items: center; gap: 8px; }
}

/* Drawer default, closed */
.mm-drawer{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(80vw, 360px);
  background: var(--card, #0e1834);
  border-left: 1px solid var(--border, #1a2546);
  box-shadow: -30px 0 60px rgba(0,0,0,.45);
  transform: translateX(100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s ease, visibility 0s linear .3s;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem 1.25rem;
}

/* Drawer links */
.mm-drawer a{
  color: var(--text, #e9ecf5);
  padding: 10px 12px;
  border-radius: 8px;
}
.mm-drawer a:hover{ background: rgba(255,255,255,.06); }

/* Backdrop default, closed */
.mm-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}

/* Open state toggled on <body> */
body.mm-open .mm-drawer{
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s ease;
}
body.mm-open .mm-backdrop{
  opacity: 1;
  pointer-events: auto;
}
body.mm-open{ overflow: hidden; }

/* Make sure nothing blocks the button */
.mm-btn{ position: relative; z-index: 110; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .mm-drawer, .mm-backdrop{ transition: none; }
}

/* Safety clamps, keep layout from overflowing horizontally */
html, body, .container, .section { overflow-x: clip; }
/* ===== New Mobile Menu, base defaults ===== */
.mm-btn { display: none; }                 /* hidden on desktop */
.mm-drawer{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: min(80vw, 360px);
  background: var(--card, #0e1834);
  border-left: 1px solid var(--border, #1a2546);
  box-shadow: -30px 0 60px rgba(0,0,0,.45);
  transform: translateX(100%);             /* off screen by default */
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s ease, visibility 0s linear .3s;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1rem 1.25rem;
}
.mm-drawer a { color: var(--text, #e9ecf5); padding: 10px 12px; border-radius: 8px; }
.mm-drawer a:hover { background: rgba(255,255,255,.06); }

.mm-backdrop{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 90;
}

/* Open state toggled by JS on <body> */
body.mm-open .mm-drawer{
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
body.mm-open .mm-backdrop{
  opacity: 1;
  pointer-events: auto;
}
body.mm-open { overflow: hidden; }

/* Mobile breakpoint, show button and hide desktop nav */
@media (max-width: 760px) {
  .navlinks { display: none; }
  .mm-btn { display: inline-flex; align-items: center; gap: 8px; }
}

/* Make sure nothing blocks the button */
.mm-btn { position: relative; z-index: 110; }

/* Safety clamps */
html, body, .container, .section { overflow-x: clip; }