/* =========================================================================
   Berkana - design system
   Light ground and near-black text are inherited from the existing site, as
   the specification requires. The template green (#31B939) is retired: it was
   a stock accent from the previous vendor, not a Berkana brand colour. It is
   replaced by a restrained brass drawn from the product itself.
   ========================================================================= */

:root {
  --paper: #ffffff;
  --mist: #f5f8f9;
  --ink: #1c1c1c;
  --ink-soft: #4a5257;
  --muted: #5c686e;
  --line: #e3e8ea;
  --line-strong: #cfd8dc;
  /* Brass is used for small all-caps eyebrow text, so the text tone must clear
     4.5:1 on white. The lighter tone is kept for decorative rules only. */
  --brass: #8a6d3f;
  --brass-dark: #6f572f;
  --brass-line: #a98b5d;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --container: 82.5rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section: clamp(2.75rem, 6vw, 6rem);

  --radius: 2px;
  --transition: 220ms cubic-bezier(0.2, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }

/* ---------- Typography ------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 5.6vw, 4.75rem); }
h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }

p { margin: 0 0 1.25rem; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 1.25rem;
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

.measure { max-width: 62ch; }

/* ---------- Layout ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--mist { background: var(--mist); }
.section--tight { padding-block: calc(var(--section) * 0.55); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* A heading block and the content it introduces are one unit: the pair should
   not pay two sections' worth of padding between them. */
.section--lead { padding-bottom: 0; }
.section--follow { padding-top: clamp(1.25rem, 2.5vw, 2rem); }

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.site-footer .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* ---------- Buttons ----------------------------------------------------- */
/* Restrained, consultative CTAs only. There is no checkout language anywhere
   in this stylesheet because there is no checkout. */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.btn:hover { background: var(--brass-dark); border-color: var(--brass-dark); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--ink); color: var(--ink); }

.btn--light { background: transparent; color: var(--paper); border-color: rgba(255, 255, 255, 0.55); }
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.link-more {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--brass);
  padding-bottom: 0.25rem;
  transition: color var(--transition);
}
.link-more:hover { color: var(--brass-dark); }

/* ---------- Header ------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 5rem;
}

.site-logo { flex: 0 0 auto; display: block; }
.site-logo__mark { display: block; width: auto; height: clamp(1.9rem, 2.6vw, 2.6rem); }
.site-logo__word {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  letter-spacing: 0.16em;
  line-height: 1.1;
  text-transform: uppercase;
}
.site-logo__tagline {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer__mark { width: auto; max-width: 11rem; height: auto; margin-bottom: 1.1rem; }

.nav { display: flex; align-items: center; min-width: 0; }
.nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.9rem, 1.8vw, 2.1rem);
  list-style: none; margin: 0; padding: 0;
}
.nav a {
  display: block;
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-soft);
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav a:hover, .nav .current-menu-item > a { color: var(--ink); border-color: var(--brass); }

.header-phone {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--ink);
  border-bottom: 1px solid var(--brass-line);
  padding-bottom: 0.15rem;
}
.header-phone:hover { color: var(--brass-dark); }

.nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  min-height: min(74vh, 38rem);
  max-height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

/* Absolute, so the image - or a placeholder standing in for one that has not
   arrived yet - can never dictate the height of the band. It used to: a missing
   image left a tall placeholder driving the grid row past the clamp, and the
   hero text spilled over the section beneath it. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media .berkana-placeholder { width: 100%; height: 100%; aspect-ratio: auto; background: var(--ink); }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 42%, rgba(0, 0, 0, 0.1) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.6) 100%);
}
.hero__body {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  align-self: end;
  min-width: 0;
  padding-block: clamp(3rem, 8vw, 6rem);
  color: var(--paper);
}
.hero__body .eyebrow { color: rgba(255, 255, 255, 0.82); }
.hero h1 { max-width: 18ch; margin-bottom: 1.25rem; }
.hero__lede { max-width: 44ch; color: rgba(255, 255, 255, 0.9); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* ---------- Cards ------------------------------------------------------- */

