/* Crit & Craft - simple comic/devlog layout */
:root{
  --bg: #201915;
  --bg-dark: #201915;
  --bg-band: #201915;

  --panel: #392F2A;
  --text: #ffffff;
  --caption: #E4CB7F; /* pick anything; this uses your gold palette */
  --muted: #66717f;     /*used for the footer text and some other stuff*/
  --primary: #201915;   /*header background*/
  --accent: #201915;
  --link: #E4CB7F;
  --radius: 2px;
  --shadow: 0 2px 6px rgba(0,0,0,.12);
  --panel-border: #4D423C;
  --stage: #2D2521; /* background for the main content box */
  --stage-edge: #2D2521; /* border color for stage */

  /* disable earlier card photo effect */
  --card-bg-photo: none;

  /* --- Stage (overall background inside the border) -------------------- */
  --stage-bg-image: url("/assets/brickwork.png");
  --stage-bg-size: 280px;        /* auto | cover | contain | 160px | 280px */
  --stage-bg-repeat: repeat;     /* repeat | no-repeat | repeat-x | repeat-y */
  --stage-bg-position: center;   /* center | top left | 20px 10px */
  --stage-bg-attachment: scroll; /* scroll | fixed | local */

  /* Tint over the image to match your palette and keep contrast */
  --stage-tint: transparent; /* tweak alpha 0.35–0.7 */
  --stage-blend: multiply;              /* multiply | overlay | screen | normal */
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* overall site background */
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--stage-tint), var(--stage-tint)),
    var(--stage-bg-image);
  background-size: auto, var(--stage-bg-size);
  background-repeat: no-repeat, var(--stage-bg-repeat);
  background-position: 0 0, var(--stage-bg-position);
  background-attachment: scroll, var(--stage-bg-attachment);
  background-blend-mode: var(--stage-blend);

  background-attachment: fixed; /* keeps it in place while scrolling */
}
@media (max-width: 1140px) {
  html, body { background: var(--bg-band); }
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrapper {
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 0 16px 40px;
}

/* Homepage: fade-out overlay on the latest post body */
#latest-post .post-body {
  position: relative;
  max-height: 44rem;              /* adjust to taste */
  overflow: hidden;               /* hides the rest so the fade works */
}

/* The gradient overlay */
#latest-post .post-body::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 200px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    var(--panel)
  );
}

header.site-header{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--primary);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
  padding: 6px;
  margin: 0 0 16px;
}

.site-brand {
  position: relative;
  overflow: hidden;
}

/* Main banner image */
.site-brand img.banner-img {
  display: block;
  width: 100%;
  height: auto;                   /* keeps aspect ratio */
}

.banner-gif {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);    /* vertical centering */
  height: 80%;                   /* <-- key change: match banner height */
  width: auto;
  max-height: none;               /* remove the old 200px cap */
  max-width: none;
  pointer-events: none;
}

.banner-gif.dragon {
  left: 20px;
  transform: translateY(-60%) scaleX(-1);
}

.banner-gif.wizard {
  right: 20px;
  transform: translateY(-60%);
}

nav.top-nav {
  display: none;
}
nav.top-nav a {
  background: #0b2032; color: var(--text);
  padding: 10px 14px; border-radius: 10px; border: 1px solid #20384f;
}
nav.top-nav a:hover { background:#0d263d; }

/* Desktop main grid with brickwork stage background */
.main { 
  display: grid; grid-template-columns: 1fr 280px; gap: 8px;

  background-color: var(--stage);
  background-image:
    linear-gradient(var(--stage-tint), var(--stage-tint)), /* tint */
    var(--stage-bg-image);                                 /* image */
  background-size: auto, var(--stage-bg-size);
  background-repeat: no-repeat, var(--stage-bg-repeat);
  background-position: 0 0, var(--stage-bg-position);
  background-attachment: scroll, var(--stage-bg-attachment);
  background-blend-mode: var(--stage-blend);

  border: 1px solid var(--stage-edge);
  border-radius: 8px;
  padding: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25) inset,
              0 1px 2px rgba(0,0,0,.2);
}

