/* Once and Nevermore — A Camelot Anthology
   Style.css (This will become more and more chaotic as I add stuff)
*/

:root{
  --ink: #2a1a0c;
  --ink-soft: rgba(42, 26, 12, 0.77);
  --ink-faint: rgba(42, 26, 12, 0.52);

  --paper: rgba(255, 248, 235, 0.89);
  --paper-strong: rgba(255, 248, 235, 0.97);

  --edge: rgba(85, 57, 28, 0.30);
  --edge-strong: rgba(85, 57, 28, 0.52);

  --accent: #7a4e1d;
  --accent-2: #a37a3a;

  --shadow: rgba(0,0,0,0.18);
  --shadow-2: rgba(0,0,0,0.28);

  --radius: 18px;
  --radius-small: 12px;

  --serif: "IM Fell English", ui-serif, Georgia, "Times New Roman", Times, serif;
  --display: "Cinzel", ui-serif, Georgia, "Times New Roman", Times, serif;
}

*{ box-sizing: border-box; }

html, body { height: 100%; }

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-height: 100vh;

  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.45;

  background: #111;   /* fallback */
  position: relative;
}


/* Background layer (robust) */
.bg{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #111; /* fallback behind the image */
}

.bg-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 5s ease;
}

/* Optional veil for readability */
.bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.25));
}

/* Put the real content above the background */
.topbar, .page{
  position: relative;
  z-index: 1;
}

/* Fade in once loaded */
body.bg-ready .bg-img{
  opacity: 1;
}

@media (prefers-reduced-motion: reduce){
  .bg-img{ transition: none; opacity: 1; }
}

/* --- Top bar --- */

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(to bottom, rgba(255,248,235,0.90), rgba(255,248,235,0.72));
  border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px); /* Safari */
}

.brand-link{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.brand-title{
  font-family: var(--display);
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 18px;
}

.brand-sub{
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}

.nav{
  display: flex;
  gap: 14px;
  align-items: center;
}

.nav-link{
  color: var(--ink);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.nav-link:hover{
  border-color: var(--edge);
  background: rgba(255,255,255,0.28);
}

.nav-link[aria-current="page"]{
  border-color: var(--edge-strong);
  background: rgba(255,255,255,0.40);
}

/* --- Layout --- */

.page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 18px 42px;
  background: transparent;
}

.hero{
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 22px;
  align-items: start;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
}

.hero h1{
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.tagline{
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 18px;
}

.cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 10px;
}

.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--edge-strong);
  background: rgba(255,255,255,0.32);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.button:hover{
  background: rgba(255,255,255,0.50);
}

.button.ghost{
  background: transparent;
  border-color: var(--edge);
}

.smallprint{
  margin: 12px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
}

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
}

/* --- Cover --- */

.cover{
  margin: 0;
  padding: 12px;
  background: rgba(255,255,255,0.38);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px var(--shadow-2);
}

.cover img{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(85, 57, 28, 0.22);
}

.cover-caption{
  margin-top: 10px;
  text-align: center;
  color: var(--ink-faint);
  font-style: italic;
  font-size: 14px;
}

/* --- Authors + Carousel --- */

.authors{
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
}

.authors h2{
  margin: 0 0 6px;
  font-family: var(--display);
  letter-spacing: 0.04em;
}

.lede{
  margin: 0 0 16px;
  color: var(--ink-soft);
}

.carousel-shell{
  position: relative;
  padding: 20px 54px;
  border-radius: var(--radius);
  border: 1px solid var(--edge);
  background: rgba(255,255,255,0.32);
  overflow: hidden;
  outline: none;
}

.carousel-shell:focus{
  box-shadow: 0 0 0 3px rgba(122, 78, 29, 0.25);
}

.carousel-track{
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;

  /* give the “active” card enough room even when scaled */
  height: 440px;

  perspective: 1000px;
}

.card{
  position: absolute;
  top: 14px;
  left: 50%;
  width: 180px;
  transform-style: preserve-3d;
  opacity: var(--op, 0.65);
  transform: translateX(calc(var(--x, 0px) - 50%)) translateY(var(--y, 0px)) rotateY(var(--ry, 0deg)) scale(var(--s, 0.9));
  transition:
    transform 700ms cubic-bezier(.18,.86,.2,1),
    opacity 700ms ease,
    filter 700ms ease;
  filter: blur(var(--blur, 0px));
}

