.region-guide { background: #e7e6dc; }
.region-guide h2 { margin: 1.25rem 0; }
.region-intro, .region-note { max-width: 65ch; }
.region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  align-items: start;
  gap: 1rem;
  margin-block: 1rem 1.8rem;
}
.region-card { min-width: 0; background: var(--paper); border: 1px solid var(--line); }
.region-feature { margin-top: 1.8rem; }
.region-card summary { cursor: pointer; display: block; list-style: none; }
.region-card summary::-webkit-details-marker { display: none; }
.region-card summary:focus-visible { outline: 3px solid #356448; outline-offset: 3px; }
.region-photo { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #c7c8b9; }
.region-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.region-feature .region-photo { aspect-ratio: 2.3 / 1; }
.region-photo-label { position: absolute; bottom: .6rem; left: .6rem; background: #20372e; color: white; padding: .3rem .65rem; font-size: .8rem; }
.region-card-copy, .region-steps { padding: clamp(1.2rem, 3vw, 2rem); }
.region-card h3 { font-size: 1.45rem; line-height: 1.25; margin: .55rem 0 .8rem; }
.region-guide p, .region-steps dd { font-size: 1rem; line-height: 1.65; }
.region-guide .region-tag, .region-guide .region-note { font-size: .9rem; color: #4b5b52; }
.region-action { display: inline-block; margin-top: .8rem; color: #254536; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.region-close, .region-card details[open] .region-open { display: none; }
.region-card details[open] .region-close { display: inline; }
.region-steps { display: grid; gap: 1rem; margin: 0; border-top: 1px solid var(--line); }
.region-steps div { padding-inline-start: 1rem; border-inline-start: 2px solid #778e73; }
.region-steps dt { font-weight: 700; }
.region-steps dd { margin: .3rem 0 0; }
.region-credits { margin-top: 1rem; font-size: .875rem; }
.region-credits summary { cursor: pointer; }
@media (max-width: 580px) {
  .region-feature .region-photo { aspect-ratio: 16 / 9; }
}