/*
 * NJ Gold Star Construction - component and layout styles.
 *
 * Ported from the source site's assets/site.css. What theme.json now owns is
 * deliberately NOT repeated here - body typography and colour, heading families
 * and sizes, and link colours all live in theme.json so the Styles panel is
 * authoritative for them. A declaration duplicated here would silently win and
 * make the Styles panel look broken.
 *
 * Three groups of rules:
 *   1. the source's own component layer, unchanged in effect
 *   2. adaptations where a block wrapper sits between a class and the element
 *      it used to style (core wraps every link-button in two extra divs)
 *   3. the named utility layer the converter emits for declarations no block
 *      attribute can express
 */

/* ---------------------------------------------------------------- 1. base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Room for the fixed call bar. */
body { padding-bottom: 58px; }

img { max-width: 100%; display: block; }

/*
 * Block spacing.
 *
 * theme.json sets blockGap to 0 so core's flow layout does not impose a uniform
 * gap between every block. The source relied on the browser's own paragraph and
 * list margins, which core's `:where(.is-layout-flow) > *` reset would zero, so
 * they are restored explicitly here at a specificity that reset cannot beat.
 * Blocks that carry their own margin attribute render it inline and win over
 * both.
 */
.wp-block-group > p,
.wp-block-group > ul,
.wp-block-group > ol,
.entry-content > p,
.entry-content > ul,
.entry-content > ol { margin-block: 1em; }

/*
 * Core additionally zeroes the first child's top margin and the last child's
 * bottom margin in every flow layout. Mostly that is right here, because it
 * happens to reproduce the margin collapsing the source relied on in ordinary
 * block containers - re-asserting those margins everywhere made the page
 * measurably worse, not better.
 *
 * Two places genuinely need them back, because there the source's container was
 * a grid item, which is its own formatting context and so contained the margin
 * instead of collapsing it away:
 *
 *   - a section heading that opens its container keeps its 8px offset
 *   - a card's closing paragraph keeps the 1em that sets the card's height
 */
.wp-block-group.is-layout-flow > h2.sec:first-child,
.entry-content.is-layout-flow > h2.sec:first-child { margin-block-start: 8px; }

.grid > .wp-block-group.is-layout-flow > p:last-child { margin-block-end: 1em; }

/* -------------------------------------------------------------- 2. layout */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 920px; margin: 0 auto; padding: 0 20px; }

