/*
Nilpar Gallery — Interface (Phase 5.2)
Footer-only token application.
Header intentionally minimal until dedicated UX/UI design phase.
*/

/* Footer — two-column editorial */
.ng-footer{
  border-top: 1px solid var(--ng-color-border);
  padding: var(--ng-space-9) 0 var(--ng-space-7);
  margin-top: var(--ng-space-9);
  background: var(--ng-color-porcelain);
}

.ng-footer__inner{
  max-width: var(--ng-page-max);
  margin: 0 auto;
  padding: 0 var(--ng-space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ng-space-8);
  align-items: start;
}

@media (max-width: 768px){
  .ng-footer__inner{
    grid-template-columns: 1fr;
    gap: var(--ng-space-7);
  }
}

.ng-footer__title{
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h2);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: var(--ng-line-tight);
  color: var(--ng-color-ink);
  margin: 0 0 var(--ng-space-5);
}

.ng-footer__eyebrow{
  margin: 0 0 var(--ng-space-2);
  font-size: var(--ng-text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ng-color-ink-muted);
}

.ng-footer__lede{
  margin: 0 0 var(--ng-space-5);
  max-width: 28rem;
  color: var(--ng-color-ink-muted);
}

.ng-footer__nav{
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-2);
  margin-bottom: var(--ng-space-6);
}

.ng-footer__nav a{
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink);
  text-decoration: none;
  display: inline-block;
  padding-top: var(--ng-footer-link-pad-y);
  padding-bottom: var(--ng-footer-link-pad-y);
}

.ng-footer__nav a:hover,
.ng-footer__nav a:focus-visible{
  color: var(--ng-color-gold);
}

.ng-footer__legal{
  display: flex;
  gap: var(--ng-space-4);
  padding-top: var(--ng-space-5);
  border-top: 1px solid var(--ng-color-border);
}

.ng-footer__legal a{
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-legal);
  text-decoration: none;
}

.ng-footer__legal a:hover,
.ng-footer__legal a:focus-visible{
  color: var(--ng-color-gold);
}

.ng-footer__social{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ng-space-4) var(--ng-space-5);
  margin-top: var(--ng-space-5);
}

.ng-footer__social a{
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink);
  text-decoration: none;
}

.ng-footer__social a:hover,
.ng-footer__social a:focus-visible{
  color: var(--ng-color-gold);
}

.ng-footer__credit{
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  margin-top: var(--ng-space-3);
}

.ng-footer__contact-note{
  margin: var(--ng-space-5) 0 0;
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
}

