*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background: var(--c-slag);
  color: var(--c-bone);
  font: 400 var(--fs-600)/1.66 var(--f-body);
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }

a{ color: var(--c-glow); text-decoration-color: var(--c-glow-deep); text-underline-offset:3px; }
a:hover{ text-decoration-color: var(--c-glow); }
:focus-visible{ outline:2px solid var(--c-glow); outline-offset:2px; }

::selection{ background: var(--c-glow-deep); color: var(--c-bone); }

.skip{
  position:absolute; left:var(--s-5); top:calc(var(--s-9) * -1); z-index:10000;
  background:var(--c-plate); color:var(--c-bone); border:1px solid var(--c-glow);
  padding:var(--s-3) var(--s-5); font:500 var(--fs-400)/1 var(--f-chrome);
  text-transform:uppercase; letter-spacing:.05em;
}
.skip:focus{ top:var(--s-5); }

#main{ position:relative; }

.monument{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  letter-spacing:.07em; line-height:1.02; margin:0;
}
.monument--sec{
  font-family:var(--f-display); font-weight:700; text-transform:uppercase;
  font-size:var(--fs-800); letter-spacing:.09em; line-height:1.06; margin:0;
}
.eyebrow{
  font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase;
  letter-spacing:.15em; color:var(--c-brass-hi); margin:0;
}
.mono-micro{
  font:400 var(--fs-100)/1.5 var(--f-mono); letter-spacing:.06em; color:var(--c-dust);
}
.num{ font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums;
      font-feature-settings:'tnum' 1; letter-spacing:-.01em; }

.prose{ max-width:var(--w-prose); }
.prose p{ margin:0 0 var(--s-5); }
.prose p:last-child{ margin-bottom:0; }

.epitaph{
  max-width:var(--w-narrow); margin-inline:auto; text-align:center;
  font:italic 400 var(--fs-700)/1.55 var(--f-body); color:var(--c-teal);
}
.epitaph cite{
  display:block; margin-top:var(--s-3); font-style:normal;
  font:400 var(--fs-100)/1.5 var(--f-mono); letter-spacing:.06em; color:var(--c-dust);
}

.container{ margin-inline:auto; padding-inline:var(--s-5); }
.w-page  { max-width:var(--w-page); }
.w-wide  { max-width:var(--w-wide); }
.w-shell { max-width:var(--w-shell); }
.w-prose { max-width:calc(var(--w-prose) + var(--s-5) * 2); }

