.hh-directory-intro {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(230px,1fr);
  gap:3rem;
  padding:2rem;
  background:linear-gradient(125deg,#252030,#181c1b);
  border-color:#50425e;
}
.hh-directory-intro h2 { font-size:clamp(1.6rem,3vw,2.5rem); margin:.7rem 0 1rem; }
.hh-directory-intro p:last-child { color:var(--muted); margin-bottom:0; }
.hh-directory-stats { display:flex; gap:2rem; align-self:center; justify-content:space-around; margin:0; }
.hh-directory-stats>div { display:flex; flex-direction:column-reverse; }
.hh-directory-stats dt { font-size:.8rem; color:var(--muted); }
.hh-directory-stats dd { margin:0; color:var(--lime); font-size:3.5rem; font-weight:750; line-height:1.2; letter-spacing:-.05em; }
.hh-directory-start { display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.3rem; padding:1.5rem 0; border-bottom:1px solid var(--line); }
.hh-directory-start .eyebrow { margin:0; }
.hh-directory-start a { font-size:.85rem; }
.hh-directory-context { font-size:.9rem; }
.hh-filter.hh-filter-types { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto; }
.hh-filter.hh-filter-types #hh-count { grid-column:1/-1; }
.hh-style-index { margin:0 0 2rem; }
.hh-style-index>summary { color:var(--accent); font-size:.9rem; }
.hh-style-index .hh-alphabet { margin:1rem 0; }
.hh-style-grid { align-items:start; }
.hh-style-card { scroll-margin-top:1rem; }
.hh-style-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; justify-content:space-between; }
.hh-style-meta .badge { font-size:.65rem; white-space:normal; }
.hh-style-card h2 { margin:1.2rem 0 1rem; }
.hh-style-card h2:focus { outline:none; }
.hh-style-card h2:focus-visible { outline:2px solid var(--lime); outline-offset:6px; }
.hh-style-origin { font-size:.83rem; color:var(--muted)!important; }
.hh-style-origin strong { display:block; font-size:.7rem; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:.3rem; }
.hh-style-details { border-top:1px solid var(--line); margin-top:1.4rem; }
.hh-style-details>summary { display:flex; align-items:center; justify-content:space-between; gap:1rem; color:var(--lime); padding:1rem 0 .1rem; font-size:.88rem; list-style:none; }
.hh-style-details>summary::-webkit-details-marker { display:none; }
.hh-style-details[open]>summary>span[aria-hidden] { transform:rotate(45deg); }
.hh-style-artists { color:var(--accent); font-size:.95rem; }
.hh-style-listening { border:1px solid #454c35; border-radius:8px; padding:1.2rem; margin:1.5rem 0; background:#1d211b; }
.hh-style-listening .eyebrow { color:var(--lime); font-size:.6rem; }
.hh-style-listening h3 { margin:.7rem 0 .3rem; font-size:1.15rem; }
.hh-style-listening p:not(.eyebrow) { font-size:.9rem; }
.hh-style-listening a { font-size:.87rem; color:var(--lime); }
@media(max-width:1050px) {
  .hh-filter.hh-filter-types { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hh-filter-types #hh-count { grid-column:1/-1; }
}
@media(max-width:760px) {
  .hh-directory-intro { grid-template-columns:1fr; gap:1.5rem; padding:1.5rem; }
  .hh-directory-intro h2 br { display:none; }
  .hh-directory-stats { justify-content:flex-start; gap:3rem; }
  .hh-directory-stats dd { font-size:2.7rem; }
}
@media(max-width:460px) {
  .hh-filter.hh-filter-types { grid-template-columns:1fr; }
  .hh-style-meta { align-items:start; flex-direction:column; }
}
.hh-page {
  --hh-coral:#ffab91;
  padding-bottom:2rem;
}

.hh-page h2,.hh-page h3 {
  line-height:1.2;
  letter-spacing:-.035em;
}

.hh-nav {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  border-bottom:1px solid var(--line);
  padding:0 0 1.4rem;
  margin-bottom:3rem;
}

.hh-nav a {
  padding:.4rem .65rem;
  color:var(--muted);
  text-decoration:none;
  font-size:.82rem;
  border:1px solid transparent;
  border-radius:5px;
}

.hh-nav a:hover {
  color:var(--text);
  background:var(--surface);
}

.hh-nav a[aria-current] {
  color:var(--lime);
  border-color:#4c5634;
  background:#20251a;
}

.hh-hero {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:5rem;
  align-items:center;
  padding:1.5rem 0 4rem;
}

.hh-hero h1 {
  font-size:clamp(2.7rem,5.6vw,5rem);
  line-height:1.04;
  letter-spacing:-.065em;
  margin:1.5rem 0;
}

.hh-hero h1 span {
  color:var(--accent);
}

.hh-hero p:not(.eyebrow) {
  max-width:35rem;
  color:var(--muted);
  font-size:1.1rem;
}

.hh-sleeve {
  aspect-ratio:1;
  background:linear-gradient(145deg,#292336,#18181f 65%);
  border:1px solid #51455d;
  border-radius:5px;
  position:relative;
  padding:1.5rem;
  overflow:hidden;
  box-shadow:12px 12px 0 #18181f;
  transform:rotate(2deg);
}

.hh-sleeve-top,.hh-sleeve-bottom {
  display:flex;
  justify-content:space-between;
  font-size:.65rem;
  letter-spacing:.12em;
  position:relative;
  z-index:1;
}

.hh-sleeve-top {
  color:var(--accent);
}

.hh-sleeve-bottom {
  position:absolute;
  bottom:1.4rem;
  left:1.5rem;
  right:1.5rem;
}

.hh-sleeve-bottom strong {
  font-size:1.2rem;
  line-height:1.1;
  letter-spacing:-.02em;
}

.hh-sleeve-bottom>span {
  color:var(--lime);
  text-align:right;
}

.hh-record {
  width:83%;
  aspect-ratio:1;
  position:absolute;
  top:13%;
  left:22%;
  border-radius:50%;
  background:repeating-radial-gradient(circle,#131317 0 3px,#34303b 4px,#141419 5px 8px);
  border:1px solid #55505e;
  display:grid;
  place-items:center;
  transform:rotate(-16deg);
}

.hh-record-label {
  width:44%;
  aspect-ratio:1;
  background:var(--accent);
  color:#191321;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  text-align:center;
}

.hh-record-label>span {
  font-size:clamp(.8rem,1.4vw,1.3rem);
  font-weight:900;
  line-height:1;
}

.hh-record-label i {
  width:9px;
  height:9px;
  background:#17121c;
  border-radius:50%;
}

.hh-record-label small {
  font-size:.45rem;
  letter-spacing:.08em;
}

.hh-section {
  margin:4rem 0;
}

.hh-section-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:2rem;
  margin-bottom:1.6rem;
}

.hh-section-head h2 {
  font-size:clamp(1.7rem,3vw,2.5rem);
  margin:.5rem 0;
}

.hh-section-head>p {
  max-width:20rem;
  color:var(--muted);
}

.hh-portal-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem;
}

.hh-portal {
  display:flex;
  flex-direction:column;
  padding:1.75rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--text);
  transition:border-color .15s,transform .15s;
}

.hh-portal:hover {
  border-color:var(--accent);
  transform:translateY(-3px);
  color:var(--text);
}

.hh-portal:nth-child(3n+2) {
  background:#201d28;
}

.hh-kicker {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-family:monospace;
  font-size:.75rem;
  color:var(--accent);
  letter-spacing:.07em;
  text-transform:uppercase;
}

.hh-portal h3 {
  font-size:1.5rem;
  margin:2rem 0 .75rem;
}

.hh-portal p {
  color:var(--muted);
  margin:0 0 2rem;
  font-size:.95rem;
}

.hh-portal .text-link {
  margin-top:auto;
  font-size:.9rem;
  color:var(--lime);
}

.hh-start {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:4rem;
  padding:2.5rem;
  background:linear-gradient(110deg,#23202d,#17191b);
}

.hh-start h2 {
  font-size:2.5rem;
  margin:.7rem 0;
}

.hh-start>div>p:last-child {
  color:var(--muted);
}

.hh-start ol {
  list-style:decimal-leading-zero;
  align-self:center;
  padding-left:2.5rem;
}

.hh-start li {
  padding:.8rem 0 .8rem .5rem;
  border-bottom:1px solid var(--line);
}

.hh-start li::marker {
  color:var(--lime);
  font-family:monospace;
}

.hh-start a {
  font-weight:700;
  text-decoration:none;
  color:var(--text);
}

.hh-start li p {
  margin:.35rem 0;
  color:var(--muted);
  font-size:.9rem;
}

.hh-connect {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
}

.hh-connect a {
  text-decoration:none;
  border-top:1px solid var(--line);
  padding-top:1.5rem;
}

.hh-connect span {
  display:block;
  color:var(--muted);
  font-size:.9rem;
}

.hh-editorial {
  border-top:1px solid var(--line);
  margin-top:4rem;
  padding:2rem 0;
  max-width:52rem;
  font-size:.9rem;
  color:var(--muted);
}

.hh-heading {
  margin-bottom:1.5rem;
}

.hh-heading h1 {
  max-width:900px;
  font-size:clamp(2.4rem,5vw,4.5rem);
}

.hh-deck,.hh-context {
  max-width:50rem;
  color:var(--muted);
}

.hh-context {
  margin:1.5rem 0 2.5rem;
}

.hh-intro {
  padding:2rem;
}

.hh-intro>p {
  max-width:48rem;
}

.hh-elements {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin-top:2rem;
}

.hh-elements h3 {
  font-size:1.1rem;
  color:var(--lime);
}

.hh-elements p {
  font-size:.9rem;
  color:var(--muted);
}

.hh-sources {
  list-style:none;
  padding:1rem 0 0;
  margin:1rem 0 0;
  border-top:1px solid var(--line);
  font-size:.78rem;
  line-height:1.5;
}

.hh-sources li+li {
  margin-top:.5rem;
}

.hh-sources a {
  color:var(--muted);
  overflow-wrap:anywhere;
}

.hh-sources a:hover {
  color:var(--accent);
}

.hh-timeline {
  list-style:none;
  padding:0;
  margin:0;
}

.hh-timeline>li {
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:2.5rem;
  position:relative;
  padding:0 0 3rem;
}

.hh-timeline>li:not(:last-child):before {
  content:'';
  position:absolute;
  top:1.2rem;
  bottom:0;
  left:159px;
  border-left:1px solid #4d435f;
}

.hh-era {
  font:600 1rem/1.5 monospace;
  color:var(--lime);
  padding-top:.2rem;
}

.hh-timeline article {
  position:relative;
  max-width:52rem;
}

.hh-timeline article:before {
  content:'';
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--accent);
  position:absolute;
  left:-35px;
  top:.5rem;
}

.hh-timeline h3 {
  margin:0;
  font-size:1.5rem;
}

.hh-anchor {
  color:inherit;
  text-decoration:none;
}

.hh-anchor:hover {
  color:var(--accent);
  text-decoration:underline;
}

.hh-prompt {
  padding:1rem 1.2rem;
  background:#22212a;
  border-left:2px solid var(--accent);
  margin:1.3rem 0;
}

.hh-prompt .eyebrow {
  font-size:.63rem;
}

.hh-prompt p {
  margin:.4rem 0 0;
  font-size:.92rem;
}

.hh-filter {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto;
  gap:.8rem 1rem;
  align-items:end;
  padding:1.25rem;
  margin:2rem 0;
}

.hh-filter label {
  display:block;
  font-size:.8rem;
  font-weight:600;
  margin-bottom:.4rem;
}

.hh-filter input,.hh-filter select {
  width:100%;
}

.hh-filter #hh-count {
  grid-column:1/-1;
  margin:0;
}

