/* Layout: the page's paper, columns and reading order. */
* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; }
svg { display: block; max-width: 100%; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
[class$="-header"], [class$="-main"], [class$="-footer"] {
  width: min(100%, 1280px);
  margin-inline: auto;
  padding-inline: 1.5rem;
}
[class$="-header"] {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px 24px;
  padding-block: 24px;
  position: relative;
  z-index: 10;
}
[class$="-masthead"] { display: flex; flex-direction: column; justify-content: center; min-height: 64px; width: fit-content; }
[class$="-site-role"] { margin: 0; max-width: 26ch; }
[class$="-tools"] { display: flex; flex-wrap: wrap; gap: 8px; grid-column: 1 / -1; align-items: center; position: relative; }
[class$="-navigation"] { position: relative; flex: 1 1 160px; }
[class$="-chapter-index"] summary { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; gap: 16px; cursor: pointer; }
[class$="-chapter-index"] summary::-webkit-details-marker { display: none; }
[class$="-index-sheet"] { padding: 24px 16px; display: grid; gap: 24px; }
[class$="-index-group"] ul { margin: 8px 0 0; padding: 0; list-style: none; }
[class$="-index-group"] h2 { margin: 0; }
[class$="-index-item"] a { display: flex; align-items: center; min-height: 48px; padding: 8px; }
[class$="-language-button"] { min-height: 48px; padding: 10px 16px; cursor: pointer; flex: 0 1 auto; }
[class$="-skip"] { position: fixed; z-index: 30; left: 24px; top: 8px; min-height: 48px; padding: 12px 16px; transform: translateY(-160%); }
[class$="-skip"]:focus { transform: translateY(0); }
[class$="-main"] { padding-bottom: 64px; }
[class$="-hero"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 24px; margin-top: 8px; position: relative; }
[class$="-hero-copy"] { min-width: 0; }
[class$="-hero-copy"] h1 { margin: 8px 0 24px; }
[class$="-hero-deck"] { margin: 0 0 24px; }
[class$="-definition"] { max-width: 58ch; }
[class$="-definition"] p { margin: 0; }
[data-care-terms] { display: none; }
html[data-reading="terms"] [data-plain] { display: none; }
html[data-reading="terms"] [data-care-terms] { display: block; }
[class$="-button"] { display: inline-flex; gap: 16px; align-items: center; min-height: 52px; margin-top: 24px; padding: 12px 16px; max-width: 100%; }
[class$="-hero-art"] { position: relative; min-width: 0; margin: 16px 0 8px; padding: 16px; justify-self: center; width: min(100%, 344px); }
[class$="-line-art"] { width: 100%; height: auto; }
[class$="-hero-art"] figcaption { margin: 8px 12px 16px; }
[class$="-paper-tape"] { position: absolute; width: 104px; height: 28px; left: calc(50% - 52px); top: -12px; }
[class$="-routes"], [class$="-reading-grid"], [class$="-sources-box"], [class$="-pager"] { margin-top: clamp(4rem, 8vw, 8rem); }
[class$="-routes"] > h2 { margin: 8px 0 32px; }
[class$="-word-grid"] { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
[class*="-word-card-"] { position: relative; display: block; padding: 24px; min-height: 224px; }
[class*="-word-card-"] h3 { margin: 16px 0; }
[class*="-word-card-"] p { margin: 0; max-width: 42ch; }
[class$="-card-arrow"] { display: block; margin: 24px 0 0; }
[class$="-reading-grid"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; }
[class$="-answers"] { min-width: 0; max-width: 72ch; }
[class$="-question"] + [class$="-question"] { margin-top: clamp(4rem, 8vw, 8rem); }
[class$="-question"] h2 { margin: 0 0 24px; }
[class$="-question"] p { margin: 0 0 16px; }
[class$="-ask-note"] { padding: 24px; margin: 0 8px; }
[class$="-ask-note"] h2 { margin: 16px 0 32px; }
[class$="-note-rule"] { display: block; width: 80%; height: 24px; }
[class$="-sources-box"] { padding: 24px; max-width: 88ch; }
[class$="-sources-box"] h2 { margin: 8px 0 24px; }
[class$="-sources-box"] ul { margin: 8px 0 0; padding: 0; list-style: none; }
[class$="-sources-box"] a { display: flex; align-items: center; min-height: 48px; gap: 8px; padding: 10px 0; width: fit-content; max-width: 100%; }
[class$="-sources-box"] a span { flex: 0 0 auto; }
[class$="-pager"] { display: grid; gap: 16px; }
[class$="-pager"] a { display: flex; flex-direction: column; gap: 8px; min-height: 104px; padding: 24px; }
[class$="-footer"] { padding-block: 32px; }
[class$="-footer"] p { max-width: 72ch; margin: 0 0 24px; }
[class$="-footer"] nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 32px; }
[class$="-footer"] a { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 4px; }
[class$="-footer"] [class$="-footer-mark"] { margin: 0; }
[data-page="start"] [class$="-hero-copy"] h1 span { display: block; }
[data-page="missing"] [class$="-main"] { max-width: 880px; padding-top: 64px; }
[data-page="missing"] [class$="-button"] { margin-right: 8px; }
@media (min-width: 760px) {
  [class$="-header"] { grid-template-columns: 1fr auto; }
  [class$="-site-role"] { justify-self: end; }
  [class$="-tools"] { justify-self: end; }
  [class$="-navigation"] { flex: initial; min-width: 192px; position: static; }
  [class$="-index-sheet"] { position: absolute; right: 0; top: calc(100% + 16px); width: min(760px, calc(100vw - 80px)); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px; }
  [class$="-hero"] { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 32px; padding: 48px; }
  [class$="-hero-art"] { transform: rotate(-2deg); width: 100%; margin: 16px 0; }
  [class$="-hero-copy"] { padding-block: 24px; }
  [class$="-word-grid"] { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  [class$="-word-card-0"] { grid-column: span 5; margin-top: 24px; }
  [class$="-word-card-1"] { grid-column: span 7; min-height: 304px; }
  [class$="-word-card-2"] { grid-column: span 8; min-height: 272px; }
  [class$="-word-card-3"] { grid-column: span 4; margin-top: 32px; }
  [class$="-reading-grid"] { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 64px; }
  [class$="-ask-note"] { transform: rotate(-2deg); margin-top: 48px; }
  [class$="-pager"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  [class$="-header"] { grid-template-columns: 1fr 220px auto; }
  [class$="-tools"] { grid-column: auto; }
  [class$="-site-role"] { justify-self: start; }
  [class$="-index-sheet"] { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 940px; }
  [data-page="start"] [class$="-hero-copy"] h1 span:last-child { margin-left: 24px; }
}
@media (max-width: 480px) {
  [class$="-header"] { grid-template-columns: 1fr; gap: 12px; }
  [class$="-tools"] { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  [class$="-language-button"] { justify-self: start; }
  [class$="-hero"] { padding: 24px 20px; }
  [class$="-hero-art"] { width: 248px; }
  [class$="-hero-art"] figcaption { margin-inline: 0; }
  [class$="-index-sheet"] { padding: 24px 12px; }
}
@media print {
  [class$="-tools"], [class$="-hero-art"], [class$="-pager"], [class$="-skip"] { display: none !important; }
  [class$="-header"], [class$="-main"], [class$="-footer"] { max-width: 100%; padding-inline: 0; }
  [class$="-hero"], [class$="-reading-grid"] { display: block; padding: 0; }
  [class$="-ask-note"] { transform: none; margin: 24px 0; }
  [class$="-question"], [class$="-sources-box"] { break-inside: avoid; }
}