.card .card-link{
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-small);
  border: 1px solid rgba(85, 57, 28, 0.24);
  background: rgba(255,255,255,0.28);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
  overflow: hidden;
}

.card.active .card-link{
  background: rgba(255,255,255,0.44);
  border-color: rgba(85, 57, 28, 0.40);
  box-shadow: 0 16px 42px rgba(0,0,0,0.24);
}

.card img{
  object-fit: cover;
  border-bottom: 1px solid rgba(85, 57, 28, 0.18);
}

.img-fallback{
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(42, 26, 12, 0.75);
  background:
    radial-gradient(220px 160px at 50% 35%, rgba(255,255,255,0.55), transparent 65%),
    linear-gradient(to bottom, rgba(255,255,255,0.26), rgba(255,255,255,0.12));
  border-bottom: 1px solid rgba(85, 57, 28, 0.18);
}

.card-meta{
  padding: 10px 10px 12px;
}

.card-meta h3{
  margin: 0;
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.03em;
}

.card-meta p{
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 500ms ease, opacity 500ms ease;
}

/* Carousel: allow longer story title + tagline when active */
.card-meta p{
  line-height: 1.32; /* optional: slightly denser, still readable */
}

/* story title line (a.story) */
.card.active .card-story{
  max-height: 84px;   
  opacity: 1;
}

/* tagline / one-liner (a.blurb) */
.card.active .card-blurb{
  max-height: 96px;   
  opacity: 1;
}


.card-meta .hint{
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

.carousel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--edge-strong);
  background: rgba(255,255,255,0.34);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.carousel-btn:hover{
  background: rgba(255,255,255,0.52);
}

.carousel-btn.prev{ left: 10px; }
.carousel-btn.next{ right: 10px; }

.noscript{
  margin-top: 14px;
  padding: 14px;
  border-radius: var(--radius-small);
  border: 1px dashed var(--edge-strong);
  background: rgba(255,255,255,0.22);
}
/* Authors list page */
.authors-page{
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
}

.authors-page h1{
  margin: 0 0 6px;
  font-family: var(--display);
  letter-spacing: 0.05em;
}

.authors-grid{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.author-tile{
  margin: 0;
}

.author-link{
  display: block;
  text-decoration: none;
  color: inherit;

  border-radius: var(--radius);
  border: 1px solid var(--edge);
  background: rgba(255,255,255,0.22);
  box-shadow: 0 12px 34px var(--shadow);
  overflow: hidden;

  transform: translateY(0);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.author-link:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.36);
  box-shadow: 0 16px 46px var(--shadow-2);
}

.author-link img{
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-bottom: 1px solid rgba(85, 57, 28, 0.18);
}

.author-meta{
  padding: 12px 12px 14px;
}

.author-meta h2{
  margin: 0;
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.03em;
}

.author-story{
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
}

.author-hint{
  margin: 10px 0 0;
  color: var(--ink-faint);
  font-size: 12px;
}
/* Social buttons (author pages) */
.social-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.social-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--edge-strong);
  background: rgba(255,255,255,0.26);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 13px;
}

.social-btn:hover{
  background: rgba(255,255,255,0.44);
}

.social-btn svg{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Optional: hide text labels on very small screens */
@media (max-width: 520px){
  .social-btn span.label{
    display: none;
  }
}

/* Magic words panel */
.magic-words{
  margin-top: 22px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
  text-align: center;
}

.magic-words-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.magic-words input{
  width: min(28rem, 92%);
}

.magic-feedback{
  margin-top: 12px;
  font-style: italic;
  color: var(--ink-soft);
  min-height: 1.2em;
}

/* Accessibility helper */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* 404 page */
.notfound{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: start;

  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
}

.notfound-code{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 72px;
  line-height: 1;
  color: rgba(42, 26, 12, 0.25);
}

.notfound-title{
  margin: 8px 0 10px;
  font-family: var(--display);
  letter-spacing: 0.04em;
}

.notfound-figure{
  margin: 0;
  padding: 12px;
  background: rgba(255,255,255,0.26);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px var(--shadow-2);
}

.notfound-figure img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(85, 57, 28, 0.22);
}