.hh-empty {
  padding:2rem;
  margin:1rem 0;
}

.hh-card-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.25rem;
}

.hh-card {
  padding:2rem;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:var(--radius);
  min-width:0;
}

.hh-card h2 {
  font-size:1.7rem;
  margin:.7rem 0 1rem;
}

.hh-card>p:not(.hh-kicker) {
  color:#c4c1cf;
}

.hh-small-heading {
  font-size:.9rem;
  margin:1.4rem 0 .5rem;
}

.hh-cues {
  padding-left:1.25rem;
  color:var(--muted);
  font-size:.9rem;
}

.hh-cues li::marker {
  color:var(--lime);
}

.hh-card .text-link {
  font-size:.9rem;
}

.hh-route-strip {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1rem;
  padding:1rem 0;
  color:var(--lime);
  font: .75rem/1.8 monospace;
  letter-spacing:.07em;
}

.hh-route-strip i {
  color:var(--muted);
}

.hh-scene {
  border-top:3px solid var(--accent);
}

.hh-scene:nth-child(even) {
  border-top-color:var(--lime);
}

.hh-language {
  font-size:.82rem;
  color:var(--muted)!important;
}

.hh-listen-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  padding:2rem;
}

.hh-listen-intro h2 {
  font-size:1.8rem;
  margin:1rem 0;
}

