/* FanBound materials wall v1.0 (site v8.4 / engine v1.5, 31 Oct 2026). Pairs with mwall.js.
   Page colours: --mw-bg (the wall), --mw-acc (accent), --mw-panel (close view), --mw-text-ink, --mw-muted. */
.mw{--mw-w:var(--mw-bg,#141A16);--mw-a:var(--mw-acc,var(--acc,#C8873A));--mw-p:var(--mw-panel,#FBF8F2);--mw-t:var(--mw-text-ink,#17201B);--mw-m:var(--mw-muted,#5E6A62);
  --mw-eo:var(--ease-out,cubic-bezier(.22,1,.36,1));--mw-es:var(--ease-spring,cubic-bezier(.34,1.45,.64,1));position:relative;min-width:0}
.mw-wall{list-style:none;margin:0;padding:clamp(16px,3vw,34px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,2vw,22px);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--mw-w) 78%,#fff) 0%,var(--mw-w) 70%);border-radius:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.5)}
.mw-wall li{min-width:0}
.mw-n{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:30px 12px 16px;border:0;border-radius:16px;cursor:pointer;font:inherit;color:#F2EEE6;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015));box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 22px 30px -20px rgba(0,0,0,.65);
  transition:transform var(--t-ui,.26s) var(--mw-es),box-shadow var(--t-ui,.26s) var(--mw-eo)}
.mw-lamp{position:absolute;left:50%;top:0;width:140%;height:75%;transform:translateX(-50%);background:radial-gradient(48% 62% at 50% 0%,rgba(255,236,200,.36),rgba(255,236,200,0) 72%);pointer-events:none}
.mw-lamp::before{content:"";position:absolute;left:50%;top:7px;width:34px;height:4px;border-radius:4px;transform:translateX(-50%);background:#FFF1D6;box-shadow:0 0 14px 4px rgba(255,230,180,.55)}
.mw-s{position:relative;display:block;width:84%;aspect-ratio:5/4;border-radius:6px;overflow:hidden;box-shadow:0 18px 24px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);
  transform:perspective(600px) rotateX(7deg);transition:transform .45s var(--mw-eo)}
.mw-s img{width:100%;height:100%;object-fit:cover;display:block}
.mw-nm{font-weight:700;font-size:15px;line-height:1.2;text-align:center}
.mw-go{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.62}
@media (hover:hover){.mw-n:hover .mw-s{transform:perspective(600px) rotateX(0) translateY(-4px) scale(1.04)}.mw-n:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),inset 0 22px 30px -20px rgba(0,0,0,.65)}}
.mw-n:active{transform:scale(.97)}
.mw-n:focus-visible{outline:3px solid var(--mw-a);outline-offset:3px}
.mw.mw-open .mw-wall{display:none}
.mw-z{position:relative;background:var(--mw-p);color:var(--mw-t);border-radius:22px;box-shadow:0 30px 70px -24px rgba(0,0,0,.45);transform-origin:0 0;overflow:hidden}
.mw-z:focus{outline:none}
.mw-zin{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(18px,3vw,40px);padding:clamp(18px,3vw,36px);position:relative}
.mw-zs{position:relative;border-radius:14px;overflow:hidden;align-self:start;box-shadow:0 22px 40px -20px rgba(0,0,0,.55)}
.mw-zs img{width:100%;height:auto;display:block;aspect-ratio:5/4;object-fit:cover}
.mw-tag{position:absolute;left:10px;bottom:10px;background:rgba(15,31,25,.86);color:#fff;font-size:12px;font-weight:700;padding:4px 8px;border-radius:4px}
.mw-k{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mw-m);margin:0 0 8px}
.mw-zt{min-width:0;padding-right:96px}
.mw-zt h3{font-size:clamp(2rem,4vw,3.2rem);line-height:1;margin:0 0 14px;letter-spacing:-.02em;color:var(--mw-t)}
.mw-zt h3 em{font-style:italic;font-weight:300}
.mw-zt h3:focus{outline:none}
.mw-notes{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:6px;font-size:15.5px}
.mw-notes li{position:relative;padding-left:18px}
.mw-notes li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:2px;background:var(--mw-a)}
.mw-laid{margin:0 0 18px;margin-right:-96px}
.mw-laid img{width:100%;height:auto;border-radius:12px;display:block}
.mw-laid figcaption{font-size:13px;color:var(--mw-m);margin-top:6px}
.mw-acts{display:flex;flex-wrap:wrap;gap:10px;margin-right:-96px}
.mw-z .btn.ghost{background:transparent;color:var(--mw-t);border-color:color-mix(in srgb,var(--mw-t) 35%,transparent);backdrop-filter:none;-webkit-backdrop-filter:none}
.mw-nav{position:absolute;right:clamp(14px,2.4vw,30px);top:clamp(14px,2.4vw,30px);display:flex;gap:6px}
.mw-nav button{width:42px;height:42px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--mw-t) 22%,transparent);background:#fff;color:var(--mw-t);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px;
  transition:transform var(--t-ui,.26s) var(--mw-es),border-color var(--t-ui,.26s) var(--mw-eo)}
.mw-nav button:hover{border-color:var(--mw-a)}
.mw-nav button:active{transform:scale(.94)}
@media (max-width:760px){
  .mw-wall{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px}
  .mw-n{padding:24px 8px 12px}
  .mw-go{display:none}
  .mw-zin{grid-template-columns:1fr}
  .mw-zs{max-width:min(260px,calc(100% - 104px))}
  .mw-zt{padding-right:0}
  .mw-laid,.mw-acts{margin-right:0}
  .mw-acts .btn{flex:1 1 100%;text-align:center}
}
@media (prefers-reduced-motion:reduce){.mw-n,.mw-s,.mw-nav button{transition:none}.mw-s{transform:none}}