/* ---------------------------------------------------------------------------
/exclusive-listings (.ea-xl).
Loaded only on that page; see the enqueue in functions.php. That gate is what
makes the two unscoped rules at the bottom of this file safe.
WHY THIS FILE LOOKS DIFFERENT FROM THE LAST TWO PASSES
------------------------------------------------------
Pass one was five bands and 526 words: "very messy and very wordy". Pass two
was two bands and 153 words, entirely on paper and sand, with no image:
"imo you regressed the exclusive listings page. it needs a full rethink.
again, think member application exclusive zero bond crane club zzs vibe."
Both passes were arguing about how much to say. Neither was wrong about the
words and neither page felt like anything, because a page selling private
access to extraordinary homes had no photograph on it, nothing at a scale
larger than a heading, and no moment that asked the reader to do something.
So the shape here is a PLATE, a REQUEST and an FAQ. A full-bleed photograph
carrying the page's identity and the firm's two figures, then the ask and the
form, and only then the detail. Space is the material: the plate is 700px of
one picture and about fifty words, which is the only thing the reference
sites do that a services page does not.
The FAQ is the third pass's own correction, and it is Zeve's: "maybe an FAQ
at the bottom is better than a page of bullshit. i like the top." So the
explaining that used to sit between the reader and the form now sits under
it, in the site's own FAQ section, set in the site's own FAQ type. See band 3.
WHAT IS BORROWED, AND WHAT IS NEW
---------------------------------
Borrowed unchanged: the --eabc-* tokens, Cormorant over EB Garamond over
Hanken small-caps, the 1180px field, the 6vw gutter, the 6.4px radius, the
rgba(0,0,0,.16) hairline, .eabc-card's sand-plate recipe (turned left
aligned), .eabc-form and .eabc-fineprint.
New, and each one earns its line:
THE DARK GROUND. --eabc-ink as a field rather than as type, with
--eabc-paper as the type on it. Not a new colour: the same two tokens, the
other way up. The site already does this on the homepage hero and in the
footer, so it is a register this design system has, not a second language.
THE SCRIM. A black gradient over the photograph. Squarespace's own section
background does exactly this and the homepage hero sets it to 0.25; this
one is stronger and shaped, because white type has to clear AA over a
picture whose top corner is a cream wall and whose foot is a pale floor.
THE INVERTED HAIRLINE. rgba(250,250,250,.26). The same 1px rule the whole
site divides things with, at the same weight, on the inverse ground.
THE INVERTED BUTTON. Paper plate, ink label, stepping to sand on hover with
the label unchanged. That is the .eabc-btn hover convention (the plate
moves one shade, the label does not) and it is the same treatment
.ea-hero-cta__btn already uses on the homepage's own dark hero.
No new typeface, no new radius, no new spacing step, no accent colour.
THE DIVIDER CONVENTION is THE HAIRLINE RULE at the top of sitewide.css:
border-top on every item, suppressed on the first ROW, never a border-bottom.
.ea-xl__stat is a pair rather than a list, so its rule is that same hairline
turned ninety degrees and suppressed on the first of the two. The only other
rules on the page are the one under the form's label and the one over the
colophon, and both are border-top on the thing below them.
Every property that Squarespace's bundle also sets globally (font, margin,
colour, text-align, letter-spacing, list-style) is stated explicitly here.
Anything left to inherit is a rule someone else gets to win.
--------------------------------------------------------------------------- */
/* --- Shared ------------------------------------------------------------- */
/* The 1180px field every other band on this site uses. Stated once and
inherited by both bands. The 6vw gutter is on the bands themselves, because
the plate's photograph has to run edge to edge underneath it. */
.ea-xl__inner{width:100%;max-width:1180px;margin:0 auto}
/* ===========================================================================
BAND 1: THE PLATE
=========================================================================== */
/* .ea-archive-hero is kept on this element for ONE reason: runtime.js pads the
first one it finds by the measured header height, as an inline style, and
without it the eyebrow sits under the logo. That inline padding-top beats the
shorthand below, which is why the shorthand's own top value is only a
fallback for a page where the script has not run.
Two classes, not one: sitewide.css already styles .ea-archive-hero (a 44px
padding-bottom and a --siteBackgroundColor ground) and this has to win
without an !important.
The ink ground is not decoration. If the photograph is missing from the media
library, ea_xl_plate_image() returns nothing and this is what the plate
paints, so the white type on it still reads. */
.ea-archive-hero.ea-xl__plate{position:relative;overflow:hidden;
display:flex;flex-direction:column;justify-content:flex-end;
box-sizing:border-box;min-height:700px;padding:128px 6vw 3.6rem;
background:var(--eabc-ink,#2e2e2f);color:var(--eabc-paper,#fafafa)}
/* The photograph, under the scrim, behind everything. An ![]()
and not a CSS
background so it keeps the srcset WordPress generated: at 1440 the browser
takes the 1536px file (272KB) rather than the 2500px original (688KB).
object-position sits a little above centre. The source is 4:3 and the plate
is nearer 2:1, so the crop is a horizontal band; at dead centre it took the
fireplace opening and lost the drawings above it. */
.ea-xl__photowrap{position:absolute;inset:0;z-index:0;overflow:hidden}
.ea-xl__photo{display:block;width:100%;height:100%;max-width:none;margin:0;
object-fit:cover;object-position:center 44%}
/* Shaped in two directions, and neither is arbitrary.
ACROSS: every word on the plate is in the left 34% of it. So that is where
the darkness is, and the right two thirds of the picture, which is the part
with the cabinet wall and the chair in it, is left nearly alone. A flat
overlay heavy enough to carry white type everywhere would have taken the
whole photograph down with it.
DOWN: darkest at the very top, where the inverted header sits over a cream
wall, and darkest again at the foot, under the figures.
The two layers multiply. Sampled against the rendered 1536px file: behind the
lead the combined alpha is about .76, which puts #fafafa on it at better than
9:1; behind the eyebrow and the figure labels, the two lightest things on the
plate, better than 7:1. Both clear WCAG AA for body text with room to spare. */
.ea-xl__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(to right,
rgba(0,0,0,.72) 0%,
rgba(0,0,0,.40) 34%,
rgba(0,0,0,.10) 72%,
rgba(0,0,0,.06) 100%),
linear-gradient(to bottom,
rgba(0,0,0,.40) 0%,
rgba(0,0,0,.10) 26%,
rgba(0,0,0,.16) 55%,
rgba(0,0,0,.58) 100%)}
.ea-xl__plateinner{position:relative;z-index:2}
/* The identity block. 44ch is deliberately narrower than the field: a hero line
that runs the full 1180px reads as a paragraph of body copy, and the point of
the plate is that there is more picture than text on it. */
.ea-xl__id{margin:0 0 2.8rem;max-width:44rem}
.ea-xl__eyebrow{margin:0 0 1.1rem;max-width:none;
font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
font-size:.75rem;font-weight:400;line-height:1.3;text-align:left;
text-transform:uppercase;letter-spacing:.18em;color:rgba(250,250,250,.82)}
/* Bigger than the 45.376px the archive heroes and the homepage use, and that is
the point: this is the one element on the page that is allowed to be large.
It stops at 3.6rem so it is a clear step up from the homepage rather than a
different site. */
.ea-xl__h1{margin:0 0 1.2rem;max-width:none;
font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
font-weight:400;font-size:clamp(2.6rem,4vw,3.6rem);line-height:1.04;
letter-spacing:-.012em;text-align:left;color:var(--eabc-paper,#fafafa)}
.ea-xl__lead{margin:0;max-width:42ch;
font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
font-size:1.15rem;line-height:1.6;font-weight:400;text-align:left;
color:rgba(250,250,250,.92)}
.ea-xl__act{margin:2rem 0 0;text-align:left;line-height:1}
/* THE INVERTED BUTTON. .eabc-btn supplies the face, size, tracking, padding and
radius; this changes which way up it is and nothing else. The hover follows
the house convention exactly: the plate steps one shade, the label does not
move. Paper to sand here, because on an ink ground the sitewide ink-to-black
step would be invisible.
Scoped under .ea-xl and doubled on .eabc-btn so it beats the sitewide rule on
specificity rather than on load order alone. */
.ea-xl .eabc-btn.ea-xl__cta{background:var(--eabc-paper,#fafafa);
color:var(--eabc-ink,#2e2e2f);border:1px solid var(--eabc-paper,#fafafa);
transition:background .2s ease,border-color .2s ease}
.ea-xl .eabc-btn.ea-xl__cta:hover,
.ea-xl .eabc-btn.ea-xl__cta:focus-visible{background:var(--eabc-sand,#dbd7ce);
border-color:var(--eabc-sand,#dbd7ce);color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-xl .eabc-btn.ea-xl__cta:focus-visible{outline:2px solid var(--eabc-paper,#fafafa);
outline-offset:4px}
@media (prefers-reduced-motion:reduce){
.ea-xl .eabc-btn.ea-xl__cta{transition:none}
}
/* The record, along the foot of the plate.
Capped at 640px rather than allowed to fill the 1180px field: at full width
the two figures end up a third of a screen apart and stop reading as a pair.
Capped, they sit under the identity block as one object. */
.ea-xl__stats{list-style:none;margin:0;padding:1.5rem 0 0;max-width:640px;
border-top:1px solid rgba(250,250,250,.26);
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
/* THE HAIRLINE RULE, turned ninety degrees: the same 1px at the same idea of
alpha, on the inverse ground, suppressed on the first of the two exactly as
the horizontal one is suppressed on a first row. */
.ea-xl__stat{margin:0;padding:0 1.6rem;border-left:1px solid rgba(250,250,250,.26)}
.ea-xl__stat:first-child{border-left:0;padding-left:0}
.ea-xl__figure{margin:0 0 .5rem;
font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
font-weight:400;font-size:2.4rem;line-height:1.05;letter-spacing:-.01em;
text-align:left;color:var(--eabc-paper,#fafafa)}
.ea-xl__statlabel{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.4;text-transform:uppercase;
letter-spacing:.16em;text-align:left;color:rgba(250,250,250,.76)}
/* ===========================================================================
BAND 2: THE REQUEST
=========================================================================== */
/* Paper under the ink plate, which is the biggest step this site's palette
has and is what makes the plate read as a plate. */
.ea-xl__ask{padding:4.6rem 6vw 4.4rem;background:var(--eabc-paper,#fafafa);
color:var(--eabc-ink,#2e2e2f)}
/* EVEN TRACKS NOW, where it used to be 1fr / 1.35fr. The right column held a
Tally iframe, which lays its name and email fields two up and needed the
wider share to stop them wrapping. The iframe is in the dialog now and the
column holds a label, a control and a line of fineprint, so the extra third
was just sand. Even tracks put the statement and the way in on equal footing,
which is what the band is.
minmax(0,...) is kept on both. It is cheap, and it is the rule that stops a
grid track's automatic minimum from pushing this page sideways. */
.ea-xl__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:2.6rem 4rem;align-items:start}
.ea-xl__askhead{min-width:0;max-width:34rem}
/* One step up from .ea-contact__h2's 1.9rem, and no further. This band has to
hold its own under a 700px photograph; a 1.9rem heading directly below the
plate looked like a caption for it. */
.ea-xl__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:clamp(1.9rem,2.6vw,2.4rem);line-height:1.12;
letter-spacing:-.008em;color:var(--eabc-ink,#2e2e2f)}
.ea-xl__asklead{margin:0;max-width:38ch;
font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
font-size:1.15rem;line-height:1.55;font-weight:400;text-align:left;
color:var(--eabc-ink,#2e2e2f)}
.ea-xl__form{min-width:0}
/* THE FRAME, and the single most important element on the page after the
photograph.
Pass two dropped the embed straight into the column on the same ground as the
prose beside it, and the result read as "contact us": four inputs and a
Submit, indistinguishable from the same form on five other pages. Set on its
own plate, under its own label, on a rule, it reads as a thing you fill in
and send.
THE EMBED HAS LEFT THE PAGE and the plate has not, because the plate was
never the form: it is what turned four inputs into something you submit, and
it does the same for the control that opens them. A bare button in this
column would be the "disconnected and far" complaint again.
The recipe is .eabc-card's, unchanged: sand ground, the 6.4px radius,
generous padding. It is not literally that class because .eabc-card hardcodes
text-align:center and everything in this column is left aligned. The vertical
padding is one step deeper than it was, because what it holds is one control
rather than five fields and the old value left it looking like a letterbox. */
.ea-xl__frame{background:var(--eabc-sand,#dbd7ce);border-radius:6.4px;
padding:2.2rem 1.9rem 2rem;text-align:left}
.ea-xl__formlabel{margin:0 0 1.6rem;padding:0 0 1.1rem;
border-bottom:1px solid rgba(0,0,0,.16);
font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
font-size:.72rem;font-weight:400;line-height:1.4;text-transform:uppercase;
letter-spacing:.16em;text-align:left;color:var(--eabc-muted,rgba(0,0,0,.58))}
/* The way in. .eabc-btn as the site draws it, right way up this time: an ink
plate on sand, where the plate's own control is a paper plate on ink. The
sitewide hover convention carries with it, the plate stepping one shade to
black with the label unchanged, because nothing here overrides it. */
.ea-xl__frameact{margin:0;text-align:left;line-height:1}
.ea-xl .eabc-btn.ea-xl__framecta:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);
outline-offset:4px}
/* Overrides the sitewide .eabc-fineprint centring: everything in this column is
left aligned against the frame's own left edge. */
.ea-xl .eabc-fineprint{margin:1.3rem 0 0;text-align:left}
/* ===========================================================================
BAND 3: THE FAQ
===========================================================================
THE TYPE HERE IS MEASURED OFF THE SITE'S OWN FAQ, not designed. Every
building page ends in one, authored as a Squarespace markdown block, and the
rendered values on /buildings/56-leonard-street/ are:
h2 Cormorant Garamond 40.192px, weight 400, 32px bottom margin
p EB Garamond 21.184px / 27.5392px, 16px bottom margin
q the same paragraph, opened with at weight 700
measure 677px
Those numbers are reproduced literally below, in px, which is the one place
in this file that does not work in rem. That is the point: a reader who has
just come off a building page should not be able to tell that this FAQ was
built a different way. The px values are the contract with those pages, and
rounding them to rem would quietly break it.
SAND, where band 2 is paper. The ground is the signal: this is the section
you may skip, and it is a field rather than a plate, so it does not compete
with the sand frame the form sits on above it.
--------------------------------------------------------------------------- */
.ea-xl__faq{padding:4.4rem 6vw 3.6rem;background:var(--eabc-sand,#dbd7ce);
color:var(--eabc-ink,#2e2e2f)}
/* THE ONE THING NOT COPIED FROM THE BUILDING PAGES IS WHERE THE HEADING SITS.
There, the FAQ is a Squarespace markdown block inside a 677px content column,
so a heading on its own line above the answers is the full width of the page
and looks right. Here the band is full bleed at 1180px, and stacking a 40px
heading over a 677px column of prose left 500px of empty sand beside it for
1200px of scroll.
So the heading takes the left track and the answers take the right, which is
the arrangement the band above it already uses. Everything that makes it read
as this site's FAQ is untouched: the words "Frequently asked questions", the
type, the 677px measure, the question set inline in bold at the head of its
own answer. Below 900px the two tracks collapse and it is, to the pixel, the
building-page arrangement.
The heading column is capped so it wraps to two lines rather than running out
into the gutter as one. */
.ea-xl__faqinner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
gap:2rem 4rem;align-items:start}
.ea-xl__faqh2{margin:0;max-width:11em;text-align:left;
font-family:"Cormorant Garamond",var(--heading-font-font-family),Georgia,serif;
font-weight:400;font-size:40.192px;line-height:1.1;letter-spacing:-.005em;
color:var(--eabc-ink,#2e2e2f)}
/* 677px, the measure the building pages set this at. */
.ea-xl__faqbody{min-width:0;max-width:677px}
/* --- The accordion -------------------------------------------------------
Zeve: "also the faq should be within the open/close just like on the
calculators." The mechanism is the one those pages already use, native
/, which brings the keyboard behaviour, the toggling and
the scripts-off case with the element and needs no ARIA and no JavaScript.
What it does NOT bring is any styling: nothing in this theme has ever styled
a , so /nyc-seller-closing-cost-calculator/ and the two other posts
that use them render on browser defaults, disclosure triangle included. The
type below is this site's, so an open row here is the same object the
building pages print flat.
THE DIVIDER IS THE HAIRLINE RULE, unchanged from the top of sitewide.css:
border-top on every item, suppressed on the first, never a border-bottom. The
rows are what the reader now sees instead of five paragraphs, so they have to
read as a list on sight. */
.ea-xl__qa{margin:0;padding:0;
border-top:1px solid rgba(0,0,0,.16)}
.ea-xl__qa:first-child{border-top:0}
/* THE QUESTION. The building pages' at their paragraph size, which is
the whole point: the question is not restyled into a heading just because it
became a control.
list-style and the WebKit pseudo-element both go, because Safari still uses
the older one and Chrome and Firefox use list-style. Removing only one leaves
a triangle on some browsers and not others. */
.ea-xl__q{display:block;list-style:none;cursor:pointer;position:relative;
margin:0;padding:1.1rem 2.4rem 1.1rem 0;
font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
font-size:21.184px;line-height:27.5392px;font-weight:700;font-style:normal;
text-align:left;color:var(--eabc-ink,#2e2e2f)}
.ea-xl__q::-webkit-details-marker{display:none}
/* THE MARKER. One glyph that means both states: a plus that turns into a cross
by rotating, so there is no second character to choose and no dash anywhere.
Set in the sans at the small-caps colour, so it reads as furniture rather
than as punctuation inside the question. */
.ea-xl__q::after{content:"+";position:absolute;right:0;top:1.1rem;
display:block;width:1.2rem;text-align:center;
font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
font-size:1.35rem;font-weight:300;line-height:27.5392px;
color:var(--eabc-muted,rgba(0,0,0,.58));
transform-origin:50% 50%;transition:transform .18s ease}
.ea-xl__qa[open] > .ea-xl__q::after{transform:rotate(45deg)}
.ea-xl__q:hover{color:#000}
.ea-xl__q:hover::after{color:var(--eabc-ink,#2e2e2f)}
.ea-xl__q:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.ea-xl__q::after{transition:none}
}
/* THE ANSWER. The building pages' paragraph, to the decimal, and padded clear
of the marker column above it so the two share a right edge. */
.ea-xl__a{margin:0;padding:0 2.4rem 1.4rem 0;
font-family:"EB Garamond",var(--body-font-font-family),Georgia,serif;
font-size:21.184px;line-height:27.5392px;font-weight:400;font-style:normal;
text-align:left;color:var(--eabc-ink,#2e2e2f)}
/* --- The colophon --------------------------------------------------------- */
/* The two links that let everything above be checked, on the hairline at the
foot of the FAQ. No heading, and a div rather than a section for that reason:
a section with no heading is either an unnamed landmark or an aria-label
invented to name it. */
.ea-xl__close{margin:3.2rem 0 0;padding:1.5rem 0 0;
border-top:1px solid rgba(0,0,0,.16)}
/* Both hand-off links, on one line. The same sand hairline underline
.ea-calc__note and .ea-contact__value use on a link that has to read as
reachable without becoming a second button, which would compete with Tally's
own Submit. On sand the underline has to be the INK at low alpha rather than
the sand token, which is now the ground and would be invisible. */
.ea-xl__links{margin:0;display:flex;flex-wrap:wrap;gap:.5rem 2.6rem;
justify-content:flex-start;
font-family:var(--primary-button-font-font-family,"Hanken Grotesk"),system-ui,sans-serif;
font-size:.9rem;line-height:1.4;font-weight:400;letter-spacing:.02em}
.ea-xl__links a{color:var(--eabc-ink,#2e2e2f);text-decoration:none;
border-bottom:1px solid rgba(46,46,47,.34)}
.ea-xl__links a:hover,
.ea-xl__links a:focus-visible{color:var(--eabc-ink,#2e2e2f);
border-bottom-color:var(--eabc-ink,#2e2e2f);text-decoration:none}
.ea-xl__links a:focus-visible{outline:2px solid var(--eabc-ink,#2e2e2f);outline-offset:3px}
/* ===========================================================================
THE HEADER, OVER A DARK PLATE
===========================================================================
The nav colour is not set here. scripts/rebuild_exclusive_listings.php writes
`bright-inverse` to this page's _elevated_header_theme, inc/chrome.php reads
it and puts it on , and the ported Squarespace bundle takes
--navigationLinkColor to white from there. That is the same mechanism, the
same value and the same result as the homepage over its own dark hero.
The LOGO does not follow, because the recovered Custom CSS swaps to the white
file on `.homepage` alone. So it is swapped here, to the white PNG that is
already in theme/assets/img next to the black one, by the same `content:`
mechanism sitewide.css uses. Relative to this file, ../img/ is that folder;
nothing is fetched from a Squarespace CDN.
Deliberately UNSCOPED. Two selectors that match the site header on every page
would normally be a hazard, and here they are not: functions.php enqueues
this stylesheet on is_page('exclusive-listings') and nowhere else, so these
rules do not exist on any other URL. Scoping them to a body class would mean
inventing one, and scoping them to .page-id-117 would bind the header's
appearance to an import artefact.
--------------------------------------------------------------------------- */
.header-title-logo img,
.header-mobile-logo img{content:url("../img/Elevated---Logo---White---Transparent.png")}
/* ===========================================================================
NARROW
=========================================================================== */
@media (max-width:1024px){
.ea-archive-hero.ea-xl__plate{min-height:640px}
}
/* One step earlier than the card grids elsewhere, exactly as .ea-contact__cols
does: 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-xl__cols{grid-template-columns:1fr;gap:2.4rem}
.ea-xl__askhead{max-width:44rem}
/* Collapsed, this IS the building-page arrangement: the heading on its own
line, 32px of air, then the answers. */
.ea-xl__faqinner{grid-template-columns:1fr;gap:32px}
.ea-xl__faqh2{max-width:none}
}
@media (max-width:767px){
/* The plate keeps its proportions rather than its pixels. 88px is the
measured mobile header, and it is only a fallback: runtime.js overwrites
the top value inline as soon as it has measured the real one. */
.ea-archive-hero.ea-xl__plate{min-height:600px;padding:88px 6vw 2.8rem}
/* The horizontal half of the scrim is dropped at this width and the vertical
half is deepened to compensate. At 390 the type runs the full column, so
"dark where the words are" would mean dark everywhere; a left-to-right ramp
across 390px only produces a visible seam down the middle of the picture. */
.ea-xl__scrim{background:linear-gradient(to bottom,
rgba(0,0,0,.62) 0%,
rgba(0,0,0,.42) 20%,
rgba(0,0,0,.50) 52%,
rgba(0,0,0,.80) 100%)}
.ea-xl__id{margin-bottom:2.2rem}
.ea-xl__lead{font-size:1.05rem}
.ea-xl__act{margin-top:1.7rem}
/* The two figures stay side by side: "$500+ Million" sets in two lines inside
a 155px column and the pair still reads as a pair, which stacking loses.
Only the type and the gutter step down. */
.ea-xl__stats{padding-top:1.2rem}
.ea-xl__stat{padding:0 1rem}
.ea-xl__figure{font-size:1.8rem}
.ea-xl__ask{padding:3.2rem 6vw 3rem}
.ea-xl__asklead{font-size:1.05rem;max-width:44ch}
.ea-xl__frame{padding:1.8rem 1.3rem 1.5rem}
/* The FAQ keeps the building pages' type at every width, because they do:
those blocks are set in px and do not step down on a phone either. Only the
band's own padding changes. */
.ea-xl__faq{padding:3rem 6vw 2.6rem}
.ea-xl__faqinner{gap:24px}
.ea-xl__close{margin-top:2.4rem}
}
@media (max-width:520px){
.ea-xl__figure{font-size:1.6rem}
.ea-xl__statlabel{font-size:.68rem;letter-spacing:.14em}
/* Full width, and the only reason is that a 2.2rem-padded plate label sitting
beside 40% of empty gutter looks like a mistake at this width. Same
treatment .ea-hero-cta__btn takes on the homepage below 767. */
.ea-xl__act{margin-top:1.6rem}
.ea-xl .eabc-btn.ea-xl__cta,
.ea-xl .eabc-btn.ea-xl__framecta{display:block;width:100%;text-align:center}
}