/* Works page: category layout. Loaded after the page stylesheet and wins on order + specificity. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

#gallery-section .gallery-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin:0 auto var(--s-6);padding:0;max-width:52rem;list-style:none}
#gallery-section .gallery-nav a{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;padding:.55rem 1.15rem;border:1px solid var(--rule-mid);color:var(--ink);font-family:var(--text);font-size:var(--t-small);font-weight:var(--w-label);letter-spacing:.04em;text-decoration:none;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
#gallery-section .gallery-nav a span{color:var(--bronze);font-size:var(--t-label);letter-spacing:.1em}
#gallery-section .gallery-nav a:hover,#gallery-section .gallery-nav a:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
#gallery-section .gallery-nav a:hover span,#gallery-section .gallery-nav a:focus-visible span{color:var(--bronze-lt)}

#gallery-section #gallery-groups{display:grid;gap:var(--s-7)}
#gallery-section #gallery-groups .gallery-group{width:100%;max-width:none;scroll-margin-top:calc(var(--masthead-h) + var(--s-4))}

#gallery-section #gallery-groups .gallery-cat-heading{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-4);font-family:var(--display);font-size:var(--t-display-3);font-weight:var(--w-display-3);letter-spacing:0;text-transform:none;text-align:start;color:var(--ink)}
#gallery-section #gallery-groups .gallery-cat-heading::after{content:"";flex:1;height:1px;background:var(--rule)}
#gallery-section #gallery-groups .gallery-cat-count{order:2;color:var(--bronze);font-family:var(--text);font-size:var(--t-label);font-weight:var(--w-label);letter-spacing:.2em}

#gallery-section #gallery-groups .gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--grout);margin:0;padding:0}
#gallery-section #gallery-groups .gallery-grid>li{flex:0 0 calc((100% - var(--grout)) / 2);min-width:0}
@media (width>=48rem){#gallery-section #gallery-groups .gallery-grid>li{flex-basis:calc((100% - 2 * var(--grout)) / 3)}}
@media (width>=80rem){#gallery-section #gallery-groups .gallery-grid>li{flex-basis:calc((100% - 3 * var(--grout)) / 4)}}