body.theme-breach{
  --void:#0A0708;
  --slab:#161010;
  --rule:#2C1F1E;
  --fog:#9C8A87;
  --bone:#F2EAE8;
  --hazard:#FF4A3D;
  --chrome:rgba(10,7,8,.84);

  --ember:#FF8348;
  --glass:rgba(28,18,18,.62);

  background:
    radial-gradient(1100px 620px at 76% -12%, rgba(255,74,61,.16) 0%, transparent 62%),
    radial-gradient(760px 460px at 4% 8%, rgba(255,131,72,.09) 0%, transparent 58%),
    #0A0708;
  background-attachment:fixed;
}

.theme-breach .top{border-bottom:1px solid var(--rule)}
.theme-breach .hazard-rule{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--hazard) 18%,var(--hazard) 82%,transparent);
  opacity:.65;
}

/* small text stays sentence case, never uppercase mono */
.theme-breach .top nav a,
.theme-breach .label,
.theme-breach footer,
.theme-breach footer nav a{
  font-family:var(--body);
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
}
.theme-breach .label{font-size:15px}

/* ---------- panels ---------- */
.slab{
  background:var(--glass);
  border:1px solid var(--rule);
  border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 44px rgba(0,0,0,.5);
  backdrop-filter:blur(16px);
  padding:clamp(22px,3vw,32px);
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 13px;
  border-radius:0;
  background:rgba(255,74,61,.09);
  border:1px solid rgba(255,74,61,.34);
  color:#FFB5AD;
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
}
.tag.plain{background:rgba(255,255,255,.04);border-color:var(--rule);color:var(--fog)}

.btn{
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:15px 28px;
  border-radius:0;
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
  font-size:15.5px;
  font-weight:500;
  color:#120706;
  background:linear-gradient(180deg,#FF6A5A,#E5372A);
  box-shadow:0 10px 26px rgba(255,74,61,.28),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(255,74,61,.36),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.ghost{
  background:transparent;
  color:var(--bone);
  border:1px solid var(--rule);
  box-shadow:none;
}
.btn.ghost:hover{border-color:var(--hazard);color:var(--hazard);box-shadow:none}

/* ---------- hero ---------- */
.b-hero{padding:calc(var(--bar) + 22px) 0 0}
.banner{display:block;position:relative;width:100%}
.banner img{width:100%;height:auto;display:block}
.banner::after{
  content:"";
  position:absolute;
  inset:auto 0 -1px 0;
  height:42%;
  background:linear-gradient(180deg,transparent,#0A0708);
  pointer-events:none;
}
.b-panel{
  margin:-84px var(--gutter) 0;
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:26px;
}
.b-panel .lead{max-width:48ch}
.b-tag{font-size:clamp(17px,1.8vw,22px);color:var(--bone);line-height:1.45}
.b-tag b{font-weight:500;color:#fff}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}

.theme-breach .section-head h2{
  font-family:var(--body);
  font-weight:500;
  font-size:clamp(24px,3vw,36px);
  letter-spacing:-.022em;
  text-transform:none;
  color:var(--bone);
  line-height:1.1;
}

/* ---------- frames ---------- */
.theme-breach .frame{
  border-radius:2px;
  border:1px solid var(--rule);
  background:#120D0D;
  box-shadow:0 16px 40px rgba(0,0,0,.55);
}
.theme-breach .sheen{background:linear-gradient(105deg,transparent 36%,rgba(255,138,120,.16) 50%,transparent 64%);opacity:.9}
.scan{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 2px,transparent 2px 4px);
  opacity:.42;
  transition:opacity .3s ease;
}
.tilt:hover .scan{opacity:.12}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px}
.cell .frame{aspect-ratio:16/9}
.cell .cap{display:flex;align-items:baseline;gap:10px;margin-top:13px;font-size:15px;color:var(--bone)}
.cell .cap span{color:var(--fog);font-size:13px}
.cell .frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,74,61,0);
  transition:box-shadow .3s ease;
}
.tilt:hover .frame::after{box-shadow:inset 0 0 0 1px rgba(255,74,61,.4)}

.clip .frame{aspect-ratio:16/9;background:#0E0A0A}
.clip .hint{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:4;
  padding:5px 12px;
  border-radius:0;
  background:rgba(10,7,8,.72);
  border:1px solid var(--rule);
  color:var(--fog);
  font-size:12px;
  backdrop-filter:blur(6px);
  transition:opacity .25s ease;
}
.tilt:hover .hint{opacity:0}

/* ---------- rewind ---------- */
.rewind{
  display:grid;
  grid-template-columns:minmax(0,240px) minmax(0,1fr);
  gap:clamp(20px,3vw,36px);
  align-items:center;
}
.rewind .art{
  border-radius:2px;
  overflow:hidden;
  border:1px solid var(--rule);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
}
.rewind .art img{width:100%;height:auto;display:block}
.rewind h3{
  font-size:clamp(21px,2.4vw,28px);
  font-weight:500;
  letter-spacing:-.02em;
  color:var(--bone);
  margin-bottom:10px;
}
.rewind p{color:var(--fog);max-width:52ch}
.rewind .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;align-items:center}

/* ---------- join ---------- */
.join{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.join h2{font-size:clamp(23px,3vw,33px);font-weight:500;letter-spacing:-.022em;color:var(--bone);line-height:1.15}
.join p{margin-top:9px;color:var(--fog);max-width:46ch}
.join .actions{display:flex;flex-wrap:wrap;gap:12px}

.back-hub{
  display:inline-flex;
  gap:10px;
  margin-top:26px;
  font-size:15px;
  font-weight:500;
  color:var(--fog);
  transition:gap .22s ease,color .22s ease;
}
.back-hub:hover{gap:17px;color:var(--hazard)}

@media (max-width:880px){
  .b-panel{margin-top:-40px;flex-direction:column;align-items:flex-start}
  .rewind{grid-template-columns:1fr}
  .rewind .art{max-width:260px}
  .join{flex-direction:column;align-items:flex-start}
}

.buys{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.alt{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  color:var(--fog);
  border-bottom:1px solid var(--rule);
  padding-bottom:3px;
  transition:color .22s ease,border-color .22s ease,gap .22s ease;
}
.alt:hover{color:var(--hazard);border-color:var(--hazard);gap:14px}