/* Style gallery, in the site's original light look (#efeeed paper, Lato and Montserrat, pink accent). */
* { box-sizing: border-box; }
body { margin: 0; background: #efeeed; color: #424956; font: 400 17px/1.6 "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; position: sticky; top: 0; background: rgba(239, 238, 237, .92); backdrop-filter: blur(8px); z-index: 5; }
.bar .back { text-decoration: none; font: 700 12px "Lato", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #697377; }
.bar .start, .btn { white-space: nowrap; display: inline-block; text-decoration: none; background: #e2276f; color: #fff; font: 700 15px "Lato", sans-serif; padding: 12px 24px; border-radius: 999px; border: 0; cursor: pointer; transition: background .2s, transform .15s; }
.bar .start:hover, .btn:hover { background: #e80f5a; transform: translateY(-1px); }
main { max-width: 1040px; margin: 0 auto; padding: 8px 20px 80px; }
.intro { text-align: center; padding: 36px 0 20px; }
.kicker { font: 700 12px "Lato", sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #e2276f; margin: 0; }
h1 { font: 900 clamp(30px, 6vw, 52px)/1.1 "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: -.01em; margin: 12px 0; color: #373d48; }
.intro p:last-child { max-width: 52ch; margin: 0 auto; color: #697377; }
h2 { font: 700 14px "Lato", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #697377; margin: 40px 0 14px; }
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tile { width: 100%; background: #fff; border: 1px solid #e1e1e1; border-radius: 16px; padding: 14px; cursor: zoom-in; text-align: center; font: inherit; color: inherit; transition: transform .2s, box-shadow .2s, border-color .2s; }
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(55, 61, 72, .12); border-color: #e2276f; }
.tile:focus-visible, .btn:focus-visible, .nav:focus-visible, .x:focus-visible { outline: 3px solid #e2276f; outline-offset: 3px; }
.pic { display: block; aspect-ratio: 1; display: grid; place-items: center; }
.pic.metal { aspect-ratio: 304 / 240; } .pic img { width: 100%; height: 100%; object-fit: contain; border-radius: 10px; }
.cap { display: block; margin-top: 10px; font: 700 15px "Lato", sans-serif; }
.cta { text-align: center; margin-top: 48px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(4, 1fr); } .grid.metals { grid-template-columns: repeat(4, 1fr); } }
.lb { position: fixed; inset: 0; z-index: 20; background: rgba(239, 238, 237, .97); display: grid; place-items: center; padding: 56px 12px 24px; }
.lb[hidden] { display: none; }
.lb figure { margin: 0; text-align: center; max-width: 560px; width: 100%; }
.lb img { width: 100%; max-height: 52vh; object-fit: contain; background: #fff; border-radius: 18px; border: 1px solid #e1e1e1; padding: 14px; }
.lb figcaption { margin-top: 18px; display: grid; gap: 8px; justify-items: center; }
.lb figcaption b { font: 900 24px "Montserrat", sans-serif; text-transform: uppercase; color: #373d48; } .lb figcaption span { color: #697377; max-width: 40ch; } .lb small { color: #8a9296; }
.x { position: absolute; top: 12px; right: 16px; font-size: 40px; line-height: 1; background: none; border: 0; color: #697377; cursor: pointer; width: 48px; height: 48px; }
.nav { position: absolute; top: 40%; width: 52px; height: 52px; border-radius: 50%; border: 1px solid #d8d6d3; background: #fff; font-size: 34px; line-height: 1; color: #424956; cursor: pointer; }
.nav.prev { left: 10px; } .nav.next { right: 10px; } .nav:hover { border-color: #e2276f; color: #e2276f; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }