:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #17261f;
  background: #f4f3eb;
}
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { width: 56px; height: 56px; object-fit: contain; }
.resource-links { display: grid; gap: 12px; }
.resource-links > a { display: block; border: 1px solid #b5bfb2; border-radius: 10px; padding: 22px; text-decoration: none; background: #fffdf6; }
.resource-links > a:hover { border-color: #214b37; background: #edf2e9; }
.resource-links strong { display: block; font-size: 22px; margin-bottom: 8px; }
.resource-links span { line-height: 1.6; color: #526257; }
.guide-meta { display: block; color: #526257; font-size: 14px; line-height: 1.7; margin: 16px 0 30px; }
.contents { background: #e6ebdf; border-radius: 12px; padding: 24px; display: flex; flex-wrap: wrap; gap: 16px 24px; margin: 30px 0; }
.contents strong { width: 100%; }
.resource-page ul, .resource-page ol, .resource-page dd { font-size: 18px; line-height: 1.8; color: #526257; }
.resource-page li { margin: 12px 0; }
.resource-page dt { font-size: 20px; font-weight: 700; margin-top: 24px; }
.resource-page dd { margin: 8px 0 24px; }
.example { border-left: 4px solid #214b37; background: #e6ebdf; padding: 8px 24px; margin: 25px 0; }
.example h3 { font-size: 22px; }
.resource-page figure { margin: 30px 0; }
.resource-page figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
.resource-page figcaption { line-height: 1.6; font-size: 14px; color: #526257; margin-top: 12px; }
.table-wrap { overflow-x: auto; }
.resource-page table { width: 100%; border-collapse: collapse; line-height: 1.6; }
.resource-page caption { text-align: left; font-weight: 700; margin-bottom: 16px; }
.resource-page th, .resource-page td { text-align: left; padding: 16px 12px; border: 1px solid #b5bfb2; vertical-align: top; }
.resource-page th { background: #e6ebdf; }
.related { border-top: 2px solid #214b37; margin-top: 25px; padding-top: 25px; }
@media print { header, footer, .contents, .related, .button { display: none; } .resource-page { max-width: none; padding: 0; } .resource-page section { break-inside: avoid; } }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
a {
  color: inherit;
  text-underline-offset: 5px;
}
header,
main,
footer {
  max-width: 1180px;
  margin: auto;
  padding: 28px 32px;
}
header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #d1d6ca;
}
.brand {
  font-size: 25px;
  font-weight: 800;
  text-decoration: none;
}
.brand span {
  color: #875024;
  margin-left: 5px;
}
.hero {
  padding: 100px 0 120px;
  max-width: 850px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #526257;
}
.hero h1 {
  font-size: clamp(50px, 8vw, 100px);
  line-height: 1;
  letter-spacing: -6px;
  margin: 22px 0;
}
.hero p:not(.eyebrow) {
  font-size: 23px;
  line-height: 1.5;
  color: #526257;
  max-width: 650px;
  margin-bottom: 34px;
}
.button {
  display: inline-block;
  padding: 16px 24px;
  background: #214b37;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 700;
}
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-bottom: 80px;
}
.cards article {
  border: 1px solid #d1d6ca;
  padding: 32px;
  border-radius: 14px;
  min-height: 260px;
}
.cards span {
  color: #875024;
  font-weight: 700;
}
.cards h2 {
  font-size: 30px;
  margin: 25px 0 10px;
}
.cards p {
  color: #526257;
  line-height: 1.7;
}
.cards a {
  font-weight: 700;
}
footer {
  display: flex;
  gap: 24px;
  border-top: 1px solid #d1d6ca;
  font-size: 14px;
}
footer span {
  margin-right: auto;
}
.privacy-page {
  max-width: 820px;
  padding-top: 80px;
  padding-bottom: 100px;
}
.privacy-page h1 {
  font-size: clamp(42px, 6vw, 72px);
  max-width: 760px;
}
.privacy-page section {
  border-top: 1px solid #d1d6ca;
  padding: 28px 0;
}
.privacy-page section h2 {
  margin: 0 0 12px;
}
.privacy-page section p {
  max-width: 680px;
  color: #526257;
  line-height: 1.7;
}
@media (max-width: 720px) {
  header,
  main,
  footer {
    padding: 22px;
  }
  .hero {
    padding: 60px 0 80px;
  }
  .hero h1 {
    letter-spacing: -3px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
}

header { gap: 20px; flex-wrap: wrap; align-items: center; }
header nav { display: flex; gap: 24px; flex-wrap: wrap; }
a:focus-visible { outline: 3px solid #214b37; outline-offset: 5px; }
#projects { scroll-margin-top: 24px; }
#projects-heading { font-size: clamp(28px, 4vw, 40px); margin: 0 0 16px; }
.project-intro { max-width: 720px; line-height: 1.7; color: #526257; margin-bottom: 32px; }
footer { flex-wrap: wrap; }

/* Keyboard navigation */
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;transform:translateY(-150%);padding:12px 16px;background:#fff;color:#142b38;border:2px solid #142b38;border-radius:8px}
.skip-link:focus{transform:none}
a:focus-visible,button:focus-visible{outline:3px solid #a45209;outline-offset:4px}
#main-content:focus{outline:none}
.editorial{max-width:850px;border-top:1px solid #d1d6ca;padding:50px 0 75px}
.editorial h2{font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-.035em;margin:15px 0}
.editorial p:not(.eyebrow),.article-page section p{font-size:18px;line-height:1.75;color:#526257}
.article-page{max-width:850px;padding-top:70px;padding-bottom:90px}
.article-page h1{font-size:clamp(42px,6vw,70px);line-height:1.08;letter-spacing:-.04em;margin:18px 0}
.article-page .lead{font-size:21px;line-height:1.6;color:#526257}
.article-page section{border-top:1px solid #d1d6ca;padding:30px 0}
.article-page section h2{font-size:clamp(24px,3vw,31px);margin:0 0 12px}
@media(max-width:720px){.article-page{padding-top:45px}.editorial{padding:35px 0 55px}}