/* ---------------------------------------------------------------------------
   One notable transaction, /notable-transactions/<slug>  (.ea-txs).

   ONLY THE BANDS ARE DEFINED HERE. The cards inside "More notable
   transactions" are .ea-tx__* from assets/css/transactions-archive.css,
   unchanged and unextended: same 4:3 crop, same Cormorant lining-tabular
   figure over an EB Garamond address under a Hanken small-caps kicker, same
   stretched link, same 3 / 3 / 1 column steps at the same breakpoints. That
   stylesheet's gate in functions.php was widened to this post type to load
   them; it was not copied.

   THE BAND SHELL IS assets/css/neighborhood.css's .ea-nbhd-related, restated
   against this page's own class. That is the closing band single-nbhd.php
   already carries: same 4.4rem / 5rem padding, same rgba(0,0,0,.12) top rule,
   same 1180px measure, same centred Hanken eyebrow over a 2.1rem Cormorant
   heading, same 3rem to the closing button, same 767px steps. Read those two
   files beside this one and keep the three in step. Nothing here is a new
   colour, face, button or spacing step; every value already appears in
   neighborhood.css, nbhd-archive.css or sitewide.css.

   WHY THE PAGE NEEDED ANY OF IT, measured at 1440 before this existed:

     /notable-transactions/160-w-12th-street-residence-ph2   2016px tall
     /notable-transactions/project-two-llrgk-ga4pe           1436px tall, and
       580px of that was the whole page: three centred lines, a pagination
       strip printing two raw pipe-delimited titles, then the footer.

   The only h1 on either page was one pixel tall and 880px below the address a
   reader actually reads. See the head of single-transaction.php.
   --------------------------------------------------------------------------- */

/* ===========================================================================
   1. THE OPENING.

   THE COMPLAINT. Zeve: "everything feels below the fold", and separately
   "hiding the building guide so far down in the 56 leonard transaction page
   and tribeca guide and all that seems so dumb too. so below the fold.
   applies to all."

   MEASURED ON /notable-transactions/56-leonard-street-ph53 BEFORE ANY OF THIS,
   every number a real getBoundingClientRect against the top of the document.

     1440x900                       390x844
     ------------------------       ------------------------
       0  fixed header, 128px         0  fixed header, 91px
     128  section padding 47.5      91  section padding 27.9
     175  KICKER                   119  reserved grid row 1, EMPTY   <-- 24px
     204  grid row gap 11          154  KICKER (2 rows for 1 line)   <-- 59px
     215  ADDRESS + PRICE, 149px   224  ADDRESS + PRICE, 135px
     364  section padding 47.5     359  reserved grid row 7, EMPTY   <-- 24px
     412  gallery padding 47.5     394  section padding 27.9
     460  PHOTOGRAPH               421  gallery padding 27.9
                                   449  PHOTOGRAPH
     building guide link: y=2700   building guide link: y=3835
     TriBeCa guide link:  y=2700   TriBeCa guide link:  y=3809

   THE CAUSE IS RESERVED SPACE, in two named places, and neither of them is
   "the padding is a bit big".

   (a) THE IMPORTED FLUID ENGINE HERO RESERVES ROWS IT DOES NOT FILL. Read out
       of the section's own inline <style> and its computed grid:

         mobile   grid-template-rows: repeat(7, minmax(24px, auto))
                  kicker  grid-area 2/3/4/9    rows 2 and 3
                  address grid-area 4/2/7/10   rows 4, 5 and 6

       Row 1 and row 7 hold nothing and each still reserves its 24px minimum:
       35px above the kicker and 35px below the price counting the row gap, on
       every one of the twenty nine pages. The kicker spans two 24px rows to
       carry one 25px line, so it renders 59px tall for 25px of ink.

         desktop  grid-template-rows: repeat(5, minmax(29.09px, auto))
                  kicker  grid-area 1/10/2/18  row 1
                  address grid-area 2/4/6/24   rows 2 to 5

       No empty row at 1440, but the address block reserves four rows, 149.4px,
       to hold 123px of type, and the block centres its content in what it
       reserved. wp-site says this in one line: "a block reserves its full row
       span even when its content is shorter."

   (b) THE SEAM PAYS SECTION PADDING TWICE. The opening section ends on 47.5px
       of its own and the gallery section opens on 47.5px of its own, with
       nothing at all between them: 95px at 1440 and 56px at 390 of one gap
       built out of two paddings.

   WHAT IS NOT TOUCHED, and deliberately. The 127.7px at the top is the header
   clearance and it is measured off the real header by runtime.js, so it is the
   header, not slack. The 47.5px under it is the site's opening rhythm on every
   section built page and trimming it here is exactly the "shave padding until
   it looks better" this was supposed to avoid. The type is not resized, not
   re-tracked and not re-spaced: the address and the price are the deal's own
   imported blocks and they render at the size they always did.

   WHAT A READER GETS IN THE FIRST SCREEN, and why it is that set. One closed
   deal, read in ten seconds, so: the neighborhood, the address, the price, the
   record line where the firm wrote one, the two ways into the context, and the
   photograph. That is the index card's own set. A reader arriving from
   /notable-transactions should meet the four facts they just clicked, larger,
   with the photograph they were promised, and the onward clicks in reach.
   ======================================================================== */