.ng-footer__col--engage{
  justify-self: center;
  width: min(100%, 30rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ng-footer .ng-subscribe{
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  border-top: none;
}

.ng-footer .ng-subscribe > .ng-container{
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

.ng-footer .ng-subscribe .ng-reading{
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.ng-footer .ng-subscribe__copy{
  margin-bottom: var(--ng-space-4);
}

.ng-footer .ng-subscribe__form{
  gap: var(--ng-space-2);
}

.ng-footer .ng-subscribe__field{
  width: 100%;
}

.ng-footer .ng-subscribe__message{
  margin-top: var(--ng-space-2);
}

@media (max-width: 768px){
  .ng-footer__col--engage{
    justify-self: stretch;
    width: 100%;
  }

  .ng-footer__social{
    justify-content: center;
  }

  .ng-footer__credit{
    text-align: center;
  }
}


/* ---------------------------------------------
   Header (Phase 6 stabilisation)
----------------------------------------------*/
.ng-header{
  position: sticky;
  top: 0;
  z-index: var(--ng-z-header);
  background: linear-gradient(180deg, rgba(251,250,246,.98) 0%, rgba(251,250,246,.94) 100%);
  border-bottom: 1px solid var(--ng-color-hairline);
  backdrop-filter: saturate(120%) blur(6px);
  transition: transform var(--ng-dur-med) var(--ng-ease-quiet);
}

.ng-header.is-hidden{
  transform: translateY(-110%);
}

.ng-header__inner{
  width: 100%;
  max-width: var(--ng-page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem var(--ng-gutter-x);
  gap: var(--ng-space-5);

  /* Container query source */
  container-type: inline-size;
  container-name: header;
}

.ng-logo{
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;
  flex: 0 1 auto;
  text-decoration: none;
  color: var(--ng-color-ink);
}

.ng-logo__text{
  font-family: var(--ng-font-serif);
  font-size: 1.3rem;
  letter-spacing: .01em;
}

.ng-nav--desktop{
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: center;
  flex-shrink: 0;
}

.ng-nav a{
  font-family: var(--ng-font-sans);
  color: var(--ng-color-ink);
  text-decoration: none;
  font-size: 0.98rem;
  letter-spacing: .01em;
}

.ng-nav__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: .25rem .1rem;
  border-bottom: 1px solid transparent;
  transition: color var(--ng-dur-fast) var(--ng-ease-quiet),
              border-color var(--ng-dur-fast) var(--ng-ease-quiet),
              background var(--ng-dur-fast) var(--ng-ease-quiet);
}

.ng-nav__link[aria-current="page"]{
  border-bottom-color: rgba(20,20,20,.24);
}

.ng-nav__link--cta{
  padding: .45rem .8rem;
  border: 1px solid var(--ng-color-hairline);
  border-radius: var(--ng-radius-pill);
  background: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.ng-nav__link--cta[aria-current="page"]{
  border-bottom-color: var(--ng-color-hairline);
  border-color: rgba(20,20,20,.2);
}

.ng-nav a:hover,
.ng-nav a:focus-visible{
  color: var(--ng-color-gold);
}

.ng-menu-btn{
  display: none;

  appearance: none;
  border: 1px solid var(--ng-color-hairline);
  background: rgba(255,255,255,.5);
  padding: .55rem .75rem;
  border-radius: var(--ng-radius-pill);
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--ng-shadow-soft);
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}


/* Header navigation: content-boundary collapse (not device-boundary) */
@container header (max-width: 700px){
  .ng-nav--desktop{ display: none; }
  .ng-menu-btn{ display: inline-flex; }
}

/* Fallback for browsers without container queries */
@supports not (container-type: inline-size){
  @media (max-width: 860px){
    .ng-nav--desktop{ display: none; }
    .ng-menu-btn{ display: inline-flex; }
  }
}

/* Mobile overlay panel (floating paper, not fullscreen) */


/* Overlay containment: when open, background is inert (no interaction). */
html.ng-is-overlay-open .ng-header,
html.ng-is-overlay-open #content,
html.ng-is-overlay-open .ng-footer{
  pointer-events: none;
}

html.ng-is-overlay-open .ng-overlay,
html.ng-is-overlay-open .ng-overlay__panel,
html.ng-is-overlay-open .ng-overlay__close{
  pointer-events: auto;
}
.ng-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--ng-z-overlay);
  background: rgba(20,20,20,.10);

  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--ng-dur-med) var(--ng-ease-quiet),
    visibility 0s linear var(--ng-dur-med);
}

.ng-overlay[aria-hidden="false"]{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity var(--ng-dur-med) var(--ng-ease-quiet),
    visibility 0s linear 0s;
}

.ng-overlay[aria-hidden="false"] .ng-overlay__panel{ transform: translateX(0); }

.ng-overlay__panel{
  position: fixed;
  top: 72px;
  right: var(--ng-space-4);
  left: var(--ng-space-4);
  width: auto;
  max-width: 420px;
  margin-left: auto;
  max-height: calc(100vh - 96px);
  overflow: auto;
  background: var(--ng-color-porcelain);
  border: 1px solid var(--ng-color-hairline);
  border-radius: var(--ng-radius-card);
  box-shadow: var(--ng-shadow-float);
  font-family: var(--ng-font-sans);
  padding: var(--ng-space-6) var(--ng-space-5) var(--ng-space-5);
  transform: translateX(120%);
  transition: transform var(--ng-dur-med) var(--ng-ease-quiet);
}

.ng-overlay__eyebrow{
  margin: 0 0 var(--ng-space-2);
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ng-overlay__title{
  margin: 0;
  font-family: var(--ng-font-serif);
  font-size: 1.7rem;
  line-height: 1.05;
}

.ng-overlay__close{
  appearance:none;
  border: 0;
  background: transparent;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  position: absolute;
  top: .75rem;
  right: 1rem;
}

.ng-nav--mobile{
  display: grid;
  gap: .75rem;
  padding-top: var(--ng-space-5);
}

.ng-nav--mobile .ng-nav__link{
  width: 100%;
  justify-content: flex-start;
  font-family: var(--ng-font-sans);
  padding: .65rem 0;
  border-bottom-color: var(--ng-color-hairline);
}

.ng-nav--mobile .ng-nav__link--cta{
  font-family: var(--ng-font-sans);
  margin-top: var(--ng-space-2);
  justify-content: center;
  border-bottom-color: transparent;
}


/* Page (generic) */
/* ==============================
   About page (institutional surface)
   - Controlled section rhythm
   - Quiet headings
   - Reading-width discipline inherited via .ng-reading
============================== */

.ng-page--about .ng-about{
  /* Pull the first paragraph closer to title without collapsing rhythm */
  padding-bottom: var(--ng-space-2);
}

.ng-page--about .ng-page__title{
  max-width: 14ch;
}

/* Gutenberg headings inside About content */
.ng-about h2,
.ng-about .wp-block-heading{
  font-family: var(--ng-font-serif);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: clamp(1.35rem, 2.2vw, 1.85rem);
  line-height: 1.18;
  margin: var(--ng-space-5) 0 var(--ng-space-3);
}

.ng-about > p:first-of-type{
  font-family: var(--ng-font-serif);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.7;
  color: var(--ng-color-ink-muted);
  margin-bottom: var(--ng-space-6);
}

.ng-about > :is(h2, .wp-block-heading){
  margin-top: var(--ng-space-7);
  padding-top: var(--ng-space-4);
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-about p{
  margin: 0 0 var(--ng-space-4);
  line-height: var(--ng-line-body);
  text-decoration: none;
}

.ng-about p + p{
  margin-top: 0;
}

/* Subtle text link line (e.g., “View Niloofar K. Afshar's practice →”) */
.ng-about a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}


/* ==============================
   Artist profile (surface)
============================== */

.ng-artist__lead{
  color: var(--ng-color-ink);
  margin: var(--ng-space-3) 0 0;
  max-width: 56ch;
}

.ng-artist__routes{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ng-space-4);
  align-items: center;
  margin-top: var(--ng-space-6);
}

.ng-artist__secondary-link{
  color: var(--ng-color-ink);
  font-size: var(--ng-text-small);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}
.ng-artist__secondary-link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}


