/* close.css: the contact band and the foot, the same on every page.

   The owner asked on 2026-09-17 for the end of every page to match the
   homepage. Each page had grown its own quieter or denser copy through its
   page and pitch stylesheets, so this file is loaded last everywhere and
   sets the homepage's sizes outright. The contact band is reached through
   its id and repeated classes, and the foot through repeated classes, so
   these rules outrank the page ones without !important.

   Every value is written here in full rather than taken from tokens.css,
   because the demo page has its own tokens and loads this file too. */

#contact,
.foot {
  --close-cream: #F2E3BB;
  --close-pale: #D6E6B8;
  --close-gold: #C0B87A;
  --close-orange: #FF6B00;
  --close-orange-hover: #FF8428;
  --close-on-orange: #002E01;
  --close-rule: #2E4A30;
  --close-chalk: color-mix(in oklab, #F2E3BB, transparent 87%);
  --close-display: Oswald, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --close-body: Inter, "Helvetica Neue", Arial, sans-serif;
  --close-fg: clamp(8px, 2.2vw, 40px);
  --close-pad: clamp(16px, 3.4vw, 52px);
  --close-lede: clamp(1.1875rem, 1.4vw, 1.375rem);
}

/* ------------------------------------------------------------ contact -- */

body #contact.closing.closing {
  padding-block: clamp(56px, 7vw, 112px) 0;
  color: var(--close-cream);
  font-family: var(--close-body);
}
body #contact .sec__in {
  width: min(100% - 2 * var(--close-fg), 1320px);
  margin: 0 auto;
  padding: clamp(64px, 10vh, 128px) var(--close-pad);
  border-inline: 0;
}
body #contact .closing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: end;
  gap: clamp(28px, 5vw, 80px);
  text-align: center;
}
body #contact .closing__title {
  margin: 0;
  font-family: var(--close-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.05vw, 2.75rem);
  line-height: 0.95;
  text-transform: none;
  color: var(--close-cream);
  text-wrap: balance;
}
body #contact .lede {
  max-width: 44ch;
  margin: 20px auto 0;
  font-size: var(--close-lede);
  font-weight: 500;
  line-height: 1.5;
  color: var(--close-pale);
  text-wrap: pretty;
}
body #contact .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
  margin-top: 24px;
}
body #contact .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  background: var(--close-orange);
  color: var(--close-on-orange);
  font-family: var(--close-display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 160ms ease;
}
body #contact .btn:hover { background: var(--close-orange-hover); }
body #contact .contact {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  margin: 0;
  padding-top: 20px;
  border-top: 2px solid var(--close-rule);
}
body #contact .contact dt {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--close-gold);
}
body #contact .contact dd {
  margin: 2px 0 0;
  font-size: var(--close-lede);
  font-weight: 500;
  line-height: 1.6;
  color: var(--close-cream);
}
body #contact .contact a {
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--close-gold);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.24em;
}
body #contact .contact a:hover { text-decoration-color: var(--close-orange); }

@media (max-width: 599.98px) {
  body #contact .contact { grid-auto-flow: row; gap: 14px; }
}
@media (max-width: 560px) {
  body #contact .actions { flex-direction: column; }
  body #contact .btn { width: 100%; }
}

/* --------------------------------------------------------------- foot -- */

.foot.foot {
  position: relative;
  background: transparent;
  border-top: 0;
  color: var(--close-cream);
  font-family: var(--close-body);
  --focus: var(--close-cream);
}
:root body .foot.foot.foot::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--close-fg);
  right: var(--close-fg);
  height: 2px;
  background: var(--close-chalk);
}
.foot .foot__in.foot__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: min(100% - 2 * var(--close-fg), 1320px);
  max-width: none;
  margin-inline: auto;
  padding: 26px var(--close-pad);
  gap: 8px clamp(20px, 3vw, 44px);
  border-inline: 0;
}
.foot .wordmark.wordmark {
  flex: none;
  font-family: var(--close-display);
  font-weight: 700;
  font-size: 1.5625rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--close-cream);
}
.foot .wordmark__dot { color: var(--close-orange); }
.foot .foot__links.foot__links { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; }
.foot .foot__links.foot__links a {
  display: inline-block;
  padding-block: 11px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--close-cream);
  text-decoration: none;
  text-underline-offset: 5px;
}
.foot .foot__links.foot__links a:hover,
.foot .foot__links.foot__links a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--close-orange);
}

/* The four accounts from the live site, as small outlined squares. */
.foot__social {
  display: flex;
  gap: 8px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid color-mix(in oklab, #F2E3BB, transparent 70%);
  border-radius: 8px;
  color: var(--close-cream);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.foot__social svg { width: 18px; height: 18px; fill: currentColor; }
.foot__social a:hover {
  background: var(--close-orange);
  border-color: var(--close-orange);
  color: var(--close-on-orange);
}
.foot__social a:focus-visible { outline: 3px solid var(--close-orange); outline-offset: 3px; }

.foot .foot__note.foot__note {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--close-pale);
}

@media (max-width: 719.98px) {
  .foot__social { margin-left: 0; }
  .foot .foot__note.foot__note { width: 100%; }
}