/*
 * Site-wide rules: what blocks cannot express through attributes or tokens, and markup printed by
 * plugins (language toggle, Gravity Forms). Layout of single blocks lives in their attributes.
 */

/*
 * Twenty Twenty-Five outlines every focused element; the old site showed an outline only for
 * keyboard focus.
 */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 0.2em;
}

/* North outlines links, buttons and fields in its own yellow, through a variable and a stronger rule. */
:root {
  --focus-outline: 1px solid #fff;
}

body:not(.wp-admin) :where(a, button, [role="button"], [role="switch"], input, select, textarea, summary):focus-visible {
  outline-offset: 0.2em;
}

a,
button {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: 300ms;
  transition-timing-function: ease-out;
}

.tracking-hero {
  letter-spacing: 0.05em;
}

/*
 * Core's block gap rule for top-level blocks is unlayered, so it beats North's layered margin
 * utilities and a top-level block lost the margins set in the editor. revert-layer hands the
 * margins back to the layers; the block gap token is 0, so nothing else changes.
 */
.wp-site-blocks > * {
  margin-block: revert-layer;
}

/*
 * The old header scrolled away with the page. North fixes it and hides it on scroll down, padding the
 * body by its height; both are undone here.
 */
body {
  padding-top: 0 !important;
}

header.wp-block-template-part,
header.wp-block-template-part.header-fixed {
  position: relative;
  z-index: 40;
}

header.header-scroll-hide.header-hidden-on-scroll {
  transform: none;
}

/* The bar is 64px (120px from 1024px) plus its padding, so the logo centres on it. */
.site-header .ensoul-columns-block {
  min-height: 96px;
}

@media (width >= 768px) {
  .site-header .ensoul-columns-block {
    min-height: 128px;
  }
}

@media (width >= 1024px) {
  .site-header .ensoul-columns-block {
    min-height: 184px;
  }
}

/* Logo and toggle stay above the menu overlay. */
.site-header .header-logo,
.site-header .header-hamburger-block {
  position: relative;
  z-index: 50;
}

@media (width >= 1536px) {
  .site-header .header-logo img {
    max-width: 80px !important;
  }
}

.header-hamburger-block .hamburger-button {
  color: inherit;
}

/* The toggle reads "Menu" in both states, as on the old site. */
.header-hamburger-block .hamburger-close {
  display: none;
}

.header-hamburger-block .hamburger-button.is-active .hamburger-open {
  opacity: 1;
  pointer-events: auto;
}

/*
 * Numbered navigation. From 1280px it is inline in the bar, numbers above the labels; below that it
 * is the full-screen panel the hamburger opens.
 */
.main-nav {
  counter-reset: nav;
}