.card { display: flex; flex-direction: column; }
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--mist);
  aspect-ratio: 4 / 5;
}
.card__media img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 6%;
  transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1);
}
.card:hover .card__media img { transform: scale(1.035); }
.card__body { padding-top: 1.1rem; }
.card__title { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.25; margin: 0 0 0.35rem; }
.card__meta { font-size: 0.82rem; color: var(--muted); margin: 0; }

/* Collection cards carry the brand, so they run larger and darker. */
.collection-card .card__media { aspect-ratio: 3 / 4; }
.collection-card .card__media img { object-fit: cover; padding: 0; }
.collection-card__label {
  position: absolute;
  inset-inline: 1.25rem;
  bottom: 1.25rem;
  color: var(--paper);
  z-index: 1;
}
.collection-card__label h3 { margin: 0; font-size: clamp(1.4rem, 2vw, 1.9rem); }
.collection-card__label span { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.collection-card .card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.62) 100%);
}

/* ---------- MSRP -------------------------------------------------------- */
/* Reference information, not a checkout invitation: same weight as the specs,
   no accent colour, no strike-through. */

.msrp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem; }
.msrp__label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.msrp__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-variant-numeric: lining-nums tabular-nums;
}
.msrp--on-request .msrp__value { font-size: 1.25rem; }
.msrp__note { flex-basis: 100%; font-size: 0.8rem; color: var(--muted); }

.card .msrp { margin-top: 0.55rem; }
.card .msrp__value { font-size: 1.15rem; }
.card .msrp__note { display: none; }

/* ---------- Product page ------------------------------------------------ */

.product { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 60rem) { .product { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }

.product__gallery { display: grid; gap: 0.75rem; }
.product__figure { background: var(--mist); overflow: hidden; }
.product__figure img { width: 100%; }
.product__figure--lead { aspect-ratio: 4 / 3; }
.product__figure--lead img { height: 100%; object-fit: contain; }
.product__figure--lead { cursor: zoom-in; }
.product__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: 0.75rem; }
.product__thumbs .product__figure { aspect-ratio: 4 / 5; border: 1px solid transparent; }
.product__thumbs .product__figure img { width: 100%; height: 100%; object-fit: contain; }
.product__thumbs .product__figure[aria-pressed="true"] { border-color: var(--brass-line); }
.product__caption { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }

.product__info { position: static; }

/* Sticky only where the column is comfortably shorter than the viewport.
   Below this the enquiry buttons ended up inside a nested scroll box and were
   never seen - which on a 1080p monitor is most of the audience. */
@media (min-width: 60rem) and (min-height: 70rem) {
  .product__info { position: sticky; top: 7rem; }
}
.product__collection { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.product__title { font-size: clamp(1.9rem, 3.2vw, 2.9rem); margin: 0.5rem 0 0.75rem; }
.product__descriptor { color: var(--ink-soft); max-width: 44ch; }

.specs { width: 100%; border-collapse: collapse; margin: 2rem 0; }
.specs th, .specs td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; vertical-align: top; }
.specs th { font-weight: 500; color: var(--muted); width: 40%; }

.product__custom {
  border-left: 2px solid var(--brass);
  padding: 0.35rem 0 0.35rem 1.25rem;
  margin: 2rem 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.product__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ---------- Editorial blocks ------------------------------------------- */

.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 55rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Only reverse once the columns exist; stacked, DOM order must win. */
  .split--reverse > :first-child { order: 2; }
}


.process { counter-reset: step; display: grid; gap: 0; }
.process__step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
}
.process__step::before {
  content: "0" counter(step);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--brass);
}
.process__step h3 { font-size: 1.15rem; margin: 0 0 0.35rem; }
.process__step p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; }

.facts { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.facts dt { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; }
.facts dd { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }

/* ---------- Footer ------------------------------------------------------ */

.site-footer { background: var(--ink); color: rgba(255, 255, 255, 0.72); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--paper); }
.site-footer__heading { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); margin: 0 0 1.1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; }
.site-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.78rem; color: rgba(255, 255, 255, 0.5);
}

