/* An open study sheet: letters and comparisons carry the page. */
body { background: #f6f2e9; }
.guide { width: min(1060px, calc(100% - 48px)); max-width: none; padding: 0 0 86px; }
.guide-intro {
  display: block;
  padding: 60px 0 38px;
  border-bottom: 1px solid #d9d9cc;
}
.guide-intro .eyebrow { color: #a87938; letter-spacing: .12em; }
.guide-intro h1 { margin: 15px 0 0; color: #203b31; letter-spacing: .02em; }

.guide-section { padding: 42px 0 56px; scroll-margin-top: 95px; border-bottom-color: #d9d9cc; }
#vowels { padding-bottom: 18px; border-bottom: 0; }
#vowels .table-scroll { margin-bottom: 0; }
#consonants { padding-top: 30px; }
.section-heading { gap: 18px; margin-bottom: 19px; }
.section-heading span { color: #a87938; font-family: Georgia, "Times New Roman", serif; }
.section-heading h2 { color: #203b31; }
.guide-section p { max-width: 880px; color: #52685a; }
.guide-section .sound-note { margin: 13px 0 14px; color: #687a70; }
.guide-section .hint { max-width: 880px; padding: 12px 0 12px 17px; border-left: 2px solid #b8843a; color: #52685a; }

.table-scroll {
  max-width: none;
  margin: 28px 0 17px;
  border: 0;
  border-top: 3px solid #cfd5c8;
  border-bottom: 3px solid #cfd5c8;
  border-radius: 0;
  background: transparent;
}
.guide .letter-table th { background: transparent; color: #647b68; }
.guide .letter-table th,
.guide .letter-table td { border-bottom: 3px solid #d9dfd4; }
.guide .letter-table th:not(:last-child),
.guide .letter-table td:not(:last-child) { border-right: 3px solid #d9dfd4; }
.letter-button {
  min-height: 76px;
  gap: 13px;
  background: transparent;
  color: #203b31;
}
.letter-button:hover,
.letter-button:focus-visible { background: #eeeede; outline: 2px solid #c8d3c5; }
.letter-button[aria-pressed="true"] { background: #e7eee5; }
.letter-button span { width: 23px; height: 23px; border: 1px solid #abc1ae; background: transparent; color: #275844; }
.letter-button[aria-pressed="true"] span { background: #275844; color: #fff; }
.consonant-group { max-width: none; margin: 30px 0 35px; }
#consonants > .section-heading + .consonant-group { margin-top: 12px; }
.consonant-group h3 { margin-bottom: 10px; color: #203b31; }
.consonant-group .table-scroll { margin: 0; }

.rule-list { display: block; margin-top: 24px; counter-reset: reading-rule; }
.rule-list>div {
  display: grid;
  grid-template-columns: 34px 218px minmax(0,1fr);
  gap: 18px;
  align-items: start;
  padding: 19px 0;
  border: 0;
  border-top: 1px solid #d9d9cc;
  border-radius: 0;
  background: transparent;
}
.rule-list>div::before { counter-increment: reading-rule; content: counter(reading-rule, decimal-leading-zero); color: #a87938; font-family: Georgia, "Times New Roman", serif; font-size: 13px; }
.rule-list h3 { margin: 0; color: #203b31; }
.rule-list p { max-width: none; color: #52685a; }
.guide-footer { border-top: 0; color: #6f7f73; }

@media(max-width:760px) {
  .guide { width: calc(100% - 36px); padding-bottom: 58px; }
  .guide-intro { padding: 42px 0 30px; }
  .guide-section { padding: 35px 0 39px; }
  .rule-list>div { grid-template-columns: 34px minmax(0,1fr); gap: 7px 12px; }
  .rule-list p { grid-column: 2; }
}
@media(max-width:650px) {
  .letter-button { min-height: 64px; gap: 6px; }
  .letter-button span { width: 22px; height: 22px; }
}