/* C.H.I. story & award draft. Does not restyle homepage, hubs, or unit pages. */
body.hp--inner .hp-banner-inner--page { display: none; }

.chi-story-page {
  padding: 1.1rem 1.15rem 2.6rem;
  color: #243044;
  max-width: 100%;
}

.chi-crumbs {
  font-size: .92rem;
  color: #4a5b6b;
  margin: 0 0 .7rem;
}
.chi-crumbs a { color: #1a5c36; text-decoration: none; font-weight: 700; }
.chi-crumbs a:hover { text-decoration: underline; }
.chi-crumbs span { margin: 0 .35rem; color: #7a8794; }

.chi-draft-note {
  margin: 0 0 1rem;
  padding: .7rem .85rem;
  background: #fff8d6;
  border: 1px solid #e6d27a;
  border-radius: 10px;
  color: #5c4a2a;
  font-size: .92rem;
  line-height: 1.4;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.chi-draft-note--quiet {
  display: inline-block;
  margin: 0 0 .7rem;
  padding: .25rem .55rem;
  font-size: .78rem;
  color: #6a5a3a;
  background: #f7f1dc;
  border: 1px solid #ead9a0;
}

.chi-intro { margin: 0 0 1rem; max-width: 44rem; }
.chi-kicker {
  margin: 0 0 .2rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #2a5f9a;
}
.chi-intro h1 {
  margin: 0 0 .4rem;
  color: #1a5c36;
  font-size: clamp(1.7rem, 3cqi, 2.25rem);
}
.chi-lede {
  margin: 0;
  color: #3a4a58;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.chi-defs {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.chi-defs li {
  margin: 0;
  padding: .7rem .8rem;
  background: #fff;
  border: 1px solid #d9e3f0;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(20, 40, 70, .05);
}
.chi-defs strong {
  display: block;
  color: #16324f;
  font-size: 1.02rem;
  margin-bottom: .25rem;
}
.chi-defs span {
  display: block;
  color: #4a5b6b;
  font-size: .9rem;
  line-height: 1.4;
}

.chi-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1.25rem;
}
.chi-jumps a {
  display: inline-flex;
  align-items: center;
  padding: .38rem .75rem;
  border: 1px solid #1a5c36;
  border-radius: 999px;
  color: #1a5c36;
  text-decoration: none;
  font-weight: 800;
  font-size: .86rem;
  background: #fff;
}
.chi-jumps a:hover,
.chi-jumps a:focus {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.chi-section {
  display: grid;
  gap: .9rem 1.1rem;
  align-items: start;
  margin: 0 0 1.5rem;
  padding: 1rem 1rem 1.1rem;
  background: #fff;
  border: 1px solid #d9e3f0;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(20, 40, 70, .05);
}
.chi-section--pair,
.chi-section--aside {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .95fr);
}
.chi-section--text { grid-template-columns: minmax(0, 1fr); }
.chi-section--award {
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.15fr);
}
.chi-section--below {
  grid-template-columns: minmax(0, 1fr);
}
.chi-section--below .chi-media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.chi-section--below .chi-media .chi-fig:only-child {
  max-width: 22rem;
}
.chi-section--below .chi-enlarge img {
  max-height: 15.5rem;
}
.chi-copy h2 {
  margin: 0 0 .45rem;
  color: #1a5c36;
  font-size: clamp(1.25rem, 2.2cqi, 1.55rem);
}
.chi-copy p {
  margin: 0 0 .7rem;
  color: #3a4a58;
  line-height: 1.5;
  overflow-wrap: break-word;
}
.chi-copy p:last-child { margin-bottom: 0; }
.chi-pending {
  margin-top: .55rem !important;
  padding: .65rem .75rem;
  background: #fff8d6;
  border: 1px dashed #d4b84a;
  border-radius: 10px;
  color: #5c4a2a;
  font-size: .9rem;
}

.chi-media {
  display: grid;
  gap: .7rem;
  min-width: 0;
}
.chi-fig {
  margin: 0;
  min-width: 0;
}
.chi-enlarge {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid #d5dde6;
  border-radius: 12px;
  background: #f4f7fa;
  cursor: pointer;
  overflow: hidden;
  font: inherit;
  color: inherit;
}
.chi-enlarge img {
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: contain;
  object-position: center;
  background: #eef2f6;
}
.chi-fig--plaque .chi-enlarge img {
  max-height: 38rem;
  background: #111;
}
.chi-enlarge-hint {
  position: absolute;
  right: .45rem;
  bottom: .45rem;
  background: rgba(16, 36, 28, .82);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .22rem .5rem;
  border-radius: 999px;
}
.chi-enlarge:hover,
.chi-enlarge:focus {
  outline: 3px solid #1a5c36;
  outline-offset: 2px;
}
.chi-fig figcaption {
  margin: .4rem .15rem 0;
  color: #4a5b6b;
  font-size: .86rem;
  line-height: 1.35;
  font-weight: 700;
}

.chi-gallery { margin: 0 0 1.5rem; }
.chi-gallery h2 {
  margin: 0 0 .35rem;
  color: #1a5c36;
  font-size: 1.25rem;
}
.chi-gallery-note {
  margin: 0 0 .75rem;
  color: #4a5b6b;
  max-width: 44rem;
}
.chi-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}
.chi-gallery-grid .chi-enlarge img { max-height: 11.5rem; }

.chi-legacy {
  padding: 1rem 1rem 1.1rem;
  background: #f3f7fc;
  border: 1px solid #d9e3f0;
  border-radius: 16px;
}
.chi-legacy h2 {
  margin: 0 0 .35rem;
  color: #16324f;
  font-size: 1.2rem;
}
.chi-legacy > p {
  margin: 0 0 .7rem;
  color: #4a5b6b;
}
.chi-legacy ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.chi-legacy li {
  margin: 0;
  padding: .65rem .75rem;
  background: #fff;
  border: 1px solid #d9e3f0;
  border-radius: 10px;
}
.chi-legacy a { color: #1a5c36; font-weight: 800; text-decoration: none; }
.chi-legacy a:hover { text-decoration: underline; }
.chi-legacy span {
  display: block;
  margin-top: .2rem;
  color: #4a5b6b;
  font-size: .88rem;
  line-height: 1.35;
}
.chi-legacy-more { margin: .85rem 0 0 !important; font-weight: 700; }

.chi-lb {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 16, 22, .84);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
}
.chi-lb[hidden] { display: none; }
.chi-lb img {
  max-width: min(94vw, 1100px);
  max-height: 88vh;
  object-fit: contain;
  background: #111;
  border-radius: 8px;
}
.chi-lb-cap {
  margin: .7rem 0 0;
  color: #f2f4f0;
  font-weight: 700;
  text-align: center;
  max-width: 44rem;
}
.chi-lb-close {
  position: absolute;
  top: .8rem;
  right: .8rem;
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: .4rem .7rem;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.chi-lb-close:focus { outline: 3px solid #8fbc4a; outline-offset: 2px; }

@media (max-width: 860px) {
  .chi-defs { grid-template-columns: 1fr; }
  .chi-section--pair,
  .chi-section--aside,
  .chi-section--award { grid-template-columns: minmax(0, 1fr); }
  .chi-section--below .chi-media { grid-template-columns: minmax(0, 1fr); }
  .chi-section--below .chi-media .chi-fig:only-child { max-width: none; }
  .chi-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chi-legacy ul { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .chi-story-page { padding: .9rem .75rem 2rem; }
  .chi-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .chi-enlarge img { max-height: none; }
  .chi-jumps a { width: 100%; justify-content: center; }
}
