/* The banner's charcoal and red palette, adapted for legible long-form reading. */
:root {
  --paper: #f6f4f2;
  --ink: #202125;
  --muted: #66676d;
  --line: #dedbdd;
  --forest: #191c22;
  --orange: #bb2032;
  --white: #fffefd;
}

.site-header { background: rgba(246, 244, 242, .96); backdrop-filter: blur(12px); }
.nav-wrap nav a.active, .nav-wrap nav a:hover, .language:hover,
.button-quiet:hover, .text-link:hover, .card-body h3 a:hover { color: #b71e31; }
.button:hover { background: #a71b2c; }
.kicker, .eyebrow { color: #aa2232; }
.eyebrow { letter-spacing: .12em; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 1280px;
  min-height: 570px;
  margin: 22px auto 0;
  padding: 70px 67px;
  background:
    radial-gradient(circle at 83% 46%, rgba(189, 23, 42, .24), transparent 30%),
    linear-gradient(125deg, #101216 1%, #16171b 56%, #261116 100%);
  border: 1px solid #2c282b;
  border-radius: 5px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .28;
  background:
    linear-gradient(90deg, transparent 0 49.8%, #8d2936 50%, transparent 50.2%) 0 0 / 110px 110px,
    linear-gradient(0deg, transparent 0 49.8%, #8d2936 50%, transparent 50.2%) 0 0 / 110px 110px;
  mask-image: linear-gradient(90deg, transparent 28%, black 100%);
}
.hero::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -42px;
  width: 53%;
  height: 60%;
  border-top: 1px solid rgba(229, 38, 57, .34);
  border-left: 1px solid rgba(229, 38, 57, .24);
  transform: skew(-37deg);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { color: #f7f5f5; font-size: clamp(54px, 6.4vw, 98px); }
.hero .hero-lead { color: #c9c6c8; }
.hero .kicker { color: #f45c68; }
.hero .hairline { background: #e9364d; }
.hero .button { background: #c81d34; }
.hero .button:hover { background: #a8162a; }
.hero .button-quiet { color: #f5ecee; border-bottom-color: #765b61; }
.hero .button-quiet:hover { color: #ff7480; }
.hero-side { border-left-color: #484044; }
.hero-index { color: #b4aeb2; }
.hero-side p { color: #aaa8ac; }
.orb {
  width: 252px;
  height: 252px;
  border: 1px solid #8d2837;
  background: radial-gradient(circle at 50% 55%, #7b0e20 0%, #37131d 40%, #19171b 67%);
  box-shadow: inset 0 0 0 15px #18191d, 0 0 80px rgba(205, 14, 42, .25);
  transform: rotate(-8deg);
}
.orb span {
  color: #e42b42;
  font-size: 91px;
  line-height: 1;
  letter-spacing: -.12em;
  text-shadow: 0 0 28px rgba(245, 30, 53, .45);
  padding-right: 13px;
}

.article-card { border-color: #e5e1e2; }
.article-card:hover { box-shadow: 0 16px 32px rgba(25, 20, 26, .09); }
.card-visual { background: #181a1f; }
.card-visual img { display: block; }
.card-visual img[src$=".svg"] { object-fit: contain; }
.home-about { background: #ede4e5; border-top: 3px solid #b82033; }
.home-about p:not(.kicker) { color: #55565b; }
.about-links { display: flex; align-items: center; flex-wrap: wrap; gap: 13px 28px; }
.about-hero h1 em { color: #aa2334; }
.expertise { border-top-color: #26252a; }
.article-body a { color: #a61c2f; }
.article-body pre, .article-body .video iframe { background: #17191e; }
.article-body code { background: #ebe6e7; }
.editorial { background: #f0e7e8; border-color: #b53142; }
.archive-note { background: #eeeae6; border-color: #b9a09d; }
.site-footer { background: #17191e; color: #d3d1d2; }

a:focus-visible, button:focus-visible { outline: 3px solid #e33b51; outline-offset: 3px; }

@media (max-width: 900px) {
  .hero { padding: 65px 40px; min-height: 0; }
}
@media (max-width: 650px) {
  .hero { margin: 0; border-radius: 0; padding: 62px 20px 68px; }
  .hero h1 { font-size: clamp(46px, 12vw, 68px); }
  .home-about { padding: 26px; }
}