/* ==========================================================================
   Elementa — inner pages stylesheet (3 of 3, handle "elementa-pages").
   Section 13 of the former main.css: the grid extensions, WordPress nav
   markup, page banner and every inner-page component, in their original
   order. Linked after sections.css.
   ========================================================================== */

/* 13 Inner pages ----------------------------------------------------------- */

/* grid extensions the inner templates need */
@media (min-width: 62rem) {
  .e-col-10 { grid-column-end: span 10; }
  .e-start-2 { grid-column-start: 2; }
  .e-start-3 { grid-column-start: 3; }
  .e-start-4 { grid-column-start: 4; }
}

/* The fixed header floats over the dark hero on the home page only. Every
   other page starts with the header solid, so the page begins beneath it. */
.e-inner main { padding-top: var(--header-h); }

/* Primary nav: WordPress prints ul > li > a with .sub-menu for children. The
   rules below give that markup the design's nav, so no walker is needed and
   the hard-coded fallback menu looks identical to an assigned one. */
.e-nav > ul { display: flex; align-items: center; gap: 2.5rem; }
.e-nav li { position: relative; }
.e-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .5rem 0;
  font-size: var(--t-body);
  font-weight: 300;      /* Light 16/22, the live nav */
  line-height: 1.375;
  letter-spacing: 0;
  white-space: nowrap;
}
.e-nav li.menu-item-has-children > a::after,
.e-nav li:has(> .sub-menu) > a::after {
  content: "";
  width: .38em;
  height: .38em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-.12em) rotate(45deg);
  opacity: .7;
}
.e-nav > ul > li.current-menu-item > a,
.e-nav > ul > li.current-menu-ancestor > a,
.e-nav > ul > li.current-menu-parent > a {
  text-decoration: underline;
  text-underline-offset: .45em;
  text-decoration-thickness: 1px;
}
.e-nav .sub-menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 13rem;
  padding: .75rem 0;
  background: var(--e-white);
  color: var(--e-ink);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-fast), transform var(--dur-fast), visibility var(--dur-fast);
}
.e-nav li:hover > .sub-menu, .e-nav li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.e-nav .sub-menu a {
  display: block;
  padding: .55rem 1rem;
  font-size: .8125rem;   /* Light 13/20 #282828, the live dropdown */
  font-weight: 300;
  line-height: 1.5385;
  letter-spacing: 0;
  color: #282828;
  white-space: nowrap;
}
.e-nav .sub-menu a:hover { background: var(--e-greige); }

