:root {
  --banner-height: 52px;
  --topbar-height: 85px;
  --chrome-height: calc(3px + var(--banner-height) + var(--topbar-height));
}
.workshop-banner {
  position: fixed;
  inset: 3px 0 auto;
  z-index: 25;
  min-height: 52px;
  padding: 10px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px 20px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
}
.wordmark { font-size: 21px; font-weight: 700; letter-spacing: -.9px; }
.wordmark .logo-period { display: inline; color: var(--accent); font: inherit; letter-spacing: inherit; margin: 0; }
.wordmark .logo-byline { letter-spacing: 1.4px; }
.activity-grid dd { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) { .wordmark { font-size: 19px; } }
@media (max-width: 560px) { .wordmark { font-size: 16px; max-width: 170px; letter-spacing: -.7px; } .wordmark .logo-byline { letter-spacing: .8px; } }
.workshop-banner button {
  flex: 0 0 auto;
  padding: 2px 0;
  border-bottom: 1px solid #fff9;
  font-weight: 600;
}
.workshop-banner button span { margin-left: 8px; }
.workshop-banner button:hover { border-color: #fff; }
.workshop-banner button:focus-visible { outline-color: #fff; }
.topbar { top: calc(3px + var(--banner-height)); }
html { scroll-padding-top: calc(var(--chrome-height) + 24px); }
.chapter { scroll-margin-top: 24px; }
.contents { top: calc(var(--chrome-height) + 40px); }
.reading-rail { top: calc(240px + var(--banner-height)); }
main { padding-top: calc(150px + var(--banner-height)); }
.book-activity { margin: 32px 0 26px; padding: 22px 0 0; border-top: 1px solid var(--line); }
.activity-heading { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.activity-heading h2 { font: 600 14px/1.5 var(--ui); margin: 0; letter-spacing: 0; }
#activity-state { color: var(--muted); font-size: 12px; }
.book-activity[data-state="live"] #activity-state { color: var(--accent); }
.activity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 14px; }
.activity-grid > div { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; border-left: 1px solid var(--line); min-width: 0; }
.activity-grid > div:first-child { border-left: 0; padding-left: 0; }
.activity-grid > div:last-child { padding-right: 0; }
.activity-grid dt { font-size: 14px; line-height: 1.45; color: #596475; }
.activity-grid dd { order: -1; margin: 0; font: 500 clamp(20px, 1.9vw, 28px)/1.2 var(--ui); letter-spacing: -.6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
#activity-detail { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 0; }
@media (max-width: 900px) {
  :root { --topbar-height: 73px; }
  .contents { top: var(--chrome-height); }
  #page-shade:not([hidden]) { top: var(--chrome-height); }
  main { padding-top: calc(126px + var(--banner-height)); }
}
@media (max-width: 560px) {
  .workshop-banner { padding: 10px 18px; gap: 3px; flex-direction: column; text-align: center; font-size: 14px; }
  main { padding-top: calc(115px + var(--banner-height)); }
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 0; }
  .activity-grid > div { padding: 0 16px; }
  .activity-grid > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .activity-grid dd { font-size: 27px; }
}
@media (max-width: 380px) {
  h1 { font-size: 56px; letter-spacing: -3.5px; }
}