/* ---------------------------------------------------------------------------
   /contact (.ea-contact, .ea-person).

   Loaded only on that page; see the enqueue in functions.php.

   WHY THIS FILE EXISTS
   --------------------
   The imported body was a 21 row Fluid Engine grid holding four blocks: the
   heading and three lines of copy top left, the form top right, and the email,
   phone and address pinned to the last two rows. Fluid Engine reserves every
   row whether or not anything sits in it, so at 1440 the page measured 1967px
   with ink on 19.1% of it and a 236px band of nothing between the form and the
   contact details. Nothing about that is fixable by restyling the grid; the
   page had to come off it.

   Everything here is the language of assets/css/nbhd-archive.css and
   assets/css/home-sections.css: the same 1180px field, the same 6vw gutter, the
   same --eabc-paper and --eabc-sand grounds, the same 1.5rem Cormorant name
   over a .72rem Hanken small-caps label over 1rem prose, the same 6.4px radius,
   the same hairline rgba(0,0,0,.16) rule the Knowledge Center card uses in
   place of a photograph. No new colour, button, face or spacing step is
   introduced.

   WHAT IS NOT HERE
   ----------------
   A band explaining the form. One revision closed the page with three numbered
   steps saying that a person reads your note and replies within a day. It was
   cut for telling the reader what they already assumed, and this note is left
   in because a page that looks empty invites exactly that mistake again. Space
   on this page gets fixed by laying the real things out properly, never by
   adding copy about the form the reader is already looking at.

   THE TWO COLUMNS, AND WHICH ONE COMES FIRST
   ------------------------------------------
   The rail is first in the document and left at desktop; the form is second and
   right. That is where the old page put both, so what changes is the space
   between them and not the arrangement. It also means a phone gets the tappable
   email and phone number BEFORE a 400px form rather than under it, without a
   CSS `order` anywhere: reading order, visual order and focus order are the
   same at every width.

   The form column is the wider of the two (1.4fr against 1fr) because Tally
   lays its name and email fields out two up and they wrap to one column early,
   which is what makes the embed tall. The rail is text and wants the narrower
   measure anyway.

   Every property that Squarespace's bundle also sets globally (font, margin,
   colour, text-align, letter-spacing, list-style) is stated explicitly.
   Anything left to inherit is a rule someone else gets to win.
   --------------------------------------------------------------------------- */

/* --- Band 1: the rail and the form -------------------------------------- */

/* Ground. The hero band above resolves to the `white-bold` theme, so paper here
   is a half-step down from it rather than a second colour, exactly as on
   /neighborhoods and /calculators: the band reads as its own field without a
   visible seam. */
.ea-contact{padding:.5rem 6vw 4rem;background:var(--eabc-paper,#fafafa);color:var(--eabc-ink,#2e2e2f)}
.ea-contact__inner{max-width:1180px;margin:0 auto}

/* minmax(0,...) on both tracks, not 1fr / 1.4fr: a grid track sized in fr has
   an auto minimum, and the Tally iframe inside it is a replaced element that
   will not shrink below its intrinsic width. Without the explicit zero minimum
   the right column pushes the page sideways, which is how horizontal overflow
   gets onto this site. */
.ea-contact__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:3.2rem 4rem;align-items:start;margin:0}

/* --- Headings, shared by both columns ---------------------------------- */

/* The section title. Same face and weight as .ea-hood__title, one step down in
   size because there are two of them side by side under a 45px h1 rather than
   one centred over a grid. */
.ea-contact__h2{margin:0 0 1.1rem;text-align:left;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:1.9rem;line-height:1.15;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f)}

/* --- The rail ----------------------------------------------------------- */

.ea-contact__rail{min-width:0}

.ea-contact__list{list-style:none;margin:0;padding:0}

/* The hairline .ea-kc__card uses for a card with no image to carry it. Three
   items, so the rule is what gives the column its rhythm. */
.ea-contact__item{margin:0;padding:1.1rem 0;border-top:1px solid rgba(0,0,0,.16)}
/* The divider convention: see THE HAIRLINE RULE at the top of sitewide.css. One
   column, so N is 1 and only the first row loses its rule; nothing closes the
   foot of the list. This is the same list as .ea-hcontact__item on the
   homepage and the two must stay in step. */
.ea-contact__item:first-child{border-top:0}

/* Small caps label, the same line as .ea-nbhd__meta and .ea-calc__meta. */
.ea-contact__label{margin:0 0 .4rem;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;line-height:1.3;text-transform:uppercase;
  letter-spacing:.16em;text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}

/* The value is the thing being reached for, so it is ink at reading size, not
   muted. overflow-wrap keeps an address or a long inbox name inside a 320px
   column instead of widening the page. */
.ea-contact__value{margin:0;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1.15rem;line-height:1.45;font-weight:400;font-style:normal;
  text-align:left;color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}