/* ---------- Breadcrumbs, pagination, misc ------------------------------ */

.breadcrumbs { font-size: 0.78rem; color: var(--muted); padding-block: 1.25rem; }
.breadcrumbs a:hover { color: var(--ink); }

.pagination { margin-top: 3rem; }
.pagination ul {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}
.pagination li .page-numbers {
  display: block; min-width: 2.5rem; padding: 0.55rem 0.75rem; text-align: center;
  border: 1px solid var(--line); font-size: 0.85rem;
}
.pagination li .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 100; background: var(--paper); padding: 0.75rem 1rem; }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 68rem) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 5rem 0 auto; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 2rem;
  }
  .nav.is-open { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding-block: 0.9rem; border-bottom: 1px solid var(--line); }
  .product__info { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Lightbox ---------------------------------------------------- */

.lightbox {
  border: 0;
  padding: 0;
  max-width: min(96vw, 78rem);
  max-height: 94vh;
  background: var(--paper);
}
.lightbox::backdrop { background: rgba(12, 14, 15, 0.86); }
.lightbox img { max-width: 100%; max-height: 88vh; margin-inline: auto; object-fit: contain; }
.lightbox__close {
  position: absolute; top: 0.5rem; right: 0.5rem;
  width: 2.75rem; height: 2.75rem;
  border: 0; background: var(--paper); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lightbox__close:hover { color: var(--brass-dark); }

.zoom-hint {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  background: none; border: 0; padding: 0; cursor: pointer;
}
.zoom-hint:hover { color: var(--ink); }

.berkana-placeholder { aspect-ratio: 4 / 5; background: var(--mist); }

.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-inline: 0.5rem; color: var(--line-strong); }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }
@media (min-width: 68.0625rem) { .header-actions .nav-toggle { display: none; } }

.collection-story { max-width: 62ch; color: var(--ink-soft); }
.collection-story p { margin-bottom: 1rem; }

/* ---------- Contact ----------------------------------------------------- */

.contact-layout { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 55rem) { .contact-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }

.notice { padding: 0.9rem 1.1rem; border-left: 2px solid var(--brass-line); background: var(--mist); font-size: 0.92rem; }
.notice--ok { border-color: #2f7a45; }
.notice--warn { border-color: #a8331f; }

.contact-subject { font-size: 0.92rem; color: var(--ink-soft); }

.enquiry-form { max-width: 34rem; }
.enquiry-form__field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; }
.enquiry-form label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.enquiry-form input, .enquiry-form textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
}
.enquiry-form input:focus, .enquiry-form textarea:focus { border-color: var(--brass); outline: none; }
.enquiry-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-details { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0 0 2rem; font-size: 0.95rem; }
.contact-details dt { color: var(--muted); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; align-self: center; }
.contact-details dd { margin: 0; }

.showroom { padding-top: 1.25rem; border-top: 1px solid var(--line); margin-bottom: 1.25rem; }
.showroom h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.showroom address { font-style: normal; font-size: 0.95rem; }
.showroom__note { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--muted); }

.search-form { display: flex; gap: 0.75rem; max-width: 32rem; margin-top: 1.5rem; }
.search-form input {
  flex: 1;
  min-width: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius); font: inherit;
}

/* ---------- Editorial pages -------------------------------------------- */

.page-hero { height: min(42vh, 24rem); overflow: hidden; background: var(--mist); }
.page-hero img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .berkana-placeholder { width: 100%; height: 100%; aspect-ratio: auto; }

.page-body { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 60rem) { .page-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

.page-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.page-gallery figure { margin: 0; background: var(--mist); }
.page-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.entry-content h2 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin-top: 2.25rem; }
.entry-content h2:first-child { margin-top: 0; }

.cta-band__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-content: center; }