.hh-listen-intro ol {
  padding-left:1.25rem;
  margin:0;
  font-size:.95rem;
}

.hh-listen-intro li+li {
  margin-top:.6rem;
}

.hh-album-top {
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin-bottom:1.5rem;
}

.hh-album-top>div {
  min-width:0;
}

.hh-album-top h2 {
  font-size:1.45rem;
  margin:.45rem 0;
}

.hh-artist {
  margin:0;
  color:var(--muted);
}

.hh-disc-mini {
  display:grid;
  place-items:center;
  flex:0 0 80px;
  width:80px;
  aspect-ratio:1;
  border-radius:50%;
  background:repeating-radial-gradient(#141418 0 3px,#3a3544 4px,#18181f 5px 7px);
  border:1px solid #4f485e;
}

.hh-disc-mini i {
  display:grid;
  place-items:center;
  border-radius:50%;
  font:700 .9rem monospace;
  width:35px;
  height:35px;
  background:var(--accent);
  color:#17121c;
  font-style:normal;
}

.hh-album:nth-child(3n+2) .hh-disc-mini i {
  background:var(--lime);
}

.hh-album:nth-child(3n) .hh-disc-mini i {
  background:var(--hh-coral);
}

.hh-questions {
  margin-top:1.5rem;
  border-top:1px solid var(--line);
}

.hh-questions summary {
  padding:1rem 0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font-size:.9rem;
  color:var(--lime);
  list-style:none;
}

.hh-questions summary::-webkit-details-marker {
  display:none;
}

.hh-questions[open] summary span {
  transform:rotate(45deg);
}

.hh-questions ol {
  padding-left:1.25rem;
  font-size:.93rem;
}

.hh-questions li {
  padding:.35rem 0;
}

.hh-note label {
  display:block;
  font-size:.85rem;
  margin:.75rem 0;
}

.hh-note textarea {
  width:100%;
  resize:vertical;
  min-height:100px;
}

.hh-storage {
  padding:1.25rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1.5rem;
  border-color:#484052;
}

.hh-storage>div:first-child {
  flex:1 1 28rem;
}

.hh-storage p {
  margin:.5rem 0 0;
}

.hh-check {
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.9rem;
  font-weight:600;
}

.hh-check input {
  flex:0 0 18px;
}

.hh-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
}

