.oto-guide {
  --oto-ink: #1a1c21;
  --oto-paper: #fff;
  --oto-accent: #fbc904;
  background: var(--oto-paper);
  color: var(--oto-ink);
}

.oto-guide .oto-hero {
  color: #fff;
  background: #17191d;
}

.oto-guide .oto-hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.oto-guide .oto-reading { max-width: 920px; }
.oto-guide .oto-article { padding-block: clamp(2rem, 6vw, 4.5rem); }
.oto-guide article section { margin-block: 2rem; }
.oto-guide .oto-local { background: #f2f3f5; }
.oto-guide h2 { line-height: 1.25; }
.oto-guide :is(nav, article, .oto-accordion, .oto-references) a { text-decoration: underline; }

.oto-accordion {
  display: grid;
  gap: .65rem;
  margin-block: 1.5rem 2rem;
}

.oto-accordion details {
  background: #fafafb;
  border: 1px solid #dedfe4;
  border-radius: .75rem;
}

.oto-accordion summary {
  padding: 1rem;
  cursor: pointer;
  font-weight: 800;
}

.oto-accordion details[open] summary {
  background: #fff2bc;
  border-radius: .75rem .75rem 0 0;
}

.oto-accordion p,
.oto-table { margin: 0; padding: 1rem; }

.oto-table { overflow-x: auto; }
.oto-table table { width: 100%; border-collapse: collapse; }
.oto-table caption { text-align: left; font-weight: 800; padding-bottom: .5rem; }
.oto-table :is(th, td) { border-bottom: 1px solid #dadbe0; padding: .5rem; text-align: left; }

.oto-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.oto-guide .oto-cards a {
  display: grid;
  gap: .6rem;
  padding: 1.2rem;
  background: #fff;
  color: var(--oto-ink);
  border: 1px solid #dedfe4;
  border-top: 4px solid var(--oto-accent);
  border-radius: .75rem;
}

.oto-cards strong { font-size: 1.15rem; }
.oto-cards b { align-self: end; text-decoration: underline; }
.oto-guide :is(a, summary):focus-visible { outline: 3px solid #a27400; outline-offset: 3px; }