@media (max-width: 900px){
  .notfound{
    grid-template-columns: 1fr;
  }
}

/* --- Footer (make it readable over the photo background) --- */

.footer{
  margin-top: 24px;
  padding: 18px;
  text-align: center;
  color: var(--ink-faint);

  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px var(--shadow);
}

.footer-links{
  margin: 8px 0 0;
}

.footer a{
  color: var(--accent);
  text-decoration: none;
}

.footer a:hover{
  text-decoration: underline;
}

/* Footer credits: default */
.footer-credit a{
  text-decoration: none;
}

.footer-credit a:hover{
  text-decoration: underline;
}
/* Author page container (auto-expanding panel) */
.author-sheet{
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
}

/* Header layout */
.author-back{
  margin: 0 0 12px;
  color: var(--ink-soft);
}

.author-back a{
  color: var(--accent);
  text-decoration: none;
}
.author-back a:hover{ text-decoration: underline; }

.author-head{
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: start;
}

.author-avatar-link{
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(85, 57, 28, 0.24);
  box-shadow: 0 12px 34px var(--shadow);
  background: rgba(255,255,255,0.18);
}

.author-avatar{
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.author-intro h1{
  margin: 0 0 8px;
  font-family: var(--display);
  letter-spacing: 0.05em;
}

.author-storyline{
  margin: 0 0 14px;
  color: var(--ink-soft);
}

.author-storyline .label{
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-faint);
  font-size: 13px;
  text-transform: uppercase;
}

.author-links{
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Body copy */
.author-body{
  margin-top: 18px;
  color: var(--ink);
}

/* Responsive */
@media (max-width: 900px){
  .author-head{ grid-template-columns: 1fr; }
  .author-avatar-link{ max-width: 340px; }
}

/* Montegrot credit: all violet */
.footer-credit-montegrot{
  font-family: "Tangerine", cursive;
  color: #6b2fb8;           /* Montegrot violet */
  font-weight: 700;         /* optional, makes it pop */
  font-size: 26px;          /* Tangerine likes being larger */
  line-height: 1.1;
}

.footer-credit-montegrot a{
  color: inherit;
  font-family: inherit;
}


.footer-credit-montegrot a{
  color: inherit; /* keep the link the same violet */
}

/* Handwritten excerpt style (Parisienne) */
.ledger-excerpt.parisienne {
  font-family: "Parisienne", "IM Fell English", var(--serif);
  font-size: clamp(1.15rem, 1vw + 1rem, 1.6rem);
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}


/* --- Contact page --- */

.contact{
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
}

.contact h1{
  margin: 0 0 6px;
  font-family: var(--display);
  letter-spacing: 0.04em;
}

.contact-form{
  margin-top: 16px;
}

.field{
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

label{
  font-family: var(--display);
  letter-spacing: 0.02em;
  font-weight: 700;
  font-size: 14px;
}

input, textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(85, 57, 28, 0.30);
  background: rgba(255,255,255,0.44);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
}

input:focus, textarea:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 78, 29, 0.25);
}

.form-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* --- Responsive --- */

@media (max-width: 900px){
  .hero{
    grid-template-columns: 1fr;
  }
  .cover{
    max-width: 520px;
  }
  .carousel-shell{
    padding: 20px 44px;
  }
  .card{
    width: 170px;
  }
}

