/*
* South of Heaven 2026
*
* Tokens are measured from the old site, not invented — see DESIGN-TOKENS.md.
* The Elementor kit claimed purple and Inter; the site was orange on black.
*
* Three deliberate departures from what was measured:
* 1. links use the brand orange, not the legacy #CC3366 pink;
* 2. h2 and h3 follow a sane scale (the original rendered h3 LARGER than h2);
* 3. every page gets a real h1 — the old home and artist pages had none.
*/
/* ---------------------------------------------------------------- tokens -- */
:root {
--ink: #000000;
--brand: #fa4300;
--brand-dark: #d63800;
--paper: #ffffff;
--body: #333333;
--muted: #69727d;
--rule: rgba(255, 255, 255, 0.18);
--font: "Hind", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--wrap: 1140px;
--gap: 1.5rem;
--step-0: 1rem; /* 16px, the measured body size */
--step-1: 1.25rem;
--step-2: 1.5rem;
--step-3: 1.875rem;
--step-4: 2.5rem; /* 40px, the measured h1 */
}
/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
/* A page whose sections are black edge to edge should never flash white in
a seam between them. */
background-color: var(--paper);
color: var(--body);
font-family: var(--font);
font-size: var(--step-0);
font-weight: 400;
line-height: 1.5;
}
img, svg, iframe, video { max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus { color: var(--brand-dark); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 0.5em; font-weight: 500; line-height: 1.2; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
/* Elementor's icon-box titles are h3 elements that its own CSS renders at body
size. Converting them to a bare h3 made the contact page's address 24px where
the original was 16px. The element stays an h3 — it is a heading — but it is
sized like the thing it replaces. */
h3.icon-box__title { font-size: 1rem; }
h4 { font-size: var(--step-1); }
h5, h6 { font-size: var(--step-0); }
h6 { text-transform: uppercase; letter-spacing: 0.04em; }
p, ul, ol { margin: 0 0 1.25rem; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); }
.screen-reader-text {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; z-index: 100;
padding: 0.75rem 1rem; background: var(--brand); color: var(--paper);
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }
/* --------------------------------------------------------------- buttons -- */
.btn {
display: inline-block;
padding: 0.5rem 1.25rem;
border: 2px solid var(--paper);
border-radius: 5px;
background: var(--ink);
color: var(--paper);
font-size: 1rem;
line-height: 1.4;
text-decoration: none;
cursor: pointer;
}
.btn:hover, .btn:focus { background: var(--brand); color: var(--paper); text-decoration: none; }
.btn--brand { background: var(--brand); border-color: var(--brand); }
.btn--brand:hover, .btn--brand:focus { background: var(--ink); border-color: var(--paper); }
.btn--dark { background: var(--ink); border-color: var(--ink); }
/* ---------------------------------------------------------------- header -- */
.site-header { background: var(--ink); }
.bar { background: var(--brand); color: var(--paper); }
.bar__inner {
display: flex; align-items: center; gap: var(--gap);
/* Measured off production: the orange band paints 52px, not 60, and its
contents run EDGE TO EDGE rather than sitting inside the 1140 measure —
the social icons start at x=5 and the CTA ends at x=1428. */
min-height: 52px; padding-block: 0;
max-width: none; padding-inline: 6px;
}
.bar__phone { margin: 0 0 0 auto; font-size: 1.2rem; font-weight: 500; }
.bar__phone a { color: var(--paper); }
.bar__cta { flex: none; padding: 0.35rem 1rem; font-size: 1.2rem; text-transform: uppercase; }
/* The rule under the header is 2px on production, not 4 — at 4 it reads as a
heavy band rather than a hairline. */
.masthead { border-bottom: 2px solid var(--brand); overflow: visible; }
.masthead__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--gap);
padding-block: 0;
/* Measured off production by sampling pixel columns:
orange bar 0-52
masthead 52-234
orange rule 234-236 (2px)
logo box 28-258 — it bleeds 24px UP into the bar and 24px BELOW
the rule.
The logo's own black diamond fill is what paints the black around it
inside the orange band. Sitting 10px low left that black missing, which
is what read as "black around the logo missing". */
min-height: 182px;
}
.masthead__side { display: flex; align-items: center; gap: 0.75rem; }
.masthead__side--right { justify-content: flex-end; }
/* The logo overlaps up into the orange bar by ~32px on the live site, and it
is 432x230 — measured, not guessed. Both were wrong before: it sat below the
bar at 190px tall, which is what made the header read as "close but off". */
.masthead__logo { justify-self: center; }
/* -35/-13 rather than -24/-24: the PNG carries ~11px of transparent padding
above the diamond's apex, so an image box at y=28 puts the visible apex at
39 and the black wedge never reaches into the orange bar. The pair still
sums to -48, so the masthead's own height is unchanged. */
.masthead__logo img { display: block; max-height: 230px; width: auto; margin-block: -35px -13px; position: relative; z-index: 2; }
.site-title { color: var(--paper); font-size: var(--step-2); font-weight: 500; }
/* ------------------------------------------------------------------- nav -- */
.primary-nav ul { display: flex; align-items: center; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.primary-nav a { color: var(--paper); font-size: 1rem; padding-block: 0.85rem; }
.primary-nav a:hover, .primary-nav a:focus { color: var(--brand); text-decoration: none; }
.primary-nav .current-menu-item > a { color: var(--brand); }
/* Submenus open on hover on pointer devices and on tap via the toggle script. */
/* Elementor's nav renders a caret on any item with children; without it the
Artists dropdown gives no affordance at all. */
.primary-nav .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 0; height: 0;
margin-left: 0.45em;
vertical-align: 0.15em;
border: 4px solid transparent;
border-top-color: currentColor;
}
.primary-nav .menu-item-has-children { position: relative; }
.primary-nav .sub-menu {
position: absolute; top: 100%; left: 0; z-index: 20;
display: none; min-width: 190px;
flex-direction: column; gap: 0;
padding: 0.5rem 0;
background: var(--ink);
border: 1px solid var(--rule);
}
.primary-nav .sub-menu a { display: block; padding: 0.4rem 1rem; }
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .menu-item-has-children.is-open > .sub-menu { display: flex; }
.nav-toggle {
display: none;
width: 44px; height: 44px;
padding: 0;
border: 2px solid var(--paper); border-radius: 5px;
background: transparent; cursor: pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
display: block; width: 20px; height: 2px; margin-inline: auto;
background: var(--paper); content: "";
}
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after { transform: translateY(4px); }
/* ---------------------------------------------------------------- social -- */
.social { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.social a {
display: grid; place-items: center;
width: 34px; height: 34px;
background: var(--ink); color: var(--paper);
border-radius: 4px;
}
.social a:hover, .social a:focus { background: var(--paper); color: var(--ink); }
/* --------------------------------------------------------------- content -- */
.site-main { display: block; }
.entry { padding-block: 3rem; }
.entry-title, .page-title { color: var(--ink); }
.entry-meta { color: var(--muted); font-size: 0.9375rem; }
.entry-image { margin: 0 0 2rem; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content img { height: auto; }
.entry-content blockquote {
margin: 2rem 0; padding: 0.5rem 0 0.5rem 1.25rem;
border-left: 4px solid var(--brand); color: var(--muted);
}
.post-list { display: grid; gap: 2rem; padding-block: 3rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card { display: flex; flex-direction: column; }
.card__image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__title { margin-block: 0.75rem 0.25rem; font-size: var(--step-1); }
.card__title a { color: var(--ink); }
.card__title a:hover, .card__title a:focus { color: var(--brand); }
.card__meta { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.875rem; }
.post-nav { display: flex; justify-content: space-between; gap: var(--gap); margin-top: 3rem; }
.pagination { padding-block: 2rem; }
.pagination .page-numbers { padding: 0.25rem 0.6rem; }
.pagination .current { background: var(--brand); color: var(--paper); border-radius: 4px; }
.error-404 { padding-block: 4rem; }
.error-404__links { padding-left: 1.25rem; }
/* ----------------------------------------------------------------- forms -- */
.contact-form { max-width: 34rem; padding-block: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1.25rem; }
.field label { font-weight: 500; }
.field input, .field textarea {
padding: 0.6rem 0.7rem;
border: 1px solid #c9ccd1; border-radius: 5px;
font-family: inherit; font-size: 1rem; color: var(--body);
}
.field input:focus, .field textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(250, 67, 0, 0.18); }
/* The honeypot. Off-screen rather than display:none — some bots skip hidden
fields, and skipping it is exactly the behaviour we want to catch. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { margin-bottom: 1.5rem; padding: 0.85rem 1rem; border-radius: 5px; }
.form-notice p:last-child { margin-bottom: 0; }
.form-notice--ok { background: #eef7ee; border: 1px solid #b7ddb7; color: #205b20; }
.form-notice--error { background: #fdeeea; border: 1px solid #f2b8a8; color: #8a2d12; }
/* ---------------------------------------------------------------- footer -- */
/*
* Footer geometry is measured from production: four equal 285px columns inside
* the 1140 measure, everything centred, headings at 28px, body copy at 15px in
* rgba(255,255,255,0.82). The first version had 24px headings, left-aligned
* text and uneven columns — individually small, collectively "close but off".
*/
.site-footer { background: var(--ink); color: var(--paper); padding-block: 3rem 2rem; }
.site-footer a { color: rgba(255, 255, 255, 0.82); }
.site-footer a:hover, .site-footer a:focus { color: var(--brand); }
.site-footer__grid {
display: grid; gap: 0;
grid-template-columns: repeat(4, minmax(0, 1fr));
text-align: center;
}
.footer-col { padding-inline: 0; }
.footer-heading { color: var(--paper); font-size: 1.75rem; font-weight: 500; margin-bottom: 1rem; }
.footer-logo img { max-width: 260px; height: auto; margin-inline: auto; }
/* The live site renders these at #333 on black — dim by design, not a bug in
the rebuild. Reproduced rather than "fixed". */
.artist-list { margin: 0; padding: 0; list-style: none;
display: grid; grid-template-columns: 1fr 1fr;
gap: 1.5rem 1rem; }
.artist-list a { display: block; color: var(--body); font-size: 1rem; }
.artist-list a:hover, .artist-list a:focus { color: var(--brand); }
.hours { margin: 0; padding: 0; list-style: none; }
.hours li { padding-block: 0.18rem; color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; }
.map iframe { width: 100%; height: 200px; border: 0; }
.footer-address {
font-style: normal; line-height: 1.75;
color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem;
margin-bottom: 2rem;
}
/* ----------------------------------------------------------- breakpoints -- */
/* 1025 and 768 are the old site's own breakpoints (viewport_lg / viewport_md). */
@media (max-width: 1025px) {
.masthead__inner { grid-template-columns: auto 1fr auto; }
.masthead__side--left { display: none; }
.masthead__logo { justify-self: start; }
.masthead__logo img { max-height: 120px; }
.nav-toggle { display: block; }
.primary-nav {
position: absolute; left: 0; right: 0; z-index: 30;
display: none;
padding: 1rem var(--gap);
background: var(--ink);
border-bottom: 4px solid var(--brand);
}
.primary-nav.is-open { display: block; }
.primary-nav ul { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.primary-nav .sub-menu { position: static; display: flex; padding-left: 1rem; border: 0; }
.masthead { position: relative; }
}
@media (max-width: 768px) {
:root { --step-4: 2rem; --step-3: 1.5rem; }
.bar__inner { flex-wrap: wrap; justify-content: center; row-gap: 0.5rem; }
.bar__phone { margin-left: 0; }
.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 0; }
.post-nav { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ================================================== CONVERTED CONTENT ===== */
/*
* Everything below styles the output of scripts/convert-pages.php.
*
* The governing fact about this site: its sections are FULL-BLEED and carry
* their own background colour. The home page is black edge to edge. Wrapping
* converted content in a constrained container produced a white page with the
* design floating inside it — the thing that made the first pass look wrong.
*/
.entry { padding-block: 0; }
.entry-header { padding-block: 2rem 1rem; }
.entry--front .entry-header { display: none; }
.entry-content > *:last-child { margin-bottom: 0; }
/* --- sections ------------------------------------------------------------ */
/* flow-root, not overflow/padding hacks: a child's vertical margin would
otherwise COLLAPSE THROUGH a section whose padding is 0 and push the section
boundary, showing the white body between two black bands. That is exactly
what happened between the artist row and the orange panels. */
/* Elementor sections default to ZERO padding and put 10px on the columns
instead; the converter emits any explicit section padding inline. Giving
.sec a default of its own stacked on top of that and inflated every page by
roughly a fifth. */
/* Sections that specify no padding of their own get a little vertical room, so
a lone line of text like "OPEN - Noon to 6 PM" is not jammed against the row
above it. Sections that DO specify padding carry it inline and override this,
so the measured bands are untouched. */
.sec { padding-block: 1.5rem; display: flow-root; }
/* A section with a min-height centres its content vertically, as Elementor
does. Without this the home page hero sat hard against the top of its band. */
.sec--mid { display: flex; align-items: center; }
.sec--mid > .sec__inner { width: 100%; }
.sec__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 0; display: flow-root; }
@media (max-width: 1200px) { .sec__inner { padding-inline: var(--gap); } }
.sec__inner--wide { max-width: none; }
.subsec { width: 100%; }
/* No padding reset between consecutive same-coloured bands: it was guarding
against a seam that cannot happen — the background is continuous either way —
and it silently cancelled the breathing room above "OPEN - Noon to 6 PM". */
/* --- palette utilities --------------------------------------------------- */
/* Four colours, so the converter emits classes rather than inline hex. Change
a token here and every converted page follows. */
.bg-ink { background-color: var(--ink); }
.bg-paper { background-color: var(--paper); }
.bg-brand { background-color: var(--brand); }
.c-ink { color: var(--ink); }
.c-paper { color: var(--paper); }
.c-brand { color: var(--brand); }
.c-muted { color: var(--muted); }
/* Anything on a dark band inherits light text. */
.bg-ink,
.bg-ink :where(h1, h2, h3, h4, h5, h6, p, li, td, th, figcaption) { color: var(--paper); }
.bg-ink a:not(.btn) { color: var(--brand); }
.bg-ink .c-brand { color: var(--brand); }
.bg-ink .c-ink { color: var(--ink); }
/* --- type utilities ------------------------------------------------------ */
.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.tt-upper { text-transform: uppercase; }
/* Roboto appears on a handful of headings; Hind is everything else. */
.ff-alt { font-family: "Roboto", var(--font); }
/* Elementor's named heading sizes. */
.is-s { font-size: 0.9375rem; }
.is-m { font-size: 1.1875rem; }
.is-l { font-size: 1.8125rem; }
.is-xl { font-size: 2.4375rem; }
.is-xxl { font-size: 3.6875rem; }
.prose > *:last-child { margin-bottom: 0; }
/* --- rows and columns ---------------------------------------------------- */
.row { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: stretch; }
.row > .col { flex: 1 1 0; min-width: 0; }
.col { padding: 0; }
/* Only a column that paints a background needs inset padding. Applying
Elementor's nominal 10px to every column narrowed each band by 20px against
the measured 1140 and pushed everything below it down the page. */
.row > .col > *:last-child { margin-bottom: 0; }
.col--25 { flex: 0 1 calc(25% - 1.125rem); }
.col--33 { flex: 0 1 calc(33.333% - 1rem); }
.col--50 { flex: 0 1 calc(50% - 0.75rem); }
.col--66 { flex: 0 1 calc(66.666% - 0.5rem); }
.col--75 { flex: 0 1 calc(75% - 0.375rem); }
.col--100 { flex: 0 1 100%; }
/* A coloured column is a block of colour — the four orange panels on the home
page are columns, not buttons. */
.col.bg-brand,
.col.bg-ink,
.col.bg-paper { padding: 0.9rem 1rem; }
.sec { margin: 0; }
.col.bg-brand :where(h1,h2,h3,h4,h5,h6,p,span,div) { margin: 0; color: var(--paper); font-weight: 600; }
.col.bg-brand a { color: var(--paper); text-decoration: none; }
.col.bg-brand a:hover { text-decoration: underline; }
/* --- images -------------------------------------------------------------- */
.fig { margin: 0 0 1.25rem; }
.fig img { display: block; max-width: 100%; height: auto; }
.fig.ta-center { text-align: center; }
.fig.ta-center img { margin-inline: auto; }
.fit-cover { object-fit: cover; }
.fig figcaption { padding-top: 0; color: var(--body); font-size: 0.8125rem; font-style: italic; }
/*
* A DELIBERATE DIVERGENCE from the live site.
*
* Production renders gallery captions at #333 on a black band, which makes the
* artist names all but invisible, and links none of the photos anywhere. Both
* are reproducible faults rather than design, so this fixes them: legible,
* centred, and the whole tile links to that artist's page.
*/
.bg-ink .fig figcaption { color: rgba(255, 255, 255, 0.92); }
.gallery figcaption {
padding-top: 0.55rem;
text-align: center;
font-style: normal;
font-size: 0.9375rem;
letter-spacing: 0.01em;
}
.fig-link { display: block; color: inherit; text-decoration: none; }
.fig-link img { transition: opacity 140ms ease; }
.fig-link:hover img,
.fig-link:focus-visible img { opacity: 0.82; }
.fig-link:hover figcaption,
.fig-link:focus-visible figcaption { color: var(--brand); text-decoration: underline; }
.fig-link:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gallery { display: grid; gap: 10px; margin: 0 0 1.5rem; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.gallery .fig { margin: 0; }
/* The originals are portrait and are NOT square-cropped on this site — the
artist row on the home page is 4:5. Squaring them lopped the tops off heads. */
.gallery img { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; }
.gallery--cols-1 { --cols: 1; }
.gallery--cols-2 { --cols: 2; }
.gallery--cols-3 { --cols: 3; }
.gallery--cols-4 { --cols: 4; }
.gallery--cols-5 { --cols: 5; }
.gallery--cols-6 { --cols: 6; }
/* --- rules --------------------------------------------------------------- */
/*
* Elementor's divider widget, style "slashes": an orange diagonal hatch used as
* a section break all over this site. A plain
loses it, and losing it was
* a large part of why the converted pages read as a different site.
* repeating-linear-gradient reproduces it with no image and no request.
*/
/* Elementor's divider widget carries its own vertical padding INSIDE the
widget, on top of the 20px widget margin — margins alone left the orange
rules ~40px tight against what follows them. */
.rule-wrap { margin-block: 0; padding-block: 20px; }
/* A section holding nothing but a rule does not also need its own padding —
stacking the two left ~85px under "OPEN" against ~40px above it. */
.sec:has(> .sec__inner > .col > .rule-wrap:only-child) { padding-block: 0; }
/* No exception for a trailing rule: the live page keeps that spacing, and
removing it pulled the footer 47px up. */
.rule-wrap.ta-center { display: flex; justify-content: center; }
.rule-wrap.ta-right { display: flex; justify-content: flex-end; }
.rule { width: 100%; height: 2px; background: currentColor; }
.rule--slashes {
height: 10px;
background: repeating-linear-gradient(-60deg, currentColor 0 2px, transparent 2px 7px);
}
.rule--dotted { height: 0; border-top: 3px dotted currentColor; background: none; }
.rule--dashed { height: 0; border-top: 3px dashed currentColor; background: none; }
.rule--double { height: 0; border-top: 3px double currentColor; background: none; }
/* --- buttons and odds and ends ------------------------------------------- */
.btn-wrap { margin-block: 1.25rem; }
.btn-wrap.ta-center { text-align: center; }
.btn-wrap.ta-right { text-align: right; }
.spacer { width: 100%; }
.map iframe { width: 100%; height: 380px; border: 0; }
.entry-content hr { height: 0; margin: 2.5rem 0; border: 0; border-top: 3px solid var(--brand); }
@media (max-width: 1025px) {
.gallery { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.row > .col { flex: 0 1 100%; }
.gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery--cols-1 { grid-template-columns: 1fr; }
.sec { padding-block: 1.75rem; }
}
/* Elementor's heading widget emits span/div/p as often as h1-h6 — the home page
hero is a . Alignment and vertical rhythm need a block box. */
.entry-content .hd { display: block; margin: 0; line-height: 1.25; }
/* Elementor's own rule: every widget except the last in a column carries 20px
of bottom margin. Without it the hero's three lines sat ~20px tight against
each other on every band. */
.col > *:not(:last-child) { margin-bottom: 20px; }
.col > .rule-wrap:not(:last-child) { margin-bottom: 20px; }
/* No font-weight reset here: it cancelled the fw-* class the converter emits
and rendered the home page hero at 400 instead of 600. */
/* A page that opens on a dark band gets a dark page background, so no seam
between sections can flash white. Set from the first section's colour. */
body.page-dark { background-color: var(--ink); }
/* The contact form mirrors the Elementor original: placeholder-only fields, a
compact textarea, and a small orange button that sizes to its text rather
than filling the column. */
.contact-form .field { gap: 0; margin-bottom: 0.9rem; }
.contact-form .field--submit { margin-top: 0.25rem; }
.contact-form .btn {
width: auto;
padding: 0.6rem 1.1rem;
border: 0;
font-size: 1rem;
text-transform: none;
}
.contact-form textarea { min-height: 7rem; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: #9aa0a6; opacity: 1; }
/* The address and phone lines carry a small icon in the original. */
.entry-content .map iframe { height: 260px; }
/* Footer social icons are inverted and larger than the header's on the live
site — white tiles with dark glyphs, centred under the heading. */
.site-footer .social { justify-content: center; gap: 0.65rem; }
.site-footer .social a {
width: 46px; height: 46px;
background: var(--paper); color: var(--ink);
border-radius: 5px;
}
.site-footer .social a:hover,
.site-footer .social a:focus { background: var(--brand); color: var(--paper); }
.site-footer .social svg { width: 22px; height: 22px; }