.art-hero {
position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: clamp(5.5rem, 10vw, 8.5rem) 0 clamp(4.5rem, 8vw, 7rem);
      color: var(--ink);
      background:
        radial-gradient(
          circle at 84% 25%,
          var(--sun) 0 7%,
          transparent 7.2%
        ),
        linear-gradient(
          108deg,
          #f8f3df 0 67%,
          rgba(154, 183, 91, .24) 67% 83%,
          rgba(116, 173, 179, .22) 83% 100%
        );
      border-bottom: 3px solid var(--ink);
}

.art-hero::before,
    .art-hero::after {
content: none;
}

.art-hero-inner {
width: min(100%, var(--page-max));
}

.art-title {
max-width: 850px;
      margin-bottom: 1.35rem;
      color: var(--forest);
}

.art-title em {
position: relative;
      color: var(--clay);
      font-style: normal;
      white-space: nowrap;
}

.art-title em::after {
content: "";
      position: absolute;
      left: 2%;
      right: -2%;
      bottom: .01em;
      z-index: -1;
      height: .24em;
      background: var(--sun-soft);
      clip-path: polygon(0 28%, 100% 0, 97% 78%, 3% 100%);
      transform: rotate(-1.5deg);
}

.art-intro {
max-width: 730px;
      margin-bottom: 2rem;
      color: var(--ink-soft);
      font-size: clamp(1.05rem, 1.7vw, 1.24rem);
      line-height: 1.75;
}

.hero-actions {
display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .85rem;
}

.hero-actions .btn.secondary::after {
content: "→";
}

.gallery-shell {
position: relative;
      padding: clamp(5rem, 9vw, 8rem) 0 clamp(6rem, 10vw, 9rem);
      background: var(--paper);
}

.section-heading {
display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 2rem;
      margin-bottom: clamp(2.4rem, 5vw, 4rem);
}

.section-heading h2 {
max-width: 650px;
      margin-bottom: 0;
      color: var(--forest);
}

.section-heading > p {
max-width: 420px;
      margin: 0;
      color: var(--ink-soft);
}

.issue-art-exhibition {
margin-bottom: clamp(6rem, 10vw, 9rem);
}

.art-grid {
display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(1.7rem, 3vw, 2.7rem);
}

.art-tile {
position: relative;
      min-width: 0;
      overflow: hidden;
      cursor: zoom-in;
      background: var(--paper-soft);
      border: 2px solid var(--ink);
      box-shadow: 8px 8px 0 var(--clay);
      transition: transform .28s ease, box-shadow .28s ease;
}

.art-tile:nth-child(2n) {
box-shadow: 8px 8px 0 var(--sky);
}

.art-tile:nth-child(3n) {
box-shadow: 8px 8px 0 var(--sun);
}

.art-image {
position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      background: var(--paper-deep);
      border-bottom: 2px solid var(--ink);
}

.art-image::after {
content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(23, 56, 45, .12),
        transparent 48%
      );
      pointer-events: none;
}

.art-image img {
width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(.88) sepia(.06) contrast(.96);
      transition:
        transform .55s cubic-bezier(.2, .7, .25, 1),
        filter .35s ease;
}

.art-number {
position: absolute;
      top: .9rem;
      left: .9rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 46px;
      min-height: 34px;
      padding: .35rem .55rem;
      color: var(--paper-soft);
      background: var(--forest);
      border: 2px solid var(--paper-soft);
      box-shadow: 3px 3px 0 var(--sun);
      font-family: 'Space Mono', monospace;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .07em;
      transform: rotate(-2deg);
}

.art-caption {
padding: 1.3rem 1.4rem 1.5rem;
}

.art-label {
margin: 0 0 .65rem;
      color: var(--leaf);
      font-family: 'Space Mono', monospace;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .11em;
      text-transform: uppercase;
}

.art-caption h3 {
margin-bottom: .4rem;
      color: var(--forest);
      font-size: clamp(1.4rem, 2vw, 1.9rem);
}

.art-artist {
margin: 0;
      color: var(--ink-soft);
      font-size: .92rem;
}

.art-artist strong {
color: var(--ink);
}

.art-tile:hover,
    .art-tile:focus-visible {
transform: translate(-3px, -5px) rotate(-.3deg);
      box-shadow: 12px 13px 0 var(--sun);
}

.art-tile:hover .art-image img,
    .art-tile:focus-visible .art-image img {
transform: scale(1.055);
      filter: saturate(1) sepia(0) contrast(1);
}

.is-hidden {
display: none !important;
}

.load-more {
display: flex;
      justify-content: center;
      margin-top: clamp(2.8rem, 6vw, 4.8rem);
}

.load-more .btn::after {
content: "+";
      font-size: 1.15rem;
      line-height: 1;
}