@media (max-width: 860px){
  }


/* ==============================
   Artists archive (prose list)
============================== */

.ng-artists__list{
  display: block;
}

.ng-artists__item{
  padding: 0;
  margin: 0 0 var(--ng-space-5);
}

.ng-artists__name{
  font-family: var(--ng-font-serif);
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 var(--ng-space-2);
}

.ng-artists__excerpt{
  color: var(--ng-color-ink);
  font-size: var(--ng-text-small);
  margin: 0;
}

/* ==============================
   Studio surface (Phase 6.2)
   Template: page-studio.php
   Reading width inherited via .ng-reading (820px).
   Register: first-person, authored, method-driven.
   Slightly more open line-height than About — this is
   long-form reading, not institutional declaration.
============================== */

.ng-studio {
  padding-bottom: var(--ng-space-2);
}

.ng-studio h2 {
  font-family: var(--ng-font-serif);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink);
  margin: var(--ng-space-7) 0 var(--ng-space-5);
  padding-bottom: var(--ng-space-3);
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-studio h2:first-child {
  margin-top: 0;
}

.ng-studio h3 {
  font-family: var(--ng-font-serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--ng-color-ink);
  margin: var(--ng-space-6) 0 var(--ng-space-3);
}

.ng-studio p {
  font-family: var(--ng-font-serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ng-color-ink);
  margin-bottom: var(--ng-space-5);
}

.ng-studio a {
  color: var(--ng-color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ng-color-hairline);
  padding-bottom: 1px;
  transition: color var(--ng-dur-fast) var(--ng-ease-quiet),
              border-color var(--ng-dur-fast) var(--ng-ease-quiet);
}

.ng-studio a:hover {
  color: var(--ng-color-ink);
  border-color: var(--ng-color-border);
  text-decoration: none;
}
.ng-studio a:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
  border-color: transparent;
}

/* Closing CTA — lifts the action line from body text */
.ng-studio__cta {
  margin-top: var(--ng-space-5);
  padding-top: var(--ng-space-4);
  border-top: 1px solid var(--ng-color-hairline);
}






/* Breadcrumb navigation — subdued wayfinding */
.ng-breadcrumb {
  margin-bottom: var(--ng-space-5);
}

.ng-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ng-space-3);
}

.ng-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--ng-space-3);
}

.ng-breadcrumb__link {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  text-decoration: none;
}

.ng-breadcrumb__link:hover {
  color: var(--ng-color-ink);
}

.ng-breadcrumb__link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

.ng-breadcrumb__sep {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  opacity: 0.5;
  user-select: none;
}

.ng-breadcrumb__current {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
}


/* Founder route link (About surface) — quiet, intentional */
.ng-about p > a {
  display: inline-block;
  margin-top: var(--ng-space-2);
  color: var(--ng-color-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ng-color-hairline);
  padding-bottom: 1px;
}

.ng-about p > a:hover {
  color: var(--ng-color-ink);
  border-color: var(--ng-color-border);
}

/* ============================================================
   Website Completion Sprint — homepage trust surfaces
   ============================================================ */

.ng-home-hero{
  padding-top: clamp(var(--ng-space-7), 7vw, var(--ng-space-9));
  padding-bottom: var(--ng-space-7);
}

.ng-home-hero__shell{
  background:
    radial-gradient(circle at top left, rgba(198,165,90,.13) 0%, rgba(198,165,90,0) 42%),
    linear-gradient(180deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.12) 100%);
  border: 1px solid var(--ng-color-hairline);
  border-radius: var(--ng-radius-card);
  box-shadow: var(--ng-shadow-soft);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.ng-home-hero__grid{
  display: grid;
  gap: var(--ng-space-7);
  align-items: center;
}

@media (min-width: 980px){
  .ng-home-hero__grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  }
}

.ng-home-hero__copy{
  max-width: 39rem;
}

.ng-home-hero__eyebrow{
  margin: 0 0 var(--ng-space-3);
  font-size: var(--ng-text-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ng-color-ink-muted);
}

.ng-home-hero__title{
  margin: 0;
  font-family: var(--ng-font-serif);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: .98;
  letter-spacing: .02em;
}

.ng-home-hero__sub{
  margin: var(--ng-space-4) 0 0;
  max-width: 28ch;
  font-family: var(--ng-font-serif);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  line-height: 1.28;
  color: var(--ng-color-ink-muted);
}

.ng-home-hero__lead{
  margin: var(--ng-space-5) 0 0;
  max-width: 46ch;
  font-size: 1.02rem;
  color: var(--ng-color-ink);
}

.ng-home-hero__actions{
  margin-top: var(--ng-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ng-space-4);
  align-items: center;
}

.ng-home-hero__secondary-link{
  color: var(--ng-color-ink-muted);
  font-size: var(--ng-text-small);
  text-decoration: none;
  border-bottom: 1px solid var(--ng-color-hairline);
  padding-bottom: 2px;
}

.ng-home-hero__secondary-link:hover{
  border-bottom-color: var(--ng-color-border);
}

