/* ============================================================
   D1NS Art. Gallery theme.
   White base, prominent black, painterly blue accents.
   ============================================================ */

:root {
  --dns-white: #ffffff;
  --dns-paper: #f5f2ec;
  --dns-ink: #141414;
  --dns-ink-soft: #2a2a2a;
  --dns-mute: #6b6b6b;
  --dns-blue: #5436ff;
  --dns-blue-bright: #6a4bff;
  --dns-blue-deep: #2616c0;
  --dns-line: #e4e0d8;
  --dns-display: "Syne", system-ui, sans-serif;
  --dns-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --dns-max: 1280px;
}

* { box-sizing: border-box; }

body {
  font-family: var(--dns-body);
  color: var(--dns-ink);
  background: var(--dns-ink);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
/* Remove core block gaps between sections so blacks butt together (no zebra) */
.wp-site-blocks > * { margin-block: 0 !important; }

h1, h2, h3 { font-family: var(--dns-display); font-weight: 600; line-height: 1.04; margin: 0; letter-spacing: -0.01em; }
a { color: inherit; }

.dns-wrap { max-width: var(--dns-max); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); }

/* ---------- Header ---------- */
.dns-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18,18,18,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.dns-header__inner {
  max-width: var(--dns-max); margin: 0 auto;
  padding: 1.1rem clamp(1.25rem, 5vw, 4rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.dns-wordmark {
  font-family: var(--dns-display);
  font-size: 1.18rem; letter-spacing: 0.01em; text-decoration: none; color: var(--dns-white);
  white-space: nowrap;
}
.dns-wordmark__dot { color: inherit; }  /* was --dns-blue. The separator became a hyphen on 2026-09-01 at her request, and blue on the near-black bar read as a faint dot rather than a hyphen. */
.dns-wordmark--light { color: var(--dns-white); }
.dns-nav { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); }
.dns-nav a {
  text-decoration: none; text-transform: uppercase;
  font-size: 0.78rem; letter-spacing: 0.16em; font-weight: 500; color: var(--dns-white);
  padding-bottom: 4px; border-bottom: 2px solid transparent; transition: border-color .2s;
}
.dns-nav a:hover { border-color: var(--dns-blue); }

/* ---------- Hero ---------- */
.dns-hero { position: relative; overflow: hidden; background: var(--dns-ink); color: var(--dns-white); }
.dns-hero__inner {
  max-width: var(--dns-max); margin: 0 auto;
  padding: clamp(4rem, 11vw, 9rem) clamp(1.25rem, 5vw, 4rem) clamp(1.25rem, 2.5vw, 2rem);
  position: relative; z-index: 4; text-align: left;
}
/* Reusable hard-edged blue forms for black sections */
.dns-forms { position: absolute; z-index: 1; pointer-events: none; }
.dns-forms svg { width: 100%; height: auto; display: block; }
.dns-forms--hero { top: 50%; right: 16%; transform: translateY(-50%); width: 140px; opacity: 0.7; }
.dns-feat-mark { width: 84px; margin: 0 auto 1.4rem; opacity: 0.85; }
.dns-feat-mark svg { width: 100%; height: auto; display: block; }
.dns-hero__eyebrow {
  text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.78rem; font-weight: 600;
  color: #9a9a9a; margin: 0 0 1.5rem;
}
.dns-hero h1 {
  font-size: clamp(1.75rem, 4.2vw, 2.85rem); letter-spacing: -0.01em; max-width: none; margin: 0; font-weight: 600; white-space: nowrap;
}
.dns-hero h1 em { font-style: normal; font-weight: 700; color: var(--dns-blue); }
.dns-hero__sub {
  margin: 1.5rem 0 2.25rem; max-width: none; white-space: nowrap; font-size: 1rem; color: #cfcfcf;
}
.dns-splash {
  position: absolute; top: 12%; right: 3%; width: min(22vw, 300px); z-index: 3;
  pointer-events: none;
}
.dns-splash svg { width: 100%; height: auto; display: block; }

/* ---------- Buttons ---------- */
.dns-btn {
  display: inline-block; text-decoration: none; font-weight: 600;
  font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 1rem 1.9rem; background: var(--dns-ink); color: var(--dns-white);
  border: 2px solid var(--dns-ink); transition: background .2s, color .2s, border-color .2s, transform .25s ease;
}
.dns-btn:hover { background: var(--dns-blue); border-color: var(--dns-blue); }
.dns-btn--ghost { background: transparent; color: var(--dns-ink); }
.dns-btn--ghost:hover { background: var(--dns-ink); color: var(--dns-white); }
.dns-btn--light { background: var(--dns-white); color: var(--dns-ink); border-color: var(--dns-white); }
.dns-btn--light:hover { background: var(--dns-blue); color: var(--dns-white); border-color: var(--dns-blue); }
.dns-btn--ghostlight { background: transparent; color: var(--dns-white); border-color: rgba(255,255,255,0.55); }
.dns-btn--ghostlight:hover { background: var(--dns-white); color: var(--dns-ink); border-color: var(--dns-white); }

/* ---------- Sections ---------- */
.dns-section { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.dns-section--paper { background: var(--dns-ink); color: var(--dns-white); padding-top: clamp(0.5rem, 1.5vw, 1.5rem); }
.dns-kicker {
  text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.76rem; font-weight: 600;
  color: var(--dns-blue); margin: 0 0 1rem;
}

/* ---------- Statement ---------- */
.dns-statement { background: var(--dns-ink); color: var(--dns-white); }
.dns-statement p {
  font-family: var(--dns-display); font-size: clamp(0.95rem, 2vw, 1.75rem); line-height: 1.2;
  max-width: none; white-space: nowrap; margin: 0; color: var(--dns-white);
}
.dns-statement .dns-wrap { max-width: var(--dns-max); }

/* ---------- Art grid (gallery rooms) ---------- */
.dns-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); }
.dns-tile { text-decoration: none; color: var(--dns-white); display: block; }
.dns-tile__frame {
  position: relative; aspect-ratio: 4 / 3; border: none; border-radius: 0;
  background: #1c1c1c; overflow: hidden; transition: transform .25s;
  display: flex; align-items: center; justify-content: center;
}
/* Sharp corners throughout. Vary aspect ratios only. */
.dns-tile:nth-child(1) .dns-tile__frame { aspect-ratio: 4 / 5; }
.dns-tile:nth-child(3) .dns-tile__frame { aspect-ratio: 4 / 5; }
.dns-tile__ph { font-family: var(--dns-display); font-size: 2rem; color: #cbc6bc; }
.dns-tile__frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.dns-tile:hover .dns-tile__frame img { transform: scale(1.04); }
.dns-tile__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: nowrap; }
.dns-tile__name { font-family: var(--dns-display); font-size: 1.05rem; white-space: nowrap; }
.dns-tile__count { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9a9a9a; }

