/* Materials and proportions follow the supplied November reference images. */
:root {
  --paper: #f8f0e3;
  --earth: #745434;
  --line: #c3ac89;
  --green: #103e2c;
  --sand: #efd2a5;
  --groove: #a9743c;
  --wood: url('assets/honey-oak.webp');
  --paper-grain: url('assets/warm-paper.webp');
  --serif: Georgia, 'Times New Roman', serif;
}

body {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 18% 8%, #fffcf280, #f2dfbe24 76%), linear-gradient(#fff9ed99, #fff9ed99), var(--paper-grain);
  background-size: 100% 100%, 100% 100%, 620px auto;
  background-attachment: fixed;
  background-repeat: no-repeat, no-repeat, repeat;
}

.site-header {
  height: 82px;
  border-color: #baa17e;
  box-shadow: 0 1px 0 #fff9;
}

.wordmark { font-size: 29px; }
.wordmark span { font: 600 14px/1.3 var(--serif); letter-spacing: .105em; }
.nav { gap: 29px; }
.nav a { font: 500 20px/1.4 Bitter, var(--serif); }

.hero {
  grid-template-columns: 37.5% 62.5%;
  padding-top: 24px;
  padding-bottom: 72px;
}

.hero-copy { padding: 27px 24px 0 0; }
h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(76px, 6.55vw, 94px);
  line-height: 1.03;
  letter-spacing: -.04em;
  color: #0b3626;
  padding-bottom: .1em;
  margin-bottom: -.1em;
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: currentColor;
  background: none;
  text-shadow: none;
  filter: none;
}

.hero-copy .lead {
  max-width: 370px;
  margin-top: 28px;
  font: 400 24px/1.26 var(--serif);
  color: #745332;
}