@media (max-width: 520px){
  .topbar{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .nav{
    flex-wrap: wrap;
  }
  .carousel-track{
    height: 420px; /* was 380: gives the active card more headroom */
  }
  .card{
    width: 160px;
  }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  .card{
    transition: none;
  }
}
/* Magic wand cursor */
body{
  cursor: url("images/wand-cursor.png") 6 6, auto;
}

/* Keep sensible cursors where it matters */
input, textarea{
  cursor: text;
}
a, button{
  cursor: url("images/wand-cursor.png") 6 6, pointer;
}

/* Pixi sparkle overlay canvas */
.pixi-sparkles{
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.card-meta p{
  margin: 6px 0 0;
}

.card-blurb{
  color: var(--ink-faint);
  font-size: 13px;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 500ms ease, opacity 500ms ease;
}

.card.active .card-blurb{
  max-height: 70px;
  opacity: 1;
}

.author-blurb{
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 13px;
  line-height: 1.3;
}

/* Let social pills use either SVG or PNG icons cleanly */
.social-btn svg,
.social-btn img{
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.social-btn img{
  object-fit: contain;
  display: block;
}

/* Big BookBub badge row */
.badge-bar{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .8rem;
}

.badge{
  display: inline-flex;
  line-height: 0;
}

.badge img{
  height: 40px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* Lucius page: make the Montegrot violet Tangerine styling apply to the whole author sheet */
.author-sheet.footer-credit-montegrot{
  /* Use whatever we already use for the footer credit violet */
  color: var(--montegrot-violet);
  font-family: "Tangerine", cursive;
}

/* Make links and pill labels inherit the violet (stops them reverting to default link colour) */
.author-sheet.footer-credit-montegrot a,
.author-sheet.footer-credit-montegrot .label,
.author-sheet.footer-credit-montegrot .button,
.author-sheet.footer-credit-montegrot .social-btn{
  color: inherit;
  font-family: inherit;
}

/* Make social + identifier pills bigger for Tangerine legibility */
.author-sheet.footer-credit-montegrot .social-btn{
  font-size: 1.8rem;        /* tweak to taste: 1.6–1.9 tends to be the sweet spot */
  padding: .55rem .9rem;
  line-height: 1.05;
}

/* Icons scale up with the pills */
.author-sheet.footer-credit-montegrot .social-btn svg,
.author-sheet.footer-credit-montegrot .social-btn img{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Ensure inline SVG icons follow the violet colour */
.author-sheet.footer-credit-montegrot .social-btn svg path{
  fill: currentColor;
}
.author-sheet.footer-credit-montegrot .social-btn svg rect,
.author-sheet.footer-credit-montegrot .social-btn svg circle{
  stroke: currentColor;
}

/* Optional: make the main CTA buttons readable in Tangerine too */
.author-sheet.footer-credit-montegrot .button{
  font-size: 1.9rem;
  line-height: 1.05;
}

/* Make Montegrot violet win against more specific author-sheet typography rules */
.author-sheet.footer-credit-montegrot,
.author-sheet.footer-credit-montegrot p,
.author-sheet.footer-credit-montegrot h1,
.author-sheet.footer-credit-montegrot h2,
.author-sheet.footer-credit-montegrot h3,
.author-sheet.footer-credit-montegrot em,
.author-sheet.footer-credit-montegrot .label{
  color: #6b2fb8;                 /* Montegrot violet */
  font-family: "Tangerine", cursive;
  font-weight: 700;
  line-height: 1.1;
}

/* Ensure ALL links inherit violet in the author sheet too */
.author-sheet.footer-credit-montegrot a{
  color: inherit;
  font-family: inherit;
}

/* Tangerine needs bigger pills for readability */
.author-sheet.footer-credit-montegrot .social-btn{
  color: inherit;
  font-family: inherit;
  font-size: 30px;                /* tweak 28–34 */
  padding: .6rem 1rem;
  line-height: 1.05;
}

/* If .label is being shrunk elsewhere, override it */
.author-sheet.footer-credit-montegrot .social-btn .label{
  font-size: inherit;
  font-family: inherit;
  color: inherit;
}

/* Icon sizing for the bigger pills */
.author-sheet.footer-credit-montegrot .social-btn svg,
.author-sheet.footer-credit-montegrot .social-btn img{
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

/* Make sure SVG icons take the violet (X icon, any outlines, etc.) */
.author-sheet.footer-credit-montegrot .social-btn svg path{ fill: currentColor; }
.author-sheet.footer-credit-montegrot .social-btn svg rect,
.author-sheet.footer-credit-montegrot .social-btn svg circle{ stroke: currentColor; }
.author-sheet.footer-credit-montegrot .social-btn,
.author-sheet.footer-credit-montegrot .social-btn .label{
  color: inherit;
  font-family: inherit;
}

/* Background-only mode: show only the background image */
body.bg-only{
  overflow: hidden;
}

#effect-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10000;
}

/* Hide everything except the background layer and effect layers*/
body.bg-only > :not(.bg):not(#effect-layer){
  display: none !important;
}

/* Background-only mode: hide everything EXCEPT the background and effects */
body.bg-only > :not(.bg):not(#effect-layer){
  display: none !important;
}

/* Panel that sits just above the footer */
.bg-peek-panel{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin: 1.25rem 0 0;
  text-align: center;
}

.bg-peek-hint{
  margin: 0;
  opacity: .8;
  font-size: .95rem;
}
/* Background spell panel: keep it unmistakably Violet */
.bg-peek-panel.footer-credit-montegrot{
  text-align: center;
}

/* Solid, readable button – still violet Tangerine */
.bg-peek-panel.footer-credit-montegrot .bg-peek-btn{
  font-family: inherit;
  color: inherit;

  /* Make it solid and legible on any page */
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(107, 47, 184, 0.45);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);

  /* Tangerine needs room */
  font-size: 30px;      /* tweak 28–34 */
  line-height: 1.05;
  padding: .65rem 1rem;
}

/* Hint text in the same “spellcasting” ink */
.bg-peek-panel.footer-credit-montegrot .bg-peek-hint{
  margin: 0;
  font-family: inherit;
  color: inherit;
  opacity: .85;
  font-size: 22px;
}
/* Utility (if you don't already have it) */
.hidden{ display:none !important; }

/* Reusable lazy-embed corner panel */
.corner-media{
  /* defaults can be overridden per instance via CSS variables */
  --corner-max-width: 360px;
  --corner-gap: .5rem;
  --corner-radius: 14px;
  --corner-shadow: 0 10px 24px rgba(0,0,0,0.18);

  max-width: min(var(--corner-max-width), calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  gap: var(--corner-gap);
  z-index: 999;
}

/* Fixed positioning variants */
.corner-media.corner-media--fixed{ position: fixed; }

.corner-media.corner-media--bottom-left{ left: 1rem; bottom: 1rem; }
.corner-media.corner-media--bottom-right{ right: 1rem; bottom: 1rem; }
.corner-media.corner-media--top-left{ left: 1rem; top: 1rem; }
.corner-media.corner-media--top-right{ right: 1rem; top: 1rem; }

/* Solid, readable button (works even on busy backgrounds) */
.corner-media .corner-media-btn{
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(0,0,0,0.18);
  border-radius: 10px;
  box-shadow: var(--corner-shadow);
  cursor: pointer;
  padding: .65rem 1rem;
}

/* Note text under the main label */
.corner-media .corner-media-note{
  display: block;
  opacity: .85;
  font-size: 0.85em;
  margin-top: .15rem;
}

/* Embed card */
.corner-media .corner-media-embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--corner-radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(0,0,0,0.18);
  box-shadow: var(--corner-shadow);
}

.corner-media .corner-media-embed iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* If the panel is Montegrot’s, let it look like Montegrot’s */
.corner-media.footer-credit-montegrot .corner-media-btn,
.corner-media.footer-credit-montegrot .corner-media-embed{
  border-color: rgba(107, 47, 184, 0.45);
}

/* Mobile: let it span nicely */
@media (max-width: 520px){
  .corner-media.corner-media--fixed{
    left: .75rem !important;
    right: .75rem !important;
    bottom: .75rem !important;
    top: auto !important;
    max-width: none;
  }
}
/* Author pages with non-square portraits: do not show the cropped header avatar */
.author-sheet.wide-photo .author-avatar-link{
  display: none;
}

/* Author profile avatar policy:
   - default: 1:1 square, centre-cropped if the source isn't square
   - tall/full: add .author-avatar--full to show the whole portrait
   - wide: use the wide-photo pattern we already have
*/
.author-sheet .author-avatar{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;     /* square frame */
  object-fit: cover;       /* crop, never stretch */
  object-position: center; /* centre the crop */
  display: block;
}

/* Tall portraits (opt-in) */
.author-sheet .author-avatar.author-avatar--full{
  aspect-ratio: auto;
  object-fit: contain;
  width: 100%;
  height: auto;

  /* “within reason” caps */
  max-width: 360px;
  max-height: 540px;
}

.carousel-track{
  height: 480px; /* was 440 */
}

@media (max-width: 520px){
  .carousel-track{
    height: 460px; /* was 420 */
  }
}
/* --- Carousel: square (1:1) portraits --- */
.carousel-shell{
  --card-w: 180px; /* default desktop card width */
}

/* Use the variable for the card width */
.card{
  width: var(--card-w);
}

/* Make the portrait area square */
.card img,
.img-fallback{
  width: 100%;
  height: var(--card-w);
  object-fit: cover;
}

/* (Optional) scale fallback letter with the square */
.img-fallback{
  font-size: calc(var(--card-w) * 0.36);
}

/* Keep existing responsive widths, but set the variable instead */
@media (max-width: 900px){
  .carousel-shell{ --card-w: 170px; } /* was .card{ width:170px } */
}

@media (max-width: 520px){
  .carousel-shell{ --card-w: 160px; } /* was .card{ width:160px } */
}
/* --- Carousel: square (1:1) portraits --- */
.carousel-shell{
  --card-w: 180px; /* default desktop card width */
}

/* Use the variable for the card width */
.carousel-track .card{
  width: var(--card-w);
}

/* Make the portrait area square and centre-crop non-square images */
.carousel-track .card img{
  width: 100%;
  height: var(--card-w);
  display: block;          /* removes the little inline-image gap */
  object-fit: cover;       /* crops, never stretches */
  object-position: center; /* centres the crop */
}

/* Make fallback match the same square space */
.carousel-track .img-fallback{
  width: 100%;
  height: var(--card-w);
}

/* Keep existing responsive widths, but set the variable instead */
@media (max-width: 900px){
  .carousel-shell{ --card-w: 170px; }
}

@media (max-width: 520px){
  .carousel-shell{ --card-w: 160px; }
}

/* Authors grid: square (1:1) portraits, centre-cropped if not square */
.authors-grid .author-link img{
  height: auto;             /* overrides the fixed 190px */
  aspect-ratio: 1 / 1;      /* square frame */
  display: block;           /* removes the tiny inline-image gap */
  object-fit: cover;        /* crop, never stretch */
  object-position: center;  /* centre the crop */
}
/* Carousel: allow longer story title + blurb when the card is active */
.carousel-shell{
  --story-max: 110px;  /* title line */
  --blurb-max: 140px;  /* tagline */
}

/* These override any earlier conflicting rules */
.card.active .card-story{
  max-height: var(--story-max);
  opacity: 1;
}

.card.active .card-blurb{
  max-height: var(--blurb-max);
  opacity: 1;
}
@media (max-width: 520px){
  .carousel-shell{
    --story-max: 120px;
    --blurb-max: 160px;
  }
}
.fx-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* do not steal clicks */
  z-index: 9999;        /* above everything */
}
.pentacle-trail{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  left: 0;
  top: 0;
  color: rgba(190, 90, 255, 0.95);
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(170, 60, 255, 0.75));
  will-change: transform, opacity;
}
.pentacle-trail svg{
  width: 100%;
  height: 100%;
  display: block;
}

.cursor-static-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998; /* below fx-canvas (9999) */
  mix-blend-mode: screen;
}

/* Cursor runes – faint gold/white sigils on pointer move */
.rune-trail{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  left: 0;
  top: 0;

  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;

  /* Try hard to get a font that includes Runic glyphs */
  font-family:
    "Segoe UI Symbol",
    "Noto Sans Runic",
    "Noto Sans Symbols",
    "Apple Symbols",
    "Symbola",
    var(--display);

  mix-blend-mode: screen;
  text-shadow:
    0 0 10px rgba(255, 214, 120, 0.35),
    0 0 2px rgba(255, 255, 255, 0.35);

  will-change: transform, opacity;
}


/* Secret page image stack */
.secret-gallery {
  margin-top: 1rem;
  display: grid;
  gap: 1.1rem;
  justify-items: center;
}

.secret-figure {
  margin: 0;
  width: min(720px, 100%);
}

.secret-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
/* --- Covers page (The Covers That Weren’t) --- */

.covers-page{
  padding: 22px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 14px 40px var(--shadow);
}

.covers-page h1{
  margin: 0 0 6px;
  font-family: var(--display);
  letter-spacing: 0.05em;
}

.covers-feature{
  margin-top: 14px;
}

.covers-feature h2,
.covers-carousel-panel h2{
  margin: 14px 0 10px;
  font-family: var(--display);
  letter-spacing: 0.04em;
}

.covers-feature-grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 18px;
  align-items: start;
}