.showroom__map { margin: 1rem 0; }
.showroom__map iframe { width: 100%; height: 15rem; border: 1px solid var(--line); display: block; }

.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.project-gallery figure { margin: 0; background: var(--mist); }
.project-gallery img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* Search opens as a full-width band beneath the header, so it can never
   crowd the navigation row. */
.header-search {
  border-top: 1px solid var(--line);
  background: var(--mist);
}
.header-search[hidden] { display: none; }
.header-search form { display: flex; gap: 0.75rem; padding-block: 1rem; }
.header-search input {
  flex: 1; min-width: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  font: inherit; font-size: 0.95rem; color: var(--ink);
}
.header-search input:focus { border-color: var(--brass); outline: none; }

.header-search__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  padding: 0; border: 0; background: none; color: var(--ink-soft);
  cursor: pointer;
  transition: color var(--transition);
}
.header-search__toggle:hover,
.header-search__toggle[aria-expanded="true"] { color: var(--brass-dark); }

.enquiry-form__row { display: grid; gap: 1.1rem; grid-template-columns: 2fr 1fr; }
@media (max-width: 34rem) { .enquiry-form__row { grid-template-columns: 1fr; } }
.enquiry-form select {
  width: 100%; padding: 0.8rem 0.9rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); font: inherit; color: var(--ink);
}

.application-links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.25rem 1.5rem;
  list-style: none; margin: 0; padding: 0;
}
.application-links a {
  display: block;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
  color: var(--ink-soft);
  transition: color var(--transition);
}
.application-links a:hover { color: var(--ink); }

.application-links__count { display: block; font-size: 0.75rem; color: var(--muted); }

.project-families { font-size: 0.9rem; color: var(--ink-soft); }
.project-families a { border-bottom: 1px solid var(--brass-line); }

/* ---------- Channels ---------------------------------------------------- */

.channels { margin-top: 1.75rem; }
.channels__label {
  margin: 0 0 0.5rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.channels__list {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  list-style: none; margin: 0 0 1.25rem; padding: 0;
}
.channels__list a {
  font-size: 0.9rem;
  border-bottom: 1px solid var(--brass-line);
  padding-bottom: 0.15rem;
}
.site-footer .channels__label { color: rgba(255, 255, 255, 0.5); }
.site-footer .channels__list a { border-color: rgba(255, 255, 255, 0.3); }

/* ---------- FAQ --------------------------------------------------------- */

.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex; align-items: baseline; gap: 0.75rem;
  padding: 1.15rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "+";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brass);
}
.faq__item[open] summary::before { content: "\2212"; }
.faq__item summary:hover { color: var(--brass-dark); }
.faq__answer { padding: 0 0 1.35rem 1.75rem; color: var(--ink-soft); font-size: 0.95rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* ---------- Team -------------------------------------------------------- */

.team { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.team__member img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--mist); }
.team__name { font-family: var(--font-display); font-size: 1.2rem; margin: 0.9rem 0 0.2rem; }
.team__role { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 0 0 0.6rem; }
.team__bio { font-size: 0.88rem; color: var(--ink-soft); margin: 0; }

/* ---------- Video ------------------------------------------------------- */