.main-nav :is(.nav-primary, .nav-secondary) {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav :is(.nav-primary, .nav-secondary) li {
  counter-increment: nav;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.main-nav :is(.nav-primary, .nav-secondary) li::before {
  content: counter(nav);
  font-size: 16px;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.main-nav .nav-primary {
  gap: 24px;
  --text-paragraph-lg: 32px;
  --text-paragraph-lg--line-height: 40px;
}

/* Style containment of the list blocks scopes the counter to each list, so the second one starts at 5. */
.main-nav .nav-secondary {
  counter-reset: nav 4;
  gap: 16px;
  margin-top: 32px;
  --text-paragraph-lg: 24px;
  --text-paragraph-lg--line-height: 30px;
}

.main-nav a {
  color: inherit;
  text-decoration: none;
}

@media (width < 1280px) {
  section.header-menu-panel.main-nav.header-menu-panel--open {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    padding: 208px 24px 80px;
    background-color: var(--color-secondary-500);
    transform: none;
  }

  section.menu-extra {
    margin-top: 128px;
  }

  .main-nav .menu-extra ul {
    flex: 0 0 auto;
  }

  .main-nav .menu-extra .\@container\/inner {
    align-items: center;
  }
}

@media (width >= 768px) and (width < 1280px) {
  section.header-menu-panel.main-nav.header-menu-panel--open {
    padding-inline: 64px;
  }
}

@media (width >= 1280px) {
  /* The wrapper repeats its class on the section and on the inner group, so both are shown. */
  .header-menu-panel.main-nav {
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .main-nav :is(.nav-primary, .nav-secondary) {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 32px;
  }

  .main-nav :is(.nav-primary, .nav-secondary) li {
    flex-direction: column;
    gap: 0;
  }

  .main-nav .nav-primary {
    --text-paragraph-lg: 20px;
    --text-paragraph-lg--line-height: 25px;
  }

  .main-nav .nav-secondary {
    margin-top: 24px;
    --text-paragraph-lg: 18px;
    --text-paragraph-lg--line-height: 22.5px;
  }

  .main-nav .nav-secondary li::before {
    font-size: 8px;
    line-height: 10px;
  }

  /* The rows never wrap: the old menu ran under the centred logo rather than breaking. */
  .main-nav :is(.nav-primary, .nav-secondary) {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .site-header .header-nav-col {
    align-self: start;
  }
}

/* Rock prints the language code; the old switcher showed the native name of the other language. */
.lang-xl .ensoul-lang-toggle-link {
  padding: 0;
  border: 0;
  font-size: 0;
  line-height: 0;
  color: inherit;
  text-decoration: none;
}

.lang-xl .ensoul-lang-toggle-link::after {
  font-size: 24px;
  line-height: 30px;
}

html[lang^="it"] .lang-xl .ensoul-lang-toggle-link::after {
  content: "English";
}

html[lang^="en"] .lang-xl .ensoul-lang-toggle-link::after {
  content: "Italiano";
}

/* [coimaimage_time]: the local time above the home hero. */
.clock-line {
  margin: 0;
  color: var(--color-neutral-400);
  font-size: 20px;
  line-height: 25px;
}

.clock-line span {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}

/* Section title rows stay at the top of the viewport while their section scrolls. */
body:not(.wp-admin) section.section-head {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* A sticky box reads the breakout's left: 50% as a sticky inset, so a top-level row drops the offset. */
body:not(.wp-admin) section.section-head.ensoul-breakout {
  left: 0;
  right: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/*
 * The home's last section is tall enough, with the footer, to fill the screen, so its head can reach the
 * top before the page ends; on most screens it already is. site.js measures the footer.
 */
.method-section {
  min-height: calc(100vh - var(--footer-height, 100vh));
}

/* Back to top: a square with an arrow and the "Menu" label, fixed at the top left on desktop. */
.back-to-top {
  position: fixed;
  top: 32px;
  left: 12px;
  z-index: 50;
  display: none;
  color: var(--color-neutral-400);
}

.back-to-top a {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  /* --frame fades the square on its own, after the arrow inside it. */
  border: 1px solid color-mix(in srgb, currentColor calc(var(--frame, 1) * 100%), transparent);
  color: inherit;
}

.back-to-top a:hover,
.back-to-top a:focus-visible {
  border-color: var(--color-white);
  background-color: var(--color-white);
  color: var(--color-primary-500);
}

.back-to-top span {
  display: block;
  color: var(--color-white);
  padding-top: 8px;
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

@media (width >= 768px) {
  .back-to-top.is-visible {
    display: block;
  }
}

@media (width >= 1024px) {
  .back-to-top {
    top: 40px;
  }

  .back-to-top a {
    width: 40px;
    height: 40px;
  }

  .back-to-top span {
    font-size: 10px;
  }
}

/* Buttons have no line-height token and would inherit the paragraph leading of their container. */
.ens-btn {
  line-height: 20px;
}

/* Text links ("Scopri il progetto", "Vedi tutti") underline from the left on hover, as the old .line. */
.ens-btn.ens-btn-tertiary {
  --decoration-button-hover: none;
  position: relative;
}

.ens-btn.ens-btn-tertiary::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.15em);
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: width 300ms ease-out, opacity 300ms ease-out;
}

.ens-btn.ens-btn-tertiary:hover::after,
.ens-btn.ens-btn-tertiary:focus-visible::after {
  width: 100%;
  opacity: 1;
}

/* Footer: plain tracking and the tighter leading of the old footer. */
.site-footer {
  --tracking-paragraph: normal;
  --tracking-paragraph-dk: normal;
  --text-paragraph-base--line-height: 20px;
  --text-paragraph-xs--line-height: 20px;
  --text-paragraph-lg--line-height: 27.5px;
  letter-spacing: normal;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.footer-cols .footer-side {
  margin-top: 0;
}

@media (width < 768px) {
  .footer-cols .footer-main {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 0.5px solid #fff;
  }

  .footer-cols .footer-main > .column {
    flex-direction: row !important;
    justify-content: space-between !important;
  }

  .footer-cols .footer-main .footer-bottom,
  .footer-cols .footer-main .footer-top {
    width: auto !important;
  }

  /* Auto width needs the inner wrapper out of inline-size containment, or it collapses to 0. */
  .footer-cols .footer-main :is(.footer-top, .footer-bottom) .\@container\/inner {
    container-type: normal;
  }

  .footer-cols .footer-main .footer-top > .ensoul-group > .\@container\/inner {
    gap: 32px;
  }
}

@media (width >= 768px) {
  .footer-cols .footer-main > .column {
    height: 100%;
    gap: 80px;
  }

  .footer-cols .footer-main {
    padding-right: 16px;
  }

  .footer-cols .footer-side {
    padding-left: 16px;
    border-left: 1px solid #fff;
  }

  .footer-newsletter {
    max-width: 320px;
  }
}

.footer-legal {
  width: 100%;
  margin-top: 16px;
  padding-top: 24px;
  border-top: 1px solid #fff;
  --text-paragraph-base--line-height: 20px;
}

.footer-legal .legal-gap {
  display: inline-block;
  width: 20px;
}

/* Gravity Forms, as styled on the old site: underlined fields, square checkbox, white button. */
.gform_wrapper.gravity-theme .hidden_label > .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.gform_wrapper.gravity-theme .gform_required_legend,
.gform_wrapper.gravity-theme .gfield_required {
  display: none !important;
}

.gform_wrapper.gravity-theme .gform_fields {
  row-gap: 16px;
}

.gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  min-height: 2rem;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1.25;
}

@media (width >= 1280px) {
  .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
    padding: 8px 0;
    font-size: 16px;
  }
}

.gform_wrapper.gravity-theme ::placeholder {
  color: currentColor;
  opacity: 1;
}

.gform_wrapper.gravity-theme .ginput_container_consent {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.gform_wrapper.gravity-theme .gfield_consent_label {
  font-size: 14px;
  line-height: 20px;
}

.gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"] {
  appearance: none;
  display: grid;
  place-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid currentColor;
  background: transparent;
}

.gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"]::before {
  content: "";
  width: 20px;
  height: 20px;
  transform: scale(0.7);
  box-shadow: inset 20px 20px currentColor;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.gform_wrapper.gravity-theme .ginput_container_consent input[type="checkbox"]:checked::before {
  opacity: 1;
}

.gform_wrapper.gravity-theme .gform_footer {
  margin: 16px 0 0;
  padding: 0;
}

@media (width >= 1024px) {
  .gform_wrapper.gravity-theme .gform_footer {
    margin-top: 32px;
  }
}

.gform_wrapper.gravity-theme .gform_footer :is(input[type="submit"], button) {
  margin: 0;
  padding: 14px 48px;
  border: 0;
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-primary-500);
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
}

.gform_wrapper.gravity-theme .gform_footer :is(input[type="submit"], button):hover,
.gform_wrapper.gravity-theme .gform_footer :is(input[type="submit"], button):focus-visible {
  color: var(--color-black);
}

.gform_wrapper.gravity-theme .gform_footer :is(input[type="submit"], button):active {
  background: var(--color-black);
  color: var(--color-white);
}

/* Inner pages. */
.link-plain a {
  color: inherit;
  text-decoration: none;
}

.link-plain a:hover,
.link-plain a:focus-visible {
  color: var(--color-white);
}

.intro-text {
  max-width: 320px;
}

hr.rule-line {
  width: 100%;
  margin: 0;
  border: 0;
  border-top: 1px solid currentColor;
}

/* A bigger white button, as the old btn-large: fluid text, wider from 1280px. */
.btn-large .ens-btn {
  font-size: var(--text-paragraph-xl) !important;
  line-height: 1.25;
}

@media (width >= 1280px) {
  .btn-large .ens-btn {
    padding: 20px 80px;
  }
}

/* Studio: names on the left, the open person's photo and text on the right. */
.staff-accordion .staff-name {
  color: var(--color-neutral-400);
  transition: color 300ms ease-out;
}

.staff-accordion [aria-expanded="true"] .staff-name,
.staff-accordion button:hover .staff-name {
  color: var(--color-white);
}

.staff-accordion .staff-role {
  margin-top: 16px;
  color: var(--color-neutral-400);
}

.staff-accordion .staff-photo {
  overflow: hidden;
}

.staff-accordion .staff-photo img {
  filter: grayscale(1);
}

/* Google allows hiding the badge as long as the forms show its notice instead, see functions.php. */
.grecaptcha-badge {
  visibility: hidden;
}

.recaptcha-notice {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.7;
}

.recaptcha-notice a {
  color: inherit;
  text-decoration: underline;
}

/* Contacts: big silver lines between rules, then the form in the same scale. */
/* The wrapper repeats its class on the inner group, so the rule goes on the section only. */
section.contact-row {
  padding-block: 8px;
  border-bottom: 1px solid var(--color-neutral-400);
}

section.contact-row:last-child {
  border-bottom: 0;
}

/* The wrapper is a flex item of North's inner group, so without a width it shrinks to its content. */
.contact-form .gform_wrapper {
  width: 100%;
  max-width: none;
}

.contact-row .wp-block-ensoul-icon {
  color: var(--color-neutral-400);
}

.contact-form .gform_wrapper.gravity-theme .gform_fields {
  row-gap: 16px;
}

.contact-form .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], textarea) {
  padding: 8px;
  border-color: var(--color-neutral-400);
  color: var(--color-white);
  font-size: 20px;
  line-height: 1.375;
  letter-spacing: 0.025em;
}

.contact-form .gform_wrapper.gravity-theme textarea {
  border: 1px solid var(--color-neutral-400);
}

.contact-form .gform_wrapper.gravity-theme ::placeholder {
  color: var(--color-neutral-400);
}

.contact-form .gform_wrapper.gravity-theme .gfield_consent_label {
  color: var(--color-neutral-400);
  font-size: 12px;
}

.contact-form .gform_wrapper.gravity-theme .gform_footer {
  justify-content: flex-end;
}

@media (width >= 1280px) {
  .contact-form .gform_wrapper.gravity-theme :is(input[type="text"], input[type="email"], textarea) {
    font-size: 32px;
  }

  .contact-form .gform_wrapper.gravity-theme .gform_footer :is(input[type="submit"], button) {
    padding: 20px 80px;
    font-size: 24px;
    line-height: 28px;
  }
}

/* Projects: the free search and the category list are two modes of one page. */
.projects-mode-categories .mode-free-only,
.projects-mode-free .mode-categories-only {
  display: none !important;
}

.projects-mode-free .mode-free a,
.projects-mode-categories .mode-categories a {
  font-weight: 700;
}

.projects-mode-free .mode-free a::after,
.projects-mode-categories .mode-categories a::after {
  width: 100%;
  opacity: 1;
}

/* The old projects title was 32px above the intro, 48px from 768px, 64px from 1024px, 80px from 1280px. */
:is(.projects-mode-free, .projects-mode-categories) .page-head {
  padding-bottom: 32px !important;
}

@media (width >= 768px) {
  :is(.projects-mode-free, .projects-mode-categories) .page-head {
    padding-bottom: 48px !important;
  }
}

@media (width >= 1024px) {
  :is(.projects-mode-free, .projects-mode-categories) .page-head {
    padding-bottom: 64px !important;
  }
}

@media (width >= 1280px) {
  :is(.projects-mode-free, .projects-mode-categories) .page-head {
    padding-bottom: 80px !important;
  }
}

/* The intro and the search modes start at the same height, the intro in the old normal tracking. */
.ensoul-columns-block:has(> .projects-modes) {
  align-items: flex-start !important;
}

.ensoul-columns-block:has(> .projects-modes) p {
  letter-spacing: normal;
}

/* From 768px the modes take the last two of six columns, so below 1024px they wrap as before. */
@media (width >= 768px) {
  .projects-modes {
    align-self: flex-start !important;
    max-width: calc((100% - 5 * 24px) / 3 + 24px);
  }

  .projects-modes .list-inline {
    row-gap: 12px;
  }
}

@media (width >= 1024px) {
  .projects-modes {
    max-width: calc((100% - 5 * 32px) / 3 + 32px);
  }
}

/* "Search by" was printed but hidden on the old site; it still holds its place above the modes. */
.projects-modes p {
  --text-paragraph-lg: 24px;
  --text-paragraph-lg--line-height: 30px;
  margin-bottom: 8px !important;
  visibility: hidden;
}

@media (width >= 768px) {
  .projects-modes p {
    margin-bottom: 20px !important;
  }
}

/* Active keywords sit before the input as black chips; the input takes the rest of the row. */
.keyword-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.keyword-row .keyword-search {
  flex: 1 0 50%;
}

/* The old search sat 80px below the intro from 768px and 104px from 1024px. */
@media (width >= 768px) {
  .keyword-row {
    margin-top: 32px;
  }
}

@media (width >= 1024px) {
  .keyword-row {
    margin-top: 56px;
  }
}

.active-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.keyword-chip {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: var(--color-black);
  color: var(--color-white);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-decoration: none;
}

.keyword-chip:hover,
.keyword-chip:focus-visible {
  background: var(--color-neutral-400);
}

.keyword-chip svg {
  position: relative;
  top: 4px;
  width: 6px;
  height: 6px;
}

@media (width >= 1280px) {
  .keyword-row {
    column-gap: 40px;
  }

  .keyword-chip {
    padding: 16px 24px;
    font-size: 24px;
  }

  .keyword-chip svg {
    width: 10px;
    height: 10px;
  }
}

.keyword-search {
  position: relative;
}

.keyword-search input {
  width: 100%;
  min-height: 64px;
  padding: 8px 64px 8px 0;
  border: 0;
  border-bottom: 1px solid var(--color-white);
  border-radius: 0;
  background: transparent;
  color: var(--color-white);
  font: inherit;
  font-size: 24px;
  line-height: 1.25;
  text-transform: lowercase;
  appearance: none;
}

.keyword-search input::placeholder {
  color: var(--color-neutral-400);
  opacity: 1;
}

.keyword-search button {
  position: absolute;
  top: 50%;
  right: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-white);
  transform: translateY(-50%);
  cursor: pointer;
}

.keyword-search button svg {
  display: block;
  width: 48px;
  height: 48px;
}

@media (width >= 768px) {
  .keyword-search input {
    font-size: 32px;
  }

  .keyword-search button svg {
    width: 64px;
    height: 64px;
  }
}

@media (width >= 1024px) {
  .keyword-search input {
    font-size: 40px;
  }
}

@media (width >= 1280px) {
  .keyword-search input {
    font-size: 56px;
  }
}

/* Recent topics in the old normal tracking, 16px apart. */
.recent-topics {
  --text-paragraph-base--line-height: 24px;
}

.recent-topics p,
.recent-topics li {
  letter-spacing: normal;
}

.recent-topics .list-inline {
  --list-inline-gap: 16px;
  --list-inline-gap-dk: 16px;
}

/*
 * The grid as the old one: tiles of at least 250px and an empty cell (functions.php) before every third.
 * Its loop sits in a column that would shrink it to its content, and starts 80px below the topics from
 * 768px.
 */
.wp-block-query:has(> .projects-grid) {
  width: 100%;
}

@media (width >= 768px) {
  .wp-block-query:has(> .projects-grid) {
    padding-top: 40px;
  }
}

.projects-grid {
  --projects-gap: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--projects-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.projects-grid-gap {
  display: none;
}

@media (width >= 640px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .projects-grid-gap {
    display: block;
  }
}

@media (width >= 768px) {
  .projects-grid {
    --projects-gap: 32px;
  }
}

.projects-grid > .wp-block-post {
  position: relative;
}

.projects-grid .tile-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(0 0 0 / 80%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease-out;
  font-size: 20px !important;
  line-height: 25px;
  letter-spacing: normal;
}

.projects-grid .tile-title a {
  max-width: 120px;
}

.projects-grid > .wp-block-post:hover .tile-title {
  opacity: 1;
}

@media (hover: none) {
  .projects-grid .tile-title {
    position: static;
    display: block;
    padding: 16px 0 0;
    background: none;
    opacity: 1;
    text-align: left;
  }
}

.projects-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * News list: cards that turn green on hover, two per row between 640 and 1023px, image beside the text
 * from 1024px. A card reaches into the page gutter, so its content lines up with the page edge.
 */
.news-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 24px;
  max-width: none;
  margin: 0 -8px;
  padding: 0;
  list-style: none;
}

.news-list > li {
  position: relative;
  padding: 24px 12px;
  border-radius: 24px;
  transition: background-color 0.3s ease-out;
}

.news-list > li:hover {
  background-color: var(--color-primary-600);
}

.news-card .image-section img {
  height: 240px;
  aspect-ratio: auto;
}

@media (width < 1024px) {
  .news-card .ensoul-columns-block {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .news-card .ensoul-column-wrapper {
    width: 100% !important;
  }
}

.news-card .news-title {
  margin-block: 16px !important;
}

@media (width >= 640px) {
  .news-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .news-list > li {
    padding: 24px;
  }
}

@media (width >= 768px) {
  .news-list {
    margin-inline: -32px;
  }

  .news-list > li {
    padding: 40px 32px;
    border-radius: 32px;
  }
}

@media (width >= 1024px) {
  .news-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .news-card .ensoul-columns-block {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 32px !important;
  }

  .news-card .ensoul-column-wrapper {
    align-self: stretch !important;
  }

  .news-card .ensoul-column-wrapper > .column {
    height: 100%;
  }

  .news-card .ensoul-column-wrapper:last-of-type > .column {
    justify-content: center;
    padding-block: 64px;
  }

  .news-card .image-section,
  .news-card .image-section figure {
    height: 100%;
  }

  .news-card .image-section img {
    height: 100%;
    min-height: 480px;
  }

  /*
   * The old arrow, shown on hover; the title and image carry the link. The arrow is inlined: a mask
   * image is fetched in CORS mode, and the file did not reach the card.
   */
  .news-list > li::after {
    content: "";
    position: absolute;
    right: 32px;
    bottom: 40px;
    width: 81px;
    height: 50px;
    background-color: currentcolor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='50' viewBox='0 0 81 50' fill='none'%3E%3Cpath d='M0 25H80M80 25L56.2092 1M80 25L56.2092 49' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;
  }

  .news-list > li:hover::after {
    opacity: 1;
  }
}

@media (width >= 1280px) {
  .news-card .ensoul-column-wrapper:last-of-type > .column {
    padding-block: 80px;
  }
}

/*
 * News pager: plain numbers 32px apart, the current one bold, and the old long arrows for previous and
 * next in place of the button squares. A disabled arrow is left out, as the old pager did.
 */
.pager-arrows {
  margin-top: 32px;
}

.pager-arrows .ensoul-pagination-nav {
  gap: 32px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pager-arrows .ensoul-pagination-link {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  color: var(--color-white) !important;
}

.pager-arrows .ensoul-pagination-current {
  font-weight: 700;
}

.pager-arrows .ensoul-pagination-prev[aria-disabled="true"],
.pager-arrows .ensoul-pagination-next[aria-disabled="true"] {
  display: none;
}

.pager-arrows .ensoul-pagination-prev::before,
.pager-arrows .ensoul-pagination-next::before {
  content: "";
  display: block;
  width: 80px;
  height: 50px;
  background-color: currentcolor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='81' height='50' viewBox='0 0 81 50' fill='none'%3E%3Cpath d='M0 25H80M80 25L56.2092 1M80 25L56.2092 49' stroke='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pager-arrows .ensoul-pagination-prev::before {
  transform: scaleX(-1);
}

@media (width >= 768px) {
  .pager-arrows {
    margin-top: 48px;
  }
}

.related-news {
  margin: 0;
  padding: 0;
}

/* Policies and news: the old running text. */
.policy-body {
  --spacing-container-paragraph: 768px;
}

/* The old running text kept 32px (48px on desktop) between blocks. */
.policy-body .\@container\/inner > * + * {
  margin-top: 32px;
}

.policy-body :is(.wp-block-list, .wp-block-table) {
  max-width: 768px;
  padding-left: 0;
  font-size: var(--text-paragraph-base);
  line-height: var(--text-paragraph-base--line-height);
  list-style-position: inside;
}

@media (width >= 768px) {
  .policy-body .\@container\/inner > * + * {
    margin-top: 48px;
  }

  .policy-body :is(.wp-block-list, .wp-block-table) {
    font-size: var(--text-paragraph-xl);
    line-height: var(--text-paragraph-xl--line-height);
  }
}

/* Bullets as on the old site: the browser's round dot on the text edge, lines wrapping under it. */
/* North's !pl-5 is a layered !important utility, which an unlayered rule cannot override: offset it instead. */
.policy-body ul.wp-block-ensoul-list {
  margin-left: calc(var(--spacing) * -5);
  list-style: disc inside;
}

.policy-body ul.wp-block-ensoul-list > li {
  display: list-item;
}

.policy-body ul.wp-block-ensoul-list > li > [aria-hidden="true"] {
  display: none;
}

/* Cells in the size of the running text, as on the old site. */
.policy-body .wp-block-table td,
.policy-body .wp-block-table th {
  padding: 8px;
  border: 1px solid var(--color-neutral-400);
}

/* News text: the old 896px column, with a right margin that widens at 1024 and 1280px. */
@media (width >= 768px) {
  .news-text {
    max-width: 896px !important;
    margin-inline: auto !important;
    padding-right: 80px;
  }
}

@media (width >= 1024px) {
  .news-text {
    padding-right: 160px;
  }
}

@media (width >= 1280px) {
  .news-text {
    padding-right: 240px;
  }
}

/* Single project: the facts list and the gallery rhythm. */
.project-facts {
  --text-paragraph-lg: 18px;
  --text-paragraph-lg--line-height: 24.75px;
}

.project-facts .project-fact + .project-fact {
  margin-top: 12px;
}

.project-facts .project-fact-label + .project-fact-terms {
  margin-top: 0;
}

.project-fact-terms .paragraph-dynamic-taxonomy {
  display: block;
}

.project-fact-terms .paragraph-dynamic-sepa {
  display: none;
}

/* Project terms in the header: plain words with a gap, as the old tag list. */
.project-terms .paragraph-dynamic-sepa {
  display: inline-block;
  width: 16px;
  font-size: 0;
}

@media (width >= 1024px) {
  .project-terms .paragraph-dynamic-sepa {
    width: 24px;
  }
}

.project-text {
  --text-paragraph-base--line-height: 24.6px;
  --text-paragraph-xl--line-height: 36px;
}

/* Gallery: two images per row, then one wider in the middle, as the old project gallery. */
.project-gallery-grid > .image-section:nth-child(3n) {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
}

@media (width >= 1024px) {
  .project-gallery-grid {
    row-gap: 80px !important;
  }
}

.project-fact strong {
  font-weight: 500;
}



/*
 * Studio on desktop: the names stay together in the left column and the open person's photo and text fill
 * one cell on the right, as the old tabs did. Each item's own grid is dissolved into the list's grid.
 */
.staff-accordion .staff-role {
  --text-paragraph-base--line-height: 16px;
  --text-paragraph-xs--line-height: 12px;
}

.staff-accordion [aria-expanded="true"] .staff-role {
  font-weight: 500;
}

@media (width >= 768px) {
  ul.staff-accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
    align-items: start;
    border-top: 0;
  }

  .staff-accordion > li,
  .staff-accordion > li > .md\:grid {
    display: contents !important;
  }

  .staff-accordion .title_header:not(.md\:hidden) {
    position: relative;
    grid-column: 1;
    border-bottom: 1px solid var(--color-white);
  }

  .staff-accordion > li:last-child .title_header {
    border-bottom: 0;
  }

  .staff-accordion [data-accordion-content]:not(.md\:hidden) {
    grid-column: 2;
    grid-row: 1 / span 20;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    padding: 32px;
  }

  .staff-accordion > li > .md\:grid > span[aria-hidden] {
    display: none;
  }

  /*
   * The panels share one grid cell. Each keeps its full height, closed or open, so the cell is as tall
   * as the longest one and the page below stays put when another person is opened; the closed panels
   * are only hidden, after their fade out.
   */
  .staff-accordion [data-accordion-content]:not(.md\:hidden) {
    grid-template-rows: 1fr !important;
    transition: visibility 0s linear 0.25s;
  }

  .staff-accordion > li:not(.is-open) [data-accordion-content]:not(.md\:hidden) {
    visibility: hidden;
    pointer-events: none;
  }

  .staff-accordion > li.is-open [data-accordion-content]:not(.md\:hidden) {
    z-index: 2;
    transition-delay: 0s;
  }
}

@media (width >= 1024px) {
  .staff-accordion .title_header:not(.md\:hidden) {
    padding-left: 32px;
  }
}

@media (width >= 1280px) {
  .staff-accordion .title_header:not(.md\:hidden) {
    padding-left: 48px;
  }
}

.staff-accordion .title_header button > span[aria-hidden] {
  display: none;
}

.staff-accordion .title_header button {
  padding-block: 16px;
}

@media (width >= 1024px) {
  .staff-accordion .title_header button {
    padding-top: 24px;
    padding-bottom: 40px;
  }
}

.keyword-search {
  width: 100%;
}

/*
 * Category filter as the old one: the label, a button that opens the list on mobile, then the terms in
 * the fluid body size, the current one bold with the line the menu links grow. 40px separate it from
 * the modes above and the projects below; from 768px the gap above follows the page head steps.
 */
.projects-filter {
  display: block !important;
  margin-bottom: 16px;
}

.projects-filter .filter_string {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 24px;
  line-height: 30px;
  text-transform: none;
  cursor: pointer;
}

.projects-filter .filter_string svg {
  width: 20px;
  height: 20px;
}

.projects-filter .filter-toggle[aria-expanded="true"] .filter-plus,
.projects-filter .filter-toggle[aria-expanded="false"] .filter-minus {
  display: none;
}

/* The list's own m-0! and p-0! are layered !important rules that win here, so the label holds the gap. */
.projects-filter .filter-toggle[aria-expanded="true"] {
  margin-bottom: 20px;
}

.projects-filter .ensoul-tax-wrapper {
  --text-paragraph-base: var(--text-paragraph-xl);
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.projects-filter:has(.filter-toggle[aria-expanded="false"]) .ensoul-tax-wrapper {
  display: none;
}

.projects-filter .ensoul-filter-term {
  display: inline-block;
  color: inherit;
  line-height: 1.5;
}

.projects-filter .ensoul-filter-term::after {
  content: "";
  display: block;
  position: relative;
  bottom: -0.15em;
  width: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: width 300ms ease-out, opacity 300ms ease-out;
}

.projects-filter .ensoul-filter-term:hover::after,
.projects-filter .ensoul-filter-term:focus-visible::after,
.projects-filter .ensoul-filter-term.active-term::after {
  width: 100%;
  opacity: 1;
}

.projects-filter .ensoul-filter-term.active-term {
  font-weight: 700;
}

@media (width >= 768px) {
  .projects-filter {
    margin-top: -8px;
    margin-bottom: 8px;
  }

  .projects-filter .filter_string {
    margin-bottom: 32px !important;
    pointer-events: none;
  }

  .projects-filter .filter_string svg {
    display: none !important;
  }

  .projects-filter .ensoul-tax-wrapper,
  .projects-filter:has(.filter-toggle[aria-expanded="false"]) .ensoul-tax-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px 24px;
  }
}

@media (width >= 1024px) {
  .projects-filter {
    margin-top: 16px;
  }

  .projects-filter .ensoul-tax-wrapper,
  .projects-filter:has(.filter-toggle[aria-expanded="false"]) .ensoul-tax-wrapper {
    column-gap: 48px;
  }
}

/* Category list: each project image runs edge to edge from 768px, 2:1, or 2.5:1 on landscape screens. */
.projects-list .row-image img {
  aspect-ratio: 2 / 1 !important;
  height: auto;
  object-fit: cover;
}

@media (orientation: landscape) {
  .projects-list .row-image img {
    aspect-ratio: 2.5 / 1 !important;
  }
}

/* The project rows were 32px tall around their title between 768 and 1023px. */
@media (768px <= width < 1024px) {
  .projects-list .row-head .\@container\/inner {
    padding-block: 32px !important;
  }
}

@media (width >= 768px) {
  .projects-list .row-image {
    width: calc(100% + 2 * var(--spacing-content-padding));
    max-width: none;
    margin-inline: calc(-1 * var(--spacing-content-padding));
  }
}

/* The veil functions.php adds over a project image, with its logo or its title. */
.projects-list .row-image {
  position: relative;
}

.row-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 80%);
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.row-image:hover .row-overlay {
  opacity: 1;
}

.row-overlay img {
  width: 100%;
  max-width: 150px;
  height: auto;
  object-fit: contain;
}

.row-overlay-title {
  max-width: 20rem;
  font-size: 24px;
  line-height: 1.25;
  text-align: center;
}

@media (width >= 768px) {
  .row-overlay-title {
    font-size: 32px;
  }
}

@media (width >= 1024px) {
  .row-overlay-title {
    font-size: 40px;
  }
}

@media (width >= 1280px) {
  .row-overlay-title {
    font-size: 48px;
  }
}

/* Category links lose the underline of plain links; site.css draws theirs. */
.projects-filter a.ensoul-filter-term {
  text-decoration: none;
}

/* The loader below the category list, shown until every project has loaded (site.js). */
.list-loader {
  justify-content: center;
  padding: 48px 0 16px;
}

.list-loader.is-done {
  display: none !important;
}

@media (width >= 1024px) {
  .list-loader {
    padding: 80px 0 32px;
  }
}

.keyword-row + * {
  margin-top: 16px;
}



.policy-body {
  --spacing-container-list: 768px;
}

@media (width >= 1536px) {
  .main-nav .nav-primary {
    --text-paragraph-lg: 24px;
    --text-paragraph-lg--line-height: 30px;
  }

  .main-nav .nav-secondary {
    --text-paragraph-lg: 20px;
    --text-paragraph-lg--line-height: 25px;
  }
}

/* The logo was 48px wide up to 1024px. */
@media (width < 1024px) {
  .site-header .header-logo img {
    max-width: 48px !important;
  }
}

/* Home project cards: the image grows slightly inside its frame on hover. */
.grid-stagger .wp-block-ensoul-image {
  overflow: hidden;
}

.grid-stagger .wp-block-ensoul-image img {
  transition: transform 500ms linear;
}

.grid-stagger .ensoul-column-wrapper:hover .wp-block-ensoul-image img {
  transform: scale(1.1);
}

/*
 * Covers the reveal animations lift off (site.js sets --cover); at 0 by default, so nothing is hidden
 * without JavaScript.
 */
.projects-grid .wp-block-ensoul-image,
.staff-photo {
  position: relative;
}

.projects-grid .wp-block-ensoul-image::after,
.staff-photo::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: var(--cover, 0%);
  background: var(--color-base);
  pointer-events: none;
}

/* Related posts and projects: the old grid spacing; the block gap token is 0 site-wide. */
ul.related-news,
ul.related-projects {
  gap: 48px 32px;
}

/*
 * News galleries behave as core's default gallery did: three images a row, two below 600px, and the
 * images of a shorter last row share its whole width. Six tracks hold both counts.
 */
.news-gallery {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.news-gallery > * {
  grid-column: span 3;
}

.news-gallery > :last-child:nth-child(2n + 1) {
  grid-column: span 6;
}

@media (width >= 600px) {
  .news-gallery > *,
  .news-gallery > :last-child:nth-child(2n + 1) {
    grid-column: span 2;
  }

  .news-gallery > :nth-last-child(2):nth-child(3n + 1),
  .news-gallery > :last-child:nth-child(3n + 2) {
    grid-column: span 3;
  }

  .news-gallery > :last-child:nth-child(3n + 1) {
    grid-column: span 6;
  }
}