/* Minute Studio. The paper, ink and Marcellus of Infinite Artifacts
   (infiniteartifacts.dev), with one accent: the copper of the app icon. */

:root {
  color-scheme: light dark;
  --bg: #F1EFEA;
  --card: #FFFFFF;
  --ink: #141311;
  --muted: #6E6B64;        /* 4.6:1 on --bg */
  --rule: #DDD8CD;
  --accent: #9C4F28;       /* 5.1:1 on --bg: small text, underlines, focus */
  --button: #141311;
  --button-ink: #FFFFFF;
  --nav: rgb(241 239 234 / 0.8);
  --glow: rgb(208 120 80 / 0.10);

  --win: #FFFFFF;
  --win-bar: #F4F2EE;
  --win-side: #F7F5F1;
  --win-line: #E7E3DB;
  --win-edge: rgb(20 19 17 / 0.12);
  --shadow:
    0 1px 2px rgb(20 19 17 / 0.06),
    0 16px 32px -12px rgb(20 19 17 / 0.18),
    0 48px 96px -32px rgb(20 19 17 / 0.28);

  --serif: Marcellus, "Marcellus fallback", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide: 70rem;
  --gutter: 20px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121110;
    --card: #1C1A18;
    --ink: #FFFFFF;
    --muted: #A3A097;      /* 7.2:1 on --bg */
    --rule: #2A2825;
    --accent: #E0956B;     /* 7.8:1 on --bg */
    --button: #F1EFEA;
    --button-ink: #141311;
    --nav: rgb(18 17 16 / 0.78);
    --glow: rgb(224 149 107 / 0.08);

    --win: #1E1D1B;
    --win-bar: #262422;
    --win-side: #22201E;
    --win-line: #35322E;
    --win-edge: rgb(255 255 255 / 0.10);
    --shadow:
      0 1px 2px rgb(0 0 0 / 0.4),
      0 16px 32px -12px rgb(0 0 0 / 0.5),
      0 48px 96px -32px rgb(0 0 0 / 0.6);
  }
}

/* Every character but the digits: Marcellus' 1 reads as a capital I, so
   figures in headlines ("14 days", "1. License", "1.0.0") come from the
   serif after it in the stack. */
@font-face {
  font-family: Marcellus;
  src: url(/fonts/Marcellus-Regular.ttf) format("truetype");
  font-display: swap;
  unicode-range: U+0000-002F, U+003A-10FFFF;
}

/* Georgia, scaled to Marcellus' width (measured at 103–106% on the
   headlines; 103% keeps every one on its lines), so headlines don't reflow
   when the font arrives. The overrides are Marcellus' ascent and descent
   (0.97 and 0.28 em) divided by that scale. */
@font-face {
  font-family: "Marcellus fallback";
  src: local("Georgia");
  size-adjust: 103%;
  ascent-override: 94.2%;
  descent-override: 27.2%;
  line-gap-override: 0%;
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* An element a script shows later stays hidden, whatever display its class
   gives it. */
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

p, li, dd { text-wrap: pretty; }

p { margin: 0; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

kbd {
  font: 500 0.82em/1 var(--sans);
  padding: 0.18em 0.42em 0.22em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 6px;
  white-space: nowrap;
  vertical-align: 0.08em;
}

h1 kbd, h2 kbd, h3 kbd { font-size: 0.7em; vertical-align: 0.14em; }

.wrap {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-ink);
  text-decoration: none;
}

.skip:focus { top: 12px; }

/* Buttons and links */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.4rem;
  border: 1px solid var(--button);
  border-radius: 980px;
  background: var(--button);
  color: var(--button-ink);
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
}

.button:hover { opacity: 0.86; }
.button:active { transform: scale(0.98); }

.button--small {
  min-height: 32px;
  padding: 0 0.9rem;
  font-size: 0.875rem;
}

.button--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.more {
  font-weight: 500;
  white-space: nowrap;
}

.more::after { content: "\00a0›"; }

/* The analytics switch in the footer looks like a link. */
button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

button:hover { text-decoration-thickness: 2px; }

/* Navigation: sticky, frosted over what scrolls beneath it. */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nav);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--rule);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  height: 56px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  font: 1.1875rem/1 var(--serif);
  text-decoration: none;
}

