/* Qigong Atlas, Lehrtafel direction: one person, one wall, black and white. The only colour is history. */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/atkinson-hyperlegible-next.woff") format("woff");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: light;
  --k: #000000;
  --paper: #FFFFFF;
  --tint: #F0F0F0;
  --gut: clamp(20px, 4vw, 56px);
  --font: "Atkinson Hyperlegible Next", Verdana, "DejaVu Sans", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 12px; }
body { margin: 0; background: var(--paper); color: var(--k); font: 400 clamp(20px, 1.8vw, 23px)/1.5 var(--font); hyphens: auto; }
p, li, td, th, .credit, .ts { overflow-wrap: break-word; }
img { display: block; width: 100%; height: auto; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 4px; }
:focus-visible { outline: 4px solid var(--k); outline-offset: 3px; }
h1, h2, h3 { margin: 0; hyphens: manual; }
p { margin: 0 0 .8em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; background: var(--paper); padding: 10px 14px; z-index: 2; }

/* header and footer */
.bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 24px; padding: 8px var(--gut); }
.mark { display: inline-flex; align-items: center; min-height: 48px; font-weight: 800; font-size: clamp(26px, 2.5vw, 32px); letter-spacing: -.01em; text-decoration: none; }
.bar nav { display: flex; flex-wrap: wrap; gap: 0 clamp(12px, 2vw, 28px); }
.bar nav a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; font-size: clamp(19px, 1.7vw, 22px); text-decoration: none; }
.bar nav a:hover, .bar nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; }
.foot { background: var(--k); color: #FFFFFF; padding: clamp(28px, 4vw, 48px) var(--gut); margin-top: clamp(40px, 6vw, 80px); font-size: clamp(18px, 1.5vw, 20px); }
.foot p { max-width: 46em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0 26px; }
.foot nav a { display: inline-flex; align-items: center; min-height: 48px; }

/* shared */
.ailabel { font-size: 18px; line-height: 1.4; margin: 0; padding: 10px var(--gut) 0; }
.lede { font-size: clamp(22px, 2vw, 25px); line-height: 1.42; font-weight: 500; }
.stand { font-size: 18px; }
.btn, .btn:visited { display: inline-flex; align-items: center; min-height: 60px; padding: 0 26px; background: var(--k); color: #FFFFFF; font-weight: 800; font-size: clamp(20px, 1.8vw, 23px); text-decoration: none; }
.btn:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.prose { max-width: calc(40rem + 2 * var(--gut)); padding: 0 var(--gut); }
.prose h2 { font-weight: 800; font-size: clamp(30px, 3vw, 38px); line-height: 1.12; margin: 1.6em 0 .5em; hyphens: auto; }
.prose h3 { font-weight: 800; font-size: clamp(24px, 2.2vw, 28px); line-height: 1.2; margin: 1.3em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.cite { font-size: max(18px, .9em); font-weight: 700; text-decoration: none; white-space: nowrap; padding: 12px 6px; margin: -12px -2px; }
.cite:hover { text-decoration: underline; }
.safety { background: var(--tint); padding: 18px 22px; margin: 1.4em 0 .4em; }
.safety p { margin: 0; }

/* tables: ink header, heavy row rules, tinted even rows; labelled blocks on phones */
table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
th { background: var(--k); color: #FFFFFF; text-align: left; font-weight: 800; padding: .5em .6em; vertical-align: bottom; }
td { padding: .55em .6em; border-bottom: 3px solid var(--k); vertical-align: top; }
tbody tr:nth-child(even) td { background: var(--tint); }

/* home */
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(24px, 4vw, 56px); padding: clamp(20px, 3vw, 36px) var(--gut) clamp(32px, 5vw, 64px); align-items: end; }
.hero h1 { font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; container-type: inline-size; }
.hero h1 b { display: block; font-weight: 800; font-size: clamp(72px, 15.5vw, 206px); font-size: min(27cqw, 206px); line-height: .9; letter-spacing: -.035em; margin: 0 0 .08em -.045em; white-space: nowrap; }
.band { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); align-items: end; text-decoration: none; margin-top: clamp(24px, 4vw, 56px); }
.band.r { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); }
.band.r .t { order: -1; }
.band.nopic { grid-template-columns: minmax(0, 1fr); }
.band.nopic .pic { display: none; }
.band .pic { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); }
.band .t { padding: clamp(20px, 3vw, 40px) var(--gut); container-type: inline-size; }
.band h2, .chart h2 { font-weight: 800; font-size: clamp(46px, 5.9vw, 78px); line-height: .98; letter-spacing: -.03em; }
.band h2 { font-size: min(17.5cqw, 78px); }
.band p, .chart .t p { margin: .35em 0 0; line-height: 1.32; }
.cta { display: inline-flex; align-items: center; min-height: 48px; margin-top: .4em; font-weight: 800; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .18em; }
.band:hover h2, .chart a:hover h2 { text-decoration: underline; text-decoration-thickness: 6px; text-underline-offset: .08em; }
.chart { margin-top: clamp(24px, 4vw, 56px); }
.chart .t { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(24px, 4vw, 56px); align-items: end; padding: clamp(16px, 2vw, 28px) var(--gut) 0; }
.chart .t a { text-decoration: none; }
.credit { font-size: 18px; line-height: 1.4; margin: 0; }
.home-more { margin-top: clamp(24px, 4vw, 56px); }