/* mobile overlay, same WordPress markup */
.e-mobile-nav { overflow-y: auto; }
.e-mobile-nav__menu > ul { display: grid; gap: .25rem; }
.e-mobile-nav__menu a {
  display: block;
  padding: .35rem 0;
  font-size: clamp(1.5rem, 6vw, 1.75rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.e-mobile-nav__menu .sub-menu { display: grid; padding: .25rem 0 .75rem; }
.e-mobile-nav__menu .sub-menu a {
  padding: .3rem 0 .3rem 1.25rem;
  font-size: 1.125rem;
  color: rgba(244, 240, 239, .7);
}

/* page banner: the band every inner page opens with, white since 2.2.2 (N5),
   closed by the usual hairline */
.e-banner {
  padding: clamp(3rem, 2rem + 4vw, 6rem) 0 clamp(2.5rem, 1.5rem + 3vw, 4rem);
  background: var(--bg);
  color: var(--fg);
  border-bottom: 1px solid var(--line);
}
.e-banner__in { row-gap: 1.25rem; align-items: end; }
.e-banner__title {
  font-size: clamp(2rem, 1.125rem + 1.9vw, 2.8125rem); /* 32px on phones, 45px from 1440 (live page h1) */
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: normal;
  text-wrap: balance;
}
.e-banner__title--long {
  font-size: var(--t-h2);
  font-weight: 700; /* a sentence for a title is a heading: Bold, as on live */
  line-height: 1.3;
  letter-spacing: normal;
  max-width: 22em;
}
.e-banner__intro {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--fg);
  max-width: 34em;
  text-wrap: pretty;
}
.e-banner--display { padding-bottom: 0; border-bottom: 0; }
.e-banner--display .e-banner__title { font-size: clamp(2rem, 1.1rem + 2.6vw, 3.4375rem); font-weight: 400; line-height: 1.3; max-width: 24em; } /* live: 55px Roman */
.e-banner__aside { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.e-banner__aside--stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }

/* photo banner (2.3.1): the live site's picture band, back on the pages that
   had one. Full width under the header, 250px tall (203px on a 390px phone),
   the h1 alone in white Light 45/50 (30px on phones) on a 40% veil, 150px in
   from the left edge at 1440 and 25px on phones, all as measured on live. */
.e-banner--photo {
  position: relative;
  display: flex;
  align-items: center;
  height: clamp(12.6875rem, 52vw, 15.625rem);
  padding: 0 clamp(1.5625rem, -1.34rem + 11.9vw, 9.375rem);
  background: var(--e-stone);
  color: var(--e-white);
  border-bottom: 0;
  isolation: isolate;
}
.e-banner--tall { height: clamp(12.6875rem, 5.79rem + 28.29vw, 31.25rem); } /* About: 500px at 1440 */
.e-banner__photo { position: absolute; inset: 0; z-index: -1; }
.e-banner__photo img { width: 100%; height: 100%; object-fit: cover; }
.e-banner__photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
.e-banner--photo .e-banner__title {
  font-size: clamp(1.875rem, 1.527rem + 1.43vw, 2.8125rem);
  text-wrap: nowrap;
}
/* live sets the About title 50px under the middle of its taller photo */
.e-banner--tall .e-banner__title { margin-top: clamp(0rem, -2.32rem + 9.52vw, 6.25rem); }
/* eyebrow and intro, under the photo: a lead-in to the page, no rule of its
   own; the first section's padding sets the distance to the content */
.e-banner__below { padding-top: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem); }
.e-banner__below .e-banner__in { row-gap: .5rem; }

/* spread: picture beside text, alternating */
.e-spread { align-items: center; }
.e-spread__media { aspect-ratio: 4 / 5; }
.e-spread__media--wide { aspect-ratio: 3 / 2; }
.e-spread__media--film { aspect-ratio: 16 / 9; }
.e-spread__text { display: grid; gap: 1.5rem; justify-items: start; align-content: center; }
.e-spread__text .e-h2 { max-width: 14em; }
.e-spread__lead { font-size: 1.0625rem; font-weight: 700; max-width: 30em; }   /* Bold 17px standfirst, live */
@media (max-width: 61.999rem) {
  .e-spread--flip .e-spread__media { order: -1; }
}
@media (min-width: 62rem) {
  /* text on the left fills its column, so no empty band opens before the picture */
  .e-spread > .e-spread__text:first-child .e-prose,
  .e-spread > .e-spread__text:first-child .e-spread__lead { max-width: none; }
}

