.art-wall { --ink: #292c25; --body: #555b51; --muted: #656b60; --rust: #bd4226; --line: #d7d6ce; color-scheme: light; margin-top: 128px; padding: 28px 24px 24px; border-radius: 16px; background: #f1efe9; color: var(--ink); }
.art-wall-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 24px; }
.art-wall-heading .eyebrow { color: var(--muted); text-transform: uppercase; }
.art-wall h2 { margin-top: 10px; font-family: var(--serif); font-size: clamp(42px, 4.6vw, 60px); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.art-wall h2 em { display: block; color: var(--rust); font-weight: 400; }
.art-wall-note { text-align: right; }
.art-wall-intro { max-width: 440px; color: var(--rust); font-size: 26px; line-height: 1.4; }
.art-wall-instagram { color: var(--body); font-size: 11px; }
.art-wall-scroll { height: clamp(320px, 62svh, 680px); padding: 4px 8px 4px 4px; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #8d9286 #e7e5dc; scroll-padding-block: 4px; border-radius: 12px; }
.art-wall-scroll:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.art-wall-grid { column-count: 4; column-gap: 16px; }
.art-wall-piece { display: block; width: 100%; margin-bottom: 16px; break-inside: avoid; border-radius: 10px; }
.art-wall-piece figure { position: relative; margin: 0; }
.art-wall-frame { display: block; overflow: hidden; border-radius: 10px; }
.art-wall-frame img { width: 100%; height: auto; background: #ded7c9; color: var(--ink); }
.art-wall-piece figcaption { position: absolute; inset: auto 0 0; padding: 28px 12px 12px; border-radius: 0 0 10px 10px; background: linear-gradient(transparent, #111b12eb); color: #fff; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; opacity: 0; pointer-events: none; }
.art-wall-piece:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }
.art-wall-piece:focus-visible figcaption, .art-wall-piece:focus-within figcaption { opacity: 1; }
.art-wall-video video { display: block; width: 100%; height: auto; border-radius: 10px; background: #171a19; }
.art-wall-video figcaption { inset: 0 0 auto; padding: 12px 12px 28px; border-radius: 10px 10px 0 0; background: linear-gradient(#111b12eb, transparent); }
.art-wall-video .notice { font-size: 12px; line-height: 1.6; }
.about-page .image-dialog { --case-accent: #c8d3b9; }
.about-page .image-dialog-header h2 { font-size: 14px; }
.about-page .image-dialog-footer { font-size: 12px; }
.about-page .image-dialog-footer button, .about-page .image-dialog-footer a { min-width: 44px; font-size: 12px; }

@media (hover: hover) {
  .art-wall-piece:hover figcaption { opacity: 1; }
}
@media (max-width: 1000px) {
  .art-wall-grid { column-count: 3; }
}
@media (max-width: 600px) {
  .art-wall { margin-top: 88px; padding: 20px 12px 12px; border-radius: 12px; }
  .art-wall-heading { align-items: start; flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .art-wall-note { text-align: left; }
  .art-wall-intro { font-size: 23px; }
  .art-wall-scroll { height: clamp(260px, 56svh, 520px); padding-right: 4px; }
  .art-wall-grid { column-count: 2; column-gap: 10px; }
  .art-wall-piece { margin-bottom: 10px; }
}
@media print {
  .art-wall-scroll { height: auto; overflow: visible; }
  .art-wall-piece figcaption { position: static; padding: 8px 0; background: none; color: #222; opacity: 1; }
}