/* ============================================================
   Congregation Havurah of Buffalo — landing page
   Design tokens and layout transcribed from the design handoff.
   No border radius anywhere; the only shadow is the header rule.
   ============================================================ */

:root {
  /* Color */
  --navy:            #1E3A5F;
  --ink:             #1A1A1A;
  --body-gray:       #444a52;
  --body-gray-dark:  #333941;
  --gold:            #A9832E; /* flourishes only: diamonds, hairline rules */
  --gold-text:       #8B6B26; /* same hue+saturation, darkened to 4.56:1 on paper */
  --gold-light:      #d4b46a; /* on navy only — 5.8:1 */
  --subtle:          #6B707A; /* design #8A8F98 darkened to 4.57:1 on paper */
  --paper:           #f7f5f1;
  --paper-raised:    #fdfcfa;
  --hairline:        #c9c5bc;
  --navy-muted-text: #c5cedb;
  --on-navy-rule:    rgba(247, 245, 241, 0.25); /* decorative divider */
  --on-navy-field:   rgba(247, 245, 241, 0.5);  /* control borders — 3.9:1 */
  --on-navy-fill:    rgba(247, 245, 241, 0.06);

  /* Type */
  --font-display: 'EB Garamond', serif;
  --font-ui:      'Source Sans 3', sans-serif;
  /* Arial Narrow keeps the lockup close to width if the webfont is slow. */
  --font-logo:    'Barlow Condensed', 'Arial Narrow', sans-serif;

  /* Layout */
  --content: 1080px;
  --gutter: 32px;
  --header-clearance: 76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  font-family: var(--font-ui);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy); }
a:hover { color: var(--gold-text); }

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
}

img { max-width: 100%; }

/* Centered 1080px content column with 32px gutters outside it. */
.shell {
  box-sizing: content-box;
  max-width: var(--content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections the sticky header jumps to. */
[id] { scroll-margin-top: var(--header-clearance); }

/* --- Shared elements ------------------------------------- */

.kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold-text);
}
.kicker--light { color: var(--gold-light); }

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.2;
  color: var(--navy);
  text-wrap: pretty;
}
.section-title--light { color: var(--paper); }

.prose {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--body-gray-dark);
  text-wrap: pretty;
}

.rule {
  flex: none;
  height: 1.5px;
  background: var(--gold);
}
.rule--sm { width: 26px; }
.rule--md { width: 34px; }

.diamond {
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- Header ---------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 2.5px solid var(--navy);
  box-shadow: 0 4px 0 -3px var(--navy); /* the second, offset hairline */
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand__mark {
  display: block;
  width: 46px;
  height: 17px;
  fill: var(--navy);
}

.brand__name {
  font-family: var(--font-logo);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--navy);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  font-size: 15px;
  font-weight: 600;
}
.site-nav a { text-decoration: none; }

/* --- Hero ------------------------------------------------ */

.hero {
  padding-block: 88px 72px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Logo lockup.
   Every dimension is a multiple of --u, where 1 unit = 1pt at reference
   size, so the whole mark scales by changing one custom property. */
.lockup {
  --u: 1pt;
  position: relative;
  width: calc(134 * var(--u));
  height: calc(74 * var(--u));
  color: var(--navy);
}
.hero .lockup { --u: 1.7pt; }

.lockup svg { fill: currentColor; }

.lockup__arch {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(134 * var(--u));
  height: calc(78 * var(--u));
}

.lockup__congregation,
.lockup__word {
  position: absolute;
  left: 0;
  width: calc(134 * var(--u));
  text-align: center;
  font-family: var(--font-logo);
  font-weight: 700;
  line-height: 1;
  color: currentColor;
}

.lockup__congregation {
  top: calc(40.7 * var(--u));
  font-size: calc(9.5 * var(--u));
  letter-spacing: calc(0.5 * var(--u));
}

.lockup__word {
  top: calc(38 * var(--u));
  font-size: calc(39 * var(--u));
  letter-spacing: calc(-0.2 * var(--u));
}

/* The two drawn capital H's flanking "avura". */
.lockup__flanks {
  position: absolute;
  left: 0;
  top: calc(44.75 * var(--u));
  width: calc(134 * var(--u));
  height: calc(29 * var(--u));
}

.hero__eyebrow {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 5px;
  color: var(--navy);
}

.hero__headline {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 54px;
  line-height: 1.15;
  color: var(--ink);
  max-width: 720px;
  text-wrap: pretty;
}

.hero__intro {
  margin: 22px 0 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--body-gray);
  max-width: 620px;
  text-wrap: pretty;
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  text-decoration: none;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn--solid {
  background: var(--navy);
  color: var(--paper);
  padding: 13px 28px;
}
.btn--solid:hover {
  background: #162c48;
  color: var(--paper);
}
.btn--outline {
  border: 1.5px solid var(--navy);
  color: var(--navy);
  padding: 12px 28px;
}
.btn--outline:hover {
  background: var(--navy);
  color: var(--paper);
}

/* --- Alternating bands ----------------------------------- */

.band {
  background: var(--paper-raised);
  border-top: 0.5px solid var(--hairline);
  border-bottom: 0.5px solid var(--hairline);
}

/* --- Pillars --------------------------------------------- */

.pillars__grid {
  padding-block: 52px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 36px;
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pillar__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: normal;
  color: var(--navy);
}

.pillar__body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--body-gray);
}

/* --- Our Story ------------------------------------------- */