.mast{
  position:relative; z-index:20;
  background:linear-gradient(180deg, #16201F 0%, var(--c-forge) 100%);
  border-bottom:1px solid var(--c-iron);
  box-shadow:0 1px 0 rgba(52,224,206,.14), 0 12px 34px rgba(0,0,0,.6);
}
.mast__in{
  display:flex; align-items:center; gap:var(--s-5);
  padding-block:var(--s-4);
}
.mast__brand{
  display:flex; align-items:center; gap:var(--s-3);
  text-decoration:none; color:var(--c-bone);
}
.mast__word{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:var(--fs-400); letter-spacing:.11em; line-height:1;
}
.mast__nav{ margin-left:auto; display:flex; gap:var(--s-5); align-items:center; }
.mast__link{
  font:500 var(--fs-400)/1 var(--f-chrome); text-transform:uppercase; letter-spacing:.05em;
  color:var(--c-ash); text-decoration:none; padding:var(--s-2) 0;
  border-bottom:2px solid transparent;
  transition:color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.mast__link:hover{ color:var(--c-bone); border-bottom-color:var(--c-iron); }
.mast__link[aria-current="page"]{
  color:var(--c-glow); border-bottom-color:var(--c-glow);
  text-shadow:0 0 16px rgba(52,224,206,.55);
}
.mast__edge{ position:absolute; left:0; right:0; bottom:-14px; }

.foot{ position:relative; margin-top:var(--s-8); background:var(--c-forge); }
.foot__edge{ position:absolute; left:0; right:0; top:-14px; transform:scaleY(-1); }
.foot__in{
  display:grid; grid-template-columns:minmax(0,1fr) var(--w-rail);
  gap:var(--s-7); padding-block:var(--s-7) var(--s-6);
}
.foot__col h2{ font:600 var(--fs-200)/1 var(--f-chrome); text-transform:uppercase;
  letter-spacing:.15em; color:var(--c-brass-hi); margin:0 0 var(--s-4); }
.foot__list{ list-style:none; margin:0; padding:0; }
.foot__list li{ margin-bottom:var(--s-2); font-size:var(--fs-300); color:var(--c-ash); }
.foot__meta{ padding-bottom:var(--s-6); }

@media (max-width:820px){
  .foot__in{ grid-template-columns:1fr; gap:var(--s-6); }
}

.home-grid{
  display:grid; grid-template-columns:minmax(0,var(--w-prose)) var(--w-rail);
  column-gap:var(--s-7); align-items:start;
}
@media (max-width:980px){ .home-grid{ grid-template-columns:1fr; row-gap:var(--s-6); } }

.matchup{
  display:grid;
  grid-template-columns: var(--w-rail) minmax(0,1fr) var(--w-toc);
  grid-template-areas:
    "rail loadout toc"
    "rail writeup toc";
  grid-template-rows:auto 1fr;
  column-gap: var(--s-7); align-items:start;
}
.rail   { grid-area:rail;    position:sticky; top:calc(var(--s-8) + var(--s-2)); }
.loadout{ grid-area:loadout; min-width:0; }
.writeup{ grid-area:writeup; min-width:0; }
.toc    { grid-area:toc;     position:sticky; top:calc(var(--s-8) + var(--s-2)); }

@media (max-width:1100px){
  .matchup{
    grid-template-columns:1fr; grid-template-rows:none;
    grid-template-areas:"rail" "loadout" "toc" "writeup";
    row-gap:var(--s-6);
  }
  .rail,.toc{ position:static; }
}

.guide-part{ padding-block:var(--s-7); }
.guide-part > .seam{ margin-top:0; }

@media (max-width:620px){
  .mast__in{ flex-wrap:wrap; row-gap:var(--s-3); }
  .mast__word{ font-size:var(--fs-300); letter-spacing:.08em; }
  .mast__nav{ margin-left:0; width:100%; gap:var(--s-5); }
}

html, body{ cursor:url("../assets/cursor-mace.png") 6 3, auto; }
a, button, select, summary, [role="option"], .card, .opt, .runepage, label[for]{
  cursor:url("../assets/cursor-mace.png") 6 3, pointer;
}
input, textarea{ cursor:text; }
button:disabled{ cursor:not-allowed; }

body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(52,224,206,.13), transparent 62%),
    radial-gradient(90% 55% at 12% 8%,   rgba(52,224,206,.07), transparent 60%),
    radial-gradient(80% 60% at 92% 4%,   rgba(15,107,98,.16),  transparent 62%);
}
body::after{
  content:""; position:fixed; left:50%; bottom:-30vh; width:120vw; height:70vh;
  transform:translateX(-50%); z-index:-1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(52,224,206,.10), transparent 72%);
  filter:blur(30px);
}
@media (prefers-reduced-motion: no-preference){
  body::after{ animation:tide 14s ease-in-out infinite; }
  @keyframes tide{ 0%,100%{ opacity:.75 } 50%{ opacity:1.25 } }
}

.monument, .monument--sec{ color:var(--c-bone); }
.eyebrow{ text-shadow:0 0 14px rgba(52,224,206,.22); }

.seam::after{
  background:linear-gradient(90deg, transparent 14%, rgba(52,224,206,.55) 50%, transparent 86%);
  filter:blur(1px);
}
.seam{ box-shadow:0 0 14px rgba(52,224,206,.10); }