.cover.cover--big{
  max-width: 560px;
}

.covers-feature-meta{
  padding-top: 6px;
}

.covers-credit{
  margin: 0 0 10px;
  color: var(--ink-soft);
}

@media (max-width: 900px){
  .covers-feature-grid{ grid-template-columns: 1fr; }
  .cover.cover--big{ max-width: 640px; }
}

.covers-carousel-panel{
  margin-top: 16px;
}

/* Covers carousel: show the whole cover (no cropping) */
.covers-carousel{
  --card-w: 230px; /* slightly wider than author cards */
}

.covers-carousel .carousel-track{
  height: 640px;
}

.covers-carousel .card{
  width: var(--card-w);
}

.covers-carousel .card img,
.covers-carousel .img-fallback{
  width: 100%;
  height: calc(var(--card-w) * 1.5); /* 2:3 cover shape */
}

.covers-carousel .card img{
  display: block;
  object-fit: contain;   /* full cover, no cropping */
  object-position: center;
}

@media (max-width: 900px){
  .covers-carousel{ --card-w: 210px; }
  .covers-carousel .carousel-track{ height: 610px; }
}

@media (max-width: 520px){
  .covers-carousel{ --card-w: 190px; }
  .covers-carousel .carousel-track{ height: 580px; }
}

