body {
  margin: 0;
  background: var(--varns-cream-100);
}

main,
section,
header,
footer,
nav,
aside,
article,
div {
  min-inline-size: 0;
}

a {
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--varns-orange-500);
  outline-offset: 4px;
}

.varns-main {
  min-block-size: 50vh;
}

.varns-container {
  inline-size: min(calc(100% - (var(--varns-gutter) * 2)), var(--varns-container-wide));
  margin-inline: auto;
}

.varns-container--reading {
  max-inline-size: var(--varns-container-reading);
}

.varns-paper-texture {
  background-color: var(--varns-cream-100);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(41, 69, 43, 0.035) 0 1px, transparent 1.5px),
    repeating-radial-gradient(ellipse at 85% 45%, transparent 0 18px, rgba(107, 68, 38, 0.028) 19px 20px, transparent 21px 34px);
  background-size: 20px 20px, 440px 310px;
}

.varns-section-heading {
  max-inline-size: 47rem;
}

.varns-section-heading h2 {
  margin-block-end: 1rem;
  text-transform: uppercase;
}

.varns-section-heading h2 span {
  color: var(--varns-green-700);
}

.varns-section-heading > p:not(.varns-eyebrow) {
  max-inline-size: 60ch;
  color: var(--varns-muted-600);
}

.varns-section-heading--center {
  margin-inline: auto;
  text-align: center;
}

.varns-section-heading--center .varns-eyebrow {
  justify-content: center;
}

.varns-section-heading--center > p:not(.varns-eyebrow) {
  margin-inline: auto;
}

.varns-prose {
  max-inline-size: 68ch;
}

.varns-prose > * + * {
  margin-block-start: 1.25em;
}

.varns-prose h2,
.varns-prose h3 {
  margin-block-start: 1.65em;
}

.varns-prose ul,
.varns-prose ol {
  padding-inline-start: 1.4rem;
}

.varns-prose img {
  border-radius: var(--varns-radius-md);
}

.varns-admin-note {
  padding: 1rem 1.2rem;
  border-inline-start: 4px solid var(--varns-orange-500);
  background: #fff5e9;
  color: #532400;
  font-weight: 600;
}

.varns-error-page {
  display: grid;
  min-block-size: 70svh;
  place-items: center;
  padding-block: calc(var(--varns-header-height) + var(--varns-section-md)) var(--varns-section-md);
  color: var(--varns-white);
  background: var(--varns-charcoal-900) url("../images/home/hero-fallback.svg") center / cover no-repeat;
  text-align: center;
}

.varns-error-page p:not(.varns-eyebrow) {
  max-inline-size: 45ch;
  margin: 1.25rem auto 2rem;
}

.varns-skip-link {
  position: fixed;
  z-index: 9999;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.7rem 1rem;
  transform: translateY(-180%);
  color: var(--varns-white);
  background: var(--varns-charcoal-900);
  font-weight: 700;
}

.varns-skip-link:focus {
  transform: translateY(0);
}

@media (min-width: 120rem) {
  :root {
    --varns-container-wide: 96rem;
  }
}


/* Compact profile icons with comfortable pointer and keyboard targets. */
.varns-social-links {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.varns-social-links a {
  display: grid;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  place-items: center;
  border-radius: 50%;
  color: inherit;
  text-decoration: none;
  transition: color var(--varns-transition-fast), background-color var(--varns-transition-fast);
}

.varns-social-links svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.varns-social-links a:hover,
.varns-social-links a:focus-visible {
  color: var(--varns-orange-500);
  background-color: rgba(244, 122, 10, 0.1);
}