/* Mobile version */
@media (max-width: 900px) {
  .main { 
    grid-template-columns: 1fr;

    background-color: var(--stage);
    background-image:
      linear-gradient(var(--stage-tint), var(--stage-tint)),
      var(--stage-bg-image);
    background-size: auto, var(--stage-bg-size);
    background-repeat: no-repeat, var(--stage-bg-repeat);
    background-position: 0 0, var(--stage-bg-position);
    background-attachment: scroll, var(--stage-bg-attachment);
    background-blend-mode: var(--stage-blend);

    border: 1px solid var(--stage-edge);
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25) inset,
                0 1px 2px rgba(0,0,0,.2);
  }
}

.panel {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

.post, .panel {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  border: 1px solid var(--panel-border);
  background: var(--panel);
  margin: 4px;
}

.panel > .panel-header { padding: 14px 16px; border-bottom: 1px solid #24445f; font-weight: 700; color: var(--accent); }
.panel > .panel-body { padding: 16px; }

.post {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  color: var(--text);
}

.post-header { padding: 16px; border-bottom: 1px solid var(--panel-border); }
.post-title { margin:0; font-size: 1.65rem; color: var(--text); font-weight: 700; }
.post-meta { color: var(--muted); font-size: .95rem; margin-top: 4px; }
.post-body { padding: 16px; }
.post-body img, .post-body video { max-width: 100%; border-radius: 10px; display:block; margin: 10px auto; }

.post-nav { display:flex; justify-content: space-between; gap: 8px; padding: 16px; border-top: 1px solid var(--panel-border); }
.post-nav a {
  background:#f9e8a5;
  padding: 10px 14px;
  border-radius: 10px;
  border:1px solid #d6b64f;
  color: #000000;
}
.post-nav a[aria-disabled="true"] { opacity:.5; pointer-events:none; }

/* Figure + caption styling */
.post-body figure.post-image {
  margin: 16px auto;
  text-align: center;        /* centers image & caption */
}

.post-body figure.post-image img {
  display: block;
  margin: 0 auto;            /* ensure centered */
  max-width: 100%;
  height: auto;
  border-radius: 10px;       /* matches your existing post-body img */
}

.post-body figure.post-image figcaption {
  margin-top: 0.5em;
  font-style: italic;
  font-size: 0.95em;
  line-height: 1.4;
  color: var(--caption, #E4CB7F); /* falls back if var missing */
  text-align: center;
}

.sidebar .box + .box { margin-top: 16px; }
.sidebar img,
.sidebar video,
.sidebar iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

.sidebar img[width],
.sidebar img[style*="width"] {
  width: 100% !important;
  height: auto !important;
}

.sidebar .box .box-body { overflow: hidden; }
.box .box-title {
  background: #392F2A;
  padding: 10px 12px;
  border-bottom: 1px solid #4D423C;
  color: #d4af37;
  font-weight: 700;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.box .box-body { padding: 12px 14px; color:#1f2933; }

ul.clean { list-style: none; padding: 0; margin: 0; }
ul.clean li {
  padding-left: 0;
}
ul.clean li:last-child { border-bottom: none; }
/*ul.clean li::before {*/
/*  content: "";*/
/*  position: absolute; left: 4px; top: 50%;*/
/*  width: 6px; height: 6px; border-radius: 50%;*/
/*  background: #7aa7ff; transform: translateY(-50%);*/
/*}*/

.footer {
  grid-column: 1 / -1;
  margin-top: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--stage-edge);
  text-align: center;
  color: var(--muted); 
}
small.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.stamp-link-back {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 4px; /* spacing between items */
  align-items: center;
  justify-items: center;
}

.stamp-link-back a img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Custom cursors --- */

/* Default site cursor */
html, body {
  cursor: url("/assets/cursor-default.webp") 8 2, auto;
}

/* Cursor when hovering over links and buttons */
a, button, [role="button"], .post-nav a {
  cursor: url("/assets/cursor-select.webp") 6 0, pointer;
}

#bg-audio-player {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}