/* ==========================================================================
   HEAVY METAL — Build with it (Design Completion Campaign, 2026-09-29).
   Mirrored about the mark's axis: near-black, one thin vertical axis
   down the middle, fields paired either side of it as double-ruled panels,
   numerals in the room's display face. Faces are the room's own (Metal Mania
   HM, IM Fell English HM and SC HM, UnifrakturMaguntia HM, declared in
   x-heavy-metal.css). Every class is ghm- or scoped to .gm--heavy-metal.
   Nothing moves.
   ========================================================================== */
.gm--heavy-metal {
  --gm-tag-inverse: var(--gm-color-ground);
  max-width: 1000px; margin: 60px auto 40px; padding: 0 clamp(16px, 4vw, 40px);
  background: var(--gm-color-ground); color: var(--gm-color-mark);
  font: 400 18px/1.65 var(--gm-font);
}
.gm--heavy-metal .gm__head { display: block; text-align: center; margin: 0 auto 36px; max-width: 60ch; }
.gm--heavy-metal .gm__title { font: 400 clamp(36px, 6vw, 60px)/1.05 var(--gm-font-display); margin-bottom: 12px; }
.gm--heavy-metal .gm__lede, .gm--heavy-metal .gm__key, .gm--heavy-metal .gm__get { margin: 0 auto 10px; }
.gm--heavy-metal .gm__key, .gm--heavy-metal .gm__get { opacity: 1; color: var(--gm-color-ash); font-size: 15px; }
.gm--heavy-metal .gm__get a { color: var(--gm-color-mark); text-decoration-color: var(--gm-color-mark-red); }
.gm--heavy-metal .gm-t { font: 400 13px/1.6 var(--gm-font-sc); letter-spacing: .08em; color: var(--gm-color-mark); white-space: normal; max-width: 100%; }
.gm--heavy-metal .gm-t[data-g="record"] { color: var(--gm-color-red-text); }
/* The label may wrap at narrow widths; a filled label then sets every line in the ground colour, not the first alone. */
.gm--heavy-metal .gm-t[data-g="translation"] { background: var(--gm-color-mark); color: var(--gm-color-ground); }
.gm--heavy-metal .gm-more summary { font: 400 15px/1.4 var(--gm-font-sc); letter-spacing: .1em; color: var(--gm-color-ash); }
.gm--heavy-metal .gm-ls li { border-top-color: var(--gm-color-char); text-align: left; }
.gm--heavy-metal .gm-ls__why, .gm--heavy-metal .gm-ls__from { opacity: 1; color: var(--gm-color-ash); }
.gm--heavy-metal .gm-gap { opacity: 1; color: var(--gm-color-ash); border-color: var(--gm-color-char); }
.gm--heavy-metal :focus-visible { outline: 2px solid var(--gm-color-mark); outline-offset: 4px; }

/* ---- the axis -------------------------------------------------------- */
.ghm-axisboard { position: relative; display: grid; gap: 28px; }
.ghm-axisboard::before { content: ""; position: absolute; left: calc(50% - 0.5px); top: -24px; bottom: 0; width: var(--gm-rule); background: var(--gm-color-char); }
.ghm-axisboard::after { content: ""; position: absolute; left: calc(50% - 7px); top: -30px; width: 14px; height: 14px; background: var(--gm-color-mark); transform: rotate(45deg); }
.ghm-pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 56px; }
.ghm-f { position: relative; min-width: 0; padding: clamp(18px, 3vw, 28px); background: var(--gm-color-ground); border: var(--gm-rule) solid var(--gm-color-char); outline: var(--gm-rule) solid var(--gm-color-char); outline-offset: var(--gm-panel-offset); text-align: center; }
.ghm-f .gm-f__head { justify-content: center; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 14px; }
.ghm-f .gm-f__n { font: 400 20px/1 var(--gm-font-display); color: var(--gm-color-red-text); }
.ghm-f .gm-f__name { font: 400 clamp(26px, 3vw, 34px)/1.1 var(--gm-font-display); }
.ghm-f .gm-f__note { margin-inline: auto; color: var(--gm-color-ash); opacity: 1; font-style: italic; }
.ghm-cap { margin: 12px auto 0; max-width: 40ch; font-size: 16px; font-style: italic; color: var(--gm-color-ash); }