/* --- (a) The reserved rows -------------------------------------------- */

/* Rows size to their content. `auto` names ONE explicit row, so every row after
   it is implicit and takes grid-auto-rows, which is auto: an empty row measures
   0 and a row with a line in it measures the line. The row GAPS are untouched,
   so the distance between the kicker and the address is exactly what it was.

   !important because the repeat() this replaces is in a <style> inside the post
   content, which is later in the document than this file and wins at equal
   specificity. That is the one case wp-site sanctions it for.

   Scoped to the FIRST section of a transaction body: it is the only
   .fluid-engine any of the twenty nine carry (counted: fe=1 on all of them),
   and naming the first section anyway means a second one added later keeps
   whatever grid it was authored with. */
body.single-transaction .sections > .page-section:first-child .fluid-engine{
  grid-template-rows:auto !important}

/* --- (b) The seam ------------------------------------------------------ */

/* One padding, not two. The gallery below already opens on its own 3.3vmax and
   that is now the whole gap, so the opening section stops paying a second one
   into the same space. Nothing else in the section moves: this is its bottom
   edge, and the top edge, the header clearance and the type are all untouched.
   .content-wrapper is where Squarespace puts the value, not the <section>. The
   rule being beaten is, verbatim from assets/css/sqs/sqs-site.css,

     .page-section.vertical-alignment--middle:not(.content-collection)
       :not(.gallery-section):not(.user-items-list-section)
       :not(.editmode-changing-rowcount).section-height--small
       > .content-wrapper { padding-top:3.3vmax; padding-bottom:3.3vmax }

   which is ten class selectors deep, so this cannot win on specificity at any
   sane length and says !important instead. The paired padding-top is left
   exactly as it is: it is the site's opening rhythm and this is a seam fix, not
   a trim. */
body.single-transaction .sections > .page-section:first-child > .content-wrapper{
  padding-bottom:0 !important}

/* The nine bodies with no gallery get .ea-txs__shot in that slot instead, so it
   takes the same opening gap the gallery has rather than butting against the
   price. Its padding-top is set with the rest of that rule in section 2.

   3.3vmax is what Squarespace computes for a section-height--small content
   wrapper at both breakpoints: 47.52px at 1440x900, 27.85px at 390x844.
   Written as that expression rather than as two measured pixel values, so the
   gallery gap and the photograph gap stay equal at every viewport width. */

/* --- The two context links -------------------------------------------- */

/* THE BUILDING GUIDE AND THE NEIGHBORHOOD GUIDE, in the opening.

   They were at the foot, inside "More notable transactions", at y=2700 at 1440
   on a 4834px page. On a page about one closed deal at 56 Leonard Street, "56
   Leonard Street" is the most interesting onward click a reader has.

   NOT A NEW COMPONENT. .ea-txs__out is the quiet underlined exit already
   defined below for the foot of this page, which is itself sitewide.css's
   .ea-mw__archive convention; this is the same link in a second place. Set at
   the label step in the label face rather than as prose, because it is
   navigation, and separated by air rather than by a slash or a middot, which
   are separator glyphs this site does not use anywhere.

   Centred, because the imported hero above it is centred and this line belongs
   to it. 6vw gutters, the site's own, so it can never be wider than the page,
   and flex-wrap so at 390 a long pair becomes two lines instead of pushing the
   page sideways.

   THE MARGIN IS THE WHOLE GAP FROM THE PRICE. 1.6rem: closer than one body
   paragraph is to the next, because this is part of the block above it rather
   than the next thing on the page.

   WHERE NEITHER LINK RESOLVES, which is the three confidential deals, the
   element is not emitted at all and the photograph simply follows the price at
   the same 3.3vmax it would have anyway. That is why the line is LAST in the
   opening: absent, it costs nothing, and no line above it moves. Same rule,
   same reasoning, as the two conditional tail lines on the index card. */
.ea-txs__context{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.8rem;margin:1.6rem 0 0;padding:0 6vw;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  line-height:1.4;text-align:center}

@media (max-width:767px){
  .ea-txs__context{gap:.6rem 1.2rem;margin-top:1.3rem}
}

/* ===========================================================================
   2. THE PHOTOGRAPH, on the nine pages whose imported body carries none.

   NOT a hero and not a full-bleed banner. It sits where the gallery sits on the
   other twenty, at the article measure, so all twenty nine pages have one
   shape. The image is the one already stored on this post and already published
   for this deal on the index; nothing is borrowed from a building page and
   nothing is generated. See the note in single-transaction.php for what these
   nine pictures actually are and why that decides the alt text.
   ======================================================================== */