.brand img { border-radius: 6px; }

.nav ul {
  display: flex;
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.nav li a {
  display: block;
  padding: 0.5rem 0;
  color: var(--muted);
  text-decoration: none;
}

.nav li a:hover,
.nav li a[aria-current="page"] { color: var(--ink); }

@media (max-width: 719px) {
  .nav ul { display: none; }
}

/* Hero */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3.5rem, 8vw, 6rem);
  text-align: center;
}

/* A little copper light on the paper, behind the headline. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(100%, 60rem);
  z-index: -1;
  background: radial-gradient(52% 42% at 50% 30%, var(--glow), transparent 72%);
  pointer-events: none;
}

.hero-icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 2rem;
}

/* Widths in em, not ch: ch is the width of "0", which differs between
   Marcellus and its fallback. 12em is 15ch of Marcellus. */
.hero h1 {
  max-width: 12em;
  margin-inline: auto;
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  line-height: 1.02;
}

.lede {
  max-width: 38rem;
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

.fineprint {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.hero-shot {
  max-width: var(--wide);
  margin: clamp(3rem, 7vw, 4.5rem) auto 0;
}

.hero--short { padding-block: clamp(5rem, 14vw, 9rem); }

/* Sections */

.section {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px solid var(--rule);
}

.eyebrow {
  margin-bottom: 1rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section h2 {
  max-width: 16em;
  font-size: clamp(2.125rem, 4.4vw, 3.375rem);
}

.section-lede {
  max-width: 38rem;
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
}

.also {
  max-width: 46rem;
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.note {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* How it works */

.steps {
  display: grid;
  gap: 2.5rem 2rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  counter-increment: step;
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1.25rem;
  color: var(--accent);
  font: 600 0.8125rem/1 var(--sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.steps h3 { font-size: 1.625rem; }

.steps p { margin-top: 0.75rem; color: var(--muted); }

@media (min-width: 820px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* Features: a bento of cards */

.bento {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
  grid-template-columns: 1fr;
}

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.75rem;
  border-radius: 18px;
  background: var(--card);
  overflow: clip;
}

.card .icon { color: var(--accent); }

.card h3 {
  margin-top: 1.25rem;
  font-size: 1.5rem;
}

.card h3 + p { margin-top: 0.6rem; }

.card-shot {
  margin: 2rem -1.75rem -1.75rem 1.75rem;
  padding-top: 0;
}

.card-shot .window,
.card-shot .shot img {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
}

.card--bot { grid-area: bot; }
.card--lang { grid-area: lang; }
.card--brief { grid-area: brief; }
.card--trans { grid-area: trans; }
.card--lib { grid-area: lib; }
.card--export { grid-area: export; }

.bento {
  grid-template-areas: "bot" "lang" "brief" "trans" "lib" "export";
}

@media (min-width: 720px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "bot lang"
      "brief brief"
      "trans trans"
      "lib export";
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "bot bot bot bot bot brief brief brief brief brief brief brief"
      "lang lang lang lang lang brief brief brief brief brief brief brief"
      "trans trans trans trans trans trans trans lib lib lib lib lib"
      "trans trans trans trans trans trans trans export export export export export";
  }
  .card-shot { margin-top: auto; padding-top: 2rem; }
}

/* Privacy */

.facts {
  display: grid;
  gap: 2rem;
  margin: 3rem 0 0;
}

.facts div {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ink);
}

.facts dt {
  font: 1.5rem/1.15 var(--serif);
  letter-spacing: -0.01em;
}

.facts dd {
  margin: 0.75rem 0 0;
  color: var(--muted);
}

@media (min-width: 820px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
}

/* Plans */

.plans {
  display: grid;
  gap: 1rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.plan h3 {
  margin-top: 0;
  font-size: 1.5rem;
}

.plan .price {
  margin: 1rem 0 0.75rem;
  color: var(--muted);
}

/* In the system font: Marcellus' 1 reads as a capital I. */
.plan .price span {
  margin-right: 0.15em;
  color: var(--ink);
  font: 600 2.5rem/1 var(--sans);
  letter-spacing: -0.03em;
}

.plan p:not(.price):not(.note) { color: var(--muted); }

.plans-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-top: 2rem;
}

.plans-foot .also { margin: 0; }

@media (min-width: 820px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

/* Requirements */

.requirements {
  display: grid;
  gap: 0 2.5rem;
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
}

.requirements li {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

@media (min-width: 820px) {
  .requirements { grid-template-columns: 1fr 1fr; }
}

/* Closing */

.closing { text-align: center; }

.closing h2 {
  max-width: none;
  font-size: clamp(2.375rem, 5.4vw, 4.25rem);
}

/* Footer */

.footer {
  padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

.footer p + p { margin-top: 0.35rem; }

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  color: var(--ink);
  font: 1.0625rem/1 var(--serif);
}

.footer-brand img { border-radius: 4px; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--ink);
  text-decoration: none;
}

.footer-links a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

/* Screenshots, and the drawn window that stands in for one */

.shot img {
  width: 100%;
  border-radius: 12px;
  filter: drop-shadow(0 1px 1px rgb(20 19 17 / 0.08)) drop-shadow(0 24px 40px rgb(20 19 17 / 0.22));
}

.window {
  display: grid;
  grid-template-columns: minmax(7rem, 22%) 1fr;
  grid-template-rows: 28px 1fr;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--win-edge);
  border-radius: 12px;
  background: var(--win);
  box-shadow: var(--shadow);
  text-align: left;
}

.window-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-bottom: 1px solid var(--win-edge);
  background: var(--win-bar);
}

.window-bar i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FF5F57;
}

.window-bar i:nth-child(2) { background: #FEBC2E; }
.window-bar i:nth-child(3) { background: #28C840; }

.sk-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 14px;
  border-right: 1px solid var(--win-edge);
  background: var(--win-side);
}

.sk-side b,
.sk-side span,
.sk-para span,
.sk-list span,
.sk-head,
.sk-sub {
  display: block;
  height: 9px;
  border-radius: 5px;
  background: var(--win-line);
}

.sk-side b { width: 50%; margin-bottom: 6px; }
.sk-side span:nth-of-type(1) { width: 78%; background: var(--rule); }
.sk-side span:nth-of-type(2) { width: 64%; }
.sk-side span:nth-of-type(3) { width: 70%; }
.sk-side span:nth-of-type(4) { width: 56%; }

.sk-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(14px, 3vw, 32px) clamp(16px, 4vw, 44px);
  overflow: hidden;
}

.sk-rec {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.sk-rec i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #E64D3D;
}

.sk-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.sk-para,
.sk-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.sk-para span:nth-child(3n + 1) { width: 96%; }
.sk-para span:nth-child(3n + 2) { width: 88%; }
.sk-para span:nth-child(3n) { width: 92%; }
.sk-para span:last-child { width: 58%; }

.sk-para--live span { background: color-mix(in srgb, var(--accent) 28%, var(--win-line)); }
.sk-para--live span:last-child { width: 34%; }

.sk-head { width: 40%; height: 14px; }
.sk-sub { width: 22%; height: 11px; background: color-mix(in srgb, var(--accent) 35%, var(--win-line)); }

.sk-list span { width: 72%; }
.sk-list span::before { content: none; }
.sk-list span:nth-child(2) { width: 64%; }
.sk-list span:nth-child(3) { width: 48%; }

.sk-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 32px);
}

.sk-para--alt span { background: color-mix(in srgb, var(--accent) 18%, var(--win-line)); }

@media (max-width: 559px) {
  .window { grid-template-columns: 1fr; }
  .sk-side { display: none; }
}

/* Motion, only for those who have not asked for less. Content is visible
   without it: browsers without scroll-driven animations show it at once. */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .wrap > :not(.hero-shot) { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero .wrap > :nth-child(2) { animation-delay: 0.05s; }
  .hero .wrap > :nth-child(3) { animation-delay: 0.1s; }
  .hero .wrap > :nth-child(4) { animation-delay: 0.15s; }
  .hero .wrap > :nth-child(5) { animation-delay: 0.2s; }
  .hero .wrap > :nth-child(6) { animation-delay: 0.25s; }

  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }

  @view-transition { navigation: auto; }
}