/* Author page: small centred “More photos” title box */
.author-gallery{
  margin-top: 22px;
  text-align: center;
}

.author-gallery > h2{
  margin: 0 0 16px;
  display: inline-block;           /* box hugs the text */
  padding: 10px 16px;
  border-radius: var(--radius-small);
  background: var(--paper);
  border: 1px solid var(--edge);
  box-shadow: 0 10px 30px var(--shadow);

  font-family: var(--display);
  letter-spacing: 0.04em;
}
.rune-trail.rune-burst{
  text-shadow:
    0 0 14px rgba(255, 214, 120, 0.45),
    0 0 3px rgba(255, 255, 255, 0.4);
}

/* =========================
   ARTZ page customisations
   ========================= */

body.author-artz{
  /* Metallic headings + starlight palette */
  --artz-silver: #cfd6e4;
  --artz-silver-bright: #ffffff;
  --artz-silver-dark: #aab3c7;

  --starlight: rgba(240, 246, 255, 0.95);
  --starglow: rgba(185, 220, 255, 0.78);
}

/* Silver H1 + “strong-as-subheading” blocks on ARTZ page */
body.author-artz .author-intro h1,
body.author-artz .author-body strong{
  color: var(--artz-silver);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.22),
    0 0 16px rgba(185, 220, 255, 0.18);
}