/* The ground is the page ground, not a band: this belongs to the article above
   it, and painting it on paper would draw a box around one image.

   The 3.3vmax top is the seam fix from section 1: the opening section no longer
   pays a bottom padding, so this element owns the gap between the price and the
   photograph and holds it at exactly the value the gallery holds it at on the
   other twenty. */
.ea-txs__shot{padding:3.3vmax 6vw 1rem}

/* 1012px is .ea-mwx__heroinner's measure and .ea-archive-intro's, the widest
   thing this site sets text in. The imported galleries render at 647px per
   image two-up, so a single image at 1012px is the same order of size without
   pretending to be a banner. */
.ea-txs__shotinner{max-width:1012px;margin:0 auto}

/* 3:2, which is the lead crop on the index, rather than the 4:3 the cards use:
   at 1012px wide a 4:3 crop is 759px of photograph, and these nine are facades
   and courtyards rather than rooms. Same 6.4px radius and same placeholder
   ground as every other crop on the site. */
.ea-txs__shotinner img{display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;object-position:50% 50%;
  border-radius:6.4px;background:rgba(0,0,0,.06)}

@supports not (aspect-ratio:3/2){
  .ea-txs__shotinner img{height:auto}
}

/* ===========================================================================
   3. "More notable transactions".
   ======================================================================== */

.ea-txs-related{padding:4.4rem 6vw 5rem;background:var(--eabc-paper,#fafafa);
  color:var(--eabc-ink,#2e2e2f);border-top:1px solid rgba(0,0,0,.12)}

/* Same measure as .ea-tx__inner on the index, so three cards here are the same
   width as three cards there. */
.ea-txs-related__inner{max-width:1180px;margin:0 auto;min-width:0}

.ea-txs-related__eyebrow{margin:0 0 1.1rem;text-align:center;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.75rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  color:var(--eabc-muted,rgba(0,0,0,.58))}

.ea-txs-related__title{margin:0 0 2.6rem;text-align:center;
  font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
  font-weight:400;font-size:2.1rem;line-height:1.15;letter-spacing:-.005em;
  color:var(--eabc-ink,#2e2e2f)}

/* THE GRID AND ITS PHONE BEHAVIOUR ARE .ea-tx__grid--band, in
   assets/css/transactions-archive.css with the card it modifies. Read the note
   there: it is the same decision this band and the one on a neighborhood guide
   both need, so it is written once in the file that owns the card rather than
   twice in the two band stylesheets. It sets the row gap for a single row, caps
   the field at the width of --ea-tx-cols index cards, and keeps the card a card
   at 390 instead of letting the index's ruled-row layout reach a band. */

/* --- The quiet line of exits ------------------------------------------- */

/* The ways out that are not another transaction: the neighborhood guide, the
   building page, the index. One line, centred under the cards, each item
   printed only where it resolves.

   Set at the label step in the label face, not as prose, because these are
   navigation rather than a sentence, and separated by air rather than by a
   punctuation mark: three links divided by slashes or middots would introduce a
   separator glyph this site does not use anywhere else. flex-wrap so the line
   becomes two lines on a phone instead of pushing the page sideways. */
.ea-txs-related__links{display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.8rem;margin:2.6rem 0 0;
  font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
  font-size:.72rem;font-weight:400;text-transform:uppercase;letter-spacing:.16em;
  line-height:1.4;text-align:center}

/* The site's quiet secondary link, the same rgba(46,46,47,.28) underline
   .ea-mw__archive uses under the Market Watch button and the same one the index
   card's guide link carries, stepping up to full ink when pointed at. */
.ea-txs__out{color:var(--eabc-ink,#2e2e2f);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(46,46,47,.28)}
.ea-txs__out:hover{color:var(--eabc-ink,#2e2e2f);text-decoration-color:var(--eabc-ink,#2e2e2f)}
.ea-txs__out:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}

.ea-txs-related__cta{margin:2.4rem 0 0;text-align:center}

@media (max-width:767px){
  .ea-txs-related{padding:3.2rem 6vw 3.6rem}
  .ea-txs-related__title{margin-bottom:2.1rem;font-size:1.75rem}
  .ea-txs-related__links{margin-top:2.1rem;gap:.6rem 1.2rem}
  .ea-txs-related__cta{margin-top:2rem}
}

/* The button stays the site's inline pill at every width the audit checks. Its
   2.2rem side padding plus "Ask about a transaction" only runs out of room
   below roughly 360px, so trim the padding there rather than let a label push
   the page sideways. Same rule, same reason, as .ea-nbhd-related__cta. */
@media (max-width:360px){
  .ea-txs-related__cta .eabc-btn{padding-left:1.1rem;padding-right:1.1rem}
}

/* ===========================================================================
   4. The enquiry card at the foot.

   .ea-autocta carries margin-top:3rem for the article pages it was built for.
   Here it follows a band that already ends on its own padding, exactly as it
   does after the three listing fields, so it takes the same treatment those
   three take in sitewide.css and the field's padding is the whole gap. The
   rule is written there with its siblings, not here, so there is one place to
   change all four.
   ======================================================================== */