:root {
  --green: #1f4433;
  --green-soft: #2d5a45;
  --copper: #a35c32;
  --copper-light: #c07d51;
  --paper: #f8f6f0;
  --ink: #29271f;
  --muted: #6d685c;
  --rule: #e2dccc;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: "Public Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color: var(--green);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
}

a { color: var(--green-soft); }

.container { max-width: 1060px; margin: 0 auto; padding: 0 1.5rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brand {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 2rem);
  color: var(--green);
  text-decoration: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand span { color: var(--copper); }

.site-nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 0.15rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--copper); border-bottom-color: var(--copper); }

/* Hamburger toggle — hidden on desktop, shown on mobile for the
   collapsible nav. The admin header's nav is not collapsible. */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--green);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

@media (max-width: 759px) {
  .nav-toggle { display: block; }

  .site-nav.collapsible { display: none; }

  .site-nav.collapsible.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;
    margin-top: 0.4rem;
    border-top: 1px solid var(--rule);
  }

  .site-nav.collapsible a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--rule);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(to bottom, #fdfcf8, var(--paper));
  border-bottom: 1px solid var(--rule);
  padding: 4.5rem 0;
}

/* Mobile-first: the (optional) portrait centered above the text. */
.hero-inner {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero-text {
  max-width: 640px;
  border-left: 3px solid var(--copper);
  padding-left: 1.6rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--copper);
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 700;
  margin-bottom: 1.1rem;
}

.hero .lede {
  font-size: 1.12rem;
  color: var(--muted);
  margin-bottom: 2.2rem;
}

.hero-portrait { width: min(260px, 66vw); margin: 0 auto; }

.hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--copper-light);
}

/* Desktop: portrait left, text right — the text's copper rule then sits
   between the two rather than at the edge of the page. */
@media (min-width: 760px) {
  .hero { padding: 6rem 0; }
  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: 3.5rem;
  }
  .hero-portrait { width: 300px; flex-shrink: 0; margin: 0; }
}

.btn {
  display: inline-block;
  background: var(--green);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  padding: 0.9rem 2.4rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.btn:hover { background: var(--green-soft); }

/* ---------- NADN membership band ---------- */
/* Sits between the hero and the first section: the Academy's gold shield
   and wordmark on a warm strip, so the credential reads before the bio
   does. Mobile-first — logo above the text, side by side from 760px. */
.nadn-band {
  background: #fdfcf8;
  border-bottom: 1px solid var(--rule);
  padding: 2.2rem 0;
}

.nadn-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.4rem;
}

.nadn-logo {
  width: min(320px, 100%);
  height: auto;
  flex-shrink: 0;
}

.nadn-text { max-width: 560px; }

.nadn-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--green);
  line-height: 1.25;
  margin-bottom: 0.4rem;
}

.nadn-note {
  font-size: 0.95rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.nadn-link {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--copper);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.1rem;
}

.nadn-link:hover { color: var(--green); }

@media (min-width: 760px) {
  .nadn-band { padding: 2.6rem 0; }
  .nadn-inner {
    flex-direction: row;
    align-items: center;
    gap: 2.6rem;
  }
  .nadn-logo { width: 300px; }
}

/* ---------- Sections ---------- */
section { padding: 4.5rem 0; }

section:nth-of-type(even) { background: #fdfcf8; }

/* Left-aligned section headings, sitting on a rule. */
.section-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.8rem;
  margin-bottom: 2.2rem;
}

.section-heading { font-size: clamp(1.6rem, 6vw, 2.2rem); }

/* About */
.about-body { max-width: 760px; }
.about-body p { margin-bottom: 1.2rem; }

/* Practice areas: a plain two-column list instead of cards. */
.practice-intro { max-width: 680px; margin-bottom: 2rem; color: var(--muted); }

.practice-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 3rem;
  max-width: 860px;
}

.practice-list li {
  padding: 1rem 0.2rem;
  border-bottom: 1px solid var(--rule);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--green);
}


/* ---------- Calendar ---------- */
.calendar-note { max-width: 680px; margin-bottom: 2rem; color: var(--muted); }
.calendar-note p { margin-bottom: 1rem; }
.calendar-note p:last-child { margin-bottom: 0; }