/* two text columns under one hairline (Purpose / Vision, You / Network) */
.e-cols {
  display: grid;
  gap: var(--space-block) var(--gutter);
  padding-top: var(--space-block);
  border-top: 1px solid var(--line);
}
.e-label + .e-cols { margin-top: 1rem; } /* the label above the hairline needs air since it is 15px */
.e-cols > * { display: grid; gap: 1rem; align-content: start; justify-items: start; }
.e-cols .e-h3 { max-width: 12em; }
.e-cols p { max-width: 46ch; color: var(--fg); }
@media (min-width: 48rem) { .e-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* pull-quote */
.e-pull { display: grid; gap: 1.5rem; align-content: center; }
.e-pull__text {
  font-size: var(--t-quote);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: normal;
  max-width: 24em;
  text-wrap: pretty;
}
.e-pull__who { font-size: var(--t-small); color: var(--fg-muted); }
.e-pull__who strong { display: block; font-weight: 400; color: var(--fg); }
.e-pull__media { aspect-ratio: 4 / 5; }

/* team */
.e-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-block) var(--gutter); }
/* one shrinkable column, so a long email address cannot widen a card past its grid track */
.e-person { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-content: start; }
.e-person .e-media { aspect-ratio: 3 / 4; }
.e-person__cap { display: grid; grid-template-columns: minmax(0, 1fr); gap: .25rem; justify-items: start; padding-top: .75rem; border-top: 1px solid var(--line); }
.e-person__name { font-size: var(--t-h4); font-weight: 400; line-height: 1.3; }
.e-person__role { font-size: var(--t-small); color: var(--fg-muted); }
.e-person__mail { margin-top: .35rem; max-width: 100%; overflow-wrap: anywhere; }
@media (min-width: 62rem) { .e-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* strip: a horizontal rail of wide photographs */
.e-strip {
  display: flex;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-inline: calc(-1 * var(--edge));
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
}
.e-strip::-webkit-scrollbar { display: none; }
.e-strip__item { flex: 0 0 min(84vw, 44rem); scroll-snap-align: start; aspect-ratio: 3 / 2; }
.e-strip__foot { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.5rem; }
.e-strip__nav { display: flex; gap: .5rem; }

/* reviews: a masonry of cards */
.e-reviews { columns: 1; column-gap: var(--gutter); }
.e-review {
  display: grid;
  gap: 1rem;
  break-inside: avoid;
  margin-bottom: var(--gutter);
  padding: 1.75rem;
  border: 1px solid var(--line);
  background: var(--e-white);
}
.e-review__stars { color: var(--e-google); font-size: .8rem; letter-spacing: .1em; }
.e-review__text { line-height: 1.6; text-wrap: pretty; }
.e-review__who { display: grid; gap: .15rem; font-size: var(--t-small); }
.e-review__who strong { font-weight: 400; }
.e-review__who span { color: var(--fg); }
@media (min-width: 48rem) { .e-reviews { columns: 2; } }
@media (min-width: 62rem) { .e-reviews { columns: 3; } }

/* filter pills: buttons on the portfolio, links on the news pages */
.e-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--space-block); }
.e-filters button, .e-filters a {
  display: inline-flex;
  align-items: center;
  padding: .8em 1.25em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: .9375rem;   /* 15px Light, as the live filters and buttons */
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.e-filters button:hover, .e-filters a:hover { border-color: var(--fg); }
.e-filters button[aria-pressed="true"], .e-filters a[aria-current] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.e-filters__count { align-self: center; margin-left: auto; font-size: var(--t-small); color: var(--fg-muted); font-variant-numeric: tabular-nums; }

/* portfolio grid: the selected-work card, three across. Cards sit at the top
   of their row with the caption straight under the picture, and the category
   names take their own line under the title so a long title is never squeezed. */
.e-portfolio { display: grid; gap: var(--space-block) var(--gutter); align-items: start; }
.e-portfolio .e-work__cap { display: grid; justify-content: normal; align-items: start; gap: .35rem; }
.e-portfolio .e-work__meta { white-space: normal; }
.e-work__item[hidden] { display: none; }
@media (min-width: 48rem) { .e-portfolio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .e-portfolio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.e-empty { padding: var(--space-block) 0; color: var(--fg-muted); }

/* services page: one service, one spread, a three-picture composition */
.e-svc { scroll-margin-top: var(--header-h); }
.e-svc__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--gutter) / 2); }
.e-svc__media > .e-media { aspect-ratio: 4 / 3; }
.e-svc__media > .e-media:first-child { grid-column: 1 / -1; aspect-ratio: 3 / 2; }