/* Use a subtle metallic gradient when supported */
@supports (-webkit-background-clip: text) or (background-clip: text){
  body.author-artz .author-intro h1,
  body.author-artz .author-body strong{
    background: linear-gradient(180deg,
      var(--artz-silver-bright) 0%,
      var(--artz-silver) 42%,
      var(--artz-silver-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Make the “Short author bio” / “More links” lines read like headings */
body.author-artz .author-body strong{
  display: block;
  margin: 18px 0 8px;
  font-family: var(--display);
  letter-spacing: 0.03em;
  font-size: 16px;
}

/* Soft glow behind avatar */
body.author-artz .author-avatar-link{
  border-color: rgba(185, 220, 255, 0.40);
  box-shadow:
    0 12px 34px var(--shadow),
    0 0 26px rgba(185, 220, 255, 0.26),
    0 0 70px rgba(185, 220, 255, 0.16);
}

body.author-artz .author-avatar-link:hover{
  box-shadow:
    0 14px 40px var(--shadow-2),
    0 0 34px rgba(185, 220, 255, 0.34),
    0 0 90px rgba(185, 220, 255, 0.22);
}

/* Shared star element (used by cursor trail + avatar hover sparkles) */
.starlight{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  left: 0;
  top: 0;

  width: 12px;
  height: 12px;

  background: var(--starlight, rgba(240, 246, 255, 0.95));
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );

  mix-blend-mode: screen;
  filter: drop-shadow(0 0 7px var(--starglow, rgba(185, 220, 255, 0.78)));
  will-change: transform, opacity;
}