@font-face { font-family: 'Montserrat'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/Montserrat-600.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/Montserrat-800.woff2') format('woff2'); }
@font-face { font-family: 'PT Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/PTSans-400.woff2') format('woff2'); }
@font-face { font-family: 'PT Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/PTSans-700.woff2') format('woff2'); }

/* Recogn.ice, resting: the old site's DNA (navy, ice blue, sunny yellow, Montserrat + PT Sans, round portraits) kept; friendly shapes added */
:root {
  --navy: #070757;
  --ice: #e4f2ff;
  --pale: #f5f9ff;
  --sun: #ffcd3c;
  --sky: #5cc8ff;
  --ink: #0d0d4f;
  --muted: #55598a;
  --max: 62rem;
  --radius: 18px;
  --keels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0H480V12L470 15 455 31 446 19 430 23 418 44 406 21 392 17 380 27 366 13 350 19 338 36 326 23 310 15 296 29 284 46 270 25 256 17 240 21 228 38 214 19 200 13 186 25 172 40 160 23 146 15 130 21 118 34 104 17 90 25 76 42 64 21 50 15 36 27 22 36 10 19 0 12Z'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 18px/1.65 "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ink); background: var(--pale); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
h1, h2, h3, h4, h5 { font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--navy); line-height: 1.15; }
h1 { font-weight: 800; font-size: clamp(2.6rem, 9vw, 5.5rem); margin: 0; letter-spacing: -.02em; }
h2 { font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin: 2.4rem 0 .7rem; }
h2::after { content: ""; display: block; width: 3.2rem; height: 6px; margin-top: .55rem; border-radius: 6px; background: var(--sun); }
h3 { font-weight: 600; font-size: 1.25rem; margin: 1.6rem 0 .4rem; }
h4, h5 { font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 1.6rem 0 .3rem; }
a { color: var(--navy); text-decoration-color: var(--sun); text-decoration-thickness: 3px; text-underline-offset: 3px; }
a:hover { background: var(--sun); text-decoration: none; }
img { max-width: 100%; height: auto; border-radius: 12px; }
figure { margin: 1.2rem 0; }
p.lead { font-size: 1.3rem; line-height: 1.5; }
.small { color: var(--muted); font-size: .92rem; }