/* FAQ accordion */
.e-faq { border-top: 1px solid var(--line); }
.e-faq__item { border-bottom: 1px solid var(--line); }
.e-faq__q {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.1875rem;  /* 19px Roman, the live FAQ question */
  font-weight: 400;
  line-height: 1.3;
}
.e-faq__q::-webkit-details-marker { display: none; }
.e-faq__q::marker { content: ""; }
.e-faq__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.e-faq__icon svg { width: .9rem; height: .9rem; transition: transform var(--dur) var(--ease-out); }
.e-faq__item[open] .e-faq__icon { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.e-faq__item[open] .e-faq__icon svg { transform: rotate(45deg); }
.e-faq__a { padding: 0 3.5rem 1.75rem 0; max-width: 60ch; color: var(--fg); }
.e-faq__a p + p { margin-top: 1em; }
.e-faq__side { aspect-ratio: 4 / 5; }
@media (min-width: 62rem) {
  .e-faq__side { align-self: center; }   /* the picture sits centred on the list */
}

/* rich text: anything that comes out of the editor */
.e-rich { font-size: var(--t-body); line-height: 1.625; }
.e-rich > * + * { margin-top: 1.25em; }
.e-rich h2 { font-size: 1.875rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; margin-top: 2em; text-wrap: balance; }   /* Bold 30px, live */
.e-rich h3 { font-size: 1.1875rem; font-weight: 700; line-height: 1.3; margin-top: 1.75em; }   /* Bold 19px, live */
.e-rich h4, .e-rich h5, .e-rich h6 { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-top: 1.5em; }
.e-rich strong, .e-rich b { font-weight: 700; }
.e-rich a { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.e-rich a:hover { color: var(--fg-muted); }
.e-rich ul, .e-rich ol { display: grid; gap: .5em; padding-left: 1.25em; }
.e-rich ul { list-style: disc; }
.e-rich ol { list-style: decimal; }
.e-rich li > ul, .e-rich li > ol { margin-top: .5em; }
.e-rich blockquote { padding-left: 1.5rem; border-left: 1px solid var(--line-strong); font-size: var(--t-h4); font-weight: 300; line-height: 1.4; }
.e-rich blockquote cite { display: block; margin-top: .75em; font-size: var(--t-small); font-style: normal; color: var(--fg-muted); }
.e-rich hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.e-rich img { width: 100%; height: auto; }
.e-rich figure { margin: 2em 0; }
.e-rich figcaption { margin-top: .6em; font-size: var(--t-small); color: var(--fg-muted); }
.e-rich iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.e-rich table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.e-rich th, .e-rich td { padding: .75em 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.e-rich th { font-weight: 400; color: var(--fg-muted); }
.e-rich .wp-block-gallery, .e-rich .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--gutter); }
.e-rich .wp-block-gallery figure, .e-rich .gallery figure { margin: 0; }
/* mixed portrait and landscape pictures: one shape per cell, so rows close up */
.e-rich .wp-block-gallery img, .e-rich .gallery img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.e-rich .alignleft { float: left; max-width: 50%; margin: .25em 1.5rem 1rem 0; }
.e-rich .alignright { float: right; max-width: 50%; margin: .25em 0 1rem 1.5rem; }
.e-rich .aligncenter { margin-inline: auto; }
.e-rich::after { content: ""; display: table; clear: both; }

/* text pages (legal, default page): the reading column starts on the banner's
   left edge, close under it, and its type steps down from the title evenly */
.e-section--text { padding-top: var(--space-block); }
.e-legal { max-width: 42rem; font-size: var(--t-body); line-height: 1.625; }
.e-legal > :first-child { margin-top: 0; }
.e-legal h2 {
  font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem); /* 22px → 28px */
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: normal;
  margin-top: 2em;
  padding-top: .85em;
  border-top: 1px solid var(--line);
}
.e-legal > h2:first-child { padding-top: 0; border-top: 0; }
.e-legal h3 { font-size: var(--t-h4); font-weight: 400; line-height: 1.3; margin-top: 1.75em; }
.e-legal p, .e-legal li { color: var(--fg-muted); }
.e-legal strong, .e-legal b { color: var(--fg); }
.e-legal ul, .e-legal ol { gap: .35em; }

/* single post and project */
.e-single__title { max-width: 16em; }
.e-single__media { aspect-ratio: 16 / 9; }
.e-project__media { aspect-ratio: 2 / 1; }
.e-single__body { max-width: 70ch; }
.e-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.e-meta__sep::before { content: "·"; color: var(--fg-muted); }

/* project meta row: every item brings its own leading dot, so a dot never ends
   a line. The row reaches 2rem further left and is clipped there, so the dot of
   an item that starts a line is cut away too. */
