/* 23d Infantry Regiment unit history */
.uh-stage {
  min-height: 60svh;
  max-width: 960px;
  margin: 0 auto;
  background: var(--bg);
  color: var(--text);
  padding: 1.5rem 1.5rem 3rem;
}
.uh-index-head {
  max-width: 960px;
  margin: 0 auto 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.uh-index-head h1 {
  margin: 0 0 0.55rem;
  font-family: "Cinzel", "Times New Roman", serif;
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-align: center;
}
.uh-honors-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; margin: 0.15rem 0; }
.uh-index-head .uh-header-side,
.uh-index-head .uh-honors-patches {
  flex: 0 0 9.5rem;
  width: 9.5rem;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.uh-index-head .uh-header-side img { height: 6.5rem; width: auto; display: block; }
.uh-index-head .uh-honors-patches img.uh-regiment-coa { height: 9.5rem; width: auto; display: block; }
.uh-battalion-pick { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0.28rem; }
.uh-battalion-pick > button:not(.uh-record-scroll) {
  width: min(100%, 18rem);
  height: 1.55rem;
  padding: 0 0.7rem 0 0.4rem;
  border: 0;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%);
  background: #1d4e89;
  color: #e6c200;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
}
.uh-battalion-pick > button.is-on {
  background: #8a6a22;
  color: #fff8e4;
  outline: 1px solid #e6c200;
  outline-offset: 2px;
}
.uh-battalion-pick .uh-record-scroll { align-self: center;
  width: auto; height: auto; margin-top: 0.85rem; padding: 0; border: 0;
  clip-path: none; background: transparent; line-height: 0;
  transition: transform 0.18s ease, filter 0.18s ease; cursor: pointer;
}
.uh-battalion-pick .uh-record-scroll img { width: 13.5rem; height: auto; display: block; }
.uh-battalion-pick .uh-record-scroll:hover,
.uh-battalion-pick .uh-record-scroll:focus-visible {
  transform: scale(1.06); filter: brightness(1.12); outline: none;
}
.uh-credits { max-width: 960px; margin: 2.75rem auto 0; }
.uh-war-block { display: flex; flex-direction: column; gap: 1.85rem; }
.uh-war-block + .uh-war-block { margin-top: 2.75rem; padding-top: 2.25rem; border-top: 1px solid var(--border); }
.uh-section-top {
  display: grid; grid-template-columns: 11rem 1fr 11rem; align-items: start; column-gap: 0.5rem;
}
.uh-section-top h2 { margin: 0; }
.uh-section-dates {
  margin: 0.2rem 0 0; font-family: "Cinzel", "Times New Roman", serif;
  font-size: 1.05rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2;
}
.uh-war-block h2 {
  display: block; margin: 0; font-family: "Lora", Georgia, serif; font-size: 1.5rem;
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); text-align: center;
}
.uh-conflict-unit { margin: 0; text-align: center; }
.uh-conflict-unit p { margin: 0.35rem 0; color: var(--text-muted); font-size: 0.78rem; line-height: 1.45; }
.uh-honors-patches { display: flex; align-items: center; gap: 0.4rem; }
.uh-honors-patches a, .uh-honors-patches span { display: block; line-height: 0; text-decoration: none; }
.uh-section-top .uh-honors-patches { justify-self: end; margin-left: 0; }
.uh-honors-patches img { height: 3.125rem; width: auto; display: block; }
.uh-honors-patches img.uh-branch-device { height: 2.5rem; }
.uh-section-top .uh-honors-patches img { height: calc(3.125rem * 1.25); }
.uh-section-top .uh-honors-patches img.uh-branch-device { height: calc(2.5rem * 1.25); }
.uh-moh-row { display: inline-flex; align-items: center; gap: 0.18rem; flex-wrap: wrap; }
.uh-moh-row a, .uh-unit-award-link { display: block; line-height: 0; text-decoration: none; }
.uh-moh-row img { height: 2.875rem; width: auto; display: block; }
.uh-moh-row img.uh-unit-award, .uh-unit-award { height: 1.725rem; width: auto; }
.uh-moh-row a, .uh-streamer, .uh-honors-patches a, .uh-unit-award-link { transition: transform 0.18s ease, filter 0.18s ease; }
.uh-moh-row a:hover, .uh-streamer:hover, .uh-honors-patches a:hover, .uh-unit-award-link:hover {
  transform: scale(1.1); filter: brightness(1.15); position: relative; z-index: 1; text-decoration: none;
}
.uh-war-cols { display: flex; align-items: flex-start; gap: 0.75rem; width: 100%; margin-top: 0.65rem; flex-wrap: wrap; }
.uh-war-cols ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem;
  flex: 0 0 calc((100% - 0.75rem) / 2); width: calc((100% - 0.75rem) / 2); max-width: 100%;
}
.uh-streamer {
  display: flex; align-items: center; justify-content: center; height: 31px; width: 100%;
  padding: 0 0.7rem 0 0.4rem; border: 0;
  clip-path: polygon(0 0, 100% 0, 96% 50%, 100% 100%, 0 100%);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.68rem; font-weight: 600;
  text-align: center; line-height: 1; white-space: nowrap; text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  color: inherit; text-decoration: none; cursor: pointer; font-family: inherit;
}
.uh-ribbon-civil { background: linear-gradient(to bottom, #1d4e89 50%, #8a8f93 50%); color: #e6c200; }
.uh-ribbon-indian { background: linear-gradient(to bottom, #b01026 0 18%, #111 18% 32%, #b01026 32% 68%, #111 68% 82%, #b01026 82% 100%); color: #e6c200; }
.uh-ribbon-spain { background: linear-gradient(to bottom, #e6c200 0 9%, #1d4e89 9% 36%, #e6c200 36% 64%, #1d4e89 64% 91%, #e6c200 91% 100%); color: #8e1414; text-shadow: none; }
.uh-ribbon-philippine { background: linear-gradient(to bottom, #1d4e89 0 5%, #b01026 5% 27%, #1d4e89 27% 73%, #b01026 73% 95%, #1d4e89 95% 100%); color: #e6c200; }
.uh-ribbon-wwi { background: linear-gradient(to bottom, #5b2c8a 0%, #2471a3 16%, #1e8449 30%, #f4d03f 42%, #c0392b 49%, #7b241c 50%, #c0392b 51%, #f4d03f 58%, #1e8449 70%, #2471a3 84%, #5b2c8a 100%); color: #fff; }
.uh-ribbon-wwii { background: linear-gradient(to bottom, #6b3e26 0 8%, #f4f4f4 8% 12%, #b01026 12% 16%, #2f6b3a 16% 40%, #1d4e89 40% 46%, #f4f4f4 46% 50%, #b01026 50% 54%, #2f6b3a 54% 78%, #f4f4f4 78% 82%, #111 82% 86%, #f4f4f4 86% 90%, #6b3e26 90% 100%); color: #fff; }
.uh-ribbon-korea { background: linear-gradient(to bottom, #f7f7f7 0 10%, #7eb6d6 10% 38%, #f7f7f7 38% 62%, #7eb6d6 62% 90%, #f7f7f7 90% 100%); color: #0c2340; text-shadow: none; }
.uh-ribbon-vietnam { background: linear-gradient(to bottom, #2f6b3a 0 10%, #e6c200 10% 34%, #b01026 34% 39%, #e6c200 39% 45%, #b01026 45% 50%, #e6c200 50% 55%, #b01026 55% 60%, #e6c200 60% 90%, #2f6b3a 90% 100%); color: #1a1a1a; text-shadow: none; }
.uh-ribbon-iraq { background: linear-gradient(to bottom, #b01026 0 9%, #f4f4f4 9% 18%, #1f7a3a 18% 27%, #f4f4f4 27% 36%, #111 36% 45%, #e6c98a 45% 55%, #111 55% 64%, #f4f4f4 64% 73%, #1f7a3a 73% 82%, #f4f4f4 82% 91%, #b01026 91% 100%); color: #111; text-shadow: none; }
.uh-ribbon-afghanistan { background: linear-gradient(to bottom, #046a38 0 5.7%, #b01026 5.7% 19.3%, #111 19.3% 28.4%, #f7f7f7 28.4% 44.3%, #b01026 44.3% 46.6%, #f7f7f7 46.6% 48.9%, #002868 48.9% 51.1%, #f7f7f7 51.1% 53.4%, #b01026 53.4% 55.7%, #f7f7f7 55.7% 71.6%, #111 71.6% 80.7%, #b01026 80.7% 94.3%, #046a38 94.3% 100%); color: #111; text-shadow: none; }
.uh-stage[data-battalion=""] .is-dimmed { opacity: 1; filter: none; }
.uh-stage .is-dimmed { opacity: 0.2; filter: grayscale(1); }
.uh-award-page { max-width: 40rem; margin: 0 auto; }
.uh-award-page .uh-rt-back { display: block; width: fit-content; margin: 1.5rem auto 0; text-decoration: none; }
.uh-war-line, .uh-campaign-name { text-align: center; }
.uh-campaign-name { font-family: "Cinzel", "Times New Roman", serif; font-weight: 600; }
.uh-award-ribbon { display: block; height: 1.725rem; width: auto; margin: 0 auto 2rem; }
.uh-citation { margin: 0 0 1.75rem; }
.uh-citation h2 { margin: 0 0 0.45rem; font-family: "Cinzel", "Times New Roman", serif; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.02em; }
.uh-citation p { margin: 0.3rem 0; color: var(--text-muted); font-size: 0.95rem; }
.uh-order-link { display: block; width: fit-content; margin-top: 0.45rem; color: var(--accent); font-weight: 600; font-size: 0.875rem; text-decoration: none; }
.uh-order-link:hover { text-decoration: underline; }
.uh-missing { text-align: center; color: var(--text-muted); }
.uh-rt-screen { min-height: 60svh; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.25rem 1rem 2rem; }
.uh-rt-stage { display: flex; justify-content: center; width: 100%; max-width: 100%; }
.uh-rt-bound, .uh-rt-bound.is-open { margin-left: auto; margin-right: auto; }
.uh-rt-bound { width: min(380px, 78vw); }
.uh-rt-bound.is-open { width: min(980px, 100%); }
.uh-rt-closed img, .uh-rt-page img { width: 100%; height: auto; display: block; }
.uh-rt-book { display: flex; width: 100%; background: #f8f0e5; box-shadow: 0 16px 28px rgba(0,0,0,0.28); }
.uh-rt-page { width: 50%; }
.uh-rt-page img { height: 100%; object-fit: fill; aspect-ratio: 8 / 10.5; }
.uh-rt-controls { display: flex; align-items: center; gap: 0.9rem; }
.uh-rt-controls button, .uh-rt-back {
  border-radius: 999px; border: 1px solid #6e655a; background: #2a2622; color: #efe8dc;
  cursor: pointer; font-family: "DM Sans", system-ui, sans-serif;
}
.uh-rt-controls button { width: 2.8rem; height: 2.8rem; font-size: 1.3rem; }
.uh-rt-controls button:disabled { opacity: 0.35; cursor: default; }
.uh-rt-where {
  min-width: 14rem; max-width: 18rem; height: 2.4rem; padding: 0 0.6rem; border-radius: 999px;
  border: 1px solid #6e655a; background: #2a2622; color: #efe8dc; text-align: center;
  font-family: "DM Sans", system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.uh-rt-back { margin-top: 0.25rem; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.uh-rt-closed.is-opening { animation: uh-rt-flip 0.7s ease forwards; }
@keyframes uh-rt-flip { to { transform: rotateY(-180deg); } }
@media (max-width: 720px) {
  .uh-section-top { grid-template-columns: 1fr; row-gap: 0.75rem; text-align: center; }
  .uh-section-dates { text-align: center; }
  .uh-section-top .uh-honors-patches { justify-self: center; }
  .uh-index-head .uh-header-side, .uh-index-head .uh-honors-patches { flex: 0 0 auto; width: auto; }
  .uh-honors-row { flex-wrap: wrap; }
  .uh-war-cols ul { flex: 1 1 100%; width: 100%; }
}