/* header */
.site-header { background: var(--navy); position: sticky; top: 0; z-index: 50; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding-top: .9rem; padding-bottom: .9rem; }
.brand { display: block; color: #fff; text-decoration: none; font: 800 1.5rem Montserrat, sans-serif; }
.brand:hover { background: none; }
.site-header nav { display: flex; flex-wrap: wrap; gap: .2rem 1.6rem; font: 700 .85rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.site-header nav a { color: #fff; text-decoration: none; padding: .3rem 0; border-bottom: 3px solid transparent; }
.site-header nav a:hover { background: none; border-bottom-color: var(--sky); }
.site-header nav a[aria-current] { color: var(--sun); border-bottom-color: var(--sun); }

/* page title band: big white title on navy, wavy edge */
.page-hero { background: var(--navy); color: #fff; padding: clamp(2.2rem, 8vw, 4.5rem) 0 clamp(3rem, 9vw, 5.5rem); position: relative; }
.page-hero h1 { color: #fff; }
/* the title band ends in a sea-ice cross-section: a floe whose underside hangs down in irregular keels */
.page-hero { margin-bottom: 46px; }
.page-hero::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 46px; background: linear-gradient(var(--navy) 30%, #4a68c8);
  -webkit-mask: var(--keels) 0 0 / 480px 46px repeat-x; mask: var(--keels) 0 0 / 480px 46px repeat-x; }
.hero { position: relative; background: linear-gradient(rgba(7,7,87,.4), rgba(7,7,87,.4)), url("/img/2019_03_recognice-background.jpg") center / cover; color: #fff; padding: clamp(3.5rem, 13vw, 8rem) 0 calc(clamp(2rem, 6vw, 4rem) + 46px);
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 45px) no-repeat, var(--keels) bottom / 480px 46px repeat-x; mask: linear-gradient(#000, #000) top / 100% calc(100% - 45px) no-repeat, var(--keels) bottom / 480px 46px repeat-x; }
.hero h1 { color: #fff; }
.hero .tagline { font-size: clamp(1.2rem, 3vw, 1.7rem); color: var(--ice); margin: .5rem 0 1.5rem; }
.sticker {  transform: rotate(8deg); background: var(--sun); color: var(--navy); font: 800 .9rem/1.2 Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .08em; text-align: center; padding: 1.1rem .9rem; border-radius: 50%; width: 7.4rem; height: 7.4rem; display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.18); }

/* sections */
main > .wrap { padding-top: 2.2rem; padding-bottom: 2rem; }
.band .wrap { padding-top: 0; padding-bottom: 0; }
.band { padding: 2.2rem 0 2.4rem; }
.band.ice { background: var(--ice); }
.band .wrap > h2:first-child { margin-top: 0; }
.note:first-child { margin-top: 0; }

.btn { display: inline-block; padding: .6rem 1.4rem; margin: .3rem .3rem .3rem 0; background: var(--sun); color: var(--navy); text-decoration: none; border-radius: 999px; font: 800 .9rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .05em; box-shadow: 0 4px 0 #c99a00; transition: transform .12s; }
.btn:hover { background: #ffd95e; transform: translateY(-2px) rotate(-1deg); }
.btn.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 3px #fff; }
.btn.ghost:hover { background: #fff; color: var(--navy); }

.note { margin: 1.4rem 0; padding: .2rem 1.2rem; background: #fff; border: 3px solid var(--sun); border-radius: var(--radius); font-size: .98rem; }
.cards { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.cards li { margin: 0; }
.cards a { display: block; height: 100%; padding: 1.2rem 1.3rem; background: #fff; border-radius: var(--radius); text-decoration: none; box-shadow: 0 4px 0 var(--ice); transition: transform .15s, box-shadow .15s; }
.cards a:hover { background: #fff; transform: translateY(-4px) rotate(-.6deg); box-shadow: 0 8px 0 var(--sun); }
.cards strong { display: block; font: 800 1.3rem Montserrat, sans-serif; color: var(--navy); }
.cards span { display: block; margin-top: .3rem; color: var(--muted); font-size: .98rem; }

.posts { list-style: none; padding: 0; }
.posts li { margin: .5rem 0; }
.posts time { display: inline-block; min-width: 6.4rem; color: var(--muted); font: 700 .8rem Montserrat, sans-serif; letter-spacing: .08em; }
.posts.big li { background: #fff; border-radius: 14px; padding: .7rem 1rem; box-shadow: 0 3px 0 var(--ice); }
.posts.big a { font-weight: 700; }

/* people: round portraits, yellow spaced caps (as on the old About page) */
.people { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.person { background: #fff; border-radius: var(--radius); padding: 1.3rem; text-align: center; }
.person figure { margin: 0 0 .5rem; }
.person img { width: 9rem; height: 9rem; object-fit: cover; border-radius: 50%; border: 5px solid var(--sun); }
.person h3 { margin-top: .4rem; }
.person p:first-of-type { font: 700 .8rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: #b78a00; margin: .2rem 0 1rem; }
.person p { text-align: left; font-size: .95rem; }
.person p:first-of-type { text-align: center; }

/* media echo */
.echo-feature { background: var(--navy); color: #fff; border-radius: var(--radius); padding: .6rem 1.4rem 1.1rem; margin: 1rem 0; }
.echo-feature h3, .echo-feature a { color: var(--sun); }
.echo-feature a:hover { color: var(--navy); }
.echo { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.echo li { margin: 0; }
.echo li > a, .echo li > div:not(.pop) { display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: var(--radius); padding: 1rem; text-decoration: none; box-shadow: 0 4px 0 var(--ice); transition: transform .15s; }
.echo li > a:hover { background: #fff; transform: translateY(-3px) rotate(.5deg); box-shadow: 0 7px 0 var(--sun); }
.echo .logo { display: grid; place-items: center; height: 4.5rem; margin-bottom: .6rem; }
.echo .logo img { max-height: 4.5rem; max-width: 100%; width: auto; border-radius: 0; }
.echo h3 { font-size: 1rem; margin: 0 0 .4rem; }
.echo .meta { margin-top: auto; font: 700 .72rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .1em; color: #b78a00; }

/* placeholder for an image that is not recovered yet */
.ph { display: block; min-height: 7rem; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--ice) 0 14px, #f0f8ff 14px 28px); position: relative; }
.ph::after { content: "image to come"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 .75rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.echo .ph { width: 100%; min-height: 4.5rem; }

blockquote { margin: 1.2rem 0; padding: .2rem 1rem; border-left: 5px solid var(--sun); color: var(--muted); }
main ul, main ol { padding-left: 1.4rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
td, th { border: 1px solid var(--ice); padding: .4rem .6rem; text-align: left; vertical-align: top; background: #fff; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 1.2rem 0; border-radius: var(--radius); overflow: hidden; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
body.inner main > .wrap img { margin: .6rem 0; }

.site-footer { background: var(--navy); color: var(--ice); font-size: .9rem; padding: 1.6rem 0; }
.site-footer p { margin: 0; }
@media (max-width: 36rem) { .sticker { width: 5rem; height: 5rem; font-size: .7rem; padding: .5rem; } body { font-size: 17px; } }

/* thank you */
.thanks { background: var(--sun); color: var(--navy); text-align: center; padding: 2rem 0 3rem; margin-top: 0; }
.thanks h2 { font-size: clamp(2.6rem, 9vw, 5rem); margin: 1rem 0 .5rem; }
.thanks h2::after { margin: .6rem auto 0; background: var(--navy); }
.thanks .big { font: 600 clamp(1.15rem, 2.6vw, 1.5rem)/1.5 Montserrat, sans-serif; max-width: 44rem; margin: 1rem auto; }
.thanks p { max-width: 46rem; margin: 1rem auto; }
.thanks a { color: var(--navy); }

/* media echo pop-up */
.echo .gone { position: relative; }
.echo .gone .card { width: 100%; height: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; opacity: .8; background: #fff; border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; box-shadow: 0 4px 0 var(--ice); }
.echo .gone .card:hover, .echo .gone .card:focus-visible { opacity: 1; box-shadow: 0 7px 0 var(--ice); }
.echo .gone .logo { filter: none; opacity: .55; }
.echo .pop { position: absolute; z-index: 5; left: .6rem; right: .6rem; bottom: .6rem; background: var(--navy); color: #fff; border-radius: 14px; padding: .7rem 2rem .7rem .9rem; font-size: .88rem; line-height: 1.4; box-shadow: 0 8px 20px rgba(7,7,87,.35); }
.echo .pop[hidden] { display: none; }
.echo .pop a { color: var(--sun); }
.echo .pop a:hover { color: var(--navy); }
.echo .pop .x { position: absolute; top: .2rem; right: .35rem; border: 0; background: none; color: #fff; font-size: 1.3rem; cursor: pointer; line-height: 1; }

/* Freezy Frame page: big title + subtitle, Italiano | English, navy accordions, contents box */
.page-hero h1 .sub { display: block; font: 400 clamp(1.3rem, 3.4vw, 2rem)/1.2 "PT Sans", sans-serif; letter-spacing: 0; margin-top: .6rem; }
.two { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: 1.5rem; }
.two h4 { font: italic 800 1.6rem Montserrat, sans-serif; text-transform: none; letter-spacing: 0; color: var(--navy); margin: 0 0 .6rem; }
.two .col:last-child h4 { text-align: right; }
.acc { display: grid; gap: 0 1.2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; margin: 1rem 0; }
details { margin: 0 0 6px; }
.acc summary, details.toc summary { list-style: none; cursor: pointer; }
.acc summary::-webkit-details-marker, details.toc summary::-webkit-details-marker { display: none; }
.acc summary { background: var(--navy); color: #fff; font: 700 .95rem Montserrat, sans-serif; padding: .85rem 1.1rem; border-radius: 10px; display: flex; justify-content: space-between; gap: 1rem; }
.acc summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--sun); }
.acc details[open] summary { background: var(--sun); color: var(--navy); border-radius: 10px 10px 0 0; }
.acc details[open] summary::after { content: "\2212"; color: var(--navy); }
.acc details > :not(summary) { background: #fff; margin: 0; padding: .9rem 1.1rem; font-size: .96rem; }
.acc details > p:last-child { border-radius: 0 0 10px 10px; padding-bottom: 1.1rem; }
details.toc { position: fixed; top: 5.2rem; right: max(1rem, calc((100vw - var(--max)) / 2 - 15rem)); z-index: 20; width: 14rem; background: #fff; border-radius: 12px; box-shadow: 0 6px 24px rgba(7,7,87,.25); font-size: .88rem; }
details.toc summary { padding: .7rem 1rem; font: 800 .85rem Montserrat, sans-serif; color: var(--navy); }
details.toc summary::after { content: "\25BE"; float: right; }
details.toc ol { margin: 0; padding: .5rem 1rem 1rem 2rem; background: var(--navy); border-radius: 0 0 12px 12px; }
details.toc a { color: #fff; text-decoration: none; }
details.toc a:hover { background: none; color: var(--sun); }
@media (max-width: 80rem) { details.toc { position: static; width: auto; margin: 1rem 1.25rem 0; box-shadow: none; border: 3px solid var(--ice); } }
.credit { font-size: .85rem; color: var(--muted); margin: .2rem 0; }
.band[id] { scroll-margin-top: 4rem; }

/* the sticker breathes slowly, like something hibernating */
.sticker { animation: hibernate 5s ease-in-out infinite; transform-origin: 50% 60%; font-size: .8rem; letter-spacing: .03em; padding: .4rem; }
@keyframes hibernate { 0%, 100% { transform: rotate(8deg) translateY(0) scale(1); } 50% { transform: rotate(4deg) translateY(-8px) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .sticker { animation: none; } }

/* Tongues from Space promo (navy) and For Your Ice (yellow, as on the old home page) */
.kicker { font: 800 .85rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--sun); margin: 1.6rem 0 0; }
.tfs { background: var(--navy); color: #fff; padding-bottom: 2.4rem; }
.tfs h2, .tfs a:not(.btn) { color: #fff; }
.tfs h2 { font-size: clamp(2.2rem, 7vw, 4rem); margin-top: .3rem; }
.tfs-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: center; margin: 1.2rem 0; }
.tfs-grid.compact { grid-template-columns: 1fr 1fr; }
.tfs .lead { font-size: 1.4rem; }
.tfs .lead em { color: var(--sun); font-style: normal; }
.shots { display: block; position: relative; padding-bottom: 14%; text-decoration: none; }
.shots img { display: block; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.shots img + img { position: absolute; width: 62%; right: 0; bottom: 0; border: 5px solid var(--sun); transform: rotate(2deg); }
.tfs-grid.compact .shots { padding-bottom: 0; }
.tfs-grid.compact .shots:hover, .shots:hover { background: none; }
.credit { margin: .4rem 0; }
.tfs .credit { color: #b9bde8; }
.fyi { background: var(--sun); }
.fyi-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr; align-items: center; padding-top: 1.5rem; padding-bottom: 2.2rem; }
.fyi .kicker { color: var(--navy); }
.fyi .poster { justify-self: center; background: #fff; padding: .6rem; border-radius: 6px; transform: rotate(2deg); box-shadow: 8px 10px 0 rgba(7,7,87,.25); transition: transform .2s; }
.fyi .poster:hover { background: #fff; transform: rotate(0); }
.fyi .poster img { display: block; max-height: 26rem; width: auto; border-radius: 0; }
.fyi a { text-decoration-color: var(--navy); }
.btn.navy { background: var(--navy); color: #fff; box-shadow: 0 4px 0 #000030; }
.btn.navy:hover { background: #15159a; }
.btn.ghost-navy { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 3px var(--navy); }
@media (max-width: 40rem) { .fyi-grid, .tfs-grid.compact { grid-template-columns: 1fr; } }

/* previous / next at the end of a post */
.postnav { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 1rem; }
.postnav a { flex: 1; max-width: 48%; display: block; padding: .9rem 1.1rem; background: #fff; border-radius: 14px; box-shadow: 0 3px 0 var(--ice); text-decoration: none; font: 700 1rem Montserrat, sans-serif; color: var(--navy); }
.postnav a:hover { background: var(--sun); }
.postnav small { display: block; font: 700 .7rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-bottom: .2rem; }
.postnav .next { text-align: right; margin-left: auto; }
.postnav .next small::after { content: " \2192"; }
.postnav .prev small::before { content: "\2190  "; }
.postnav + .btn { margin-top: .5rem; }

/* status card: Recogn.ice sleeps, the two projects that carry on are awake */
.status { float: right; width: min(19rem, 100%); background: rgba(7,7,87,.78); border: 2px solid rgba(255,255,255,.35); border-radius: var(--radius); padding: .9rem 1.1rem 1rem; color: #fff; }
.status-h { margin: 0 0 .4rem; font: 800 .72rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .16em; color: var(--ice); }
.status .row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.2); color: #fff; text-decoration: none; font: 700 .95rem Montserrat, sans-serif; }
.status a.row::after { content: "\2192"; margin-left: -.3rem; opacity: 0; transition: opacity .15s, transform .15s; }
.status a.row:hover { background: none; color: var(--sun); }
.status a.row:hover::after { opacity: 1; transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; padding: .2rem .7rem; border-radius: 999px; font: 800 .7rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.chip.sleep { background: var(--sun); color: var(--navy); }
.chip.awake { background: #fff; color: #12784a; }
.chip.awake i { width: .65rem; height: .65rem; border-radius: 50%; background: #2fd17f; animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47,209,127,.7); } 70%, 100% { box-shadow: 0 0 0 .55rem rgba(47,209,127,0); } }
.zzz { position: relative; display: inline-block; width: 1.1rem; height: .9rem; font-size: .75rem; }
.zzz b, .zzz em, .zzz { font-style: normal; }
.zzz > * { position: absolute; left: .45rem; }
.zzz, .zzz b, .zzz em { animation: zzz 3s ease-in-out infinite; }
.zzz b { animation-delay: .5s; font-size: .65rem; } .zzz em { animation-delay: 1s; font-size: .55rem; }
@keyframes zzz { 0%, 100% { opacity: .25; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .chip.awake i, .zzz, .zzz b, .zzz em { animation: none; } }
@media (max-width: 48rem) { .status { float: none; width: 100%; margin-bottom: 1.2rem; } }

/* gallery */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0 1.5rem; }
.filters button { border: 0; cursor: pointer; padding: .45rem 1.1rem; border-radius: 999px; background: #fff; color: var(--navy); font: 800 .8rem Montserrat, sans-serif; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 3px 0 var(--ice); }
.filters button.on { background: var(--navy); color: var(--sun); box-shadow: 0 3px 0 #000030; }
.gallery { list-style: none; padding: 0; margin: 0; columns: 3 17rem; column-gap: 1rem; }
.gallery li { break-inside: avoid; margin: 0 0 1rem; }
.gallery li[hidden] { display: none; }
.gallery button { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 0 var(--ice); }
.gallery img { display: block; width: 100%; height: auto; border-radius: 0; transition: transform .4s; }
.gallery button:hover img, .gallery button:focus-visible img { transform: scale(1.04); }
.gallery .cap { position: absolute; inset: auto 0 0 0; padding: 2.2rem .9rem .7rem; text-align: left; color: #fff; background: linear-gradient(transparent, rgba(7,7,87,.88)); opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.gallery button:hover .cap, .gallery button:focus-visible .cap { opacity: 1; transform: none; }
.gallery .cap b { display: block; font: 800 .95rem/1.2 Montserrat, sans-serif; }
.gallery .cap small { font-size: .8rem; color: var(--sun); }
@media (hover: none) { .gallery .cap { opacity: 1; transform: none; } }
#lb { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; color: #fff; }
#lb::backdrop { background: rgba(7,7,87,.92); }
#lb figure { margin: 0; text-align: center; }
#lb img { max-width: 92vw; max-height: 80vh; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
#lb figcaption { margin-top: .8rem; font-size: .95rem; }
#lb figcaption b { display: block; font: 800 1.1rem Montserrat, sans-serif; }
#lb figcaption span { color: var(--sun); }
#lb button { position: fixed; border: 0; cursor: pointer; background: var(--sun); color: var(--navy); width: 2.8rem; height: 2.8rem; border-radius: 50%; font: 800 1.4rem/1 Montserrat, sans-serif; }
.lb-x { top: 1rem; right: 1rem; } .lb-p { left: 1rem; top: 50%; } .lb-n { right: 1rem; top: 50%; }

/* phone spacing */
@media (max-width: 40rem) {
  body { font-size: 17px; }
  .site-header .wrap { padding-top: .7rem; padding-bottom: .7rem; gap: .5rem 1rem; }
  .brand { font-size: 1.3rem; } 
  .site-header nav { gap: .2rem 1.2rem; font-size: .8rem; width: 100%; }
  .page-hero { padding: 1.4rem 0 2.4rem; }
  .hero { padding: 2.5rem 0 calc(2rem + 46px); }
  h1 { font-size: clamp(2.3rem, 13vw, 3.4rem); }
  .band { padding: 1.6rem 0 1.8rem; }
  
}

.photos { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.photos.row2 { margin: 1rem auto 0; max-width: 40rem; grid-template-columns: 1.5fr .667fr; }
.photos li { margin: 0; }
.photos img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); box-shadow: 0 5px 0 rgba(7,7,87,.12); }
@media (max-width: 40rem) { .photos, .photos.row2 { grid-template-columns: 1fr; } }
.band[id] { scroll-margin-top: 5rem; }