.ng-home-hero__curator{
  margin: var(--ng-space-5) 0 0;
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-faint);
}

.ng-home-hero__artwork{
  display: block;
  color: inherit;
  text-decoration: none;
}

.ng-home-hero__artwork:hover{
  text-decoration: none;
}

.ng-home-hero__artwork-frame{
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(var(--ng-radius-card) - 4px);
  border: 1px solid var(--ng-color-hairline);
  background: rgba(255,255,255,.52);
}

.ng-home-hero__artwork-image{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ng-home-hero__artwork-caption{
  display: grid;
  gap: var(--ng-space-1);
  margin-top: var(--ng-space-4);
}

.ng-home-hero__artwork-kicker{
  font-size: var(--ng-text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ng-color-ink-muted);
}

.ng-home-hero__artwork-title{
  font-family: var(--ng-font-serif);
  font-size: 1.35rem;
  line-height: 1.08;
}

.ng-home-hero__artwork-meta{
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
}

.ng-home-introduction{
  padding-bottom: var(--ng-space-3);
}

.ng-home-introduction__inner{
  display: grid;
  gap: var(--ng-space-5);
  padding: 0 0 var(--ng-space-2);
}

@media (min-width: 900px){
  .ng-home-introduction__inner{
    grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr);
    align-items: start;
  }
}

.ng-home-introduction__eyebrow{
  margin: 0 0 var(--ng-space-2);
  font-size: var(--ng-text-caption);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ng-color-ink-muted);
}

.ng-home-introduction__title{
  margin: 0;
  max-width: 18ch;
  font-family: var(--ng-font-serif);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.ng-home-introduction__text{
  margin: 0;
  max-width: 55ch;
}

.ng-home-introduction__support{
  margin: var(--ng-space-4) 0 0;
  max-width: 44ch;
  color: var(--ng-color-ink-muted);
}

@media (max-width: 859px){
  .ng-home-hero__shell{
    padding: var(--ng-space-5);
  }

  .ng-home-hero__grid{
    gap: var(--ng-space-6);
  }

  .ng-home-hero__artwork{
    max-width: 26rem;
  }

  .ng-home-hero__actions{
    gap: var(--ng-space-3);
  }
}

@media (max-width: 599px){
  .ng-header__inner{
    gap: var(--ng-space-3);
    padding-top: .7rem;
    padding-bottom: .7rem;
  }

  .ng-logo__img{
    max-width: min(7.25rem, 32vw);
    max-height: 2.35rem;
  }

  .ng-menu-btn{
    padding: .5rem .7rem;
  }

  .ng-home-hero{
    padding-top: var(--ng-space-5);
  }

  .ng-home-hero__title{
    font-size: clamp(2.55rem, 11vw, 3.35rem);
  }

  .ng-home-hero__sub{
    max-width: 22ch;
  }

  .ng-home-hero__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .ng-home-hero__actions .ng-btn{
    width: 100%;
  }

  .ng-home-hero__secondary-link{
    width: fit-content;
  }

  .ng-home-introduction{
    padding-top: var(--ng-space-3);
  }
}
/* Legal footer links — compliance surface, subdued */
.ng-footer__legal {
  margin-top: var(--ng-space-5);
  padding-top: var(--ng-space-4);
  border-top: 1px solid var(--ng-color-hairline);
  display: flex;
  gap: var(--ng-space-4);
}

.ng-footer__legal a {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  text-decoration: none;
}

.ng-footer__legal a:hover {
  color: var(--ng-color-ink);
}

.ng-footer__legal a:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}


/* ============================================================
   Inquiries surface
   ============================================================ */

/* Context block — shown when arriving from an artwork */
.ng-inquiry-context {
  margin-bottom: var(--ng-space-6);
  padding-bottom: var(--ng-space-5);
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-inquiry-context__label {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  margin-bottom: var(--ng-space-2);
}

.ng-inquiry-context__title {
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink);
  font-weight: 500;
  margin-bottom: var(--ng-space-2);
}

.ng-inquiry-context__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-inquiry-context__title a:hover {
  border-color: var(--ng-color-ink);
}

.ng-inquiry-context__meta {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
}

/* Form fields */
.ng-inquiry-form {
  margin-bottom: var(--ng-space-6);
}

.ng-inquiry-form__hp {
  display: none; /* honeypot — invisible to humans */
}

.ng-inquiry-form__field {
  margin-bottom: var(--ng-space-5);
}

.ng-inquiry-form__label {
  display: block;
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  margin-bottom: var(--ng-space-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ng-inquiry-form__input,
.ng-inquiry-form__textarea {
  display: block;
  width: 100%;
  padding: var(--ng-space-3) var(--ng-space-4);
  background: transparent;
  border: 1px solid var(--ng-color-hairline);
  color: var(--ng-color-ink);
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-body);
  line-height: 1.6;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
}

.ng-inquiry-form__input:focus,
.ng-inquiry-form__textarea:focus {
  outline: none;
  border-color: var(--ng-color-ink);
}

.ng-inquiry-form__input:focus-visible,
.ng-inquiry-form__textarea:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

.ng-inquiry-form__textarea {
  resize: vertical;
  min-height: 8rem;
}

.ng-inquiry-form__submit {
  margin-top: var(--ng-space-5);
}

.ng-inquiry-form__submit button {
  font-family: var(--ng-font-sans);
}

/* Feedback states */
.ng-inquiry-feedback {
  margin-bottom: var(--ng-space-6);
  padding: var(--ng-space-4) var(--ng-space-5);
  border-left: 3px solid var(--ng-color-hairline);
}

.ng-inquiry-feedback--success {
  border-color: var(--ng-cta-border);
}

.ng-inquiry-feedback--error {
  border-color: var(--ng-color-ink-muted);
}

.ng-inquiry-feedback p {
  margin: 0;
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink);
}

