/* WellHexagon shared layout — base, header/nav, footer, buttons, prose.
   Pages keep their own section CSS inline; nothing here animates.
   Motion belongs to each page, gated per the brand's motion score. */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: rgba(160, 133, 79, 0.25); }

/* ---------- header + nav ---------- */

.site-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem 2.5rem;
  flex-wrap: wrap;
  padding: 1.4rem clamp(1.25rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--line-soft);
}
.wordmark {
  font-family: var(--display);
  font-size: 1.1rem;
  text-decoration: none;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.6rem;
  font-size: 0.95rem;
}
.site-nav a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.25s var(--ease-respond), border-color 0.25s var(--ease-respond);
}
.site-nav a:hover { border-bottom-color: var(--brass); color: var(--forest); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--line); }
.wordmark .mark {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.5em;
  vertical-align: -0.12em;
}
.wordmark .mark polygon { fill: none; stroke: var(--brass); stroke-width: 7; }

/* Resources group — native details/summary, no script */
.nav-group { position: relative; }
.nav-group summary {
  list-style: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.25s var(--ease-respond), border-color 0.25s var(--ease-respond);
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover { border-bottom-color: var(--brass); color: var(--forest); }
.nav-group[open] summary { color: var(--forest); }
.nav-group-menu {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0.9rem 1.2rem;
  min-width: 7.5rem;
  text-align: center;
  z-index: 10;
}
@media (max-width: 560px) {
  .nav-group-menu {
    left: 0;
    transform: none;
    text-align: left;
  }
}

/* Hamburger — quick access to every page and Sign in on small screens.
   Native details/summary, no script; the full nav replaces it on wide
   screens, where Sign in is already visible. */
.nav-burger { display: none; }
@media (max-width: 840px) {
  .site-nav { display: none; }
  .site-head { align-items: center; flex-wrap: nowrap; }
  .nav-burger {
    display: block;
    position: relative;
  }
  .nav-burger summary {
    list-style: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin: -8px -8px -8px 0;
    cursor: pointer;
    color: var(--ink);
    transition: color 0.25s var(--ease-respond);
  }
  .nav-burger summary::-webkit-details-marker { display: none; }
  .nav-burger summary:hover,
  .nav-burger[open] summary { color: var(--forest); }
  .nav-burger-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 15rem;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 0.4rem 0;
    font-size: 0.98rem;
  }
  .nav-burger-menu a {
    text-decoration: none;
    white-space: nowrap;
    padding: 0.62rem 1.2rem;
    transition: color 0.25s var(--ease-respond), background-color 0.25s var(--ease-respond);
  }
  .nav-burger-menu a:hover { color: var(--forest); background: var(--paper-deep); }
  .nav-burger-menu a[aria-current="page"] { color: var(--mute); }
  .nav-burger-menu .burger-signin {
    margin-top: 0.5rem;
    border-top: 1px solid var(--line-soft);
    padding-top: 1rem;
    color: var(--forest);
  }
}

/* ---------- buttons + address lines ---------- */

.quiet-btn {
  display: inline-block;
  font-family: var(--text);
  font-size: 1.125rem;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.9rem 2.1rem;
  transition: background-color 0.25s var(--ease-respond), border-color 0.25s var(--ease-respond);
}
.quiet-btn:hover { background: var(--paper-deep); border-color: var(--brass); }

.addr { margin-top: 1.1rem; color: var(--mute); font-size: var(--fs-small); }
.addr a { text-decoration: none; border-bottom: 1px solid var(--line); }
.addr a:hover { border-bottom-color: var(--brass); color: var(--forest); }

/* ---------- shared type patterns ---------- */

.h-page {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h-page);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.h-section {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h-section);
  line-height: 1.2;
}
.h-block {
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--fs-h-block);
  line-height: 1.25;
}
.lede {
  font-family: var(--text);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.45;
}
.prose { max-width: 34em; }
.prose p + p { margin-top: 1.5rem; }
.muted { color: var(--mute); }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line-soft);
  padding: 2.4rem clamp(1.25rem, 4vw, 3.5rem) 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  justify-content: space-between;
  color: var(--mute);
  font-size: var(--fs-small);
}
.site-foot a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 0.2em;
  transition: color 0.25s var(--ease-respond), text-decoration-color 0.25s var(--ease-respond);
}
.site-foot a:hover { text-decoration-color: var(--brass); color: var(--forest); }

/* Touch hit-areas: inline action links get an invisible padding halo.
   Inline vertical padding grows the tap box without moving any line,
   and text-decoration (unlike border-bottom) stays on the text. */
.wordmark { padding: 0.55rem 0.55rem 0.55rem 0; margin: -0.55rem 0; }
.addr a,
.site-foot a { padding-top: 0.55rem; padding-bottom: 0.55rem; }

@media (max-width: 560px) {
  body { font-size: 1.125rem; }
  .site-foot { flex-direction: column; }
}