/* <address> is the right element for the office, and both the browser default
   and the ported bundle italicise it. */
.ea-contact__address{font-style:normal}

/* The underline is the same sand hairline .ea-calc__note uses on a link that
   has to read as reachable without becoming a button. */
.ea-contact__value a{color:var(--eabc-ink,#2e2e2f);text-decoration:none;
  border-bottom:1px solid var(--eabc-sand,#dbd7ce)}
.ea-contact__value a:hover,
.ea-contact__value a:focus-visible{color:var(--eabc-ink,#2e2e2f);
  border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-contact__value a:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* Secondary line under a value: the directions link. Same treatment as
   .ea-calc__note's link, one step smaller than the value it hangs off. */
.ea-contact__links{margin:.5rem 0 0;text-align:left;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.78rem;font-weight:400;line-height:1.5;letter-spacing:.02em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}
.ea-contact__links a{color:var(--eabc-ink,#2e2e2f);text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.28)}
.ea-contact__links a:hover,
.ea-contact__links a:focus-visible{border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-contact__links a:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* ---------------------------------------------------------------------------
   "Direct lines" (.ea-person): ONE card in the rail, cycling through the team.

   A second treatment of the same idea, a ten tab strip in a band below the
   form, was built beside this one so the two could be compared on the page and
   was deleted once this one was chosen. Nothing of it is left in this file.

   NO JAVASCRIPT, NO PROBLEM:
     - .ea-person__controls is display:none by default, so a reader with JS
       blocked never sees arrows that do nothing.
     - .ea-person__card is a visible card by default and every one of the ten
       renders, stacked. Only under html.ea-cycle-js do they collapse to one at
       a time. So nobody loses nine people, and a crawler reads all ten.

   THE HEIGHT DOES NOT MOVE while cycling: under `ea-cycle-js` the stack is a
   single grid cell with every card placed in it, so the cell is sized to the
   tallest card in the set and the cards that are not showing are
   visibility:hidden rather than display:none. visibility keeps the box in the
   layout, and unlike opacity:0 it takes the links out of the tab order and out
   of the accessibility tree.
   --------------------------------------------------------------------------- */

/* Sand, so the one block in this column that is about a person rather than a
   channel separates from the paper without a second border treatment. Same
   ground and radius as .eabc-card, left aligned instead of centred because it
   sits in a column of left aligned facts. */
.ea-person{margin:1.6rem 0 0;padding:1.4rem;
  background:var(--eabc-sand,#dbd7ce);border-radius:6.4px}

.ea-person__eyebrow{margin:0 0 1rem}

.ea-person__stack{margin:0}

/* One cell, every card in it. Grid, not absolute positioning, because a grid
   cell is sized by its tallest child and an absolutely positioned card would
   take the stack out of flow and collapse it to nothing. */
.ea-cycle-js .ea-person__stack{display:grid;grid-template-columns:minmax(0,1fr)}
.ea-cycle-js .ea-person__card{grid-area:1/1;margin:0;visibility:hidden}
.ea-cycle-js .ea-person__card.is-current{visibility:visible}

.ea-person__card{display:flex;gap:1.1rem;align-items:flex-start;margin:0 0 1.4rem}
.ea-person__card:last-child{margin-bottom:0}

/* Fixed square, cropped rather than letterboxed, so a portrait shot and a
   landscape one sit identically. flex:none stops the frame collapsing when the
   text beside it is long. object-position favours the top of the frame, which
   is where a face is in a headshot. */
.ea-person__portrait{flex:none;display:block;width:84px;height:84px;
  object-fit:cover;object-position:50% 20%;border-radius:6.4px;
  background:rgba(0,0,0,.06);transition:opacity .2s ease}

/* The portrait's own link. It is a mouse target only, hidden from the tab order
   and the accessibility tree in the markup, because the name beside it is the
   same link and the one that carries the accessible name. */
.ea-person__portraitlink{flex:none;display:block;line-height:0;border-radius:6.4px}
.ea-person__portraitlink:hover .ea-person__portrait{opacity:.82}

.ea-person__body{min-width:0}

.ea-person__name{margin:0;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:1.5rem;line-height:1.2;letter-spacing:-.005em;
  text-align:left;color:var(--eabc-ink,#2e2e2f);overflow-wrap:break-word}

/* rgba(0,0,0,.28) and NOT the --eabc-sand hairline the links in the rail above
   use: this card's ground IS sand, and a sand underline on a sand card is a
   link with no underline at all. Same value as the phone and email inside it.
   This is the link a keyboard reaches, so the focus ring lives here. */
.ea-person__namelink{color:inherit;text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.28)}
.ea-person__namelink:hover,
.ea-person__namelink:focus-visible{border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-person__namelink:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

.ea-person__role{margin:.15rem 0 0;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;line-height:1.3;text-transform:uppercase;
  letter-spacing:.16em;text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-person__lines{list-style:none;margin:.7rem 0 0;padding:0}

/* Label and value on one line, the label at a fixed width so the two rows line
   up under each other, wrapping rather than overflowing on a narrow card. */
.ea-person__line{display:flex;flex-wrap:wrap;gap:.1rem .6rem;margin:0 0 .3rem;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1rem;line-height:1.45;text-align:left;color:var(--eabc-ink,#2e2e2f);
  overflow-wrap:break-word}
.ea-person__line:last-child{margin-bottom:0}

/* A fixed width, not a minimum: "PHONE" is a few pixels wider than "EMAIL" at
   this tracking, and left to size themselves the two values below each other
   start a few pixels apart, which is exactly visible enough to look wrong. */
.ea-person__linelabel{flex:none;width:3.8rem;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;line-height:1.85;text-transform:uppercase;
  letter-spacing:.16em;color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-person__line a{color:var(--eabc-ink,#2e2e2f);text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.28);overflow-wrap:break-word;min-width:0}
.ea-person__line a:hover,
.ea-person__line a:focus-visible{border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-person__line a:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* The one card with no direct line on record. Prose, not a field, because it is
   a sentence and not a value. */
.ea-person__note{margin:.7rem 0 0;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1rem;line-height:1.55;text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}

/* --- The controls ------------------------------------------------------- */

/* Not drawn until the script has run; see the note above. */
.ea-person__controls{display:none}
.ea-cycle-js .ea-person__controls{display:flex;align-items:center;
  justify-content:space-between;gap:1rem;margin:1.1rem 0 0;
  padding:.9rem 0 0;border-top:1px solid rgba(0,0,0,.18)}

.ea-person__count{margin:0;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;line-height:1.3;letter-spacing:.16em;
  text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-person__pager{display:flex;gap:.9rem;align-items:center}

/* The site's own pager, redrawn rather than borrowed: the geometry, the 1px
   chevron and the .9rem gap are lifted straight from .summary-carousel-pager in
   sitewide.css, which is the control the Knowledge Center summary block and the
   press strip already use. Its rules are `!important` and bound to that block's
   markup, so they are copied here instead of being reached for, and this pager
   cannot be caught by runtime.js's carousel wiring. */
.ea-person__arrow{position:relative;display:inline-block;padding:0;
  width:1.4rem;height:1.4rem;background:none;border:0;border-radius:0;
  box-shadow:none;font-size:0;line-height:0;cursor:pointer;
  color:var(--eabc-ink,#2e2e2f);-webkit-appearance:none;appearance:none}
.ea-person__arrow::after{content:"";position:absolute;top:50%;left:50%;
  width:.55rem;height:.55rem;
  border-top:1px solid currentColor;border-right:1px solid currentColor}
.ea-person__arrow--prev::after{transform:translate(-30%,-50%) rotate(-135deg)}
.ea-person__arrow--next::after{transform:translate(-70%,-50%) rotate(45deg)}
.ea-person__arrow:hover{opacity:.6}
.ea-person__arrow:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

/* --- The form column ---------------------------------------------------- */

.ea-contact__form{min-width:0}

.ea-contact__lead{margin:0 0 1.4rem;max-width:520px;
  font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
  font-size:1.05rem;line-height:1.6;font-weight:400;text-align:left;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

/* The embed measures and resizes itself (dynamicHeight=1 on the src), so the
   only thing this has to do is give it the full column and keep it from
   overflowing while it is still at its 500px placeholder height. */
.ea-contact .eabc-form{margin:0;max-width:100%}
.ea-contact .eabc-form iframe{display:block;width:100%;max-width:100%;border:0}

/* Overrides the sitewide .eabc-fineprint centring: everything in this column is
   left aligned against the form's own left edge. */
.ea-contact .eabc-fineprint{margin:.9rem 0 0;text-align:left}

/* --- Narrow ------------------------------------------------------------- */

/* One step earlier than the card grids elsewhere. Those hold three equal
   columns and can go two up; this holds a form whose fields are two up inside
   the iframe, and below roughly 900px the right column is too narrow for them
   before anything on our side has run out of room. */
@media (max-width:900px){
  .ea-contact__cols{grid-template-columns:1fr;gap:2.8rem}
}

@media (max-width:767px){
  .ea-contact{padding:.5rem 6vw 3rem}
  .ea-contact__h2{font-size:1.7rem}
}

/* The 84px frame and the details beside it need roughly 300px between them,
   and at 390 the card is 343px wide less 2.8rem of padding. That holds, so the
   card keeps its shape all the way down; only the longest value, an email
   address, wants the smaller size. */
@media (max-width:520px){
  .ea-person__line{font-size:.95rem}
}