/* /plans */

.hero--plans { padding-bottom: clamp(2rem, 5vw, 3rem); }

.section--flush {
  padding-top: 0;
  border-top: 0;
}

.code-note {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 980px;
  color: var(--ink);
  font-size: 0.9375rem;
}

.plans--buy { margin-top: 0; }

.plans--buy .plan { padding: 2rem; }

.plans--buy .plan h2 { font-size: 1.75rem; }

.plan-button {
  width: 100%;
  margin-top: auto;
  cursor: pointer;
  text-decoration: none;
}

.plans--buy .plan > p:last-of-type { margin-bottom: 1.75rem; }

.plan-button:disabled { cursor: default; opacity: 0.4; }

.plans-foot--buy {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

.checkout-error { color: var(--ink); }

.faq {
  max-width: 46rem;
  margin-top: 2rem;
  border-bottom: 1px solid var(--rule);
}

.faq details { border-top: 1px solid var(--rule); }

.faq summary {
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
  font: 1.25rem/1.3 var(--serif);
  cursor: pointer;
  list-style: none;
}

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

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 1rem;
  color: var(--accent);
  font: 400 1.5rem/1 var(--sans);
}

.faq details[open] summary::after { content: "−"; }

.faq details p {
  margin: 0 0 1.25rem;
  color: var(--muted);
}