.collection-note {
width: 100%;
      max-width: none;
      margin: 0;
      padding: clamp(1.8rem, 4vw, 2.6rem);
      background: var(--paper-soft);
      border: 2px solid var(--ink);
      box-shadow:
        8px 8px 0 var(--sun-soft),
        11px 11px 0 var(--ink);
      text-align: left;
}

.collection-note h2 {
margin-bottom: .8rem;
      color: var(--forest);
      font-size: clamp(2rem, 3.5vw, 3rem);
}

.collection-note p {
max-width: 760px;
      margin-bottom: 0;
      color: var(--ink-soft);
}

.collection-note a {
font-weight: 700;
}

.collection-note .btn.secondary::after {
content: "→";
}

body.modal-open {
overflow: hidden;
}

.modal {
position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      padding: clamp(1rem, 4vw, 3rem);
      opacity: 0;
      visibility: hidden;
      background: rgba(20, 48, 39, .95);
      transition: opacity .25s ease, visibility .25s ease;
}

.modal.show {
opacity: 1;
      visibility: visible;
}

.modal-dialog {
position: relative;
      display: grid;
      width: min(1080px, 100%);
      max-height: calc(100vh - 2rem);
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
}

.modal-image-wrap {
display: grid;
      min-width: 0;
      max-width: 100%;
      place-items: center;
}

.modal-content {
width: auto;
      max-width: min(100%, 940px);
      max-height: min(72vh, 820px);
      object-fit: contain;
      padding: 8px;
      background: var(--paper-soft);
      border: 2px solid var(--paper-soft);
      box-shadow:
        9px 9px 0 var(--clay),
        12px 12px 0 var(--sun);
}

.modal-caption {
max-width: 760px;
      margin-top: 1.4rem;
      color: var(--paper-soft);
      text-align: center;
}

.modal-caption h3 {
margin: 0 0 .3rem;
      color: var(--paper-soft);
      font-size: clamp(1.45rem, 3vw, 2.2rem);
}

.modal-caption p {
margin: 0;
      color: rgba(255, 250, 240, .7);
}

.modal-close,
    .nav-arrow {
position: fixed;
      z-index: 10000;
      display: grid;
      place-items: center;
      color: var(--forest);
      background: var(--paper-soft);
      border: 2px solid var(--ink);
      box-shadow: 4px 4px 0 var(--clay);
      cursor: pointer;
      transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.modal-close:hover,
    .modal-close:focus-visible,
    .nav-arrow:hover,
    .nav-arrow:focus-visible {
color: var(--paper-soft);
      background: var(--clay);
      box-shadow: 2px 2px 0 var(--sun);
}

.modal-close {
top: clamp(1rem, 3vw, 2rem);
      right: clamp(1rem, 3vw, 2rem);
      width: 48px;
      height: 48px;
      font-size: 1.8rem;
      line-height: 1;
}

.nav-arrow {
top: 50%;
      width: 52px;
      height: 52px;
      font-size: 1.65rem;
      transform: translateY(-50%);
}

.nav-arrow:hover,
    .nav-arrow:focus-visible {
transform: translate(2px, calc(-50% + 2px));
}

.nav-arrow.left {
left: clamp(.75rem, 2.5vw, 2rem);
}

.nav-arrow.right {
right: clamp(.75rem, 2.5vw, 2rem);
}

@media (max-width: 960px) {
.section-heading {
align-items: start;
        flex-direction: column;
        gap: .8rem;
}

.art-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

}

@media (max-width: 720px) {
.art-hero {
padding-top: 4.5rem;
}

.art-title {
width: 100%;
        max-width: 100%;
        font-size: clamp(3rem, 15vw, 4.4rem);
        overflow-wrap: anywhere;
}

.art-title em {
white-space: normal;
}

.hero-actions {
align-items: stretch;
        flex-direction: column;
}

.hero-actions .btn {
width: 100%;
}

.art-grid {
grid-template-columns: 1fr;
}

.load-more .btn {
width: 100%;
}

.collection-note {
padding: 1.4rem;
}

.collection-note .btn {
width: 100%;
}

.modal {
padding: 4.5rem .85rem 5.5rem;
}

.modal-content {
max-height: 65vh;
        padding: 5px;
}

.modal-close {
width: 43px;
        height: 43px;
}

.nav-arrow {
top: auto;
        bottom: 1rem;
        width: 46px;
        height: 46px;
        transform: none;
}

.nav-arrow:hover,
      .nav-arrow:focus-visible {
transform: translate(2px, 2px);
}

.nav-arrow.left {
left: calc(50% - 58px);
}

.nav-arrow.right {
right: calc(50% - 58px);
}

}