/* ============================================================
   BASE + BACKGROUND
   ------------------------------------------------------------
   - Page-wide background gradients
   - Burned corners + soot
   - Inner deckled frame
   - Background layers
============================================================ */
* { box-sizing:border-box; }
html, body { height:100%; }

body {
  margin:0;
  color:var(--ink);
  font:16px/1.6 "Inter",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background:
    radial-gradient(1200px 800px at -20% -30%, rgba(62,94,78,.10), transparent 60%),
    radial-gradient(1200px 800px at 120% 130%, rgba(183,102,74,.10), transparent 60%),
    linear-gradient(180deg,var(--bg),var(--bg-accent));
}

/* Burned outer corners + soot */
body::before {
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(320px 260px at -60px -60px, rgba(28,18,10,.55), rgba(28,18,10,.32) 46%, transparent 74%) top left,
    radial-gradient(320px 260px at calc(100% + 60px) -60px, rgba(28,18,10,.55), rgba(28,18,10,.32) 46%, transparent 74%) top right,
    radial-gradient(320px 260px at -60px calc(100% + 60px), rgba(28,18,10,.55), rgba(28,18,10,.32) 46%, transparent 74%) bottom left,
    radial-gradient(320px 260px at calc(100% + 60px) calc(100% + 60px), rgba(28,18,10,.55), rgba(28,18,10,.32) 46%, transparent 74%) bottom right,
    radial-gradient(1200px 800px at 50% -20%, rgba(50,34,20,.12), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(50,34,20,.14), transparent 60%);
  background-repeat:no-repeat;
  mix-blend-mode:multiply;
}

/* Inner deckled frame */
body::after {
  content:"";
  position:fixed; inset:18px;
  pointer-events:none; z-index:0;
  border-radius:22px;
  box-shadow:inset 0 0 0 2px var(--line),
             inset 0 0 44px rgba(64,45,21,.18);
  background:
    repeating-linear-gradient(115deg, rgba(64,45,21,.06) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(25deg, rgba(64,45,21,.05) 0 1px, transparent 1px 6px);
  opacity:.6;
}

/* Background layers (images, tint, grain) */
.bg-layers { position:fixed; inset:0; z-index:1; pointer-events:none; }
.bg-layers .layer { position:absolute; inset:-4vh -4vw; will-change:transform,opacity; }
.bg-layers .img.one {
  background:url('../../images/covers/Desktop_Wallpaper_020.png') center/cover no-repeat;
  opacity:.22; filter:saturate(.85) contrast(.95) brightness(.9);
  mix-blend-mode:multiply;
}
.bg-layers .img.two {
  background:url('../../images/covers/Desktop_Wallpaper_012.png') center/cover no-repeat;
  opacity:.18; filter:blur(1px) saturate(.8) brightness(.95);
  mix-blend-mode:multiply;
}
.bg-layers .tint {
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(62,94,78,.18), transparent 60%),
    radial-gradient(70% 70% at 80% 90%, rgba(183,102,74,.18), transparent 60%),
    radial-gradient(40% 40% at 10% 80%, rgba(120,98,78,.10), transparent 60%);
}
.bg-layers .grain {
  opacity:.25;
  background:
    repeating-linear-gradient(115deg, rgba(64,45,21,.05) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(25deg,  rgba(64,45,21,.04) 0 1px, transparent 1px 6px);
}

.container { max-width:1120px; margin:0 auto; padding:0 24px; position:relative; z-index:2; }


/* Hide fortune slip on smaller screens */
@media (max-width: 768px) {
  .fortune-slip {
    display: none !important;
  }
}