/* ---------- Black room ---------- */
.dns-room-black { position: relative; background: var(--dns-ink); color: var(--dns-white); overflow: hidden; }
.dns-room-black__curves { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.9; }
.dns-room-black__curves svg { width: 100%; height: 100%; display: block; }
.dns-room-black__inner {
  position: relative; z-index: 2; max-width: var(--dns-max); margin: 0 auto;
  padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center;
  text-align: center;
}
.dns-room-black h2 { font-size: clamp(1.3rem, 2.3vw, 1.9rem); white-space: nowrap; font-weight: 600; }
.dns-room-black h2 em { font-style: normal; font-weight: 700; color: var(--dns-paper); }
.dns-room-black p { color: #d8d8d8; max-width: none; white-space: nowrap; margin: 1.5rem 0 2.25rem; font-size: 1.1rem; }
.dns-room-black__art {
  aspect-ratio: 3 / 4; border: none; background: #1c1c1c;
  overflow: hidden; border-radius: 0;
}
.dns-room-black__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dns-room-black__art span { font-family: var(--dns-display); color: #4a4a4a; font-size: 2rem; }

/* ---------- Quote ---------- */
.dns-quote { position: relative; background: var(--dns-ink); color: var(--dns-white); overflow: hidden; }
.dns-quote__splash { position: absolute; left: -8%; bottom: -30%; width: min(60vw, 760px); z-index: 1; pointer-events: none; }
.dns-quote__splash svg { width: 100%; height: auto; display: block; }
.dns-quote__inner {
  position: relative; z-index: 2; max-width: var(--dns-max); margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 8rem) clamp(1.25rem, 5vw, 4rem); text-align: center;
}
.dns-quote blockquote { margin: 0; }
.dns-quote p {
  font-family: var(--dns-display); font-style: normal; font-weight: 500; white-space: nowrap;
  font-size: clamp(0.95rem, 1.9vw, 1.6rem); line-height: 1.2; color: var(--dns-white);
}
.dns-quote cite { display: block; margin-top: 1.75rem; font-style: normal; font-family: var(--dns-body);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: #9a9a9a; }

/* ---------- CTA ---------- */
.dns-cta { background: var(--dns-ink); color: var(--dns-white); }
.dns-cta__inner { max-width: var(--dns-max); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.dns-cta h2 { font-size: clamp(1.05rem, 1.9vw, 1.5rem); max-width: none; white-space: nowrap; color: var(--dns-white); }

/* ---------- Footer ---------- */
.dns-footer { background: var(--dns-ink); color: var(--dns-white); }
.dns-footer__inner { max-width: var(--dns-max); margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.dns-footer__brand p { color: #b4b4b4; margin: 0.9rem 0 0; max-width: none; white-space: nowrap; }
.dns-footer__nav { display: flex; flex-direction: column; gap: 0.6rem; }
.dns-footer__nav a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: #e6e6e6; }
.dns-footer__nav a:hover { color: var(--dns-paper); }
.dns-footer__base { border-top: 1px solid #2c2c2c; }
.dns-footer__base { max-width: var(--dns-max); margin: 0 auto; padding: 1.5rem clamp(1.25rem, 5vw, 4rem);
  display: flex; justify-content: space-between; gap: 1rem; font-size: 0.78rem; color: #8a8a8a; flex-wrap: wrap; }

/* ---------- Generic page ---------- */
.dns-page__head { padding: clamp(3rem, 7vw, 5.5rem) 0 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .dns-room-black__inner { grid-template-columns: 1fr; }
  .dns-room-black__art { max-width: 360px; }
}
@media (max-width: 680px) {
  .dns-grid { grid-template-columns: 1fr; }
  .dns-hero__inner { max-width: 100%; }
  .dns-splash { width: min(40vw, 200px); top: 6%; right: 2%; }
}

/* ============================================================
   Inner pages (Art, galleries, About, Contact)
   ============================================================ */
.dns-inner { background: var(--dns-ink); color: var(--dns-white); min-height: 64vh; }
.dns-inner__head { max-width: var(--dns-max); margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem); }
.dns-inner__head h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin-top: 0.6rem; }
.dns-inner__head p { color: #cfcfcf; margin: 0.8rem 0 0; }

/* Gallery, masonry columns, sharp corners */
.dns-gallery { max-width: var(--dns-max); margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem);
  columns: 3; column-gap: 1.25rem; }
.dns-gallery figure { margin: 0 0 1.25rem; break-inside: avoid; }
.dns-gallery img { width: 100%; display: block; border-radius: 0; }
.dns-gallery figcaption { font-size: 0.76rem; letter-spacing: 0.04em; color: #9a9a9a; margin-top: 0.5rem; }
@media (max-width: 980px) { .dns-gallery { columns: 2; } }
@media (max-width: 600px) { .dns-gallery { columns: 1; } }
.dns-gallery[hidden] { display: none; }

/* Section landing tiles (the folders) */
.dns-sections { max-width: var(--dns-max); margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.dns-sections[hidden] { display: none; }
.dns-section { display: block; text-align: left; padding: 0; cursor: pointer; overflow: hidden;
  background: #141414; color: var(--dns-white); border: 1px solid rgba(255,255,255,0.12);
  transition: border-color .25s ease, transform .25s ease; }
.dns-section:hover { border-color: var(--dns-blue); transform: translateY(-3px); }
.dns-cursor-on .dns-section { cursor: none; }
.dns-section__img { display: block; width: 100%; aspect-ratio: 4 / 3;
  background-size: contain; background-repeat: no-repeat;
  background-position: center; background-color: #1c1c1c;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.dns-section:hover .dns-section__img { transform: scale(1.04); }
.dns-section__meta { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 1.1rem 1.15rem; }
.dns-section__name { font-family: var(--dns-head); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }
.dns-section__count { font-family: var(--dns-body); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #9a9a9a; }

/* In-section header: back link, title, folder chips */
.dns-section-head { max-width: var(--dns-max); margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(1rem, 3vw, 1.8rem); }
.dns-section-head[hidden] { display: none; }
.dns-back { font-family: var(--dns-body); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: none; border: none; color: #cfcfcf; cursor: pointer; padding: 0 0 0.4rem; }
.dns-back:hover { color: var(--dns-blue); }
.dns-cursor-on .dns-back { cursor: none; }
.dns-section-title { font-family: var(--dns-head); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin: 0.2rem 0 0.9rem; }
.dns-folderchips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dns-folderchips[hidden] { display: none; }
.dns-folderchip { font-family: var(--dns-body); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.5rem 1rem; background: transparent; color: #cfcfcf; border: 1px solid rgba(255,255,255,0.22);
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.dns-folderchip:hover { border-color: var(--dns-blue); color: var(--dns-white); }
.dns-folderchip.is-active { background: var(--dns-blue); color: var(--dns-white); border-color: var(--dns-blue); }
.dns-cursor-on .dns-folderchip { cursor: none; }

/* Home page: the roaming "forever" canvas section */
.dns-home-canvas { background: var(--dns-ink); padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.dns-home-canvas__head { max-width: var(--dns-max); margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(0.9rem, 2.5vw, 1.5rem); }
.dns-home-canvas__hint { font-family: var(--dns-body); font-size: 0.78rem; letter-spacing: 0.04em;
  color: #9a9a9a; margin: 0.4rem 0 0; }
/* Hidden by default so desktop never flashes the raw grid before the canvas builds.
   JS shows the canvas on desktop, or adds .dns-home-grid for the touch tap grid. */
.dns-home-gallery { display: none; }
.dns-home-gallery.dns-home-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.8rem;
  max-width: var(--dns-max); margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(2.5rem, 6vw, 4rem); }
.dns-home-gallery figure { position: relative; overflow: hidden; margin: 0; }
/* No forced square. Each piece keeps its own shape, so a tall art reads tall
   rather than sitting letterboxed inside a square box. */
.dns-home-gallery img { width: 100%; height: auto; display: block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.dns-home-gallery figure:hover img { transform: scale(1.05); }
@media (min-width: 560px) { .dns-home-gallery.dns-home-grid { grid-template-columns: repeat(3, 1fr); } }

/* Art hub */
.dns-arthub { max-width: var(--dns-max); margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem); }
.dns-arthub .dns-tile { color: var(--dns-white); }
.dns-arthub .dns-tile__frame { background: #1c1c1c; }

/* About */
.dns-about { max-width: var(--dns-max); margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.dns-about__photo { aspect-ratio: 4 / 5; background: #1c1c1c; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.dns-about__photo span { color: #4a4a4a; font-family: var(--dns-display); }
.dns-about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dns-about__photo--cut { background: transparent; }
.dns-about__photo--cut img { object-fit: contain; object-position: center bottom; }
.dns-about__quote { margin: 0.85rem 0 0; font-family: var(--dns-display);
  font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: #cbc6bc; max-width: 34ch; }
.dns-about dl { margin: 0; }
.dns-about dt { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74rem; color: #9a9a9a; margin-top: 1.9rem; }
.dns-about dd { margin: 0.4rem 0 0; font-family: var(--dns-display); font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
@media (max-width: 760px) { .dns-about { grid-template-columns: 1fr; } }

/* Contact */
.dns-contact { max-width: var(--dns-max); margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1.25rem, 5vw, 4rem) clamp(5rem, 12vw, 9rem); }
.dns-email { font-family: var(--dns-display); font-size: clamp(1.5rem, 4vw, 2.8rem);
  color: var(--dns-white); text-decoration: none; border-bottom: 3px solid var(--dns-blue); }
.dns-email:hover { color: var(--dns-blue); }
.dns-contact p { color: #cfcfcf; margin-top: 1.5rem; }

/* Contact Form 7, dark */
.dns-contact .wpcf7 { max-width: 600px; }
.dns-contact .wpcf7-form p { margin: 0 0 1.2rem; color: #cfcfcf; }
.dns-contact .wpcf7-form-control-wrap { display: block; width: 100%; }
.dns-contact label { display: block; font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: #9a9a9a; margin-bottom: 0.5rem; }
.dns-contact input[type=text],
.dns-contact input[type=email],
.dns-contact input[type=tel],
.dns-contact textarea {
  width: 100%; background: #1c1c1c; border: 1px solid rgba(255,255,255,0.2);
  color: var(--dns-white); padding: 0.9rem 1rem; font-family: var(--dns-body);
  font-size: 1rem; border-radius: 0; -webkit-appearance: none; }
.dns-contact textarea { min-height: 160px; resize: vertical; }
.dns-contact input:focus, .dns-contact textarea:focus { outline: none; border-color: var(--dns-blue); }
.dns-contact .wpcf7-submit {
  background: var(--dns-white); color: var(--dns-ink); border: 2px solid var(--dns-white);
  padding: 1rem 1.9rem; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.14em;
  text-transform: uppercase; cursor: pointer; border-radius: 0; transition: background .2s, color .2s, border-color .2s; }
.dns-contact .wpcf7-submit:hover { background: var(--dns-blue); color: var(--dns-white); border-color: var(--dns-blue); }
.dns-contact .wpcf7-response-output { border-color: rgba(255,255,255,0.3) !important; color: #cfcfcf; margin: 1rem 0 0; }
.dns-contact .wpcf7-not-valid-tip { color: #ff8a8a; }
.dns-contact__direct { margin-top: 2.75rem; color: #cfcfcf; line-height: 1.9; font-size: 0.95rem; }
.dns-contact__direct a { color: var(--dns-white); text-decoration: none; border-bottom: 2px solid var(--dns-blue); }
.dns-contact__direct a:hover { color: var(--dns-blue); }
.dns-contact__direct span { color: #9a9a9a; }

/* ============================================================
   Gallery interaction: reveal, hover edge, lightbox
   ============================================================ */
.dns-gallery figure { position: relative; overflow: hidden; }
/* gallery images simply appear (no reveal wipe) */
.dns-gallery img { transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.dns-gallery figure:hover img { transform: scale(1.05); }
/* sharp blue corner brackets on hover */
.dns-gallery figure::before,
.dns-gallery figure::after {
  content: ""; position: absolute; width: 26px; height: 26px; z-index: 2;
  opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none;
}
.dns-gallery figure::before { top: 14px; left: 14px; border-top: 3px solid var(--dns-blue); border-left: 3px solid var(--dns-blue); transform: translate(6px,6px); }
.dns-gallery figure::after { bottom: 14px; right: 14px; border-bottom: 3px solid var(--dns-blue); border-right: 3px solid var(--dns-blue); transform: translate(-6px,-6px); }
.dns-gallery figure:hover::before,
.dns-gallery figure:hover::after { opacity: 1; transform: translate(0,0); }

/* Lightbox */
.dns-lb { position: fixed; inset: 0; z-index: 200; background: rgba(8,8,8,0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.dns-lb.is-open { opacity: 1; pointer-events: auto; }
.dns-lb__stage { position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem; max-width: 92vw; max-height: 92vh; }
.dns-lb__figure { margin: 0; display: flex; min-height: 0; }
/* The art is viewed here, so give it the window. Only max-width and max-height
   are set, with no fixed dimensions, which keeps every piece at its true shape. */
.dns-lb__img { display: block; max-width: 92vw; max-height: 88vh; object-fit: contain;
  border: 1px solid rgba(255,255,255,0.12);
  transform: scale(.96); transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; }
.dns-lb.is-open .dns-lb__img { transform: scale(1); }
.dns-lb__close { position: absolute; top: 18px; right: 26px; background: none; border: none;
  color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; }
.dns-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: #fff; font-size: 3.2rem; line-height: 1; cursor: pointer; padding: 0 1.2rem; opacity: 0.8; }
.dns-lb__prev { left: 0.5rem; } .dns-lb__next { right: 0.5rem; }
.dns-lb__close:hover, .dns-lb__nav:hover { color: var(--dns-blue); opacity: 1; }
/* Arrows only matter when a piece has more than one view */
.dns-lb:not(.dns-lb--multi) .dns-lb__nav { display: none; }
.dns-lb__count { color: var(--dns-white); font-family: var(--dns-body); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap;
  padding: 0.35rem 0.85rem; background: var(--dns-blue); border-radius: 999px; }
.dns-lb__count:empty { display: none; }
/* The meaning of the art, shown when Dominique has written one */
.dns-lb__about { max-width: 62ch; text-align: center; padding: 0 1rem; }
.dns-lb__about[hidden] { display: none; }
.dns-lb__title { font-family: var(--dns-head); font-weight: 700; color: var(--dns-white);
  font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.5rem; }
.dns-lb__title:empty { display: none; }
.dns-lb__desc { font-family: var(--dns-body); color: #cbc6bc; font-size: 0.92rem;
  line-height: 1.6; margin: 0; white-space: pre-line; }
.dns-lb__desc:empty { display: none; }
/* Leave the image room to breathe when there are words under it */
/* Pieces carrying a statement still need room for the text underneath, so the
   image gives some height back. The statement scrolls rather than pushing the
   art down further. */
.dns-lb--about .dns-lb__img { max-height: 70vh; }
.dns-lb--about .dns-lb__about { max-height: 16vh; overflow-y: auto; }
/* Thumbnail strip: the different views of the piece, click to jump */
.dns-lb__thumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 88vw; }
.dns-lb__thumbs:empty { display: none; }
.dns-lb__thumb { width: 62px; height: 62px; padding: 0; border: 2px solid transparent; background: #1c1c1c;
  cursor: pointer; overflow: hidden; opacity: 0.55; transition: opacity .2s ease, border-color .2s ease; }
/* contain, not cover: a tall art was being trimmed top and bottom in the strip. */
.dns-lb__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dns-lb__thumb:hover { opacity: 1; }
.dns-lb__thumb.is-active { opacity: 1; border-color: var(--dns-blue); }
.dns-cursor-on .dns-lb__thumb { cursor: none; }
/* "See the whole category" jump from an open piece to its section under Art */
.dns-lb__cat { display: inline-block; margin-top: 0.2rem; font-family: var(--dns-body); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--dns-white); text-decoration: none;
  border: 1px solid rgba(255,255,255,0.4); padding: 0.55rem 1.15rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.dns-lb__cat:hover { background: var(--dns-blue); border-color: var(--dns-blue); color: #fff; }
.dns-cursor-on .dns-lb__cat { cursor: none; }

/* Category filter chips */
.dns-filters { max-width: var(--dns-max); margin: 0 auto;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 0.6rem; }
.dns-filter { font-family: var(--dns-body); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 0.6rem 1.1rem; background: transparent; color: #cfcfcf;
  border: 1px solid rgba(255,255,255,0.25); cursor: pointer; border-radius: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.dns-filter:hover { border-color: var(--dns-blue); color: var(--dns-white); }
.dns-filter.is-active { background: var(--dns-blue); color: var(--dns-white); border-color: var(--dns-blue); }
.dns-cursor-on .dns-filter { cursor: none; }

/* Folder (sub-category) row, revealed when its section is selected */
.dns-subfilters { max-width: var(--dns-max); margin: -0.5rem auto 0;
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(1.25rem, 3vw, 2rem);
  display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dns-subfilters[hidden] { display: none; }
.dns-subfilter { font-family: var(--dns-body); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.45rem 0.9rem; background: transparent; color: #b6b6b6;
  border: 1px solid rgba(255,255,255,0.16); cursor: pointer; border-radius: 0;
  transition: background .2s ease, color .2s ease, border-color .2s ease; }
.dns-subfilter:hover { border-color: var(--dns-blue); color: var(--dns-white); }
.dns-subfilter.is-active { background: var(--dns-blue); color: var(--dns-white); border-color: var(--dns-blue); }
.dns-cursor-on .dns-subfilter { cursor: none; }

/* Badge on artworks that hold several views. The offset shadow reads as a stack
   of photos, and the small square marks it as images, so it is obvious at a glance. */
.dns-more-badge { position: absolute; top: 12px; right: 12px; z-index: 3;
  min-width: 1.9rem; height: 1.9rem; padding: 0 0.5rem; display: inline-flex;
  align-items: center; justify-content: center; gap: 0.25rem; font-family: var(--dns-body);
  font-size: 0.82rem; font-weight: 700; color: var(--dns-white);
  background: var(--dns-blue); border-radius: 6px; pointer-events: none;
  box-shadow: 4px 4px 0 0 rgba(84,54,255,0.45); }
.dns-more-badge::before { content: ""; width: 0.7rem; height: 0.7rem; flex: 0 0 auto;
  border: 2px solid currentColor; border-radius: 2px; opacity: 0.95; }

/* Infinite draggable canvas gallery */
.dns-canvas { position: relative; width: 100%; height: clamp(560px, 82vh, 1040px);
  overflow: hidden; background: var(--dns-ink); cursor: grab; touch-action: none; user-select: none; }
.dns-canvas.is-grabbing { cursor: grabbing; }
.dns-canvas__world { position: absolute; inset: 0; }
.dns-canvas__item { position: absolute; top: 0; left: 0; padding: 0; border: none;
  background: #1c1c1c; overflow: hidden; will-change: transform; }
.dns-canvas__item img { width: 100%; height: 100%; object-fit: contain; display: block;
  pointer-events: none; transition: transform .5s ease; }
.dns-canvas__item:hover img { transform: scale(1.05); }

/* Inner-page header motif (one blue mark per page)
   The motif is absolutely positioned, so it adds nothing to the header's height and the
   header has to reserve the room itself. On 2026-08-28 the Art page header was empty, the
   header collapsed, and the chevron sat on top of the first row of tiles. min-height keeps
   that from happening again whatever the page content is, or is not. The mark is hidden
   below 600px, so the reservation is dropped there rather than opening a gap on a phone. */
.dns-inner__head { position: relative; min-height: calc(clamp(3.5rem, 8vw, 6rem) + 84px + 1.25rem); }
.dns-head-mark { position: absolute; top: clamp(3.5rem, 8vw, 6rem); right: clamp(1.25rem, 5vw, 4rem); width: 84px; opacity: 0.7; pointer-events: none; }
.dns-head-mark svg { width: 100%; height: auto; display: block; }
@media (max-width: 600px) { .dns-head-mark { display: none; } .dns-inner__head { min-height: 0; } }

/* Art section head with motif beside Marbling */
.dns-art-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dns-marb-mark { width: 72px; opacity: 0.7; flex: none; }
.dns-marb-mark svg { width: 100%; height: auto; display: block; }

/* Extend the frame-bracket hover + reveal to the art tiles */
.dns-tile__frame::before, .dns-tile__frame::after {
  content: ""; position: absolute; width: 24px; height: 24px; z-index: 2;
  opacity: 0; transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
.dns-tile__frame::before { top: 12px; left: 12px; border-top: 3px solid var(--dns-blue); border-left: 3px solid var(--dns-blue); transform: translate(6px,6px); }
.dns-tile__frame::after { bottom: 12px; right: 12px; border-bottom: 3px solid var(--dns-blue); border-right: 3px solid var(--dns-blue); transform: translate(-6px,-6px); }
.dns-tile:hover .dns-tile__frame::before, .dns-tile:hover .dns-tile__frame::after { opacity: 1; transform: translate(0,0); }
/* art tiles simply appear (no reveal wipe) */

/* Page marks: one per page */
.dns-page-mark { width: 92px; margin: 0 auto; padding-bottom: clamp(3rem, 7vw, 5.5rem); opacity: 0.7; }
.dns-page-mark svg { width: 100%; height: auto; display: block; }
.dns-inner__head--about { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.25rem); }
.dns-about-mark { width: 78px; flex: none; opacity: 0.7; }
.dns-about-mark svg { width: 100%; height: auto; display: block; }
.dns-contact-mark { width: 84px; margin-top: 2.75rem; opacity: 0.7; }
.dns-contact-mark svg { width: 100%; height: auto; display: block; }

/* ============================================================
   Fancy animations: hero stagger, motif line-draw
   ============================================================ */
@keyframes dns-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.dns-js .dns-hero__inner > * { opacity: 0; animation: dns-rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.dns-js .dns-hero__inner > *:nth-child(1) { animation-delay: .15s; }
.dns-js .dns-hero__inner > *:nth-child(2) { animation-delay: .28s; }
.dns-js .dns-hero__inner > *:nth-child(3) { animation-delay: .41s; }
.dns-js .dns-hero__inner > *:nth-child(4) { animation-delay: .54s; }

/* Motifs draw themselves in: lively, sequential, replay on hover (joy in motion) */
.dns-head-mark, .dns-feat-mark, .dns-page-mark, .dns-about-mark, .dns-contact-mark { pointer-events: auto; }
.dns-js .dns-mark-draw :is(polyline, line, rect) {
  stroke-dasharray: 460; stroke-dashoffset: 460;
  transition: stroke-dashoffset .7s cubic-bezier(.2,.85,.25,1); }
.dns-mark-draw.is-in :is(polyline, line, rect) { stroke-dashoffset: 0; }
.dns-mark-draw.is-in :is(polyline, line, rect):nth-child(2) { transition-delay: .1s; }
.dns-mark-draw.is-in :is(polyline, line, rect):nth-child(3) { transition-delay: .2s; }
.dns-mark-draw.is-in :is(polyline, line, rect):nth-child(4) { transition-delay: .3s; }
.dns-mark-draw.is-in :is(polyline, line, rect):nth-child(5) { transition-delay: .4s; }
/* dots pop in with a little bounce */
.dns-js .dns-mark-draw circle { opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center;
  transition: opacity .4s ease, transform .45s cubic-bezier(.3,1.5,.5,1); }
.dns-mark-draw.is-in circle { opacity: 1; transform: scale(1); }
.dns-mark-draw.is-in circle:nth-child(3n) { transition-delay: .18s; }
.dns-mark-draw.is-in circle:nth-child(3n+1) { transition-delay: .06s; }
.dns-mark-draw.is-in circle:nth-child(3n+2) { transition-delay: .28s; }

/* ---- Unique hover animation per icon ---- */
@keyframes dns-draw { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }
/* Chevron: an arrow that builds up from the bottom */
.dns-m-chevron:hover polyline { animation: dns-draw .55s cubic-bezier(.2,.85,.25,1) both; }
.dns-m-chevron:hover polyline:nth-child(4) { animation-delay: 0s; }
.dns-m-chevron:hover polyline:nth-child(3) { animation-delay: .1s; }
.dns-m-chevron:hover polyline:nth-child(2) { animation-delay: .2s; }
.dns-m-chevron:hover polyline:nth-child(1) { animation-delay: .3s; }
/* Zigzag: wings flapping like a bird */
@keyframes dns-flap { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }
.dns-m-zigzag polyline { transform-box: fill-box; transform-origin: center; }
.dns-m-zigzag:hover polyline { animation: dns-flap .5s ease-in-out 3; }
.dns-m-zigzag:hover polyline:nth-child(2) { animation-delay: .08s; }
.dns-m-zigzag:hover polyline:nth-child(3) { animation-delay: .16s; }
/* Concentric squares: a snake tracing inward (square, not a circle) */
.dns-m-conc:hover rect { animation: dns-draw .6s cubic-bezier(.4,0,.2,1) both; }
.dns-m-conc:hover rect:nth-child(2) { animation-delay: .22s; }
.dns-m-conc:hover rect:nth-child(3) { animation-delay: .44s; }
/* Dots: ripple pop */
@keyframes dns-pop { 0% { transform: scale(1); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }
.dns-m-dots:hover circle { animation: dns-pop .5s ease both; transform-box: fill-box; transform-origin: center; }
.dns-m-dots:hover circle:nth-child(3n) { animation-delay: .12s; }
.dns-m-dots:hover circle:nth-child(3n+1) { animation-delay: .04s; }
.dns-m-dots:hover circle:nth-child(3n+2) { animation-delay: .2s; }
/* Lines: equalizer rise */
@keyframes dns-eq { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.45); } }
.dns-m-lines line { transform-box: fill-box; transform-origin: bottom; }
.dns-m-lines:hover line { animation: dns-eq .55s ease-in-out 2; }
.dns-m-lines:hover line:nth-child(2) { animation-delay: .08s; }
.dns-m-lines:hover line:nth-child(3) { animation-delay: .16s; }
.dns-m-lines:hover line:nth-child(4) { animation-delay: .24s; }
.dns-m-lines:hover line:nth-child(5) { animation-delay: .32s; }

/* ============================================================
   Page-transition curtain + custom cursor
   ============================================================ */
.dns-curtain { position: fixed; inset: 0; z-index: 400; pointer-events: none; display: flex; }
.dns-slat { flex: 1 1 0; height: 100%; background: var(--dns-ink); border-right: 1px solid rgba(84,54,255,0.45);
  transition: transform .6s cubic-bezier(.76,0,.24,1); }
.dns-slat:last-child { border-right: none; }
/* default (no JS): hidden off-screen, alternating directions */
.dns-slat:nth-child(odd) { transform: translateY(-101%); }
.dns-slat:nth-child(even) { transform: translateY(101%); }
/* JS present: cover at first paint */
.dns-js .dns-curtain .dns-slat { transform: translateY(0); }
/* revealed: slats retract the way they came (interlocking) */
.dns-js .dns-curtain.is-open .dns-slat:nth-child(odd) { transform: translateY(-101%); }
.dns-js .dns-curtain.is-open .dns-slat:nth-child(even) { transform: translateY(101%); }
.dns-slat:nth-child(1) { transition-delay: 0s; }
.dns-slat:nth-child(2) { transition-delay: .05s; }
.dns-slat:nth-child(3) { transition-delay: .1s; }
.dns-slat:nth-child(4) { transition-delay: .15s; }
.dns-slat:nth-child(5) { transition-delay: .2s; }
.dns-slat:nth-child(6) { transition-delay: .25s; }
.dns-slat:nth-child(7) { transition-delay: .3s; }

.dns-cursor { position: fixed; top: 0; left: 0; width: 14px; height: 14px;
  border: 2px solid var(--dns-blue); border-radius: 50%; pointer-events: none; z-index: 350;
  display: flex; align-items: center; justify-content: center;
  transition: width .28s ease, height .28s ease, background-color .28s ease; will-change: transform; }
.dns-cursor.is-view { width: 84px; height: 84px; background-color: rgba(84,54,255,0.16); }
.dns-cursor__label { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .2s ease; }
.dns-cursor.is-view .dns-cursor__label { opacity: 1; }
.dns-cursor-on, .dns-cursor-on a, .dns-cursor-on button { cursor: none; }
.dns-cursor-on input, .dns-cursor-on textarea, .dns-cursor-on select { cursor: auto; }
.dns-cursor-on .dns-gallery img, .dns-cursor-on .dns-tile, .dns-cursor-on .dns-lb__img,
.dns-cursor-on .dns-canvas, .dns-cursor-on .dns-canvas__item { cursor: none; }
@media (pointer: coarse) { .dns-cursor { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .dns-curtain { display: none; }
  .dns-js .dns-hero__inner > *,
  .dns-js .dns-gallery figure,
  .dns-js .dns-tile .dns-tile__frame,
  .dns-js .dns-tile .dns-tile__meta { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none !important; }
  .dns-js .dns-mark-draw :is(polyline, line, rect) { stroke-dashoffset: 0 !important; }
  .dns-js .dns-mark-draw circle { opacity: 1 !important; }
}

/* About photo: larger, aligned to top */
.dns-about__photo--cut { background: transparent; aspect-ratio: auto; display: block; }
.dns-about__photo--cut { align-self: start; }
.dns-about__photo--cut img { object-fit: contain; object-position: top; width: auto; height: clamp(620px, 100vh, 1200px); }
.dns-about dt:first-child { margin-top: 0; }
@media (max-width: 760px) { .dns-about__photo--cut img { height: auto; width: min(80vw, 360px); } }

/* About photo, framed variant. Used when the portrait is a normal rectangular
   photo rather than a background-removed cut-out. Keeps the 4/5 frame from the
   base rule and just gives the auto grid column a predictable width. */
.dns-about__photo--framed { align-self: start; width: clamp(260px, 30vw, 420px); }
@media (max-width: 760px) { .dns-about__photo--framed { width: min(80vw, 360px); } }

/* ============================================================
   Mobile menu + responsive polish
   ============================================================ */
.dns-burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; cursor: pointer; }
.dns-burger span { display: block; width: 26px; height: 2px; background: var(--dns-white); transition: transform .3s ease, opacity .3s ease; }
.dns-nav-open .dns-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dns-nav-open .dns-burger span:nth-child(2) { opacity: 0; }
.dns-nav-open .dns-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.dns-cursor-on .dns-burger { cursor: none; }

@media (max-width: 760px) {
  .dns-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .dns-header__inner { position: relative; z-index: 60; }
  .dns-burger { display: flex !important; }
  .dns-header .dns-nav { position: fixed !important; inset: 0; background: var(--dns-ink); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2.2rem;
    transform: translateY(-100%); transition: transform .45s cubic-bezier(.76,0,.24,1); z-index: 55; }
  .dns-header .dns-nav a { font-size: 1.5rem; border-bottom: none; }
  .dns-nav-open .dns-header .dns-nav { transform: translateY(0); }

  /* single-line text wraps so nothing runs off the edge */
  .dns-hero h1, .dns-hero__sub, .dns-quote p, .dns-cta h2, .dns-footer__brand p, .dns-tile__name, .dns-statement p { white-space: normal; }
  .dns-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .dns-hero__sub { font-size: 1rem; }
  .dns-quote p { font-size: clamp(1.15rem, 6vw, 1.6rem); }
  .dns-cta h2 { font-size: clamp(1.15rem, 6vw, 1.5rem); }

  /* hero buttons stack full-width */
  .dns-hero__inner p:last-of-type { display: flex; flex-direction: column; align-items: stretch; gap: .7rem; }
  .dns-hero .dns-btn { display: block; width: 100%; text-align: center; }

  /* CTA stacks */
  .dns-cta__inner { flex-direction: column; align-items: flex-start; gap: 1.4rem; }

  /* contact form fits the viewport */
  .dns-contact, .dns-contact .wpcf7, .dns-contact .wpcf7-form, .dns-contact .wpcf7 p,
  .dns-contact .wpcf7-form-control-wrap { max-width: 100% !important; }
  .dns-contact input, .dns-contact textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  .dns-inner { overflow-x: hidden; }
}

/* Mobile: section tiles and folder chips stack and stay easy to tap */
@media (max-width: 700px) {
  .dns-sections { grid-template-columns: 1fr; }
  .dns-section__img { aspect-ratio: 16 / 10; }
}

/* Special Exhibitions */
.dns-exhib-head { max-width: var(--dns-max); margin: 2.75rem auto 0.5rem; }
.dns-exhib-head .dns-kicker { display:block; }
.dns-sections--exhib { margin-top: 0.25rem; }
.dns-section-statement { max-width: 62ch; margin: 0.4rem 0 1.4rem; font-size: 0.98rem; line-height: 1.65; opacity: 0.85; }