.hero-action { margin-top: 29px; }
.btn {
  font-family: Bitter, var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  min-height: 52px;
  padding: 12px 22px;
  border-color: #153f2b;
  color: #fff9eb;
  background-color: #174e36;
  background-image: linear-gradient(180deg, #174b31d1, #07341fd9 65%, #082d1fe8), var(--wood);
  background-size: 100% 100%, 720px auto;
  background-position: center, 28% 62%;
  border-radius: 17px;
  text-shadow: 0 1px 1px #002f24;
  box-shadow: inset 0 1px 1px #d9eec58c, inset 1px 0 1px #adc9a64d,
    inset 0 -3px 2px #052d2073, 0 2px 2px #092c2073, 1px 7px 11px #63421726;
}
.btn:hover { background-color: #1c6042; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px #001e2566, 0 2px 3px #63421733; }
.btn svg { width: 27px; height: 27px; }
.hero-action .btn { gap: 21px; min-height: 54px; padding: 12px 24px; }
.btn.outline, .btn.light {
  color: var(--green);
  border-color: #b58c58;
  background-color: #f5e0bc;
  background-image: linear-gradient(#fff7e8b8, #fff1d896), var(--wood);
  text-shadow: 0 1px 0 #fff6e7;
  box-shadow: inset 0 1px 1px #fff8, inset 0 -1px 1px #c4925f80,
    0 2px 2px #855d3438;
}

.welcome-photo { width: 286px; margin: 28px 0 0 0; }
.welcome-photo .frame {
  padding: 14px;
  background: linear-gradient(140deg, #f8e8c8, #d5b783);
  border-radius: 25px;
  outline: 1px solid #fef8e8;
  outline-offset: -5px;
  box-shadow: inset 0 1px 1px #fff9, inset 0 -2px 3px #b98c5755,
    1px 4px 2px #9b773f8c, 5px 13px 16px #67452147;
}
.welcome-photo img {
  width: 100%; height: 190px; border-radius: 11px;
  filter: brightness(1.04) contrast(1.18) saturate(1.28) url("#photo-clarity");
  image-rendering: -webkit-optimize-contrast;
}
.welcome-photo figcaption { margin-top: 40px; }

.sign-stage { padding: 0 0 0 4px; }
.sign-heading { padding: 0 4px 0 24px; margin-bottom: 23px; gap: 14px; }
.sign-heading h2 { font: 500 29px/1.2 Bitter, var(--serif); letter-spacing: -.025em; }
.sign-heading span { font: 400 18px/1.3 var(--serif); color: #73502f; white-space: nowrap; }
.sign-yard { padding: 10px 51px 32px 54px; }

.post {
  left: 49%;
  top: -9px;
  width: 46px;
  bottom: -2px;
  border-radius: 10px 10px 5px 5px;
  background-image: linear-gradient(90deg, #062b20fa 0%, #276146e8 23%, #3d7853e6 36%, #1c5036f0 57%, #052c1fee 88%, #143e2df5), var(--wood);
  background-size: 100% 100%, 600px auto;
  box-shadow: inset 2px 0 2px #72956c80, inset -3px 0 4px #001b17b0,
    10px 11px 10px #573c2366, 21px 24px 17px #573c2326;
}
.post:before {
  left: -14px;
  top: -36px;
  width: 74px;
  height: 74px;
  background: url('assets/forest-cap.webp') center / contain no-repeat;
  clip-path: none;
  filter: drop-shadow(4px 5px 3px #63421e50);
}
.post:after {
  content: none;
}

.sign-boards { gap: 10px; }
.sign-boards li {
  --grain-y: 0px;
  --grain-x: 17%;
  --grain-width: 960px;
  --wood-light: #fff1d32b;
  width: 100%;
  filter: drop-shadow(1px 3px 1px #58341473) drop-shadow(7px 12px 7px #63411d52) drop-shadow(17px 24px 14px #63411d24);
}
.sign-boards li:nth-child(2) { --grain-y: -125px; --grain-x: 68%; --grain-width: 1150px; --wood-light: #fff3dd44; width: 94%; filter: drop-shadow(1px 3px 1px #58341466) drop-shadow(7px 13px 8px #63411d47) drop-shadow(17px 24px 14px #63411d20); }
.sign-boards li:nth-child(3) { --grain-y: -310px; --grain-x: 35%; --grain-width: 1050px; width: 95%; margin-left: -12px; filter: drop-shadow(1px 3px 1px #58341466) drop-shadow(7px 13px 8px #63411d47) drop-shadow(17px 24px 14px #63411d20); }
.sign-boards li:nth-child(4) { --grain-y: -445px; --grain-x: 91%; --grain-width: 1240px; --wood-light: #fff2d935; width: 92%; filter: drop-shadow(1px 3px 1px #58341466) drop-shadow(7px 13px 8px #63411d47) drop-shadow(17px 24px 14px #63411d20); }
.sign-boards li:nth-child(5) { --grain-y: -540px; --grain-x: 6%; --grain-width: 1130px; width: 98%; margin-left: -18px; filter: drop-shadow(1px 3px 1px #58341466) drop-shadow(7px 13px 8px #63411d47) drop-shadow(17px 24px 14px #63411d20); }
.sign-boards li:nth-child(6) { --grain-y: -655px; --grain-x: 74%; --grain-width: 1320px; --wood-light: #fff1d539; width: 96%; }
.sign-board {
  isolation: isolate;
  min-height: 48px;
  padding: 6px 35px 10px;
  background: linear-gradient(#fff0cd 0%, #c18b49 16%, #ba8444 68%, #855125 100%);
  clip-path: polygon(0 2%, 13% 3.5%, 24% 1%, 24.4% 5%, 25% 1%, 42% 2%, 61% 0, 78% 2%, 92% 0, 100% 46%, 93% 94%, 76% 100%, 61% 97%, 49% 99%, 48.5% 95%, 48% 99%, 29% 97%, 13% 100%, 0 98%, 1.5% 64%, .5% 35%);
  font: 700 24px/1.25 Bitter, var(--serif);
  letter-spacing: .035em;
  color: #123f2b;
  text-shadow: 0 1px 0 #fff1c8, 0 -1px 1px #67421b9c;
  filter: none;
  box-shadow: inset 0 1px 1px #fff2d1a1;
  transition: transform .2s;
}
/* The inset face leaves a lit top edge and a thicker, darker lower bevel. */
.sign-board:before {
  z-index: -1;
  inset: 1.5px 2px 8px;
  width: auto;
  height: auto;
  border-radius: 0;
  transform: none;
  clip-path: inherit;
  background-image: linear-gradient(180deg, #fff4df59, var(--wood-light) 45%, #f4d4a717), var(--wood);
  background-size: 100% 100%, var(--grain-width) auto;
  background-position: center, var(--grain-x) var(--grain-y);
  box-shadow: inset 0 2px 2px #fff7e3ad, inset 0 -2px 2px #a77d4b73;
}
/* Each fastener has a recessed slot, polished rim and a shadow below it. */
.sign-board:after {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 0;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 35%, #27291f 42% 56%, #e3d6ab 65%, transparent 70%) left 25px center / 7px 5px no-repeat,
    linear-gradient(110deg, transparent 35%, #27291f 42% 56%, #e3d6ab 65%, transparent 70%) right 34px center / 7px 5px no-repeat,
    radial-gradient(circle at 35% 27%, #fff7d4 0 11%, #b9b39a 20%, #55594d 37%, #d0c7a6 48%, #47493c 57%, #775322 64%, transparent 73%) left 23px center / 11px 12px no-repeat,
    radial-gradient(circle at 35% 27%, #fff7d4 0 11%, #b9b39a 20%, #55594d 37%, #d0c7a6 48%, #47493c 57%, #775322 64%, transparent 73%) right 32px center / 11px 12px no-repeat;
  box-shadow: none;
}
.sign-boards li:nth-child(even) .sign-board {
  clip-path: polygon(7% 1%, 22% 3%, 39% 0, 57% 2%, 71% 1%, 71.4% 5%, 72% 1%, 85% 3%, 100% 0, 98.7% 40%, 99.5% 70%, 100% 100%, 85% 97%, 68% 100%, 53% 97%, 33% 99%, 18% 96%, 7% 94%, 0 48%);
}
.sign-board[aria-pressed=true] { transform: translateX(8px); }
.sign-board:hover { transform: translateX(7px); }

.answer-plank {
  padding: 23px 45px 25px;
  min-height: 264px;
  border: 1px solid #c5a375;
  border-radius: 28px;
  background-image: linear-gradient(110deg, #fff2d5ab, #fff0d38a 62%, #f8e4c373), var(--wood);
  background-size: 100% 100%, 1160px auto;
  background-position: center, 36% 72%;
  box-shadow: inset 0 2px 3px #fffaf0, inset 0 0 0 6px #f1d6ad,
    inset 0 0 0 7px #c5a375a6, inset 0 0 0 9px #fff3d9a6,
    inset 0 -5px 8px #a4773e18, 1px 3px 2px #80562f40, 6px 12px 19px #63421e29;
}
.answer-plank:before, .answer-plank:after {
  content: '';
  top: 18px;
  width: 12px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 35%, #2b2e25 43% 53%, #fff2c7 61%, transparent 67%) center / 7px 7px no-repeat,
    radial-gradient(circle at 33% 27%, #fff9dc 0 12%, #ccc8b4 22%, #606359 35%, #ccc4a7 45%, #56584a 54%, #77512b 63%, transparent 68%);
  filter: drop-shadow(1px 2px 1px #6e482577);
}
.answer-plank:before { left: 19px; }
.answer-plank:after { right: 19px; }
.answer-label { font: 700 22px/1.25 var(--serif); margin-bottom: 10px; }
.routed { font: 700 clamp(25px, 2.22vw, 34px)/1.2 var(--serif); letter-spacing: -.015em; }
.answer-plank p { font: 400 21px/1.4 var(--serif); margin-top: 13px; }
.quick-fee { font: 400 20px/1.3 var(--serif); gap: 14px; margin-top: 19px; }
.quick-fee input {
  width: 108px;
  min-height: 40px;
  border-color: #aa8253;
  background: #fff9efd9;
  box-shadow: inset 0 1px 3px #77512e24, 0 1px 0 #ffebc1;
  font: 400 23px/1.2 var(--serif);
  color: #2b2418;
}
.quick-fee output { font: 400 20px/1.3 var(--serif); }
.answer-actions { margin-top: 21px; gap: 18px; }
.answer-actions .btn { font-size: 21px; min-height: 44px; padding: 8px 19px; border-radius: 14px; }
.sign-footnote { margin-top: 80px; }

.concept-strip {
  font: 400 15px/1.4 var(--serif);
  padding: 8px 18px;
  border-color: #ba9965;
  background-color: #efe1c7;
  background-image: linear-gradient(#f7ead3e8, #f7ead3e8), var(--paper-grain);
  background-size: 100% 100%, 640px auto;
  box-shadow: 0 -1px 0 #fff7e278;
}

@media (min-width: 1600px) {
  .hero { padding-top: 24px; padding-bottom: 72px; }
}

@media (min-width: 701px) and (max-width: 1200px) {
  .nav { gap: 20px; }
  .nav a { font-size: 18px; }
  .hero { grid-template-columns: 39% 61%; }
  .hero-copy { padding-top: 29px; }
  h1 { font-size: clamp(62px, 6.45vw, 78px); }
  .hero-copy .lead { font-size: 22px; }
  .hero-action .btn { font-size: 18px; padding: 13px 18px; gap: 12px; }
  .welcome-photo { width: 244px; }
  .welcome-photo img { width: 224px; height: 167px; }
  .sign-yard { padding-left: 23px; padding-right: 20px; }
  .sign-heading { padding-left: 8px; }
  .sign-heading h2 { font-size: 26px; }
  .sign-heading span { font-size: 16px; }
  .sign-board { font-size: 20px; }
  .answer-plank { padding: 24px 29px; }
  .answer-label { font-size: 19px; }
  .routed { font-size: 26px; }
  .answer-plank p, .quick-fee, .quick-fee output { font-size: 17px; }
  .answer-actions { gap: 12px; }
  .answer-actions .btn { font-size: 18px; }
}

@media (min-width: 701px) and (max-width: 900px) {
  .wordmark { font-size: 23px; }
  .wordmark span { font-size: 12px; }
  .nav { gap: 15px; }
  .nav a { font-size: 16px; }
  .hero { grid-template-columns: 40% 60%; padding-top: 32px; }
  h1 { font-size: 54px; }
  .hero-copy .lead { font-size: 21px; }
  .sign-heading { display: block; margin-bottom: 30px; }
  .sign-heading span { display: block; margin-top: 10px; }
  .sign-yard { padding: 10px 5px 30px 8px; }
  .sign-board { min-height: 56px; font-size: 18px; padding: 10px 30px; letter-spacing: .01em; }
  .sign-board:after { background-position: left 12px center, right 22px center, left 10px center, right 20px center; }
  .answer-actions .btn { font-size: 18px; }
  .welcome-photo { width: 225px; }
  .welcome-photo img { width: 205px; height: 152px; }
}

@media (max-width: 700px) {
  body {
    background-image: radial-gradient(ellipse at 12% 18%, #fffbee59, #f5dfb72e 80%), linear-gradient(#fff7e87a, #fff7e87a), var(--paper-grain);
    background-size: 100% 100%, 100% 100%, 600px auto;
    font-size: 17px;
  }
  .site-header { height: 114px; gap: 13px; }
  .wordmark { font-family: Georgia, serif; font-weight: 700; font-size: 26px; flex: 1; min-width: 0; }
  .wordmark span { font: 500 15px/1.35 Figtree, Satoshi, sans-serif; letter-spacing: -.025em; margin-top: 9px; }
  .menu-toggle {
    flex-shrink: 0;
    min-height: 47px;
    padding: 10px 12px;
    gap: 10px;
    border: 1px solid #b99f79;
    border-radius: 12px;
    font-size: 17px;
    color: #173f2b;
    background-image: linear-gradient(#fff9edb0, #f7e8cd80), var(--paper-grain);
    background-size: 100% 100%, 600px auto;
    box-shadow: inset 0 1px 2px #a9855333, inset 0 -1px 0 #fff9, 0 1px 1px #92734b1a;
  }
  .menu-toggle svg { width: 20px; height: 20px; }
  .nav { top: 114px; background-image: linear-gradient(#fff5e2b3, #fff5e2b3), var(--paper-grain); }
  .nav a { font-size: 20px; }
  .hero { padding-top: 0; padding-bottom: 72px; }
  .hero-copy {
    min-height: calc(100svh - var(--strip) - 114px);
    padding: 76px 0 100px;
    justify-content: flex-start;
  }
  h1 {
    font-size: clamp(50px, 16.4vw, 76px);
    line-height: 1.06;
    letter-spacing: -.04em;
    -webkit-text-stroke: 0;
    background-image: linear-gradient(115deg, #123b28, #062b1c 40%, #17442d 65%, #082d1f);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: url("#carved-letter") drop-shadow(0 1px .2px #fff1d3) drop-shadow(1px 3px 2px #73502226);
  }
  .hero-copy .lead {
    font: 400 17px/1.5 Figtree, Satoshi, sans-serif;
    letter-spacing: -.5px;
    color: #785a36;
    max-width: none;
    margin-top: 28px;
  }
  .hero-action { margin-top: 31px; }
  .hero-action .btn {
    font: 700 17px/1.3 Satoshi, Figtree, sans-serif;
    min-height: 57px;
    padding: 15px 21px;
    gap: 20px;
    border-radius: 16px;
    background-image: linear-gradient(180deg, #154a2dc4, #06351fd1 55%, #052a1ee0), var(--wood);
    background-size: 100% 100%, 660px auto;
    background-position: center, 34% 62%;
    box-shadow: inset 0 1px 1px #e4efd0a6, inset 1px 0 1px #c5d3aa59,
      inset 0 -4px 2px #001d16b3, 0 3px 1px #0b2a18a6, 3px 10px 9px #77502447, 7px 18px 18px #7750241f;
  }
  .hero-action .btn svg { width: 24px; height: 24px; }
  .welcome-photo { display: none; }
  .sign-stage { padding: 80px 0 0; }
  .sign-heading { padding: 0 0 25px; margin-bottom: 22px; }
  .sign-heading h2 { font-size: 29px; }
  .sign-heading span { font-size: 17px; margin-top: 12px; }
  .sign-yard { padding: 15px 5px 34px; }
  .post { width: 36px; left: 48%; }
  .post:before { left: -13px; width: 62px; height: 62px; top: -34px; }
  .sign-boards { gap: 15px; }
  .sign-boards li, .sign-boards li:nth-child(n) { width: 96%; margin-left: 0; }
  .sign-board {
    min-height: 64px;
    font-size: 17px;
    padding: 12px 30px;
    letter-spacing: .025em;
    line-height: 1.3;
  }
  .sign-board:before { width: auto; height: auto; }
  .sign-board:after { width: auto; height: auto; background-position: left 12px center, right 22px center, left 10px center, right 20px center; }
  .sign-board[aria-pressed=true] { transform: translateX(3px); }
  .answer-plank { padding: 29px 25px 27px; border-radius: 24px; }
  .answer-plank:before, .answer-plank:after { top: 15px; width: 10px; height: 11px; }
  .answer-plank:before { left: 13px; }
  .answer-plank:after { right: 13px; }
  .answer-label { font-size: 19px; }
  .routed { font-size: 25px; line-height: 1.3; }
  .answer-plank p { font-size: 17px; line-height: 1.5; }
  .quick-fee { font-size: 17px; }
  .quick-fee output { font-size: 17px; }
  .quick-fee input { font-size: 22px; }
  .answer-actions { gap: 14px; }
  .answer-actions .btn { font-size: 19px; min-height: 48px; }
  .sign-footnote { margin-top: 25px; }
  .concept-strip {
    font: 500 15px/1.3 Satoshi, Figtree, sans-serif;
    padding: 7px 10px;
    border-top: 0;
    border-bottom: 1px solid #b49361;
    box-shadow: 0 1px 0 #fff5e0;
  }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .section-head p, .project-card p, .name-board p, .park-caption p,
  .pickup-help, .leaf-note p, .contact-card address, .township p { font-size: 17px; }
}

@media (max-width: 370px) {
  .wordmark { font-size: 24px; }
  .wordmark span { max-width: 185px; }
  .menu-toggle { font-size: 15px; gap: 8px; padding: 10px; }
  .menu-toggle svg { width: 18px; }
  .hero-copy { padding-top: 65px; }
  .hero-action .btn { font-size: 16px; gap: 15px; padding-left: 18px; padding-right: 18px; }
  .sign-heading h2 { font-size: 27px; }
  .sign-board { font-size: 16px; padding-left: 27px; padding-right: 27px; }
}