/* ── SECTION SHELL ── */
.s {
  padding: 64px 20px;
  position: relative;
  z-index: 1;
  transition: var(--theme-t);
}
.s--dark { background: var(--c-bg); }
.s--mid  { background: var(--c-bg2); }

.s__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.s__num {
  font-family: var(--f-mono);
  font-size: calc(10px * var(--fs-mul));
  color: var(--c-red);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.s__label {
  font-family: var(--f-mono);
  font-size: calc(9px * var(--fs-mul));
  letter-spacing: 0.28em;
  color: var(--c-faint);
  text-transform: uppercase;
  flex-shrink: 0;
}
.s__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--c-line2), transparent);
}

.s__title {
  font-family: var(--f-serif);
  font-weight: 700;
  font-size: calc(clamp(26px, 5vw, 46px) * var(--fs-mul));
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 32px;
}
.s__sub {
  font-size: calc(13px * var(--fs-mul));
  color: var(--c-dim);
  margin-top: -22px;
  margin-bottom: 32px;
  line-height: 1.7;
}

/* ── BADGE ── */
.badge {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: calc(9px * var(--fs-mul));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid;
  line-height: 1.4;
}
.badge--red   { color: var(--c-red);   border-color: var(--c-red2);   background: var(--c-red-a); }
.badge--amber { color: var(--c-amber); border-color: var(--c-amber2); background: var(--c-amber-a); }
.badge--black { color: #fff; background: var(--c-red); border-color: var(--c-red); }

/* ── CARD SHELL ── */
.card {
  background: var(--c-bg2);
  border: 1px solid var(--c-line);
  padding: 28px 24px;
  transition: var(--theme-t), border-color 0.25s;
}
.card:hover { border-color: var(--c-line2); }
.card--dark { background: var(--c-bg); }

/* ── INLINE GRID (1→2→3 col) ── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.grid-2 > *, .grid-3 > * {
  background: var(--c-bg);
  transition: var(--theme-t), background 0.25s;
}
.light .grid-2 > *, .light .grid-3 > * {
  background: var(--c-bg2);
}

/* ── HORIZONTAL RULE ── */
.hr { height: 1px; background: var(--c-line); margin: 0; }

/* ── SCROLL-PROGRESS BAR ── */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, var(--c-red), var(--c-amber));
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 8px var(--c-red);
}

/* ── NOISE OVERLAY ── */
.noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 998;
  opacity: 0.015;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── CANVAS ── */
#bgc {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  transition: opacity 0.5s;
}
.light #bgc { opacity: 0.18; }


/* ── LOADER ── */
#loader {
  position: fixed; inset: 0;
  background: var(--c-bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity .5s, visibility .5s;
}
#loader.out { opacity: 0; visibility: hidden; }
#loader-lbl {
  font-family: var(--f-mono);
  font-size: calc(10px * var(--fs-mul));
  letter-spacing: .4em;
  color: var(--c-dim);
}
#loader-track {
  width: 200px;
  height: 2px;
  background: var(--c-bg3);
  border-radius: 1px;
  overflow: hidden;
}
#loader-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--c-red), var(--c-amber));
  transition: width .08s linear;
}
#loader-pct {
  font-family: var(--f-mono);
  font-size: calc(11px * var(--fs-mul));
  color: var(--c-red);
  letter-spacing: .1em;
}