.e-meta--row { column-gap: 0; margin-left: -2rem; clip-path: inset(-.5rem -.5rem -.5rem calc(2rem - 6px)); }
.e-meta--row .e-meta__item { position: relative; padding-left: 2rem; }
.e-meta--row .e-meta__item::before {
  content: "·";
  content: "·" / "";
  position: absolute;
  left: 0;
  width: 2rem;
  text-align: center;
  color: var(--fg-muted);
}

/* project info: Date / Tags under the banner title */
.e-info { display: grid; gap: .4rem; margin: 0; font-size: var(--t-small); line-height: 1.5; }
.e-meta + .e-info { padding-top: .75rem; border-top: 1px solid var(--line); }
.e-info__row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: baseline; }
.e-info dd { margin: 0; }
.e-info dt { font-size: .9375rem; font-weight: 700; color: var(--fg); }   /* Bold 15px, the live "Category:" */
.e-chipset { display: flex; flex-wrap: wrap; gap: .5rem; }
.e-chipset a, .e-chipset span {
  display: inline-flex;
  align-items: center;
  padding: .6em 1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.e-chipset a:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.e-postnav {
  display: grid;
  gap: var(--space-block) var(--gutter);
  margin-top: var(--space-section);
  padding-top: var(--space-block);
  border-top: 1px solid var(--line);
}
.e-postnav__link { display: grid; gap: .6rem; align-content: start; justify-items: start; }
.e-postnav__link--next { text-align: right; justify-items: end; }
.e-postnav__title { font-size: var(--t-h4); font-weight: 400; line-height: 1.3; }
@media (min-width: 48rem) {
  .e-postnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-postnav__link--next { grid-column: 2; }
}

/* project gallery: two columns, heights free */
.e-gallery { columns: 1; column-gap: var(--gutter); }
.e-gallery > * { break-inside: avoid; margin-bottom: var(--gutter); }
.e-gallery img { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) { .e-gallery { columns: 2; } }

/* project film: the poster with a play button links to YouTube; main.js swaps
   in a youtube-nocookie player of the same size on click */
.e-video-tile__link { position: relative; display: block; color: var(--e-ink); }
.e-video-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .12);
  transition: background var(--dur-fast);
}
.e-video-tile__link:hover::after { background: rgba(0, 0, 0, .2); }
.e-video-tile__link:focus-visible { outline-offset: -4px; outline-color: var(--e-white); }
.e-video-tile__link:hover .e-play, .e-video-tile__link:focus-visible .e-play { transform: scale(1.06); background: var(--e-white); }
.e-video-tile[data-playing="true"] { aspect-ratio: 16 / 9; background: #000; }
.e-video-tile iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* pagination (WordPress .page-numbers markup) */
.e-pagination { margin-top: var(--space-block); padding-top: var(--space-block); border-top: 1px solid var(--line); }
.e-pagination .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.e-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.e-pagination .page-numbers {
  min-width: 2.75rem;
  height: 2.75rem;
  display: inline-grid;
  place-items: center;
  padding: 0 1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.e-pagination a.page-numbers:hover, .e-pagination .page-numbers.current { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.e-pagination .page-numbers.dots { border-color: transparent; }

/* CTA band */
.e-cta__in { display: grid; gap: 1.5rem; justify-items: start; }
.e-cta__in .e-h2 { max-width: 14em; }
.e-cta__text { display: grid; gap: 1rem; }
@media (min-width: 62rem) {
  .e-cta__in { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--gutter); }
}

/* contact */
.e-contact { display: grid; gap: 1.5rem; justify-items: start; align-content: center; }
.e-contact__list { width: 100%; border-top: 1px solid var(--line); }
.e-contact__row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-small);
  line-height: 1.6;
}
.e-contact__row svg { width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--fg-muted); }
.e-contact__row a:hover { text-decoration: underline; text-underline-offset: .2em; }
.e-contact__row small { display: block; font-size: var(--t-small); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--fg); margin-bottom: .2rem; }
.e-map { position: relative; width: 100%; aspect-ratio: 16 / 7; background: var(--e-stone); }
@media (max-width: 47.999rem) { .e-map { aspect-ratio: 4 / 3; } }
.e-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.02); }

/* enquiry: the form module's column when the form is rendered by a helper */
.e-enquiry__form { min-width: 0; }
.e-enquiry__fallback { display: grid; gap: 1rem; justify-items: start; }