.video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video__play {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer; position: relative;
}
.video__play img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; transition: opacity var(--transition); }
.video__play:hover img { opacity: 1; }
.video__label {
  position: absolute; inset-inline: 0; bottom: 1.25rem;
  color: var(--paper); font-size: 0.78rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Navigation submenus ---------------------------------------- */

.nav li { position: relative; }

.nav__toggle {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0; border: 0; background: none;
  font: inherit;
  font-size: clamp(0.68rem, 0.72vw, 0.78rem);
  letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.nav__toggle:hover, .nav__parent.is-open > .nav__toggle { color: var(--ink); border-color: var(--brass-line); }

.nav__chevron {
  width: 0.4rem; height: 0.4rem;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition);
}
.nav__parent.is-open > .nav__toggle .nav__chevron { transform: rotate(-135deg) translate(-2px, -2px); }

.nav ul.nav__submenu {
  position: absolute; top: calc(100% + 0.5rem); left: -1rem;
  display: none;
  min-width: 15rem;
  padding: 0.75rem 0;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(28, 28, 28, 0.09);
  z-index: 50;
}
.nav .nav__parent.is-open > ul.nav__submenu { display: block; }
.nav ul.nav__submenu a {
  display: block;
  padding: 0.55rem 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: none;
  border-bottom: 0;
  white-space: normal;
}
.nav ul.nav__submenu a:hover { background: var(--mist); color: var(--ink); }

@media (max-width: 68rem) {
  .nav .nav__parent.is-open > ul.nav__submenu,
  .nav ul.nav__submenu {
    position: static;
    min-width: 0; padding: 0 0 0.5rem 1rem;
    border: 0; box-shadow: none;
  }
  /* On the mobile panel the group opens in place rather than floating. */
  .nav ul.nav__submenu { display: none; }
  .nav .nav__parent.is-open > ul.nav__submenu { display: block; }
  .nav__chevron { display: none; }
  .nav__toggle { width: 100%; padding-block: 0.9rem; border-bottom: 1px solid var(--line); }
  .nav ul.nav__submenu a { padding: 0.55rem 0; }
}

/* A page with nothing in the second column should not reserve half the width
   for it, and the title should not be separated from its own text by two
   stacked section paddings. */
.page-body--single { display: block; }
.page-body--single .entry-content { max-width: 68ch; }

.page-intro { padding-bottom: 0; }
.page-body-section { padding-top: clamp(1.25rem, 2.5vw, 2rem); }

/* ---------- Library ----------------------------------------------------- */
/* Catalogues are printed books, so they are shown as books: a spine, the weight
   of the block behind the cover, and a shadow that says the thing is physical.
   The covers are almost white, so the board needs an edge or it dissolves into
   the page. */

.library {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.75rem);
  list-style: none; margin: 0; padding: 0;
}

.volume__link { display: block; }

.volume__book {
  display: block;
  position: relative;
  perspective: 1200px;
}

.volume__cover {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1.33;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-left-width: 0;
  box-shadow:
    0 1px 2px rgba(28, 28, 28, 0.08),
    0 12px 26px -12px rgba(28, 28, 28, 0.38);
  transform-origin: left center;
  transition: transform 420ms cubic-bezier(0.2, 0, 0.2, 1),
              box-shadow 420ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* Contain, never cover: these are covers, and a cropped one loses the title it
   exists to carry. The board behind takes up any difference in format. */
.volume__cover img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* The spine. */
.volume__cover::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0.55rem;
  background:
    linear-gradient(90deg,
      rgba(28, 28, 28, 0.34) 0%,
      rgba(28, 28, 28, 0.12) 38%,
      rgba(255, 255, 255, 0.5) 62%,
      rgba(28, 28, 28, 0.07) 100%);
  z-index: 2;
}

/* The block of pages showing past the fore-edge. */
.volume__cover::after {
  content: "";
  position: absolute;
  top: 2%; bottom: 2%; right: -3px;
  width: 3px;
  background: linear-gradient(90deg, var(--line-strong), var(--mist));
  border-radius: 0 1px 1px 0;
}

.volume__link:hover .volume__cover,
.volume__link:focus-visible .volume__cover {
  transform: rotateY(-7deg) translateZ(6px);
  box-shadow:
    0 2px 3px rgba(28, 28, 28, 0.1),
    0 22px 40px -14px rgba(28, 28, 28, 0.45);
}

.volume__blank {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 1.5rem;
  font-family: var(--font-display); font-size: 1.1rem; text-align: center;
  color: var(--ink-soft);
}

.volume__meta { display: block; margin-top: 1rem; }
.volume__title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.25;
}
.volume__action {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--transition);
}
.volume__link:hover .volume__action { color: var(--brass-dark); }

.volume__note { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .volume__link:hover .volume__cover,
  .volume__link:focus-visible .volume__cover { transform: none; }
}