#gallery{width:min(1440px,calc(100vw - 8vw));margin-inline:50%;translate:-50% 0;padding-top:24px}
.gallery-hero{position:relative;isolation:isolate;padding-bottom:3.6rem}
.gallery-hero h1{position:relative;z-index:2;margin:0;max-width:10ch;color:var(--lime);font:800 clamp(2.4rem,8.2vw,8.3rem)/.98 Unbounded,system-ui,sans-serif;letter-spacing:-.075em}
.gallery-hero-art{width:69%;margin:-.65rem 0 0 auto;position:relative}
.gallery-hero-art img{display:block;width:100%;aspect-ratio:2/1;object-fit:cover;object-position:50% 43%}
.gallery-hero-note{position:absolute;bottom:4rem;left:0;width:25%;margin:0;color:var(--paper);font-size:clamp(.95rem,1.3vw,1.25rem)}
.gallery-board{background:var(--lime);color:#202123;padding:clamp(20px,4vw,52px);display:grid;grid-template-columns:1fr 2fr;gap:26px}
.gallery-board h2{font:740 clamp(1.35rem,2.6vw,2.4rem)/1.15 Unbounded,system-ui,sans-serif;margin:0}
.gallery-board ol{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.gallery-board button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;border:0;border-bottom:1px solid #20212370;padding:10px 0;background:none;color:inherit;font:inherit;cursor:pointer;min-height:44px}
.gallery-board button:hover,.gallery-board button:focus-visible{background:#202123;color:var(--lime)}
.gallery-board button span{font:700 .68rem Unbounded,system-ui,sans-serif;margin-inline:5px}
.gallery-tools{position:sticky;top:var(--gallery-top,82px);z-index:5;display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#202123;padding:9px;border-bottom:1px solid var(--line)}
.gallery-tools button,.gallery-viewer button{cursor:pointer;min-height:44px;padding:7px 13px;font:700 .87rem system-ui,sans-serif;background:transparent;color:var(--paper);border:1px solid var(--line)}
.gallery-tools button[aria-pressed=true],.gallery-tools button:hover,.gallery-viewer button:hover{background:var(--lime);color:#202123}
.gallery-tools button:last-child{margin-left:auto}
.gallery-chapter{scroll-margin-top:calc(var(--gallery-top,82px) + 115px);padding-top:clamp(32px,7vw,108px)}
.gallery-chapter h2{margin:0 0 clamp(16px,3vw,40px);border-top:1px dashed var(--lime);padding-top:14px;display:flex;align-items:baseline;gap:clamp(8px,3vw,42px);font:780 clamp(1.3rem,4vw,4.3rem)/1.1 Unbounded,system-ui,sans-serif;letter-spacing:-.05em}
.gallery-chapter h2 span{color:var(--lime);font-size:.45em}
.design-gallery-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;gap:clamp(14px,2.5vw,40px)}
#gallery figure{min-width:0;margin:0;grid-column:span 6}
#gallery figure:nth-child(6n+1){grid-column:span 8}
#gallery figure:nth-child(6n+2){grid-column:span 4;margin-top:clamp(0px,5vw,80px)}
#gallery figure:nth-child(6n+5){grid-column:span 4;margin-top:clamp(0px,4vw,64px)}
#gallery figure:nth-child(6n+6){grid-column:span 8}
#gallery figure a{display:block;position:relative;background:#202123;overflow:hidden}
#gallery figure a::after{content:"↗";position:absolute;right:10px;bottom:10px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--lime);color:#202123;font-weight:900}
#gallery figure a:hover::after,#gallery figure a:focus-visible::after{background:#dcbcff}
#gallery figure img,#gallery video{display:block;width:100%;height:clamp(160px,32vw,510px);object-fit:contain;background:#202123}
#gallery figure img.gallery-light-art{background:var(--paper)}
#gallery figure img{transition:scale .4s ease}
#gallery figure a:hover img{scale:1.025}
#gallery figcaption{padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.9rem}
#gallery.is-contact-sheet .design-gallery-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:14px}
#gallery.is-contact-sheet figure{grid-column:auto;margin-top:0}
#gallery.is-contact-sheet figure img,#gallery.is-contact-sheet video{height:140px}
.gallery-viewer{background:#202123;color:var(--paper);border:1px solid var(--line);max-width:none;width:min(96vw,1500px);max-height:96vh;padding:12px}
.gallery-viewer::backdrop{background:#141416ee}
.gallery-viewer img{display:block;width:100%;height:min(72vh,780px);object-fit:contain}
.gallery-viewer-controls{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.gallery-viewer p{margin:.5rem 0}
@media(max-width:640px){
.gallery-hero{padding-bottom:1.6rem}.gallery-hero-art{width:92%;margin:.35rem 0 0 auto}.gallery-hero-note{position:static;width:auto;margin-top:12px}
.gallery-board{grid-template-columns:1fr}.gallery-board ol{grid-template-columns:1fr 1fr}
.gallery-board button{font-size:.84rem}.gallery-tools button{padding-inline:7px;font-size:.76rem}
#gallery:not(.is-contact-sheet) figure{grid-column:1/-1;margin-top:0}
}
@media(prefers-reduced-motion:reduce){#gallery figure img{transition:none}#gallery figure a:hover img{scale:none}}
#gallery-board-title{scroll-margin-top:calc(var(--gallery-top,82px) + 16px)}
html:has(.gallery-viewer[open]){overflow:hidden}
.gallery-hero h1{letter-spacing:-.055em}
.gallery-hero-art .gallery-hero-inset{position:absolute;bottom:11%;left:-16%;width:31%;height:61%;object-position:bottom;object-fit:contain;transform:rotate(-8deg);filter:drop-shadow(0 10px 18px #0008)}
@media(max-width:640px){.gallery-hero-art .gallery-hero-inset{left:-8%;bottom:4%;width:33%}}
#gallery{scroll-margin-top:var(--gallery-top,82px)}
.gallery-tools{margin-bottom:clamp(18px,3vw,42px)}
.gallery-film{padding:clamp(18px,4vw,50px);background:#202123;border-top:1px solid var(--lime)}
.gallery-film h2{margin:0;font:750 clamp(1.15rem,2.5vw,2rem)/1.2 Unbounded,system-ui,sans-serif}
.gallery-film p{margin:.65rem 0 0}
#gallery .gallery-film video{height:auto;aspect-ratio:16/9;margin-top:18px}
#gallery .gallery-film video[hidden]{display:none}
/* Gallery Wall uses one horizontal strip per chapter. */
#gallery:not(.is-contact-sheet) .design-gallery-grid {
  position: relative;
  display: flex;
  gap: clamp(10px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--lime) #202123;
  padding-bottom: 8px;
}
#gallery:not(.is-contact-sheet) .design-gallery-grid::after {
  content: "";
  flex: 0 0 calc(18% - clamp(10px, 2vw, 26px));
}
#gallery:not(.is-contact-sheet) .design-gallery-grid figure {
  flex: 0 0 82%;
  margin: 0;
  scroll-snap-align: start;
}
#gallery:not(.is-contact-sheet) figure img,
#gallery:not(.is-contact-sheet) figure video {
  height: clamp(165px, min(43vw, calc(100svh - var(--gallery-top, 82px) - 155px)), 560px);
}

.gallery-strip-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
  padding: 10px 0;
}
.gallery-strip-controls p { margin: 0; }
.gallery-strip-controls button {
  color: var(--lime);
  background: transparent;
  border: 1px solid currentColor;
  padding: 8px 12px;
  min-height: 44px;
  cursor: pointer;
  font: inherit;
}
.gallery-strip-controls button:hover,
.gallery-strip-controls button:focus-visible { background: var(--lime); color: #202123; }
#gallery.is-contact-sheet .gallery-strip-controls { display: none; }
#gallery:not(.is-contact-sheet) .design-gallery-grid figure > a {
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: clamp(7px, 1.4vw, 20px) auto 0;
  background: transparent;
  rotate: -1.1deg;
}
#gallery:not(.is-contact-sheet) .design-gallery-grid figure:nth-child(even) > a {
  rotate: 1.1deg;
}

.gallery-tools.is-compact { padding: 2px 5px; gap: 4px; }
.gallery-tools.is-compact button { min-height: 36px; padding: 3px 8px; font-size: .76rem; }
.gallery-autoscroll {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .65rem;
  width: max-content;
  max-width: 100%;
  margin: 0 0 8px auto;
  padding: 4px 4px 4px 12px;
  border: 1px solid var(--lime);
  border-radius: 10px;
  background: #202123;
  color: var(--paper);
  font-size: .85rem;
}
.gallery-autoscroll button {
  min-height: 44px;
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--lime);
  color: #202123;
  font: 750 .85rem system-ui, sans-serif;
  cursor: pointer;
}
.gallery-autoscroll button:hover { background: #dcbcff; }
.gallery-autoscroll button:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }
#gallery.is-contact-sheet .gallery-autoscroll { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .gallery-autoscroll.has-arrived { animation: gallery-prompt-arrive 420ms cubic-bezier(.2,.9,.3,1.25) both; }
}
@keyframes gallery-prompt-arrive {
  from { opacity: 0; transform: translateY(8px) scale(.88); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

#gallery figure img:not(.gallery-light-art),
#gallery figure video,
#gallery figure a { background: transparent; }

#gallery:not(.is-contact-sheet) .design-gallery-grid figure img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(180px, min(48vw, calc(100svh - var(--gallery-top, 82px) - 135px)), 615px);
}

#gallery .design-gallery-grid figcaption {
  padding: .65rem 0 .35rem;
  border: 0;
  color: var(--lime);
  font-size: .85rem;
  line-height: 1.4;
}

#gallery:not(.is-contact-sheet) .design-gallery-grid figcaption {
  text-align: center;
}
.gallery-film-launch {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(64px, 12vw, 148px);
  aspect-ratio: 1;
  border: 2px solid #202123;
  border-radius: 50%;
  background: var(--lime);
  color: #202123;
  box-shadow: 0 5px 24px #0008;
  font-size: clamp(26px, 5vw, 62px);
  line-height: 1;
  cursor: pointer;
}
.gallery-film-launch span { padding-left: .12em; }
.gallery-film-launch:hover { background: var(--paper); }
.gallery-film-launch:focus-visible { outline: 3px solid var(--paper); outline-offset: 4px; }
#gallery .gallery-film { padding: clamp(8px, 2vw, 22px); }
#gallery .gallery-film video { max-height: 78vh; margin-top: 8px; }
#gallery .gallery-film video:fullscreen { width: 100%; height: 100%; max-height: none; margin: 0; background: #000; }