/* search */
.e-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  max-width: 28rem;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color var(--dur-fast);
}
.e-search:focus-within { border-bottom-color: var(--fg); }
.e-search input { flex: 1 1 auto; min-width: 0; padding: .75em 0; background: transparent; }
.e-search input::placeholder { color: var(--fg-muted); }
.e-search input:focus-visible { outline: none; }
.e-search .e-icon-btn { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; }
.e-search .e-icon-btn svg { width: .85rem; height: .85rem; }

/* 404 */
.e-404 { display: grid; gap: 2rem; justify-items: start; }
.e-404__code { font-size: var(--t-display); font-weight: 300; line-height: 1; letter-spacing: normal; }
.e-404__links { display: flex; flex-wrap: wrap; gap: .75rem; }

/* forms rendered by inc/forms.php: the error line and the footer thank-you */
.e-form__error { padding: 1rem 1.25rem; border: 1px solid var(--line-strong); font-size: var(--t-small); }
.e-form--sent { display: grid; align-content: center; }
.e-subscribe__ok { font-size: var(--t-small); padding: .75em 0; border-bottom: 1px solid var(--line-strong); max-width: 22rem; }
.e-subscribe__error { font-size: var(--t-small); padding: 0 0 .5em; max-width: 22rem; overflow-wrap: anywhere; }
.e-form__error a, .e-subscribe__error a { text-decoration: underline; text-underline-offset: .2em; }
/* a redirect back to a form lands below the fixed header */
#enquiry-form, #consultation-form, #newsletter-form, #newsletter-error { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* news tabs between a banner and the news grid: plain text, the current one
   underlined in ink, a hairline under the row (the live "Show All | Press |
   Blog"). The portfolio keeps its pills (.e-filters). */
.e-filters-bar { padding-top: var(--space-block); }
.e-tabs { display: inline-flex; flex-wrap: wrap; max-width: 100%; border-bottom: 1px solid var(--line); }
.e-tabs a {
  position: relative;
  padding: .75rem 1rem;
  font-size: .9375rem;   /* 15px Light */
  font-weight: 300;
  line-height: 1.2;
  color: var(--fg);
  white-space: nowrap;
}
.e-tabs a::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 2px;
  background: var(--fg);
  transform: scaleX(0);
  transition: transform var(--dur-fast);
}
.e-tabs a:hover::after { transform: scaleX(.35); }
.e-tabs a[aria-current]::after { transform: none; }
.e-filters-bar + .e-news { padding-top: clamp(1.5rem, 1rem + 1vw, 2rem); }

/* news listing (template-parts/post/card.php, `list`): the picture at its own
   shape, date, Light title, three-line excerpt, "Read" */
.e-news__grid.e-news__grid--list { grid-template-columns: minmax(0, 1fr); gap: 3rem 2.5rem; align-items: start; }
@media (min-width: 48rem) { .e-news__grid.e-news__grid--list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .e-news__grid.e-news__grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.e-card--list { gap: 1.25rem; color: var(--fg); }
.e-card__pic { background: var(--e-stone); }
.e-card__pic img { display: block; width: 100%; height: auto; }
.e-card--list .e-card__body { gap: .75rem; }
.e-card__date { font-size: .875rem; font-weight: 300; line-height: 1.4; color: var(--fg); }
.e-card--list .e-card__title { font-size: 1.625rem; font-weight: 300; line-height: 1.2; letter-spacing: normal; }
@media (min-width: 48rem) { .e-card--list .e-card__title { font-size: 1.875rem; } }
.e-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.625;   /* 16/26 */
  color: var(--fg);
}
.e-card__more { margin-top: .25rem; font-size: .875rem; font-weight: 300; text-decoration: underline; text-underline-offset: .2em; }
.e-card--list:hover .e-card__more, .e-card--list:focus-visible .e-card__more { text-decoration-thickness: 2px; }

/* "Load More": the next page's cards appended in place (main.js, [data-more]) */
.e-more { display: flex; justify-content: center; margin-top: var(--space-block); }
.e-more [aria-busy="true"] { opacity: .5; pointer-events: none; }