.tank { max-width: 64rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(200,136,74,.3); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.hero img { display: block; width: 100%; height: auto; }
.grid { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.grid li { margin: 0; }
.grid a { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(200,136,74,.25); background: #122821; }
.grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.grid a:hover img { transform: scale(1.04); }
.hero:focus-visible, .grid a:focus-visible, .back:focus-visible, .lb a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.back-wrap { text-align: center; }
.back { display: inline-block; margin-top: 1.75rem; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.lb { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(5,12,10,.94); align-items: center; justify-content: center; padding: 3.5rem 1rem; }
.lb:target { display: flex; }
.lb__bg { position: absolute; inset: 0; }
.lb img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: .5rem; }
.lb__x, .lb__o, .lb__p, .lb__n { position: absolute; z-index: 2; color: var(--ink); text-decoration: none; background: rgba(18,40,33,.9); border: 1px solid rgba(200,136,74,.4); border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; }
.lb__x { top: .6rem; right: .75rem; padding: 0 1.1rem; }
.lb__o { bottom: .6rem; left: 50%; transform: translateX(-50%); padding: 0 1.1rem; font-size: .875rem; white-space: nowrap; }
.lb__p, .lb__n { top: 50%; width: 2.75rem; font-size: 1.75rem; line-height: 1; margin-top: -1.4rem; }
.lb__p { left: .5rem; } .lb__n { right: .5rem; }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(3, 1fr); } }
.then-now { margin-top: 2.5rem; }
.then-now h2 { margin: 0 0 1rem; text-align: center; }
.then-now .sub { margin: 1.5rem 0 0; text-align: center; font-size: 1rem; color: var(--ink-muted); font-weight: 500; }
.pair { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.pair figure { margin: 0; }
.pair a { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(200,136,74,.3); box-shadow: 0 8px 30px rgba(0,0,0,.45); }
.pair img { display: block; width: 100%; height: auto; }
.pair figcaption { margin-top: .5rem; text-align: center; font-weight: 600; color: var(--ink); }
.pair a:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
@media (min-width: 40rem) { .pair { grid-template-columns: 1fr 1fr; } .grid--4 { grid-template-columns: repeat(4, 1fr); } }