@import url("https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cinzel:wght@500;600;700&display=swap");
:root { --blood:#740e17; --bright:#b8212d; --gold:#d7a928; --bone:#eadfd1; --ink:#090506; }
* { box-sizing:border-box; }
html { background:var(--ink); }
body { margin:0; color:var(--bone); background:var(--ink); font-family:"Cinzel", Georgia, serif; }

.archive-page {
  position:relative; isolation:isolate; min-height:100vh; overflow:hidden;
  padding:clamp(2rem,5vw,4.5rem) clamp(1.2rem,5vw,5rem) 2rem;
  background:
    radial-gradient(circle at 50% 46%, rgba(136,16,27,.26), transparent 33rem),
    linear-gradient(115deg, transparent 48%, rgba(255,255,255,.018) 49%, transparent 50%),
    #090506;
}
.atmosphere { position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(126,22,30,.08) 120px 121px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(126,22,30,.05) 120px 121px);
  mask-image:radial-gradient(circle, black, transparent 85%);
}
.masthead { text-align:center; }
.eyebrow { margin:0 0 .25rem; color:#a98b7d; font-size:1rem; font-weight:700; letter-spacing:.55em; text-transform:uppercase; }
h1 { margin:0; color:#f2e7da; font-family:"Cinzel Decorative", Georgia, serif; font-size:clamp(2rem,5vw,4.2rem); line-height:1; letter-spacing:.045em; text-shadow:0 2px 0 #000, 0 0 30px rgba(184,33,45,.32); }
.rule { display:flex; align-items:center; justify-content:center; gap:.8rem; width:min(28rem,80vw); margin:1.25rem auto 0; color:var(--bright); font-size:.65rem; }
.rule::before,.rule::after { content:""; height:1px; flex:1; background:linear-gradient(90deg, transparent, var(--blood)); }
.rule::after { background:linear-gradient(90deg, var(--blood), transparent); }

.archive-grid { position:relative; width:min(1080px,100%); min-height:610px; margin:clamp(2rem,5vh,4.2rem) auto 0; }
.shoutbox {
  position:absolute; z-index:4; top:0; left:50%; width:min(500px,46%); padding:.5rem;
  transform:translateX(-50%); color:#e0ba4e;
  background:linear-gradient(180deg,#27090c,#110708); border:1px solid #7e1d27;
  box-shadow:0 12px 30px rgba(0,0,0,.55),inset 0 0 15px rgba(136,16,27,.24);
  clip-path:polygon(3% 0,97% 0,100% 22%,100% 78%,97% 100%,3% 100%,0 78%,0 22%);
}
.shoutbox-label { padding:.15rem .65rem .4rem; color:#b33842; font:700 .54rem/1 "Courier New",monospace; letter-spacing:.22em; text-transform:uppercase; }
.shoutbox-screen { overflow:hidden; padding:.72rem 0; border:1px solid rgba(185,63,72,.38); background:#070606; box-shadow:inset 0 0 16px #000; }
.shoutbox-scroll { display:flex; width:max-content; animation:shoutbox-marquee 30s linear infinite; color:#e7c969; font:400 .76rem/1.2 "Courier New",monospace; letter-spacing:.04em; white-space:nowrap; text-shadow:0 0 7px rgba(224,186,78,.45); }
.shoutbox-scroll span { padding-right:5rem; }
@keyframes shoutbox-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.central-tablet {
  position:absolute; z-index:2; top:50%; left:50%; width:min(460px,42%); min-height:380px; margin:0; padding:4.25rem 3.5rem;
  display:grid; place-items:center; transform:translate(-50%,-50%); text-align:center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 22%),
    radial-gradient(circle at 50% 40%, #491015, #24090c 58%, #120607);
  border:1px solid #8d2930; outline:5px double #3c1115; box-shadow:0 25px 80px #000, inset 0 0 35px #050203, 0 0 45px rgba(119,12,23,.18);
  clip-path:polygon(8% 0,92% 0,100% 8%,100% 92%,92% 100%,8% 100%,0 92%,0 8%);
}
.central-tablet::before { content:"❖"; position:absolute; top:1.35rem; color:var(--gold); font-size:1.25rem; text-shadow:0 0 14px rgba(215,169,40,.5); }
.central-tablet::after { content:""; position:absolute; inset:1.35rem; border:1px solid rgba(215,169,40,.3); clip-path:inherit; pointer-events:none; }
.central-tablet p { position:relative; z-index:1; margin:0; font-family:"Cinzel Decorative", Georgia, serif; font-size:clamp(1.15rem,2.15vw,1.65rem); line-height:1.75; color:#efe2d4; text-shadow:0 2px 2px #000; }
.corner { position:absolute; width:22px; height:22px; border-color:#ba8724; opacity:.7; }
.corner-nw { top:2rem; left:2rem; border-top:2px solid; border-left:2px solid; }.corner-ne { top:2rem; right:2rem; border-top:2px solid; border-right:2px solid; }.corner-sw { bottom:2rem; left:2rem; border-bottom:2px solid; border-left:2px solid; }.corner-se { bottom:2rem; right:2rem; border-bottom:2px solid; border-right:2px solid; }

.archive-links { position:absolute; inset:0; }
.archive-slot { position:absolute; width:250px; text-align:center; }
.slot-1 { left:0; top:3%; }.slot-2 { right:0; top:3%; }.slot-3 { left:0; top:39%; }.slot-4 { right:0; top:39%; }.slot-5 { left:0; bottom:2%; }.slot-6 { right:0; bottom:2%; }
.tablet {
  position:relative; min-height:102px; padding:1.2rem 2rem; display:flex; align-items:center; justify-content:center; gap:.8rem;
  color:#f0ddd1; text-decoration:none; font-size:clamp(1.25rem,2vw,1.65rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:linear-gradient(165deg,#69131b 0%,#390b10 48%,#19080a 100%); border:1px solid #9c3038; outline:3px double #360b0f;
  box-shadow:0 15px 28px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.09), inset 0 -12px 22px rgba(0,0,0,.3);
  clip-path:polygon(8% 0,92% 0,100% 24%,100% 76%,92% 100%,8% 100%,0 76%,0 24%);
  transition:transform .2s ease, filter .2s ease, color .2s ease;
}
.tablet::before { content:""; position:absolute; inset:8px; border:1px solid rgba(217,154,48,.22); clip-path:inherit; }
.tablet b { color:var(--gold); font-size:.85rem; transition:transform .2s ease; }
a.tablet:hover,a.tablet:focus-visible { color:#fff7ef; transform:translateY(-4px); filter:brightness(1.22); outline-color:#bd7d24; }
a.tablet:hover b { transform:translate(3px,-3px); }
.tablet.disabled { color:#77706e; background:linear-gradient(165deg,#272324,#171415); border-color:#4b4444; filter:saturate(.15); cursor:not-allowed; }
.archive-slot small { display:block; margin:.8rem auto 0; max-width:240px; font-family:"Cinzel",serif; font-size:.68rem; font-weight:700; line-height:1.55; letter-spacing:.08em; }
.archive-description { color:#b9a69a; }
.coming-soon { color:#f2c230; letter-spacing:.24em !important; text-transform:uppercase; text-shadow:0 0 12px rgba(242,194,48,.35); }
.copyright-tablet {
  width:min(780px,100%); margin:2.35rem auto 0; padding:1.15rem 1.5rem;
  text-align:center; color:#d7a928; font-size:.64rem; line-height:1.8;
  letter-spacing:.13em; text-transform:uppercase;
  background:linear-gradient(165deg,rgba(67,15,20,.72),rgba(20,7,9,.9));
  border:1px solid rgba(156,48,56,.65); outline:3px double #27090c;
  box-shadow:0 12px 28px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.05);
  clip-path:polygon(2% 0,98% 0,100% 25%,100% 75%,98% 100%,2% 100%,0 75%,0 25%);
}

@media (max-width:900px) {
  .archive-grid { min-height:auto; display:flex; flex-direction:column; gap:2rem; }
  .shoutbox { position:relative; top:auto; left:auto; width:min(560px,100%); margin:0 auto; transform:none; }
  .central-tablet { position:relative; top:auto; left:auto; transform:none; width:min(560px,100%); min-height:300px; margin:0 auto; padding:3.75rem 2rem; }
  .archive-links { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }
  .archive-slot { position:relative; inset:auto; width:auto; }.tablet { min-height:94px; }
}
@media (max-width:540px) {
  .archive-page { padding-inline:1rem; }.archive-links { grid-template-columns:1fr; }.central-tablet p { font-size:1.05rem; }.tablet { min-height:82px; }
}
@media (prefers-reduced-motion:reduce) {
  .tablet,.tablet b { transition:none; }
  .shoutbox-screen { overflow:auto; }
  .shoutbox-scroll { display:block; width:auto; animation:none; white-space:normal; }
  .shoutbox-scroll span { display:block; padding:0 .75rem; }
  .shoutbox-scroll span[aria-hidden="true"] { display:none; }
}