.hh-reset {
  font-size:.8rem;
  background:none;
  border-color:var(--line);
}

.hh-status {
  flex:0 0 100%;
  font-size:.85rem;
  color:var(--lime);
}

.hh-status:empty {
  display:none;
}

.hh-storage[data-warning] .hh-status {
  color:var(--hh-coral);
}

.hh-practice-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:2rem;
}

.hh-practice-intro p {
  max-width:43rem;
  color:var(--muted);
}

.hh-practice-intro .btn {
  flex-shrink:0;
}

.hh-progress {
  margin:2rem 0;
  display:grid;
  grid-template-columns:1fr auto;
  gap:.5rem 2rem;
}

.hh-progress label {
  font-size:.9rem;
}

.hh-progress progress {
  grid-column:1;
  grid-row:2;
  width:100%;
  height:8px;
  accent-color:var(--lime);
}

.hh-progress a {
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  font-size:.85rem;
}

.hh-rap-layout {
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  gap:2rem;
  margin-top:3rem;
}

.hh-lesson-nav {
  position:sticky;
  top:100px;
  align-self:start;
}

.hh-lesson-nav a {
  display:flex;
  gap:.8rem;
  border-top:1px solid var(--line);
  padding:.8rem 0;
  text-decoration:none;
  color:var(--muted);
  font-size:.85rem;
}