/* I colour: shields */
.ghm-sws { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: 13px; }
.ghm-sws li { display: grid; justify-items: center; gap: 2px; }
.ghm-sws i { display: block; width: 50px; height: 64px; border: var(--gm-rule) solid #6E727C; clip-path: polygon(50% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); }
.ghm-sws code { font: 12px/1.2 var(--gm-font); color: var(--gm-color-ash); }

/* II type */
.ghm-disp { margin: 0; font: 400 clamp(26px, 3vw, 32px)/1.1 var(--gm-font-display); }
.ghm-body { margin: 10px auto 0; max-width: 36ch; }
.ghm-sc { margin: 8px 0 0; font: 400 15px var(--gm-font-sc); letter-spacing: .14em; color: var(--gm-color-ash); }

/* III layout, IV shape */
.ghm-axis { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto; }
.ghm-thorn { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 16px; color: #6E727C; fill: #6E727C; }
.ghm-thorn__d { fill: var(--gm-color-mark-red); }
.ghm-panel { padding: 16px; border: var(--gm-rule) solid var(--gm-color-char); outline: var(--gm-rule) solid var(--gm-color-char); outline-offset: 4px; margin: 6px; font-family: var(--gm-font-sc); letter-spacing: .08em; }

/* V imagery */
.ghm-field { height: 90px; border: var(--gm-rule) solid var(--gm-color-char); background: repeating-linear-gradient(45deg, rgb(26 26 31) 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, rgb(26 26 31) 0 1px, transparent 1px 7px); }
.ghm-f--img .gm-gap { max-width: 56ch; margin-inline: auto; }

/* VI components */
.ghm-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 20px; }
.ghm-nav a { display: inline-flex; align-items: center; min-height: 44px; font: 400 17px var(--gm-font-sc); letter-spacing: .14em; color: var(--gm-color-mark); text-decoration: none; }
.ghm-nav a:hover { text-decoration: underline; text-decoration-color: var(--gm-color-mark-red); text-underline-offset: 5px; }
.ghm-nav a[aria-current] { color: var(--gm-color-red-text); text-decoration: underline; text-underline-offset: 5px; }
.ghm-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; text-align: center; }
.ghm-card { display: grid; gap: 4px; padding: 20px; border: var(--gm-rule) solid var(--gm-color-char); outline: var(--gm-rule) solid rgb(26 26 31); outline-offset: var(--gm-panel-offset); color: var(--gm-color-mark); text-decoration: none; }
.ghm-card:hover { background: rgb(21 21 26); }
.ghm-card b { font: 400 26px/1.1 var(--gm-font-display); }
.ghm-form { display: grid; gap: 6px; justify-items: center; }
.ghm-form label { font: 400 15px var(--gm-font-sc); letter-spacing: .12em; color: var(--gm-color-ash); }
.ghm-form input { width: 100%; height: 3rem; padding: 0 10px; border: 0; border-bottom: var(--gm-rule) solid var(--gm-color-mark); border-radius: 0; background: var(--gm-color-ground); color: var(--gm-color-mark); text-align: center; }
.ghm-form input:focus-visible { border-bottom-width: var(--gm-rule-heavy); }
.ghm-btn { min-height: 44px; margin-top: 8px; padding: 0 22px; border: 0; border-radius: 0; background: var(--gm-color-mark-red); color: var(--gm-color-mark); font: 400 22px var(--gm-font-display); cursor: pointer; transition: none; }
.ghm-btn:hover { background: rgb(141 26 42); color: #fff; }

/* VII motion, VIII sub-genre */
.ghm-still { margin: 0; font: 400 26px/1.2 var(--gm-font-display); }
.ghm-sub { display: grid; gap: 14px; }
.ghm-sub figure { margin: 0; }
.ghm-sub p { margin: 0 0 4px; }
.ghm-sub p:empty { display: none; }
.ghm-sub__bm { font: 400 34px/1 "UnifrakturMaguntia HM", var(--gm-font); color: #fff; }
.ghm-sub__dm { font: 400 34px/1 var(--gm-font-display); color: var(--gm-color-red-text); }
.ghm-sub figcaption { font-size: 16px; color: var(--gm-color-ash); }

@media (max-width: 760px) {
  .ghm-pair, .ghm-ui { grid-template-columns: minmax(0, 1fr); }
  .ghm-axisboard::before, .ghm-axisboard::after { display: none; }
}
@media (max-width: 480px) {
  .gm--heavy-metal .gm-ls li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .ghm-f { outline-offset: 3px; }
}