@import url('./vendor/pico.min.css');

:root:not([data-theme="dark"]) {
  --pico-font-family: 'Segoe UI', system-ui, sans-serif;
  --pico-font-size: 112.5%;
  --pico-background-color: #f8f6f1;
  --pico-color: #243c40;
  --pico-muted-color: #5c6e70;
  --pico-primary: #17665e;
  --pico-primary-background: #17665e;
  --pico-primary-hover-background: #104e48;
  --pico-primary-focus: #17665e44;
  --pico-primary-inverse: #fff;
  --pico-border-radius: .35rem;
  color-scheme: light;
}
body { margin: 0; }
.container { max-width: 1140px; padding-inline: 1.5rem; }
a { text-underline-offset: .2em; }
a:focus-visible, button:focus-visible { outline: 3px solid #bd703b; outline-offset: 4px; }
.skip-link { position: fixed; top: -5rem; left: 1rem; padding: .7rem; z-index: 10; background: white; }
.skip-link:focus { top: 1rem; }
.site-header { border-bottom: 1px solid #d9ded7; }
.site-header nav { padding-block: 1rem; gap: 1rem; }
.wordmark { display: inline-flex; align-items: center; gap: .8rem; font-weight: 700; text-decoration: none; color: var(--pico-color); letter-spacing: -.04em; font-size: 1.25rem; flex-shrink: 0; }
.personal-mark { display: block; width: 78px; height: 61px; flex-shrink: 0; }
.brand-name { line-height: 1.2; }
.wordmark small { font-size: .6em; font-weight: 400; letter-spacing: .01em; display: block; color: var(--pico-muted-color); margin-top: .35rem; }
.site-header nav ul { gap: .5rem; flex-wrap: wrap; }
.site-header nav a[aria-current="page"] { color: #9d5327; text-decoration: underline; }
main { min-height: 60vh; padding-block: clamp(2rem, 5vw, 5rem); }
h1, h2, h3 { color: #163f3b; font-weight: 600; letter-spacing: -.035em; }
h1 { font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.08; max-width: 20ch; }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.eyebrow { color: #9d5327; text-transform: uppercase; font-size: .75rem; letter-spacing: .13em; font-weight: 700; }
.hero { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: center; padding-bottom: 2.8rem; }
.hero .lead { font-size: 1.2rem; max-width: 52ch; }
.hero-aside { border-left: 1px solid #b6c8bc; padding-left: 2rem; }
.hero-aside .number { font-family: Georgia, serif; font-size: 4rem; line-height: 1; color: #9d5327; }
.hero-aside h2 { font-size: 1.2rem; letter-spacing: 0; }
.hero-aside p { font-size: .9rem; }
.section { padding-block: 2.5rem; border-top: 1px solid #d9ded7; }
.section > p, .prose { max-width: 74ch; }
.columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.columns h3 { font-size: 1.2rem; }
.step-number { color: #9d5327; font-family: Georgia, serif; font-size: 1.8rem; margin-bottom: .5rem; }
.credentials { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-block: 1.5rem; }
.credential { max-width: 260px; margin: 0; }
.credential img { width: 100%; height: auto; }
.credential figcaption { font-size: .8rem; margin-top: .5rem; }
.next-step { margin-top: 2.5rem; padding: 2rem; background: #eaf0e8; border-top: 2px solid #17665e; }
.next-step h2 { max-width: 28ch; }
.action-group { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }
.action-group [role="button"], .action-group button { width: auto; margin: 0; }
.page-heading { margin-bottom: 2rem; }
.page-heading .description { max-width: 65ch; font-size: 1.15rem; }
.page-body { max-width: 78ch; }
.page-body > :first-child { margin-top: 0; }
.page-body h2 { margin-top: 2rem; }
.site-footer { padding-block: 2rem; border-top: 1px solid #d9ded7; font-size: .85rem; }
.site-footer .footer-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.article-list { list-style: none; padding: 0; }
.article-list li { padding: 1rem 0; border-bottom: 1px solid #d9ded7; }
.article-list time, .article-date { display: block; color: var(--pico-muted-color); font-size: .8rem; margin-top: .4rem; }
.archive-nav { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.legacy-content { overflow-wrap: anywhere; line-height: 1.8; }
.legacy-content img { max-width: 100%; height: auto; }
.legacy-content iframe { max-width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }
.legacy-content table { display: block; overflow-x: auto; }
.legacy-note { font-size: .8rem; color: var(--pico-muted-color); }
.comments { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid #d9ded7; }
.comment { padding: 1rem 0; border-bottom: 1px solid #d9ded7; }
.comment p { white-space: pre-line; }
.contact-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; }
.contact-layout h2 { font-size: 1.3rem; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.5em; margin-top: 1rem; }
.form-status[data-error="true"] { color: #a52929; }
@media (max-width: 760px) {
  .container { padding-inline: 1rem; }
  .site-header nav { align-items: flex-start; flex-direction: column; }
  .wordmark { font-size: 1.05rem; gap: .55rem; }
  .personal-mark { width: 64px; height: 50px; }
  .site-header nav ul { margin: 0; font-size: .85rem; gap: .25rem; }
  .site-header nav li { padding: 0; }
  .site-header nav li a { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem; }
  .hero, .columns, .contact-layout, .field-pair { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-aside { padding-left: 1rem; }
  .next-step { padding: 1.5rem; }
  .action-group { flex-direction: column; }
  .action-group [role="button"], .action-group button { width: 100%; }
  h1 { max-width: 100%; }
  .credential { max-width: 210px; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }