/*
 * Aquarium Zone inner-page system.
 * Same tokens and components as the gallery, contact and catalogue pages,
 * shared here so information, policy and brand pages stay in step.
 * Scope: <main class="az-page">.
 */
.az-page{--ink:#09141c;--blue:#38bdf8;--blue-deep:#027ba9;--paper:#f3f3ee;--line:#bac4c8;--muted:#46545d;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
.az-page *{box-sizing:border-box}
.az-page h1,.az-page h2,.az-page h3,.az-page p,.az-page ul,.az-page ol,.az-page figure{margin:0}
.az-page a{color:inherit;text-decoration:none}
.az-page [id]{scroll-margin-top:100px}
.az-page .wrap{width:min(1500px,100%);margin:auto;padding-inline:clamp(22px,4.5vw,80px)}
.az-page .eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;line-height:1.6}
.az-page .blue{color:var(--blue)}
.az-page .display{font-weight:900;letter-spacing:-.065em;line-height:.94;text-transform:uppercase}
.az-page .large{font-size:clamp(42px,5.6vw,88px)}
.az-page .copy{font-size:clamp(16px,1.3vw,19px);line-height:1.75;max-width:580px}
.az-page .copy + .copy{margin-top:20px}
.az-page .muted{color:var(--muted)}
.az-page .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.az-page .button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:52px;padding:15px 23px;background:var(--blue);color:var(--ink);font-size:14px;font-weight:700;border:1px solid transparent;cursor:pointer}
.az-page .button.secondary{background:transparent;border-color:currentColor;color:inherit}
.az-page .button:hover{background:#bae6fd;color:var(--ink)}
.az-page .button.dark{background:var(--ink);color:white}
.az-page .button.dark:hover{background:var(--blue-deep);color:white}
.az-page a:focus-visible,.az-page summary:focus-visible,.az-page button:focus-visible{outline:3px solid #0284c7;outline-offset:5px}
.az-page .photo a:focus-visible,.az-page .mosaic a:focus-visible,.az-page .dark a:focus-visible{outline-color:#7dd3fc}
.az-page-skip{position:fixed;left:20px;top:-100px;z-index:9999;background:#fff;color:#09141c;padding:15px 22px}
.az-page-skip:focus{top:20px}

/* Photographic sections */
.az-page .photo{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:white}
.az-page .photo > .backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.az-page .photo::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(4,12,19,.52),rgba(4,12,19,.04) 85%),linear-gradient(0deg,rgba(4,12,19,.28),transparent 65%)}
.az-page .photo > .wrap{position:relative;z-index:2}
.az-page .hero{min-height:720px;min-height:80svh;display:flex;align-items:end}
.az-page .hero .wrap{padding-top:155px;padding-bottom:48px}
.az-page h1{font-size:clamp(48px,8vw,124px);margin:30px 0 28px;max-width:1150px;overflow-wrap:anywhere}
.az-page h1 span{color:var(--blue)}
.az-page .hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}
.az-page .hero-bottom .copy{max-width:610px}
.az-page .hero-bottom .actions{flex-shrink:0;margin-top:0}
.az-page .back-link{display:inline-block;font-size:14px;text-decoration:underline;text-underline-offset:5px;margin-bottom:24px}
.az-page .hero-facts{display:flex;flex-wrap:wrap;gap:12px 40px;list-style:none;padding:18px 0 0;margin-top:42px;border-top:1px solid #ffffff50;font-size:12px;letter-spacing:.08em;color:#d3e0e7}
.az-page .hero-facts strong{color:white;font-weight:700}
.az-page .compact{min-height:0;display:block;padding-top:clamp(8rem,14vh,10rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.az-page .compact .wrap{padding-top:0;padding-bottom:0}
.az-page .compact h1{font-size:clamp(46px,7vw,110px)}
.az-page .compact .copy{color:#d4e1e7}
.az-page .guidance{padding-block:95px}
.az-page .guidance::after{background:linear-gradient(90deg,rgba(4,12,19,.82),rgba(4,12,19,.5))}
.az-page .guidance h2{max-width:880px;margin:22px 0 48px}
.az-page .visit{padding-block:110px}
.az-page .visit::after{background:linear-gradient(90deg,rgba(4,12,19,.7),rgba(4,12,19,.15))}
.az-page .visit h2{font-size:clamp(55px,9vw,140px);max-width:1100px;margin:24px 0 30px}
.az-page .visit .copy{max-width:540px}

/* Strips and headings */
.az-page .stock{background:var(--ink);color:#dce5ea;padding-block:23px}
.az-page .stock .wrap{display:grid;grid-template-columns:150px 1fr;gap:24px}
.az-page .stock p{font-size:13px;line-height:1.7;max-width:1000px}
.az-page .stock a{text-decoration:underline;text-underline-offset:4px}
.az-page .strip{background:var(--blue);color:var(--ink);padding-block:30px}
.az-page .strip-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
.az-page .strip-grid > *{display:block;min-width:0}
.az-page .strip-grid strong{display:block;font-size:clamp(18px,1.7vw,25px);letter-spacing:-.035em;margin-top:10px;overflow-wrap:anywhere}
.az-page .strip-grid a:hover strong{text-decoration:underline;text-underline-offset:5px}
.az-page .intro{padding-block:100px;display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:end}
.az-page .intro h2{margin-top:20px}
.az-page .intro .copy{color:var(--muted)}
.az-page .block{padding-block:80px}
.az-page .block.tight{padding-top:0}
.az-page .white{background:white}
.az-page .section-top{display:flex;align-items:end;justify-content:space-between;gap:25px;padding-block:28px;border-top:1px solid var(--line)}
.az-page .section-top h2{font-size:clamp(27px,3vw,44px);font-weight:800;letter-spacing:-.04em}
.az-page .section-top p{font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.az-page .section-lead{max-width:720px;color:var(--muted);margin-bottom:40px}

/* Numbered editorial rows (replaces icon cards) */
.az-page .rows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;list-style:none;padding:0}
.az-page .rows.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.az-page .rows.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.az-page .rows > *{border-top:1px solid var(--line);padding-top:23px;min-width:0}
.az-page .rows .num{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-deep);margin-bottom:14px}
.az-page .rows h3{font-size:clamp(20px,1.7vw,26px);font-weight:800;letter-spacing:-.035em;line-height:1.15;margin-bottom:12px}
.az-page .rows p{color:var(--muted);line-height:1.7;font-size:15px}
.az-page .rows .summary{color:var(--ink);font-weight:700;margin-bottom:10px}
.az-page .rows .stat{font-size:clamp(46px,5vw,80px);font-weight:900;letter-spacing:-.06em;line-height:1;text-transform:uppercase;margin-bottom:16px}
.az-page .rows.one{grid-template-columns:1fr;gap:0}
.az-page .rows.one > *{padding-block:20px}
.az-page .rows.one > *:last-child{border-bottom:1px solid var(--line)}
.az-page .rows > a{display:flex;flex-direction:column}
.az-page .rows > a .card-action{padding-top:18px}
@media(hover:hover){.az-page .rows > a:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}}
.az-page .rows-after{margin-top:48px}
.az-page .dark{background:var(--ink);color:white}
.az-page :is(.dark,.photo) .rows > *{border-color:#8d9ca8}
.az-page :is(.dark,.photo) .rows .num{color:var(--blue)}
.az-page :is(.dark,.photo) .rows p{color:#dae3e9}
.az-page .dark .copy{color:#d4e1e7}
.az-page .inline-list{display:flex;flex-wrap:wrap;gap:8px 26px;list-style:none;padding:18px 0 0;margin-top:30px;border-top:1px solid var(--line);font-size:14px;font-weight:700}
.az-page .headline{font-size:clamp(32px,3.6vw,56px);font-weight:800;letter-spacing:-.045em;line-height:1.04}

/* Split image + copy */
.az-page .split{display:grid;grid-template-columns:1fr 1fr;background:white}
.az-page .split-image{min-height:600px;position:relative;background:var(--ink);margin:0}
.az-page .split-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.az-page .split-image figcaption{position:absolute;left:1.5rem;bottom:1.5rem;background:rgba(3,13,20,.85);color:white;padding:.55rem .8rem;font-size:11px;letter-spacing:.08em}
.az-page .split-copy{padding:clamp(30px,6vw,95px);align-self:center;min-width:0}
.az-page .split-copy h2{margin:22px 0 28px}
.az-page .split-copy .copy{color:var(--muted)}
.az-page .split.dark,.az-page .split.dark .split-copy{background:var(--ink);color:white}
.az-page .split.dark .split-copy .copy{color:#d4e1e7}
.az-page .split.reverse .split-image{order:2}
.az-page .split.paper,.az-page .split.paper .split-copy{background:var(--paper)}
.az-page .split-image.logo{background:white;display:flex;align-items:center;justify-content:center}
.az-page .split-image.logo img{object-fit:contain;padding:14%}

/* Index lists: topics, highlights and link directories */
.az-page .index-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 30px;list-style:none;padding:0;margin-top:34px}
.az-page .index-list.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.az-page .index-list.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.az-page .index-list li{border-top:1px solid var(--line);font-size:15px;font-weight:700;min-width:0}
.az-page .index-list li:not(:has(> a)){padding:16px 0}
.az-page .index-list li > a{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 0}
.az-page .index-list a[aria-current=page]{color:#03698d}
.az-page .index-list a:hover{text-decoration:underline;text-underline-offset:4px}
.az-page .index-list span[aria-hidden]{color:var(--blue-deep)}
.az-page .dark .index-list li,.az-page .photo .index-list li{border-color:#8d9ca8}
.az-page .dark .index-list span[aria-hidden],.az-page .photo .index-list span[aria-hidden]{color:var(--blue)}
.az-page .more-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:30px}
.az-page .more-links a{font-size:14px;font-weight:700;text-decoration:underline;text-underline-offset:5px}
.az-page .category-nav{background:white;padding-block:55px}
.az-page .category-nav h2{font-size:30px;font-weight:800;letter-spacing:-.04em;margin-bottom:0}
.az-page .category-nav .index-list{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:24px}

/* Photo tiles */
.az-page .mosaic{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.az-page .tile{position:relative;isolation:isolate;display:flex;align-items:end;overflow:hidden;min-height:340px;grid-column:span 4;background:#101e29;color:white}
.az-page .tile:nth-child(1){grid-column:span 7;grid-row:span 2}
.az-page .tile:nth-child(2),.az-page .tile:nth-child(3){grid-column:span 5}
.az-page .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.az-page .tile::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(3,11,17,.98),rgba(3,11,17,.65) 34%,rgba(3,11,17,.05) 75%)}
.az-page .tile-content{padding:clamp(23px,2.5vw,40px);width:100%}
.az-page .tile .number{position:absolute;top:22px;left:25px;font-size:12px;font-weight:700;background:#09141ccc;padding:7px 10px}
.az-page .tile h3{font-size:clamp(26px,2.8vw,42px);font-weight:800;letter-spacing:-.04em;line-height:1.06;padding-right:24px}
.az-page .tile p{font-size:14px;line-height:1.65;margin-top:14px;max-width:470px;color:#e0e6eb}
.az-page .tile .arrow{display:block;color:var(--blue);font-size:25px;margin-top:17px}
.az-page .mosaic.even .tile,.az-page .mosaic.even .tile:nth-child(n){grid-column:span 4;grid-row:auto}
.az-page .mosaic.gallery .tile:nth-child(1){grid-column:span 8;grid-row:span 2}
.az-page .mosaic.gallery .tile:nth-child(n+2){grid-column:span 4;grid-row:auto}
.az-page .mosaic.gallery .tile:nth-child(4){grid-column:span 12;min-height:420px}
.az-page .mosaic.four .tile:nth-child(n){grid-column:span 3;grid-row:auto;min-height:420px}
.az-page .tile.plain::after{display:none}
.az-page .mosaic.gallery .tile:first-child:nth-last-child(-n+2){grid-row:auto}
.az-page .mosaic.gallery .tile:only-child{grid-column:span 12}
@media(hover:hover){.az-page .tile:hover img{transform:scale(1.045)}.az-page a.tile:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}}

/* Profile cards (catalogue-style) */
.az-page .card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 24px}
.az-page .card{display:flex;flex-direction:column;min-width:0;border-bottom:1px solid var(--line);padding-bottom:23px}
.az-page .card-image{aspect-ratio:4/3;overflow:hidden;background:#15252e;position:relative}
.az-page .card-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.az-page .card-image.contain{background:white}
.az-page .card-image.contain img{object-fit:contain;padding:9%}
.az-page .card-tag{position:absolute;left:12px;top:12px;background:#09141ccc;color:white;padding:6px 9px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.az-page .card-label{font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:#3d6477;margin-top:21px!important}
.az-page .card h3{font-size:clamp(22px,2.2vw,32px);font-weight:800;letter-spacing:-.04em;line-height:1.15;margin-top:10px;overflow-wrap:anywhere}
.az-page .card .card-text{font-size:15px;line-height:1.7;color:var(--muted);margin-top:12px}
.az-page .card .scientific{font-size:14px;line-height:1.7;color:var(--muted);font-style:italic;margin-top:10px;overflow-wrap:anywhere}
.az-page .card-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.az-page .card-action{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;font-weight:700;margin-top:auto;padding-top:22px}
.az-page .card-action span{font-size:23px;color:var(--blue-deep)}
.az-page .card.text-card{border-top:3px solid var(--blue-deep);padding-top:2px}
.az-page .empty{border-top:1px solid var(--line);padding-top:30px}
.az-page .empty h3{font-size:28px;font-weight:800;margin-bottom:18px}
@media(hover:hover){.az-page a.card:hover img{transform:scale(1.045)}.az-page a.card:hover h3{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}}

/* Visit details: hours, map, embeds */
.az-page .location-grid,.az-page .two-col{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px}
.az-page .two-col{align-items:start}
.az-page .location-grid h2,.az-page .two-col h2{margin:20px 0 25px}
.az-page address{font-style:normal;font-size:21px;line-height:1.6;margin-bottom:30px}
.az-page .hours{width:100%;border-collapse:collapse;margin-top:20px}
.az-page .hours caption{text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.15em;margin-bottom:17px}
.az-page .hours th,.az-page .hours td{padding:13px 0;border-top:1px solid #c0ccd2;font-size:14px;line-height:1.6}
.az-page .hours th{text-align:left;font-weight:700}
.az-page .hours td{text-align:right;color:var(--muted)}
.az-page .note{font-size:14px;line-height:1.75;margin-top:24px;color:var(--muted)}
.az-page .map{min-height:580px;background:#dce5e9}
.az-page .map iframe,.az-page .embed iframe{display:block;width:100%;height:100%;min-height:580px;border:0}
.az-page .embed{position:relative;background:#101e29;min-height:640px}
.az-page .embed iframe{min-height:640px}
.az-page .embed-label{position:absolute;left:0;bottom:0;padding:18px 22px;background:rgba(9,20,28,.88);color:white;pointer-events:none}
.az-page .embed-label strong{display:block;font-size:20px;letter-spacing:-.03em;margin-top:4px}

/* Long form: FAQs, policies, legal */
.az-page .doc{display:grid;grid-template-columns:minmax(220px,.34fr) 1fr;gap:70px;align-items:start}
.az-page .toc{position:sticky;top:110px}
.az-page .toc .index-list{grid-template-columns:1fr;margin-top:18px}
.az-page .toc .index-list li > a{padding:13px 0;font-size:14px}
.az-page .toc .note{margin-top:28px}
.az-page .doc-group + .doc-group{margin-top:70px}
.az-page .doc-group > h2{font-size:clamp(28px,3vw,44px);font-weight:800;letter-spacing:-.04em;margin:12px 0 12px}
.az-page .doc-group > .copy{color:var(--muted);margin-bottom:26px}
.az-page .faq details{border-top:1px solid var(--line)}
.az-page .faq details:last-child{border-bottom:1px solid var(--line)}
.az-page .faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;cursor:pointer;list-style:none;font-size:clamp(17px,1.4vw,20px);font-weight:700;line-height:1.4}
.az-page .faq summary::-webkit-details-marker{display:none}
.az-page .faq summary::after{content:'+';flex-shrink:0;font-size:26px;font-weight:400;line-height:1;color:var(--blue-deep);transition:transform .25s ease}
.az-page .faq details[open] summary::after{transform:rotate(45deg)}
.az-page .faq details p{max-width:760px;padding:0 0 26px;color:var(--muted);line-height:1.8;font-size:16px}
.az-page .policy article{border-top:1px solid var(--line);padding-block:34px}
.az-page .policy article:last-child{border-bottom:1px solid var(--line)}
.az-page .policy h3{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.15;margin:12px 0 12px}
.az-page .policy .summary{font-weight:700;margin-bottom:12px}
.az-page .policy p:not(.summary):not(.eyebrow){color:var(--muted);line-height:1.8;font-size:17px;max-width:780px}
.az-page .legal{max-width:860px}
.az-page .legal section{border-top:1px solid var(--line);padding-block:32px}
.az-page .legal section:last-child{border-bottom:1px solid var(--line)}
.az-page .legal h2{font-size:clamp(22px,2vw,30px);font-weight:800;letter-spacing:-.035em;margin-bottom:14px}
.az-page .legal p,.az-page .legal li{color:var(--muted);line-height:1.8;font-size:17px}
.az-page .legal p + p,.az-page .legal p + ul{margin-top:12px}
.az-page .legal ul{padding-left:22px}
.az-page .legal li + li{margin-top:6px}
.az-page .legal a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}

@media(min-width:1600px){.az-page .tile{min-height:380px}}
@media(min-width:1700px){.az-page .card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1000px){
  .az-page .hero-bottom{display:block}
  .az-page .hero-bottom .actions{margin-top:26px}
  .az-page .intro{gap:35px}
  .az-page .rows,.az-page .rows.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-page .index-list,.az-page .index-list.four,.az-page .category-nav .index-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-page .tile{min-height:320px}
  .az-page .tile h3{font-size:30px}
  .az-page .mosaic.even .tile:nth-child(n),.az-page .mosaic.gallery .tile:nth-child(n+2){grid-column:span 6}
  .az-page .mosaic.gallery .tile:nth-child(1){grid-column:span 12;grid-row:auto;min-height:420px}
  .az-page .mosaic.four .tile:nth-child(n){grid-column:span 6;min-height:360px}
  .az-page .mosaic.gallery .tile:nth-child(4):last-child{grid-column:span 12}
  .az-page .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .az-page .split-image{min-height:500px}
  .az-page .location-grid,.az-page .two-col,.az-page .doc{gap:35px}
  .az-page .doc{grid-template-columns:1fr}
  .az-page .toc{position:static}
  .az-page .toc .index-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .az-page .hero{min-height:700px;min-height:88svh}
  .az-page .hero .wrap{padding-top:140px;padding-bottom:38px}
  .az-page h1{font-size:clamp(46px,11vw,76px)}
  .az-page .hero .backdrop{object-position:60% center}
  .az-page .hero-facts{gap:8px 24px;margin-top:30px}
  .az-page .compact{min-height:0}
  .az-page .stock .wrap{grid-template-columns:1fr;gap:7px}
  .az-page .strip-grid{grid-template-columns:1fr;gap:23px}
  .az-page .intro{grid-template-columns:1fr;padding-block:64px;gap:28px}
  .az-page .block{padding-block:55px}
  .az-page .section-top{align-items:start;flex-direction:column;gap:10px}
  .az-page .rows,.az-page .rows.two,.az-page .rows.four{grid-template-columns:1fr;gap:28px}
  .az-page .rows.one{gap:0}
  .az-page .index-list,.az-page .index-list.two,.az-page .index-list.four,.az-page .category-nav .index-list,.az-page .toc .index-list{grid-template-columns:1fr}
  .az-page .mosaic{grid-template-columns:1fr;gap:6px}
  .az-page .mosaic .tile,.az-page .mosaic .tile:nth-child(n){grid-column:1;grid-row:auto;min-height:360px}
  .az-page .mosaic .tile:first-child{min-height:430px}
  .az-page .tile h3{font-size:32px}
  .az-page .card-grid{gap:30px 16px}
  .az-page .card h3{font-size:24px}
  .az-page .guidance{padding-block:65px}
  .az-page .guidance h2{margin-bottom:34px}
  .az-page .split{grid-template-columns:1fr}
  .az-page .split.reverse .split-image{order:0}
  .az-page .split-image{min-height:370px}
  .az-page .split-copy{padding:45px 22px 55px}
  .az-page .location-grid,.az-page .two-col{grid-template-columns:1fr}
  .az-page .map,.az-page .map iframe{min-height:420px}
  .az-page .embed,.az-page .embed iframe{min-height:460px}
  .az-page .visit{padding-block:75px}
  .az-page .visit h2{font-size:clamp(48px,11vw,80px)}
  .az-page .category-nav{padding-block:45px}
}
@media(max-width:440px){.az-page .card-grid{grid-template-columns:1fr}.az-page .card h3{font-size:28px}}
@media(prefers-reduced-motion:reduce){.az-page *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.az-page :is(.dark,.photo) .card-action span{color:var(--blue)}
/* Zoom gallery (about page). The track is tall; the stage pins to the screen while
   it scrolls past, and each layer (a full-size box with one photo placed in it)
   scales from the centre, so the middle photo grows to fill the screen and the
   others fly outward. Without JavaScript or with reduced motion it's a still collage. */
.az-page .pgallery{padding-top:100px}
.az-page .pgallery-head{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;align-items:end;margin-bottom:60px}
.az-page .pgallery-head h2{margin-top:20px}
.az-page .pgallery-head .copy{color:var(--muted)}
.az-page .zoom-track{position:relative;height:100vh;height:100svh}
.az-page .zoom-track.is-zooming{height:300vh}
.az-page .zoom-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
/* No will-change here: it makes browsers draw the layer once at its small starting size and stretch it, which pixelates the zoom. */
.az-page .zoom-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.az-page .zoom-photo{position:relative;margin:0;overflow:hidden;background:#15252e}
.az-page .zoom-photo img{display:block;width:100%;height:100%;object-fit:cover}
.az-page .zoom-1 .zoom-photo{width:25vw;height:25vh}
.az-page .zoom-2 .zoom-photo{width:35vw;height:30vh;top:-30vh;left:5vw}
.az-page .zoom-3 .zoom-photo{width:20vw;height:45vh;top:-10vh;left:-25vw}
.az-page .zoom-4 .zoom-photo{width:25vw;height:25vh;left:27.5vw}
.az-page .zoom-5 .zoom-photo{width:20vw;height:25vh;top:27.5vh;left:5vw}
.az-page .zoom-6 .zoom-photo{width:30vw;height:25vh;top:27.5vh;left:-22.5vw}
.az-page .zoom-7 .zoom-photo{width:15vw;height:15vh;top:22.5vh;left:25vw}
.az-page .zoom-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(22px,4.5vw,80px) clamp(40px,8vh,90px);color:white;opacity:0;pointer-events:none;background:linear-gradient(0deg,rgba(4,12,19,.75),rgba(4,12,19,0));padding-top:30vh}
.az-page .zoom-caption .display{margin-top:14px;text-shadow:0 2px 18px rgba(3,12,17,.45)}
.az-page .zoom-track:not(.is-zooming) .zoom-caption{display:none}
@media(max-width:900px){.az-page .pgallery-head{grid-template-columns:1fr;gap:28px;margin-bottom:44px}.az-page .pgallery{padding-top:64px}}
@media(max-width:640px){
  .az-page .zoom-1 .zoom-photo{width:25vw;height:25vh}
  .az-page .zoom-2 .zoom-photo{width:40vw;height:22vh;top:-28vh;left:6vw}
  .az-page .zoom-3 .zoom-photo{width:22vw;height:34vh;top:-6vh;left:-26vw}
  .az-page .zoom-4 .zoom-photo{width:22vw;height:22vh;left:26vw}
  .az-page .zoom-5 .zoom-photo{width:24vw;height:20vh;top:25vh;left:4vw}
  .az-page .zoom-6 .zoom-photo{width:30vw;height:18vh;top:24vh;left:-24vw}
  .az-page .zoom-7 .zoom-photo{width:16vw;height:12vh;top:-31vh;left:-30vw}
}