/* Direct contact line */
.ng-inquiry-direct {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  margin-top: var(--ng-space-5);
}

.ng-inquiry-direct a {
  color: var(--ng-color-ink-muted);
}

.ng-inquiry-direct a:hover {
  color: var(--ng-color-ink);
}


/* ============================================================
   Journal essay — single entry reading surface (Phase 8.1)
   ============================================================ */

/* Header */
.ng-journal-entry__header {
  padding-top: var(--ng-space-7);
  padding-bottom: var(--ng-space-6);
  border-bottom: 1px solid var(--ng-color-hairline);
  margin-bottom: var(--ng-space-7);
}

/* Theme label — above H1 */
.ng-journal-entry__theme {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--ng-space-3);
}

/* Byline block — below theme label, above H1 */
.ng-journal-entry__byline {
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-1);
  margin-bottom: var(--ng-space-4);
}

.ng-journal-entry__author {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink);
}

.ng-journal-entry__author-role {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
}

/* Essay H1 */
.ng-journal-entry__title {
  font-size: var(--ng-text-h1);
  color: var(--ng-color-ink);
  line-height: 1.2;
  margin: 0;
}

/* ============================================================
   Prose body — .ng-journal-prose scopes all the_content() styles
   ============================================================ */

.ng-journal-prose {
  padding-bottom: var(--ng-space-7);
}

/* Headings within essay body */
.ng-journal-prose h2 {
  font-size: var(--ng-text-h2);
  color: var(--ng-color-ink);
  margin-top: var(--ng-space-8);
  margin-bottom: var(--ng-space-4);
  line-height: 1.25;
}

.ng-journal-prose h3 {
  font-size: var(--ng-text-h3);
  color: var(--ng-color-ink);
  margin-top: var(--ng-space-6);
  margin-bottom: var(--ng-space-3);
  line-height: 1.3;
}

/* Paragraphs */
.ng-journal-prose p {
  font-size: var(--ng-text-body);
  line-height: 1.75;
  color: var(--ng-color-ink);
  margin-bottom: var(--ng-space-5);
}

/* Bold labels within paragraphs (used in technical essays) */
.ng-journal-prose strong {
  color: var(--ng-color-ink);
  font-weight: 600;
}

/* Lists */
.ng-journal-prose ul,
.ng-journal-prose ol {
  margin-bottom: var(--ng-space-5);
  padding-left: 1.25em;
}

.ng-journal-prose li {
  font-size: var(--ng-text-body);
  line-height: 1.75;
  color: var(--ng-color-ink);
  margin-bottom: var(--ng-space-2);
}

/* ============================================================
   Images — full-width column breaks, no text wrap
   ============================================================ */

/* All images in the essay body break full-width */
.ng-journal-prose img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--ng-space-7);
  margin-bottom: var(--ng-space-7);
}

/* WordPress wraps images in figures — handle both cases */
.ng-journal-prose figure {
  display: block;
  margin: var(--ng-space-7) 0;
}

.ng-journal-prose figure img {
  margin-top: 0;
  margin-bottom: 0;
}

/* Captions */
.ng-journal-prose figcaption,
.ng-journal-prose .wp-caption-text {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  margin-top: var(--ng-space-2);
  line-height: 1.5;
}

/* Remove WordPress default caption width constraint */
.ng-journal-prose .wp-caption {
  max-width: 100% !important;
  width: 100% !important;
}

/* ============================================================
   YouTube embeds — responsive 16:9, full reading-column width
   ============================================================ */

/* WordPress wraps oEmbed in .wp-block-embed or .wp-embed-aspect */
.ng-journal-prose .wp-block-embed,
.ng-journal-prose .wp-has-aspect-ratio {
  margin: var(--ng-space-7) 0;
}

.ng-journal-prose .wp-block-embed__wrapper,
.ng-journal-prose .wp-embed-aspect .wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.ng-journal-prose .wp-block-embed__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ============================================================
   Tables — within essay body (used in MATERIAL_SCIENCE essays)
   ============================================================ */

.ng-journal-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--ng-space-7) 0;
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink);
}

.ng-journal-prose th {
  text-align: left;
  font-weight: 600;
  padding: var(--ng-space-3) var(--ng-space-4);
  border-bottom: 2px solid var(--ng-color-border);
  color: var(--ng-color-ink);
  white-space: nowrap;
}

.ng-journal-prose td {
  padding: var(--ng-space-3) var(--ng-space-4);
  border-bottom: 1px solid var(--ng-color-hairline);
  vertical-align: top;
  line-height: 1.5;
}

.ng-journal-prose tr:last-child td {
  border-bottom: none;
}

/* Horizontal scroll on mobile for wide tables */
.ng-journal-prose .wp-block-table,
.ng-journal-prose table {
  overflow-x: auto;
  display: block;
}