/* /renew */

.renew {
  margin: 0 0 1.5rem;
  padding: 1.75rem;
  border-radius: 18px;
  background: var(--card);
}

.renew label {
  display: block;
  margin-bottom: 0.6rem;
  font-weight: 600;
}

.renew-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.renew input {
  flex: 1 1 18rem;
  min-width: 0;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: 1rem/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

.renew input::placeholder { color: var(--muted); opacity: 0.7; }

.renew input:focus-visible { outline-offset: 1px; }

.renew .button { cursor: pointer; }

.renew .button:disabled { cursor: default; opacity: 0.4; }

.renew-result:not(:empty) {
  margin: 0 0 1rem;
  font-size: 1.125rem;
}

.renew-offer { margin-bottom: 2.5rem; }

.renew-offer .note { margin-top: 0.6rem; }

/* Text pages: the legal documents, downloads, refunds, contact */

.page { padding-block: clamp(3rem, 7vw, 5rem) clamp(4rem, 9vw, 6.5rem); }

.prose { max-width: calc(44rem + 2 * var(--gutter)); }

.prose h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.5rem, 5.5vw, 3.75rem);
}

.prose h2 {
  margin: 3rem 0 0.75rem;
  font-size: clamp(1.625rem, 3vw, 2.125rem);
  line-height: 1.15;
}

.prose h3 {
  margin: 2.25rem 0 0.5rem;
  font-size: 1.375rem;
  line-height: 1.2;
}

.prose h4 {
  margin: 1.75rem 0 0.5rem;
  font: 600 1.0625rem/1.3 var(--sans);
}

.prose p,
.prose ul,
.prose ol { margin: 0 0 1rem; }

.prose ul,
.prose ol { padding-left: 1.25rem; }

.prose li + li { margin-top: 0.5rem; }

.prose li::marker { color: var(--muted); }

/* License texts are reproduced exactly: never rewrapped. */
.prose pre {
  margin: 0 0 1.5rem;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border-radius: 12px;
  background: var(--card);
  font: 12.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
}

.prose pre code { font: inherit; }

.page-lede {
  margin-bottom: 2rem;
  color: var(--muted);
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  line-height: 1.5;
}

.release-note {
  margin: 0 0 2.25rem;
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: 0.9375rem;
}

.prose .eyebrow a { text-decoration: none; }

.contact-address {
  margin: 0.5rem 0 1.25rem;
  font: clamp(1.625rem, 4.5vw, 2.5rem)/1.2 var(--serif);
  overflow-wrap: anywhere;
}

.table-scroll {
  margin: 0 0 1rem;
  overflow-x: auto;
}

.downloads {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.downloads th,
.downloads td {
  padding: 0.85rem 1.25rem 0.85rem 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.downloads thead th {
  border-top: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.downloads tbody th { font-weight: 600; white-space: nowrap; }
.downloads time { white-space: nowrap; }

@media print {
  .nav, .footer, .skip { display: none; }
  body { background: #FFFFFF; color: #000000; }
}