/* Reggie's availability is embedded whole from nadn.org, so the calendar
   here is an iframe rather than markup this site controls. NADN's own
   stylesheet is responsive — it restyles below 640px — so the frame fills
   its container instead of being pinned to a minimum width.

   Height is fixed because the frame is cross-origin: month navigation
   inside it is an AJAX swap, so this page can neither measure the content
   nor react when it changes. The only safe height is the tallest the
   calendar can ever be, which is the five-row month; the phone layout uses
   taller rows, so the two breakpoints get their own height rather than one
   compromise value that clips phones or leaves a gap on desktop. Both
   values are the ones measured for the Rutens site, whose calendar is the
   same NADN embed. */
.nadn-calendar {
  max-width: 900px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(31, 68, 51, 0.07);
}

.nadn-frame {
  display: block;
  width: 100%;
  height: 750px; /* content measures 748px above 640px */
  border: 0;
}

@media (max-width: 640px) {
  /* NADN's own breakpoint: bigger rows, so taller content — 772px measured. */
  .nadn-frame { height: 775px; }
}

/* ---------- Contact ---------- */
.contact-blurb { max-width: 620px; margin-bottom: 2rem; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  max-width: 860px;
}

.contact-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--copper);
  border-radius: 0 6px 6px 0;
  padding: 1.6rem 1.4rem;
}

.contact-card .label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.contact-card a {
  display: block;
  text-decoration: none;
  font-size: 1.05rem;
  color: var(--green);
  font-weight: 600;
}

/* Each further address sits under the one above it; street above city. */
.contact-card a + a { margin-top: 0.5rem; }
.contact-card a span { display: block; line-height: 1.45; }

/* Booking popup (Web3Forms) */
.contact-cta { margin-top: 2.5rem; }

dialog.booking-dialog {
  border: none;
  padding: 0;
  background: transparent;
  width: min(680px, calc(100vw - 2rem));
}

dialog.booking-dialog::backdrop {
  background: rgba(31, 68, 51, 0.55);
}

.booking {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--copper);
  border-radius: 6px;
  padding: 2rem 1.6rem;
  max-height: 85vh;
  overflow-y: auto;
}

.dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  background: none;
  border: none;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0.3rem;
}

.dialog-close:hover { color: var(--green); }

.booking h3 { text-align: center; font-size: 1.6rem; margin-bottom: 1.5rem; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}

.form-grid .full { grid-column: 1 / -1; }

.booking label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
}

.booking input:not(.botcheck),
.booking textarea {
  width: 100%;
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  padding: 0.6rem 0.7rem;
  border: 1px solid #cfc9b8;
  border-radius: 4px;
  background: #fff;
  margin-top: 0.35rem;
}

.booking textarea { min-height: 120px; resize: vertical; }

.booking .btn { margin-top: 1.3rem; }

.botcheck { display: none; }

#form-status { margin-top: 0.9rem; font-size: 0.95rem; color: var(--muted); }
#form-status.ok { color: #2e6b46; }
#form-status.error { color: #8c3b2e; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--green);
  color: #cfd8cf;
  text-align: center;
  padding: 1.6rem 1rem;
  font-size: 0.9rem;
}

/* The Academy shield again, small, above the copyright line — gold on the
   green footer. */
.footer-shield {
  display: block;
  width: 34px;
  height: auto;
  margin: 0 auto 0.7rem;
}

/* ---------- Admin ---------- */
.admin-page { background: #f1efe7; min-height: 100vh; }

.admin-main { max-width: 880px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.admin-main h1 { margin-bottom: 0.3rem; }

.admin-main .hint { color: var(--muted); margin-bottom: 2rem; }

.admin-section {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.admin-section h2 {
  font-size: 1.35rem;
  border-bottom: 2px solid var(--copper);
  padding-bottom: 0.5rem;
  margin-bottom: 1.2rem;
}

.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--green);
  margin-bottom: 0.35rem;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.7rem;
  border: 1px solid #cfc9b8;
  border-radius: 4px;
  background: #fffdf8;
}

.field textarea { min-height: 110px; resize: vertical; }

.field textarea.tall { min-height: 320px; }

.field .help { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }

.admin-bar {
  position: sticky;
  bottom: 0;
  background: var(--green);
  padding: 0.9rem 1.5rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

#save-status { color: #d8dcd4; font-size: 0.9rem; }
#save-status.error { color: #f0b4b4; }
#save-status.ok { color: var(--copper-light); }