/* Restore display for non-scrolling contexts */
.ng-journal-prose .wp-block-table table {
  display: table;
  min-width: 600px; /* forces scroll on narrow screens */
}

/* ============================================================
   Sources block — apparatus, not reading content
   ============================================================ */

.ng-journal-entry__sources {
  padding-top: var(--ng-space-6);
  padding-bottom: var(--ng-space-8);
}

.ng-journal-entry__sources-rule {
  border: none;
  border-top: 1px solid var(--ng-color-hairline);
  margin: 0 0 var(--ng-space-5);
}

.ng-journal-entry__sources-heading {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: var(--ng-space-4);
}

.ng-journal-entry__sources-body {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  line-height: 1.7;
}

.ng-journal-entry__sources-body p,
.ng-journal-entry__sources-body li {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  line-height: 1.7;
  margin-bottom: var(--ng-space-2);
}

.ng-journal-entry__sources-body a {
  color: var(--ng-color-ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-journal-entry__sources-body a:hover {
  color: var(--ng-color-ink);
  border-color: var(--ng-color-ink-muted);
}

.ng-journal-entry__sources-body a:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}



/* ============================================================
   Journal landing page (Phase 8.2)
   ============================================================ */

.ng-journal-landing {
  padding-bottom: var(--ng-space-9);
}

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

.ng-journal-hero {
  margin-bottom: var(--ng-space-8);
}

/* Featured image — full page width, natural aspect ratio */
.ng-journal-hero__image-wrap {
  width: 100%;
  max-height: 70vh;
  overflow: hidden;
}

.ng-journal-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Hero text body — reading width, same as essay surface */
.ng-journal-hero__body {
  padding-top: var(--ng-space-6);
  padding-bottom: var(--ng-space-7);
  border-bottom: 1px solid var(--ng-color-hairline);
}

/* Theme label — same quiet treatment as essay header */
.ng-journal-hero__theme {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--ng-space-3);
}

/* Hero title — large, the primary entry point */
.ng-journal-hero__title {
  font-size: var(--ng-text-h1);
  line-height: var(--ng-line-tight);
  color: var(--ng-color-ink);
  margin: 0 0 var(--ng-space-3);
}

.ng-journal-hero__link {
  color: inherit;
  text-decoration: none;
}

.ng-journal-hero__link:hover {
  color: var(--ng-color-ink-muted);
}

.ng-journal-hero__link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

/* Hero byline */
.ng-journal-hero__author {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  margin: 0;
}

/* ---------- Theme modules ---------- */

.ng-journal-modules {
  padding-top: var(--ng-space-8);
}

.ng-journal-module {
  margin-bottom: var(--ng-space-8);
}

.ng-journal-module__header {
  margin-bottom: var(--ng-space-5);
  padding-bottom: var(--ng-space-4);
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-journal-module__title {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}

/* ---------- Essay cards (typographic only, no image) ---------- */

.ng-journal-module__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ng-journal-card {
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-journal-card:first-child {
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-journal-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-1);
  padding: var(--ng-space-4) 0;
  text-decoration: none;
  color: inherit;
  transition: color var(--ng-dur-fast) var(--ng-ease-quiet);
}

.ng-journal-card__link:hover .ng-journal-card__title {
  color: var(--ng-color-ink-muted);
}

.ng-journal-card__link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

.ng-journal-card__theme {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ng-journal-card__title {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h3);
  color: var(--ng-color-ink);
  line-height: var(--ng-line-tight);
  transition: color var(--ng-dur-fast) var(--ng-ease-quiet);
}

.ng-journal-card__author {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  font-style: italic;
}

.ng-journal-card__excerpt {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  line-height: var(--ng-line-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ============================================================
   404 surface (Phase 8.4)
   ============================================================ */

.ng-404 {
  padding-top: var(--ng-space-9);
  padding-bottom: var(--ng-space-9);
}

.ng-404__title {
  font-size: var(--ng-text-h2);
  color: var(--ng-color-ink);
  margin-bottom: var(--ng-space-4);
}

.ng-404__body {
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink-muted);
  margin-bottom: var(--ng-space-6);
}

.ng-404__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ng-space-5);
}

.ng-404__secondary {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  text-decoration: none;
}

.ng-404__secondary:hover {
  color: var(--ng-color-ink);
}

.ng-404__secondary:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

/* ============================================================
   Exhibition / Participation surfaces (Phase 9.0)
   ============================================================ */

/* ---------- Archive list ---------- */