/* exercise pages and hubs */
.lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 clamp(24px, 4vw, 56px); padding: clamp(12px, 2vw, 24px) var(--gut) clamp(24px, 3vw, 40px); align-items: end; }
.lead h1 { font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.14; hyphens: auto; }
.lead h1 b { display: block; font-weight: 800; font-size: clamp(54px, 10.4vw, 138px); line-height: .92; letter-spacing: -.035em; margin: 0 0 .14em -.03em; }
.idx { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 3px; padding: 0 var(--gut); }
.idx a { display: block; text-decoration: none; font-weight: 800; font-size: clamp(24px, 2.4vw, 30px); text-align: center; padding-bottom: 6px; }
.idx a span { display: block; }
.idx .ph { aspect-ratio: 3 / 4; background: var(--tint); }
.idx a:hover span { text-decoration: underline; }
.mv { --pw: min(50vw, calc(92vh * .75)); display: grid; grid-template-columns: var(--pw) minmax(0, 1fr); margin-top: clamp(36px, 6vw, 80px); align-items: end; }
.mv.r { grid-template-columns: minmax(0, 1fr) var(--pw); }
.mv.r .txt { order: -1; }
.mv.nopic { grid-template-columns: minmax(0, 1fr); }
.mv .txt { padding: 0 var(--gut); max-width: calc(36rem + 2 * var(--gut)); }
.mv .no { display: block; font-weight: 800; font-size: clamp(100px, 14vw, 190px); line-height: .8; letter-spacing: -.05em; margin: 0 0 .1em -.03em; }
.mv h3 { font-weight: 800; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -.015em; margin: 0 0 .45em; hyphens: auto; }
.mv p { margin: 0 0 .5em; }
.mv p b { font-weight: 800; }
.mv .times { font-weight: 800; font-size: clamp(24px, 2.2vw, 30px); margin-top: .4em; }
.tiles { list-style: none; margin: 0; padding: 0 var(--gut); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px); }
.tiles a { display: block; text-decoration: none; }
.tiles .tt { display: block; font-weight: 800; font-size: clamp(30px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.015em; margin: .4em 0 .2em; }
.tiles .ts { display: block; }
.tiles a:hover .tt { text-decoration: underline; text-decoration-thickness: 4px; }
.hub > .ailabel { padding-top: 14px; }
.biglist { list-style: none; margin: clamp(8px, 2vw, 24px) 0 0; padding: 0 var(--gut); max-width: calc(48rem + 2 * var(--gut)); }
.biglist li { padding: 18px 0; border-top: 3px solid var(--k); }
.biglist a { display: block; font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; }
.biglist span { display: block; margin-top: .3em; }

/* articles */
.doc-head { padding: clamp(12px, 2vw, 24px) var(--gut) clamp(8px, 1vw, 16px); max-width: calc(52rem + 2 * var(--gut)); }
.doc-head h1 { font-weight: 800; font-size: clamp(34px, 5.4vw, 72px); line-height: 1.02; letter-spacing: -.025em; margin: 0 0 .45em; hyphens: auto; }
.toc { background: var(--tint); margin: 1.2em 0 0; padding: 18px 22px; }
.toc p { font-weight: 800; margin-bottom: .4em; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin-bottom: .3em; }
.sources { margin-top: 2.4em; font-size: 18px; line-height: 1.45; }
.sources h2 { font-size: 28px; }
.sources li { overflow-wrap: anywhere; margin-bottom: .5em; }

@media screen and (max-width: 760px) {
  .home { display: flex; flex-direction: column; }
  .home > .hero { order: -1; padding-bottom: 20px; }
  .tri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tri picture:first-child { display: none; }
  .hero, .lead, .chart .t { grid-template-columns: minmax(0, 1fr); }
  .hero .lede, .lead .lede { margin-top: .8em; }
  .band, .band.r { grid-template-columns: minmax(0, 1fr); }
  .band.r .t { order: 0; }
  .mv, .mv.r { grid-template-columns: minmax(0, 1fr); }
  .mv.r .txt { order: 0; }
  .mv .txt { padding-top: 18px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .idx { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .bar nav { gap: 0 14px; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; left: -9999px; }
  tr { border-bottom: 3px solid var(--k); padding: .5em 0; }
  td { border: 0; padding: .15em 0; }
  td::before { content: attr(data-h); display: block; font-weight: 800; }
  tbody tr:nth-child(even) td { background: none; }
}

@media print {
  @page { margin: 12mm; }
  body { font-size: 11.5pt; line-height: 1.3; }
  .bar, .foot, .btn, .idx, .toc, .skip, .home-more, .sources { display: none; }
  .lead { display: block; padding: 0 0 4mm; }
  .lead h1 b { font-size: 30pt; }
  .lead h1 { font-size: 13pt; }
  .prose { max-width: none; padding: 0; }
  .ailabel { padding: 0 0 3mm; font-size: 9pt; }
  .stand { font-size: 9pt; }
  .safety { print-color-adjust: exact; -webkit-print-color-adjust: exact; padding: 3mm 4mm; font-size: 10pt; }
  .sheet { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4mm 6mm; }
  .mv, .mv.r { margin: 0; grid-template-columns: 38% 62%; align-items: start; break-inside: avoid; }
  .mv.nopic { grid-template-columns: 1fr; }
  .mv.r .txt { order: 0; }
  .mv .txt { padding: 0 0 0 3mm; }
  .mv .no { display: inline; font-size: 22pt; margin-right: .15em; }
  .mv h3 { font-size: 12pt; }
  .mv .times { font-size: 11pt; }
  a, a:visited { text-decoration: none; }
  .cite { display: none; }
  table { font-size: 10pt; }
  th, tbody tr:nth-child(even) td { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}