.story {
  padding-block: 80px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

.story__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ruled-link {
  margin: 8px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 15.5px;
}

.story__figures {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.figure__frame {
  border: 1px solid var(--hairline);
  padding: 10px;
  background: var(--paper-raised);
}

.figure__frame img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(0.15);
}

.figure figcaption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--subtle);
}

/* --- How We Practice ------------------------------------- */

.practice__inner {
  padding-block: 80px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.practice__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
}

/* Hairline-gapped grid: the 1px gaps show the background through. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  border: 1px solid var(--hairline);
  background: var(--hairline);
}

.card {
  background: var(--paper-raised);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  color: var(--navy);
}

.card__body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body-gray);
}

.pull-quote {
  margin: 0;
  align-self: center;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  line-height: 1.4;
  color: var(--navy);
  text-wrap: pretty;
}

/* --- Founding Principles --------------------------------- */

.principles {
  padding-block: 80px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.principles__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 640px;
}

/* Newspaper columns, in keeping with where this design came from.
   Two at most; the browser drops to one when the column would go
   below 320px, so no breakpoint is needed. */
.commitments {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 320px 2;
  column-gap: 56px;
}

.commitments li {
  break-inside: avoid;
  position: relative;
  padding-left: 26px;
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-gray);
  text-wrap: pretty;
}

.commitments li:last-child { margin-bottom: 0; }

.commitments li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- Visit ----------------------------------------------- */

.visit { background: var(--navy); }

.visit__inner {
  padding-block: 76px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  /* Was `center` in the design, where both columns were the same height.
     The form makes the right column much taller, so align the tops instead
     — that keeps the two kickers on one line, as the design intended. */
  align-items: start;
}

.visit__lede {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.visit__body {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--navy-muted-text);
  max-width: 460px;
}

.visit__details {
  display: flex;
  flex-direction: column;
  gap: 22px;
  border-left: 1px solid var(--on-navy-rule);
  padding-left: 48px;
}

.detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail__label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-light);
}

.detail__value {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--paper);
}

/* Contact links sit on the default line-height, as in the reference. */
.detail__link {
  font-size: 17px;
  color: var(--paper);
}
.detail__link:hover { color: var(--gold-light); }

/* --- Contact form ---------------------------------------
   Lives on the navy band, so every focus ring and border
   here has to be light rather than the page-default gold.
   --------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--navy-muted-text);
}

.field__control {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16px keeps iOS from zooming on focus */
  line-height: 1.5;
  color: var(--paper);
  background: var(--on-navy-fill);
  border: 1px solid var(--on-navy-field);
  border-radius: 0;
  padding: 10px 12px;
  appearance: none;
}

textarea.field__control {
  resize: vertical;
  min-height: 96px;
}

.visit :focus-visible {
  outline-color: var(--gold-light);
}

.field__control:focus-visible {
  border-color: var(--gold-light);
  outline-offset: 1px;
}

.btn--invert {
  align-self: start;
  margin-top: 4px;
  background: var(--paper);
  color: var(--navy);
  border: 0;
  padding: 13px 28px;
  cursor: pointer;
}
.btn--invert:hover {
  background: var(--gold-light);
  color: var(--navy);
}

/* Spam honeypot: hidden from everyone, including screen readers, so no
   real visitor can trip it. Bots that fill every field in the source do. */
.honeypot { display: none; }

/* --- Confirmation page ----------------------------------- */

.thanks {
  padding-block: 120px 140px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 18px;
}

.thanks__title,
.thanks__body { max-width: 680px; }

.thanks__title {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 44px;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: pretty;
}

.thanks__body {
  margin: 0;
  font-size: 19px;
  line-height: 1.6;
  color: var(--body-gray);
  text-wrap: pretty;
}

/* --- Footer ---------------------------------------------- */

.site-footer {
  padding-block: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.site-footer__mark {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2.5px;
  color: var(--subtle);
}

.site-footer__credit {
  margin: 0;
  font-size: 13px;
  color: var(--subtle);
}

.site-footer__credit a { color: var(--subtle); }
.site-footer__credit a:hover { color: var(--gold-text); }

/* --- Responsive ------------------------------------------
   Desktop values above are the design; these only take over
   below the widths the design was drawn at.
   --------------------------------------------------------- */

@media (max-width: 900px) {
  .story {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .story__figures {
    flex-direction: row;
    align-items: start;
  }
  .story__figures .figure { flex: 1 1 0; }

  .visit__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .visit__details {
    border-left: 0;
    border-top: 1px solid var(--on-navy-rule);
    padding-left: 0;
    padding-top: 32px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
    --header-clearance: 108px;
  }

  .site-header__inner {
    flex-direction: column;
    gap: 12px;
    padding-block: 12px;
  }

  .site-nav {
    gap: 20px;
    font-size: 14px;
  }

  .hero { padding-block: 56px 56px; }
  .hero .lockup { --u: 1.5pt; }
  .hero__eyebrow { font-size: 13px; letter-spacing: 3.5px; }
  .hero__headline { font-size: 38px; }
  .hero__intro { font-size: 17px; }

  .pillars__grid { padding-block: 44px; gap: 30px; }

  .story,
  .practice__inner,
  .principles { padding-block: 56px; }

  .commitments li { font-size: 15.5px; }

  .story__figures { flex-direction: column; }

  .visit__inner { padding-block: 56px; }

  .section-title { font-size: 30px; }
  .pull-quote p { font-size: 22px; }

  .thanks { padding-block: 64px 80px; }
  .thanks__title { font-size: 34px; }
  .thanks__body { font-size: 17px; }
}