.hh-lesson-nav a:hover {
  color:var(--text);
}

.hh-lesson-nav span {
  color:var(--accent);
  font-family:monospace;
}

.hh-lesson {
  padding:2rem;
  margin-bottom:1.5rem;
}

.hh-lesson h2 {
  font-size:1.7rem;
}

.hh-example {
  padding:1rem 1.3rem;
  border:1px dashed #53505e;
  margin:1rem 0;
}

.hh-example p {
  margin:.6rem 0 0;
  white-space:pre-wrap;
  font-family:monospace;
  color:#d6cafa;
}

.hh-example .eyebrow {
  font-size:.63rem;
}

.hh-term-links {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1rem;
  font-size:.8rem;
}

.hh-complete {
  margin-top:1.3rem;
  padding-top:1rem;
  border-top:1px solid var(--line);
  color:var(--lime);
}

.hh-lesson[data-complete] {
  border-color:#586d3a;
}

.hh-verse {
  padding:2rem;
  margin:3rem 0;
}

.hh-verse label {
  display:block;
  font-size:.9rem;
  font-weight:600;
  margin:1.3rem 0 .5rem;
}

.hh-verse input,.hh-verse textarea {
  width:100%;
}

.hh-verse textarea {
  resize:vertical;
  min-height:220px;
  line-height:1.9;
}

.hh-alphabet {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:2rem 0;
}

.hh-alphabet a {
  background:var(--surface);
  border:1px solid var(--line);
  padding:.3rem .65rem;
  border-radius:4px;
  font-size:.8rem;
  text-decoration:none;
}

.hh-definition {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:2.5rem;
  padding:1.8rem 0;
  border-top:1px solid var(--line);
}

.hh-definition h2 {
  font-size:1.4rem;
  margin:.7rem 0;
}

.hh-definition p {
  margin:.5rem 0;
}

.hh-definition-example {
  color:var(--muted);
  font-size:.9rem;
}

.hh-entry-banner {
  padding:1.5rem 2rem;
  margin:2rem 0;
  border:1px solid #51455d;
  border-radius:12px;
  background:linear-gradient(110deg,#272033,#191b1e);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
}

.hh-entry-banner h2 {
  margin:.3rem 0;
  font-size:1.8rem;
}

.hh-entry-banner p {
  color:var(--muted);
  margin:.5rem 0;
}

.hh-entry-banner .btn {
  flex-shrink:0;
}

@media(max-width:1050px) {
  .hh-hero {
    gap:2.5rem;
  }
  .hh-portal-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .hh-start {
    gap:2rem;
  }
  .hh-filter {
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  }
  .hh-filter .btn {
    justify-self:start;
  }
  .hh-filter #hh-count {
    grid-column:2;
    align-self:center;
  }
  .hh-rap-layout {
    grid-template-columns:190px minmax(0,1fr);
  }
  .hh-practice-intro {
    align-items:start;
    flex-direction:column;
    gap:.5rem;
  }
}

