/* Gallery @ Lívia — main styles */

:root{--frame:#2d3030;--paper:#f7f7f4;--nav:#858181;--text:#242727;--outer:9px;--inner:25px}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--frame);color:var(--text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,a{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid #2d6697;outline-offset:3px}
.site{padding:12px var(--outer) 12px}
.header{height:48px;background:var(--nav);display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;color:#fff;padding:0 22px;position:relative}
.gallery-brand{display:inline-flex;align-items:center;gap:0;color:inherit;font-size:clamp(19px,1.75vw,28px);font-weight:700;letter-spacing:-.045em;text-decoration:none;line-height:1;white-space:nowrap;z-index:1}
.gallery-brand .livia-mark{display:block;width:31px;height:31px;object-fit:contain;flex:none}
.header-dot{width:11px;height:11px;border-radius:50%;background:#303332;position:absolute;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.header-dot-one{left:33.333%}.header-dot-two{left:66.666%}
.gallery-marker{display:inline-block;align-self:center;color:inherit;font-size:clamp(18px,1.6vw,24px);font-weight:700;letter-spacing:-.045em;line-height:1;white-space:nowrap;cursor:default;user-select:none;z-index:1}
.gallery-section{background:var(--paper);padding:21px var(--inner) 25px;margin-bottom:12px}
.section-header{border-bottom:2px solid #3e4140;padding:0 0 6px}
.section-header h2{font-size:clamp(20px,1.5vw,26px);line-height:1.1;font-weight:600;letter-spacing:-.038em;margin:0}
.section-subtitle{font-size:clamp(15px,1vw,18px);line-height:1.5;margin:11px 0 24px;max-width:1080px;font-weight:400;letter-spacing:-.025em}
.gallery-layout{display:grid;gap:12px;min-width:0;overflow:hidden}
.artwork{display:block;position:relative;min-width:0;min-height:0;margin:0;padding:0;border:0;background:#e2ddd2;overflow:hidden;isolation:isolate}
.artwork-inner{position:absolute;inset:0;display:block;width:100%;height:100%}
.artwork img{width:100%;height:100%;display:block;transition:transform .5s cubic-bezier(.2,.7,.24,1);}
.artwork:hover img{transform:scale(1.038)}
.artwork:focus-visible{outline-offset:-5px;outline:4px solid #233c4e}
.layout-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.layout-four .artwork{aspect-ratio:.72}
.layout-asym-three{grid-template-columns:1.72fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:700px}
.layout-asym-three .big{grid-row:span 2}
.layout-two{grid-template-columns:.85fr 1.6fr;height:650px}
.layout-mosaic{grid-template-columns:1.65fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:760px}
.layout-mosaic .feature{grid-row:span 2}
.layout-trio{grid-template-columns:1fr 1.4fr 1fr;height:630px}
.layout-panorama{grid-template-columns:3.3fr .88fr;height:490px}
.layout-finale{grid-template-columns:1fr 1.32fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:800px}
.layout-finale .portrait{grid-row:span 2}
.layout-finale .landscape{grid-column:span 2}
.layout-finale .last{grid-column:span 1}
.gallery-footer{background:#fff;min-height:0;padding:19px var(--inner) 28px;margin:0}
.gallery-footer-title{border-bottom:2px solid #3e4140;padding:0 0 6px}
.gallery-footer-title h2{font-size:clamp(20px,1.5vw,26px);line-height:1.1;font-weight:600;letter-spacing:-.038em;margin:0}
.gallery-footer-body{display:flex;align-items:flex-start;justify-content:space-between;gap:56px;padding-top:22px}
.gallery-footer-links{display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;align-items:start;align-content:start;column-gap:60px;row-gap:13px;flex:1;min-width:0;max-width:610px}
.gallery-footer-links a{display:block;width:fit-content;font-size:clamp(15px,1.05vw,18px);font-weight:400;line-height:1.38;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.gallery-footer-links a:hover{opacity:.6}
.gallery-footer-links a.pending{cursor:default}
.gallery-footer-image{width:min(51%,630px);height:255px;flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.gallery-footer-image img{width:100%;height:100%;object-fit:cover;display:block}

.dialog{border:0;background:transparent;color:white;padding:0;max-width:94vw;max-height:95vh;overflow:visible}
.dialog::backdrop{background:rgba(14,18,18,.93);backdrop-filter:blur(3px)}
.dialog-inner{position:relative;display:flex;align-items:center;justify-content:center;max-width:94vw;max-height:90vh}
.dialog-art{width:min(82vw,1100px);height:min(86vh,880px);display:flex;align-items:center;justify-content:center}
.dialog-art img{width:100%;height:100%;object-fit:contain}
.dialog-button{position:absolute;top:50%;transform:translateY(-50%);border:1px solid #929b9d;background:#2d3030e8;color:white;border-radius:50%;height:43px;width:43px;display:grid;place-items:center;font-size:28px;line-height:1}
.dialog-prev{left:-52px}.dialog-next{right:-52px}
.dialog-close{top:0;right:-50px;transform:none;font-size:23px}
@media(max-width:900px){
  :root{--inner:16px;--outer:7px}
  .gallery-footer{min-height:0}
  .gallery-footer-image{width:min(50%,480px);height:200px}
  .gallery-layout{gap:8px}
  .layout-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout-asym-three{height:560px}
  .layout-two{height:490px}
  .layout-mosaic{height:570px}
  .layout-trio{height:475px}
  .layout-panorama{height:370px}
  .layout-finale{height:580px}
  .dialog-prev{left:3px}.dialog-next{right:3px}.dialog-close{right:3px;top:3px}
}
@media(max-width:540px){
 :root{--inner:11px;--outer:6px}
 .site{padding-top:8px;padding-bottom:8px}
 .header{height:44px;margin-bottom:8px;padding:0 12px}
 .gallery-brand{gap:0;font-size:clamp(16px,4.5vw,19px)}
 .gallery-brand .livia-mark{width:26px;height:26px}
 .header-dot{width:8px;height:8px}
 .gallery-marker{font-size:clamp(15px,4.4vw,19px)}
 .gallery-section{padding-top:17px;padding-bottom:13px;margin-bottom:8px}
 .section-header{padding-bottom:5px}
 .section-header h2{font-size:18px}
 .section-subtitle{font-size:13px;line-height:1.48;margin:9px 0 16px}
 .gallery-layout{gap:6px}
 .layout-four{grid-template-columns:repeat(2,minmax(0,1fr))}
 .layout-asym-three{grid-template-columns:1.25fr 1fr;height:440px}
 .layout-two{grid-template-columns:1fr 1.28fr;height:330px}
 .layout-mosaic{grid-template-columns:1.5fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr));height:620px}
 .layout-mosaic .feature{grid-row:span 4}
 .layout-trio{grid-template-columns:1fr 1.2fr 1fr;height:300px}
 .layout-panorama{grid-template-columns:2.7fr .9fr;height:255px}
 .layout-finale{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr));height:560px}
 .layout-finale .portrait{grid-row:span 3}
 .layout-finale .landscape{grid-column:span 1}
 .layout-finale .square,.layout-finale .last{grid-column:span 1}
 .gallery-footer{min-height:0;padding-top:16px;padding-bottom:21px}
 .gallery-footer-title h2{font-size:18px}
 .gallery-footer-body{gap:14px;padding-top:17px}
 .gallery-footer-links{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;row-gap:7px;column-gap:0}
 .gallery-footer-links a{font-size:14px;line-height:1.43}
 .gallery-footer-image{width:min(48%,210px);height:150px}

 .dialog-art{width:91vw;height:76vh}
 .dialog-button{width:35px;height:35px;font-size:22px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.artwork img{transition:none}}

/* Image swap support: PNG, JPG, WebP, AVIF and SVG share the same frame. */
.artwork img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.24,1)}
.dialog-art img{width:100%;height:100%;object-fit:contain;display:block}
.gallery-footer-image img{width:100%;height:100%;display:block;object-fit:cover}
@media(prefers-reduced-motion:reduce){.artwork img{transition:none}}

/* First-fold composition: a glimpse of the following section is visible on desktop. */
@media(min-width:1300px){
  .gallery-section:first-of-type .layout-four .artwork{
    min-height:clamp(490px, calc(40vw - 30px), 610px);
  }
}
/* Decorative closing stripe: sits OUTSIDE and BELOW the white footer,
   matching the gray rectangular bar of the header, framed by charcoal. */
.footer-end-rule{
  display:block;
  width:100%;
  height:10px;
  background:var(--nav);
  margin-top:12px;
}
@media(max-width:540px){
  .footer-end-rule{height:8px;margin-top:8px}
}