section { padding: 64px 0; }
section.dark { background: #17191c; color: #fff; }
section.warm { background: #f6f3ee; }
section.dark p, section.dark li { color: #c9ccd1; }

h2.sec { font-size: clamp(26px, 3.6vw, 38px); margin: 8px 0 14px; }
.lede { font-size: 18px; max-width: 760px; }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.tight { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.split { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.split > div { flex: 1 1 320px; min-width: 0; }
.split img { flex: 1 1 320px; min-width: 0; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; }

/*
 * The split row's image.
 *
 * In the source the <img> was itself the flex item, so `.split img` could carry
 * the flex basis. core/image wraps every image in a <figure>, and it is the
 * figure that becomes the flex child - with no basis of its own it defaults to
 * `flex: 0 1 auto` and lays out at the file's intrinsic size (1000x667), which
 * overflows the row, wraps the image onto its own line and pushes the text out
 * of the container. The flex sizing has to move to the figure, and the picture
 * then fills it.
 */
.split > .wp-block-image { flex: 1 1 320px; min-width: 0; margin: 0; }
.split > .wp-block-image img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; }

.cols { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.cols > main, .cols > .ngs-col-main { flex: 1 1 440px; min-width: 0; }
.cols > aside { flex: 1 1 280px; max-width: 420px; min-width: 0; display: grid; gap: 18px; }

/* ---------------------------------------------------------- 3. components */

.eyebrow { font-family: Archivo, sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #b4820a; }
.eyebrow.on-dark { color: #f2b01e; }

.topbar { background: #17191c; color: #cfd2d6; font-size: 14px; padding: 9px 0; }
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; }
.topbar a, .topbar p { color: #cfd2d6; }
.topbar p { margin: 0; }
.topbar .gold, .topbar .gold a { color: #f2b01e; font-weight: 700; }

header.site { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid #e5e0d8; box-shadow: 0 1px 12px rgba(23, 25, 28, .06); }
header.site .wrap { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 20px; }
header.site img { height: 52px; max-width: 62vw; width: auto; }
/* The logo is a core/image, so the height lands on a <figure> wrapper. */
header.site .wp-block-image { margin: 0; }
header.site .wp-block-image img { height: 52px; width: auto; }

nav.main { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; justify-content: flex-end; }
nav.main a { font-family: Archivo, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 10px 12px; }
nav.main a.cta, nav.main .cta a { background: #f2b01e; color: #17191c; font-weight: 800; padding: 13px 18px; border-radius: 3px; margin-left: 6px; }
nav.main a.cta:hover, nav.main .cta a:hover { background: #17191c; color: #f2b01e; }
/* core/navigation supplies its own list container; flatten it onto nav.main. */
nav.main .wp-block-navigation__container { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
nav.main .wp-block-navigation-item__content { padding: 10px 12px; }
nav.main .wp-block-navigation-item.cta .wp-block-navigation-item__content { padding: 13px 18px; }

/*
 * Buttons.
 *
 * Deliberately scoped to `a`/`button` rather than a bare `.btn`. core/button
 * puts the source's classes on the `.wp-block-button` wrapper div and the link
 * inside it is a separate element, so an unscoped `.btn` painted the padding
 * twice - once on the wrapper, once on the link - making every button row 48px
 * wider and 32px taller than the original. The block form is styled separately
 * further down.
 */
a.btn, button.btn { display: inline-block; font-family: Archivo, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; padding: 16px 24px; border-radius: 3px; border: 0; cursor: pointer; }
a.btn-gold, button.btn-gold { background: #f2b01e; color: #17191c; }
a.btn-gold:hover, button.btn-gold:hover { background: #ffc63f; color: #17191c; }
a.btn-dark, button.btn-dark { background: #17191c; color: #fff; }
a.btn-dark:hover, button.btn-dark:hover { background: #f2b01e; color: #17191c; }
a.btn-ghost { border: 2px solid #fff; color: #fff; padding: 14px 24px; }
a.btn-ghost:hover { background: #fff; color: #17191c; }
a.btn-ghost-dark { border: 2px solid #17191c; color: #17191c; padding: 14px 24px; }
a.btn-ghost-dark:hover { background: #17191c; color: #f2b01e; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.card { border: 1px solid #e5e0d8; border-radius: 4px; background: #fff; overflow: hidden; }
.card .pad { padding: 20px 22px 24px; }
.card img { width: 100%; height: 210px; object-fit: cover; }
.card:hover { box-shadow: 0 12px 30px rgba(23, 25, 28, .12); }

.muted { color: #5c6068; }
.tick { display: flex; gap: 10px; align-items: baseline; margin: 9px 0; }
.tick b { color: #b4820a; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips a { background: #f6f3ee; border: 1px solid #e5e0d8; border-radius: 999px; padding: 8px 15px; font-size: 15px; }

.answer { background: rgba(242, 176, 30, .12); border-left: 4px solid #f2b01e; border-radius: 3px; padding: 18px 20px; max-width: 820px; }
.answer .f { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f2b01e; margin-bottom: 6px; }
.answer p { margin: 0; font-size: 18px; color: #f0f1f2; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #9ea2a8; margin-bottom: 18px; }
.crumbs a { color: #9ea2a8; }
.crumbs a:hover { color: #f2b01e; }
.crumbs p { margin: 0; }

aside .box { border: 1px solid #e5e0d8; border-radius: 4px; padding: 20px 22px; }
aside .box.dark { background: #17191c; color: #fff; border: 0; }
aside .box.dark p { color: #c9ccd1; font-size: 15px; }
aside .phone { font-family: Archivo, sans-serif; font-size: 26px; font-weight: 800; color: #f2b01e; display: block; }
aside .box h2 { font-size: 16px; font-family: Archivo, sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
aside .box.dark h2 { font-size: 19px; text-transform: none; letter-spacing: 0; }
aside .links { display: grid; gap: 8px; }
aside .links a { font-size: 16px; color: #40454b; }

/*
 * The sidebar facts list. The source used <dl>/<dt>/<dd>; core has no block for
 * a definition list, so the converter emits a group of paragraphs carrying
 * these classes instead - see the note in lib/convert-page.js.
 */
.facts { margin: 0; display: grid; gap: 12px; }
.facts .ngs-as-dt { font-family: Archivo, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b4820a; margin: 0; }
.facts .ngs-as-dd { margin: 3px 0 0; font-size: 16px; color: #40454b; }

details.faq, .wp-block-details.faq { border-bottom: 1px solid #e5e0d8; padding: 16px 0; }
details.faq summary, .wp-block-details.faq summary { font-family: Archivo, sans-serif; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; gap: 14px; list-style: none; }
details.faq summary::-webkit-details-marker, .wp-block-details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after, .wp-block-details.faq summary::after { content: "+"; color: #b4820a; }
details.faq p, .wp-block-details.faq p { margin: 12px 0 0; font-size: 16px; color: #40454b; }

/*
 * The comparison table.
 *
 * core/table puts the block's class on a <figure> wrapper, not on the <table>,
 * so the source's `table.cmp` selectors stop matching entirely. Every rule is
 * written to match both the original shape and the block shape.
 */
.tablewrap { background: #fff; border: 1px solid #e5e0d8; border-radius: 4px; overflow-x: auto; }
.wp-block-table.cmp { margin: 0; }
table.cmp, .cmp table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: 16px; }
table.cmp th, .cmp table th { background: #17191c; color: #fff; text-align: left; padding: 13px 16px; font-family: Archivo, sans-serif; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
table.cmp th.us, .cmp table th.us { color: #f2b01e; }
table.cmp td, .cmp table td { padding: 12px 16px; border-top: 1px solid #e5e0d8; color: #40454b; }
table.cmp td.us, .cmp table td.us { font-weight: 700; color: #17191c; }
table.cmp td.them, .cmp table td.them { color: #7b8087; }

blockquote.rev, .ngs-as-blockquote.rev { margin: 0; background: #f6f3ee; border: 1px solid #e5e0d8; border-radius: 4px; padding: 22px 24px; }
.rev .stars { color: #f2b01e; letter-spacing: 2px; }
.rev p { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; color: #7b8087; }
.rev .ngs-as-footer, .rev footer { font-size: 15px; color: #40454b; }

.band { background: #f2b01e; color: #17191c; padding: 44px 0; }
.band .wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.band p { margin: 6px 0 0; color: #34291a; }

.gal { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.gal figure, .gal .wp-block-image { margin: 0; background: #f6f3ee; border-radius: 4px; overflow: hidden; }
.gal img { width: 100%; height: 250px; object-fit: cover; }
.gal figcaption, .gal .ngs-as-figcaption { padding: 13px 15px 16px; font-size: 15px; color: #40454b; }

footer.site { background: #17191c; color: #b9bcc1; padding: 52px 0 26px; font-size: 16px; }
footer.site .fcols { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
footer.site h3 { font-family: Archivo, sans-serif; font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
footer.site a { color: #b9bcc1; }
footer.site a:hover { color: #f2b01e; }
footer.site .gold { color: #f2b01e; font-weight: 700; }
/*
 * The footer logo. In the source the padding sat on the <img> itself, and with
 * `box-sizing: border-box` its 64px height included that padding - the picture
 * was 52px tall inside a 64px box. core/image moves the class to the <figure>,
 * so the height has to stay on the figure and the image fill what is left; a
 * height of 64px on the image itself renders it 12px taller and 9px wider than
 * the original.
 */
footer.site .logo { height: 64px; width: auto; background: #fff; border-radius: 3px; padding: 6px 10px; display: inline-block; }
footer.site .logo img { height: 100%; width: auto; }
footer.site .fine { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 30px; padding-top: 18px; font-size: 14px; color: #8d9197; }
footer.site .townlist { display: flex; flex-wrap: wrap; gap: 5px 13px; margin-top: 8px; }
footer.site .townlist a { font-size: 14px; color: #8d9197; }

.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; background: #17191c; border-top: 2px solid #f2b01e; }
.callbar a { flex: 1; text-align: center; padding: 15px 8px; font-family: Archivo, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: #f2b01e; }
.callbar a.est, .callbar .est a { background: #f2b01e; color: #17191c; border-left: 1px solid rgba(255, 255, 255, .15); }

form.quote { display: grid; gap: 14px; margin-top: 20px; }
form.quote .row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
form.quote label { display: grid; gap: 5px; font-size: 15px; font-weight: 600; color: #2c3035; }
form.quote input, form.quote select, form.quote textarea { font: inherit; font-size: 16px; padding: 12px 13px; border: 1px solid #cfc9be; border-radius: 3px; background: #fff; }
form.quote .consent { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #5c6068; font-weight: 400; }
form.quote button { justify-self: start; }

/* -------------------------------------- 4. block wrapper reconciliation */

/*
 * Core wraps every link-button in `.wp-block-buttons > .wp-block-button > a`,
 * and puts the source's classes on the middle div. Three consequences are
 * undone here:
 *
 *   - the outer flex wrapper would make a card shrink to its text instead of
 *     filling its grid cell
 *   - core's own button styling would repaint .btn and .card links
 *   - .card / .btn need to reach the <a>, which is what the source styled
 */
/*
 * Every converted link-button gets its own `.wp-block-buttons` wrapper, and
 * that wrapper is a flex container in its own right. Left alone it becomes the
 * layout item wherever the source had the <a> itself - inside `.btns`, `.grid`
 * and the call bar - which added 32px of height to every button row and made
 * cards shrink to their text instead of filling a grid cell.
 *
 * `display: contents` removes the wrapper from layout without removing it from
 * the DOM, so `.wp-block-button` becomes the item exactly where the <a> used to
 * be. Selectors still match, because `display` does not affect matching.
 */
.wp-block-buttons,
.wp-block-buttons.is-layout-flex { display: contents; }

.wp-block-button .wp-block-button__link {
	background-color: transparent;
	color: inherit;
	padding: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: none;
	text-decoration: none;
}

/* Card links: the frame is the wrapper, the padded surface is the anchor. */
.wp-block-button.card { display: block; width: 100%; }
.wp-block-button.card > .wp-block-button__link { display: block; width: 100%; height: 100%; border-radius: inherit; }

/* Text buttons: replay the source's .btn rules onto the anchor. */
.wp-block-button.btn > .wp-block-button__link { display: inline-block; font-family: Archivo, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; padding: 16px 24px; border-radius: 3px; }
.wp-block-button.btn-gold > .wp-block-button__link { background: #f2b01e; color: #17191c; }
.wp-block-button.btn-gold > .wp-block-button__link:hover { background: #ffc63f; color: #17191c; }
.wp-block-button.btn-dark > .wp-block-button__link { background: #17191c; color: #fff; }
.wp-block-button.btn-dark > .wp-block-button__link:hover { background: #f2b01e; color: #17191c; }
.wp-block-button.btn-ghost > .wp-block-button__link { border: 2px solid #fff; color: #fff; padding: 14px 24px; }
.wp-block-button.btn-ghost > .wp-block-button__link:hover { background: #fff; color: #17191c; }
.wp-block-button.btn-ghost-dark > .wp-block-button__link { border: 2px solid #17191c; color: #17191c; padding: 14px 24px; }
.wp-block-button.btn-ghost-dark > .wp-block-button__link:hover { background: #17191c; color: #f2b01e; }
/* The call bar's two buttons stay full-width halves. */
.callbar .wp-block-button { flex: 1; display: block; }
.callbar .wp-block-button > .wp-block-button__link { display: block; text-align: center; padding: 15px 8px; font-family: Archivo, sans-serif; font-weight: 800; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: #f2b01e; }
.callbar .wp-block-button.est > .wp-block-button__link { background: #f2b01e; color: #17191c; border-left: 1px solid rgba(255, 255, 255, .15); }

/*
 * core/image wraps in <figure>; captions and margins should not be added.
 *
 * A linked image renders as `<figure><a><img></a></figure>`, and that inline
 * <a> gives the figure a text line box - nine pixels of descender space under
 * every card image. Making the link a block removes it.
 */
.wp-block-image { margin: 0; }
.wp-block-image > a { display: block; }
.wp-block-image figcaption { margin: 0; }

/*
 * Review quotes.
 *
 * `.rev p` was written for the quote itself, but block content puts every run
 * of text in a paragraph - including the star row and the attribution, which
 * were bare text in a <div> and a <footer>. Without these they inherit the
 * quote's 14px monospace and shrink.
 */
.rev .stars p { font: inherit; color: inherit; letter-spacing: inherit; margin: 0; }

/*
 * Same situation in the "short answer" panel: `.answer p` was written for the
 * answer text, but the small gold label above it was bare text in a <div> and
 * is now a paragraph, so it would inherit the answer's 18px instead of its own
 * 12px.
 */
.answer .f p { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; margin: 0; }
.rev .ngs-as-footer p, .rev footer p { font-family: inherit; font-size: 15px; color: #40454b; margin: 0; }

/* Semantics core/group cannot render, kept as classes so CSS still targets them. */
.ngs-as-figcaption { }
.ngs-as-blockquote { }
.ngs-as-label { }

/* Inline component classes, replacing repeated inline styles inside rich text. */
.ngs-tile-title { display: block; font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.ngs-t-small { font-size: 15px; }
.ngs-link { font-size: 16px; color: #2c3035; }
.ngs-link-on-dark { font-size: 16px; color: #c9ccd1; }
.ngs-link-muted { font-size: 16px; color: #5c6068; }

/*
 * A link that is a layout item becomes a paragraph holding the link. The
 * paragraph must not add the block margin restored above, or every town list
 * would gain 1em between each row instead of the container's own 8px gap.
 */
.is-layout-flex > p, .is-layout-grid > p { margin-block: 0; }

/*
 * The same applies where the flex or grid comes from the site's own stylesheet
 * rather than a block layout: these containers space their rows with `gap`, so
 * the restored paragraph margin would be added on top of it and nearly double
 * the height of every directory list.
 */
.links > p, .chips > p, .townlist > p { margin-block: 0; }

/*
 * These lists size their links from `aside .links a` / `footer .townlist a`
 * rather than from an inline style, so the wrapping paragraph would keep the
 * 17px body size and set each row's line box two pixels taller than the link
 * inside it - about 19px across a twelve-town sidebar.
 */
aside .links > p { font-size: 16px; }
footer.site .townlist > p { font-size: 14px; }

/* ----------------------------------------------------- 5. utility layer */

/*
 * Named utilities for declarations no block attribute can express. They are
 * readable and removable from a block's Advanced panel, unlike generated CSS
 * keyed to a post ID. Sizing utilities land on the <figure> core wraps around
 * an image, so each one also reaches the image inside it.
 */
.ngs-u-block { display: block; }
.ngs-u-inline-block { display: inline-block; }
.ngs-u-inline-flex { display: inline-flex; }
.ngs-u-flex { display: flex; }
.ngs-u-grid { display: grid; }
.ngs-u-column { flex-direction: column; }
.ngs-u-items-center { align-items: center; }
.ngs-u-items-baseline { align-items: baseline; }
.ngs-u-items-start { align-items: flex-start; }
.ngs-u-clip { overflow: hidden; }
.ngs-u-scroll { overflow: auto; }
.ngs-u-plain-list { list-style: none; }
.ngs-u-collapse { border-collapse: collapse; }
.ngs-u-relative { position: relative; }
.ngs-u-absolute { position: absolute; }
.ngs-u-inset-0 { inset: 0; }
.ngs-u-opacity-40 { opacity: .4; }
.ngs-u-text-center { text-align: center; }
.ngs-u-flex-none { flex: none; }
.ngs-u-flex-1 { flex: 1; }
.ngs-u-flex-340 { flex: 1 1 340px; }
.ngs-u-flex-300 { flex: 1 1 300px; }
.ngs-u-minw-0 { min-width: 0; }
.ngs-u-minw-560 { min-width: 560px; }
.ngs-u-minh-48 { min-height: 48px; }
.ngs-u-minh-52 { min-height: 52px; }

.ngs-u-full, .ngs-u-full > img, .ngs-u-full > a > img { width: 100%; }
.ngs-u-w-auto, .ngs-u-w-auto > img, .ngs-u-w-auto > a > img { width: auto; }
.ngs-u-h-full, .ngs-u-h-full > img, .ngs-u-h-full > a > img { height: 100%; }
.ngs-u-h-auto, .ngs-u-h-auto > img, .ngs-u-h-auto > a > img { height: auto; }
.ngs-u-cover, .ngs-u-cover > img, .ngs-u-cover > a > img { object-fit: cover; }
.ngs-u-contain, .ngs-u-contain > img, .ngs-u-contain > a > img { object-fit: contain; }
.ngs-u-ar-16-7, .ngs-u-ar-16-7 > img, .ngs-u-ar-16-7 > a > img { aspect-ratio: 16/7; }
.ngs-u-ar-4-3, .ngs-u-ar-4-3 > img, .ngs-u-ar-4-3 > a > img { aspect-ratio: 4/3; }
.ngs-u-ar-3-2, .ngs-u-ar-3-2 > img, .ngs-u-ar-3-2 > a > img { aspect-ratio: 3/2; }
.ngs-u-ar-1, .ngs-u-ar-1 > img, .ngs-u-ar-1 > a > img { aspect-ratio: 1; }

/* Width steps used by max-width declarations in the source. */
.ngs-w-420 { max-width: 420px; }
.ngs-w-760 { max-width: 760px; }
.ngs-w-920 { max-width: 920px; }
.ngs-w-1180 { max-width: 1180px; }
/*
 * Centres a constrained container while leaving its contents left-aligned.
 * Core's constrained layout is not used for this: it centres every child with
 * `margin-inline: auto !important`, which the source never did.
 */
.ngs-center { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------ 6. mobile */

@media (max-width: 640px) {
	section { padding: 44px 0; }
	body { font-size: 16px; }
	.card img { height: 180px; }
	.gal img { height: 200px; }
	nav.main a, nav.main .wp-block-navigation-item__content { padding: 8px 9px; font-size: 14px; }
	nav.main a.cta, nav.main .wp-block-navigation-item.cta .wp-block-navigation-item__content { padding: 11px 14px; }
}