.ng-exh-section {
  padding-top: var(--ng-space-7);
  padding-bottom: var(--ng-space-7);
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-exh-section__heading {
  font-size: var(--ng-text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ng-color-ink-muted);
  margin: 0 0 var(--ng-space-5);
}

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

.ng-exh-list__item {
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-exh-list__item:first-child {
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-exh-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: var(--ng-space-6);
  row-gap: var(--ng-space-1);
  padding: var(--ng-space-5) 0;
  text-decoration: none;
  color: inherit;
  align-items: baseline;
}

.ng-exh-list__link:hover .ng-exh-list__title {
  color: var(--ng-color-ink-muted);
}

.ng-exh-list__link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

.ng-exh-list__title {
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink);
  grid-column: 1;
  grid-row: 1;
  transition: color var(--ng-dur-fast) var(--ng-ease-quiet);
}

.ng-exh-list__venue {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  grid-column: 1;
  grid-row: 2;
}

.ng-exh-list__date {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  grid-column: 2;
  grid-row: 1 / 3;
  text-align: right;
  white-space: nowrap;
}

.ng-exh-empty {
  padding: var(--ng-space-8) 0;
  color: var(--ng-color-ink-muted);
  font-size: var(--ng-text-body);
}

/* ---------- Single page ---------- */

/* Meta block (dl) */
.ng-exh-meta {
  margin: var(--ng-space-5) 0 0;
  padding: 0;
}

.ng-exh-meta__row {
  display: flex;
  gap: var(--ng-space-4);
  padding: var(--ng-space-2) 0;
  padding-bottom: var(--ng-space-3);
  border-bottom: 1px solid var(--ng-color-hairline);
  align-items: baseline;
}

.ng-exh-meta__row:first-child {
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-exh-meta__label {
  font-size: var(--ng-text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ng-color-ink-muted);
  min-width: 6rem;
  flex-shrink: 0;
}

.ng-exh-meta__value {
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink);
  margin: 0;
}

/* Artworks grid on single page */
.ng-exh-artworks {
  padding-top: var(--ng-space-8);
  border-top: 1px solid var(--ng-color-hairline);
  margin-top: var(--ng-space-8);
}

.ng-exh-artworks__header {
  margin-bottom: var(--ng-space-6);
}

.ng-exh-artworks__title {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h2);
  color: var(--ng-color-ink);
  margin: 0;
}

/* ============================================================
   Homepage modules (Phase 8.5)
   ============================================================ */

/* Shared module scaffold */
.ng-home-module {
  padding-top: var(--ng-space-8);
  padding-bottom: var(--ng-space-8);
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-home-module__header {
  margin-bottom: var(--ng-space-6);
}

.ng-home-module__title {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h2);
  line-height: var(--ng-line-tight);
  color: var(--ng-color-ink);
  margin: 0;
}

.ng-home-module__footer {
  margin-top: var(--ng-space-6);
}

.ng-home-module__all-link {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.ng-home-module__all-link:hover {
  color: var(--ng-color-ink);
}

.ng-home-module__all-link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

/* ---------- Journal essay list ---------- */

.ng-home-journal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ng-home-journal-item {
  border-bottom: 1px solid var(--ng-color-hairline);
}

.ng-home-journal-item:first-child {
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-home-journal-item__link {
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-1);
  padding: var(--ng-space-5) 0;
  text-decoration: none;
  color: inherit;
}

.ng-home-journal-item__link:hover .ng-home-journal-item__title {
  color: var(--ng-color-ink-muted);
}

.ng-home-journal-item__link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

.ng-home-journal-item__theme {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ng-home-journal-item__title {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h3);
  color: var(--ng-color-ink);
  line-height: var(--ng-line-tight);
  transition: color var(--ng-dur-fast) var(--ng-ease-quiet);
}

.ng-home-journal-item__author {
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  font-style: italic;
}

.ng-home-journal-item__excerpt {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  line-height: var(--ng-line-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ============================================================
   Subscription form (Phase 9.2)
   ============================================================ */

.ng-subscribe {
  padding-top: var(--ng-space-8);
  padding-bottom: var(--ng-space-8);
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-subscribe__heading {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h2);
  line-height: var(--ng-line-tight);
  color: var(--ng-color-ink);
  margin: 0 0 var(--ng-space-3);
}

.ng-subscribe__copy {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  margin: 0 0 var(--ng-space-5);
}

.ng-subscribe__form {
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-3);
  max-width: 480px;
}

.ng-subscribe__field {
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-1);
}

.ng-subscribe__label {
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ng-subscribe__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--ng-input-border-strong);
  border-radius: 0;
  padding: var(--ng-space-2) 0;
  padding-bottom: var(--ng-space-3);
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink);
  width: 100%;
  outline: none;
}

.ng-subscribe__input:focus-visible {
  border-bottom-color: var(--ng-color-ink);
  outline: none;
}

.ng-subscribe__message {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  margin-top: var(--ng-space-3);
}

/* Footer variant — tighter heading */
.ng-subscribe--footer .ng-subscribe__heading {
  font-size: var(--ng-text-h3);
}

/* Subscribe confirmation / unsubscribe page */
.ng-subscribe-page {
  padding-top: var(--ng-space-9);
  padding-bottom: var(--ng-space-9);
  text-align: center;
}

.ng-subscribe-page__heading {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h2);
  color: var(--ng-color-ink);
  margin: 0 0 var(--ng-space-4);
}

.ng-subscribe-page__body {
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink-muted);
  max-width: 480px;
  margin: 0 auto;
  line-height: var(--ng-line-body);
}
/* ============================================================
   Series surface (Phase 9.4)
   ============================================================ */

/* ---- Series index ---- */

.ng-series-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--ng-space-6);
  padding-top: var(--ng-space-7);
  padding-bottom: var(--ng-space-9);
}

.ng-series-card {
  display: flex;
  flex-direction: column;
}

.ng-series-card__link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-4);
}

.ng-series-card__link:focus-visible {
  outline: var(--ng-focus-ring);
  outline-offset: var(--ng-focus-offset);
}