@media(max-width:760px) {
  .hh-nav {
    margin-bottom:2rem;
    gap:.2rem;
  }
  .hh-nav a {
    font-size:.75rem;
    padding:.35rem .5rem;
  }
  .hh-hero {
    grid-template-columns:1fr;
    padding-top:0;
    gap:2rem;
  }
  .hh-sleeve {
    max-width:320px;
    width:90%;
    justify-self:center;
    transform:rotate(1deg);
  }
  .hh-record-label>span {
    font-size:1rem;
  }
  .hh-hero h1 {
    font-size:clamp(2.5rem,9vw,4rem);
  }
  .hh-section-head {
    display:block;
  }
  .hh-section-head>p {
    max-width:none;
  }
  .hh-start {
    grid-template-columns:1fr;
    padding:1.5rem;
    gap:.5rem;
  }
  .hh-start h2 br {
    display:none;
  }
  .hh-start h2 {
    font-size:2rem;
  }
  .hh-start ol {
    padding-left:1.6rem;
  }
  .hh-connect {
    grid-template-columns:1fr;
  }
  .hh-elements {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1rem;
  }
  .hh-timeline>li {
    grid-template-columns:1fr;
    gap:.7rem;
    padding-left:1.3rem;
  }
  .hh-timeline>li:not(:last-child):before {
    left:0;
    top:1rem;
  }
  .hh-timeline article:before {
    left:-1.55rem;
    top:.5rem;
  }
  .hh-card-grid {
    grid-template-columns:1fr;
  }
  .hh-card {
    padding:1.5rem;
  }
  .hh-listen-intro {
    grid-template-columns:1fr;
    gap:.5rem;
    padding:1.5rem;
  }
  .hh-rap-layout {
    grid-template-columns:1fr;
    gap:1rem;
  }
  .hh-lesson-nav {
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 1rem;
  }
  .hh-lesson-nav>p {
    grid-column:1/-1;
  }
  .hh-lesson {
    padding:1.5rem;
  }
  .hh-progress {
    grid-template-columns:1fr;
  }
  .hh-progress a {
    grid-column:1;
    grid-row:3;
  }
  .hh-verse {
    padding:1.5rem;
  }
  .hh-definition {
    grid-template-columns:1fr;
    gap:.25rem;
  }
  .hh-definition .hh-kicker {
    font-size:.65rem;
  }
  .hh-entry-banner {
    align-items:start;
    flex-direction:column;
    gap:.7rem;
    padding:1.5rem;
  }
  .hh-sleeve-bottom strong {
    font-size:1.1rem;
  }
}

@media(max-width:460px) {
  .hh-portal-grid,.hh-elements {
    grid-template-columns:1fr;
  }
  .hh-portal {
    padding:1.4rem;
  }
  .hh-portal h3 {
    margin-top:1.3rem;
  }
  .hh-portal p {
    margin-bottom:1.4rem;
  }
  .hh-filter {
    grid-template-columns:1fr;
    padding:1rem;
  }
  .hh-filter #hh-count {
    grid-column:1;
  }
  .hh-album-top {
    gap:.8rem;
  }
  .hh-disc-mini {
    flex-basis:58px;
    width:58px;
  }
  .hh-disc-mini i {
    width:27px;
    height:27px;
    font-size:.7rem;
  }
  .hh-album-top h2 {
    font-size:1.3rem;
  }
  .hh-kicker {
    font-size:.65rem;
  }
  .hh-lesson-nav {
    grid-template-columns:1fr;
  }
  .hh-intro {
    padding:1.5rem;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hh-portal {
    transition:none;
  }
  .hh-portal:hover {
    transform:none;
  }
}

@media print {
  .hh-nav,.hh-filter,.hh-storage,.hh-alphabet,.hh-lesson-nav {
    display:none;
  }
  .hh-card-grid,.hh-rap-layout {
    display:block;
  }
  .hh-card,.hh-lesson {
    break-inside:avoid;
    margin-bottom:1rem;
  }
  .hh-page [hidden] {
    display:none!important;
  }
}