.ng-series-card__image-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ng-color-paper);
}

.ng-series-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--ng-dur-med) var(--ng-ease-quiet);
}

.ng-series-card__link:hover .ng-series-card__image {
  transform: scale(1.03);
}

.ng-series-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ng-space-2);
}

.ng-series-card__title {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-h3);
  font-weight: 400;
  color: var(--ng-color-ink);
  margin: 0;
}

.ng-series-card__excerpt {
  font-size: var(--ng-text-small);
  color: var(--ng-color-ink-muted);
  line-height: var(--ng-line-body);
  margin: 0;
}

/* ---- Series single ---- */

.ng-series__body {
  padding-top: var(--ng-space-6);
  padding-bottom: var(--ng-space-7);
}

.ng-series__artworks {
  padding-top: var(--ng-space-7);
  padding-bottom: var(--ng-space-9);
  border-top: 1px solid var(--ng-color-hairline);
}

.ng-series__artworks-heading {
  font-family: var(--ng-font-serif);
  font-size: var(--ng-text-small);
  font-weight: 400;
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--ng-space-6);
}

/* Empty state message — fallback archives + search */
.ng-empty-state{
  padding: var(--ng-space-9) 0;
  color: var(--ng-color-ink-muted);
}

/* Artwork facts — catalogue table */
.ng-artwork-facts{
  padding: var(--ng-space-6) 0;
}

.ng-artwork-facts__table{
  width: 100%;
  max-width: var(--ng-reading-width);
  border-collapse: collapse;
}

.ng-artwork-facts__row{
  border-bottom: 1px solid var(--ng-color-border);
}

.ng-artwork-facts__row:last-child{
  border-bottom: none;
}

.ng-artwork-facts__label{
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--ng-space-3) 0;
  width: 35%;
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}

.ng-artwork-facts__value{
  font-size: var(--ng-text-body);
  color: var(--ng-color-ink);
  padding: var(--ng-space-3) 0;
  vertical-align: top;
}

.ng-artwork-facts__row--style .ng-artwork-facts__value{
  line-height: var(--ng-line-style-row);
}

/* Artwork media — hero + thumb-switcher */
.ng-artwork-media__hero{
  margin-bottom: var(--ng-space-4);
}

.ng-artwork-media__hero-button{
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.ng-artwork-media__img--hero{
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

.ng-artwork-media__video-frame{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: var(--ng-color-porcelain);
}

.ng-artwork-media__iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ng-artwork-media__thumbs{
  display: flex;
  gap: var(--ng-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--ng-space-6);
}

.ng-artwork-media__thumb{
  width: var(--ng-thumb-size);
  min-height: var(--ng-thumb-size);
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--ng-radius-tight);
  cursor: pointer;
  background: transparent;
  transition: border-color var(--ng-dur-fast) var(--ng-ease-quiet);
}

.ng-artwork-media__thumb--active,
.ng-artwork-media__thumb:hover{
  border-color: var(--ng-color-gold);
}

.ng-artwork-media__thumb-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ng-artwork-media__thumb--video{
  display: grid;
  place-items: center;
  gap: var(--ng-space-1);
  padding: var(--ng-space-2);
  background: var(--ng-color-porcelain);
  border-color: var(--ng-color-hairline);
}

.ng-artwork-media__thumb-video-indicator{
  width: var(--ng-space-5);
  height: var(--ng-space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ng-artwork-media__thumb-video-indicator svg{
  width: 100%;
  height: 100%;
}

.ng-artwork-media__thumb-video-label{
  font-size: var(--ng-text-caption);
  color: var(--ng-color-ink-muted);
}

.ng-artwork-media__modal{
  position: fixed;
  inset: 0;
  z-index: var(--ng-z-modal);
}

.ng-artwork-media__modal-backdrop{
  position: absolute;
  inset: 0;
  background: var(--ng-color-porcelain);
}

.ng-artwork-media__modal-dialog{
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ng-space-4);
  padding: var(--ng-space-6);
}

.ng-artwork-media__modal-close{
  align-self: flex-end;
}

.ng-artwork-media__modal-image{
  display: block;
  max-width: var(--ng-modal-frame-max-width);
  max-height: var(--ng-modal-image-max-height);
  width: auto;
  height: auto;
}

body.ng-modal-open{
  overflow: hidden;
}

/* Button hover accent */
.ng-btn:hover,
.ng-btn:focus-visible{
  border-color: var(--ng-color-gold);
  color: var(--ng-color-gold);
}

/* Homepage curatorial statement */
.ng-home-statement{
  padding: var(--ng-space-8) 0 var(--ng-space-7);
}

.ng-home-statement__text{
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ng-color-ink-muted);
  max-width: var(--ng-reading-width);
}

/* Admin-only notice (used on Impressum) */
.ng-admin-notice{
  background: var(--ng-color-porcelain);
  border: 1px solid var(--ng-color-hairline);
  border-left: 4px solid var(--ng-color-gold);
  padding: var(--ng-space-5) var(--ng-space-6);
  margin: 0 0 var(--ng-space-8);
  font-family: var(--ng-font-sans);
  font-size: var(--ng-text-small);
  line-height: 1.6;
  color: var(--ng-color-ink);
}

.ng-admin-notice strong{
  font-weight: 600;
}