/* ==========================================================================
   AWOOGA — Photo Albums (public)
   --------------------------------------------------------------------------
   A deliberately DIFFERENT, premium feel from the Build gallery: deep navy
   leather, warm wood shelf, gold-foil titles, and a flip-through album viewer.
   Build = clean grid + filters. Albums = a shelf you pull books off and turn
   the pages of. The two should not look alike.
   ========================================================================== */

.albums-page { background-color: #0a1a2c; }
.albums-page main { background: transparent; }

/* Several blocks below set display: (grid/flex), which would otherwise outrank
   the UA `[hidden]{display:none}` rule and leave "hidden" panels visible (e.g.
   the no-JS fallback list showing under the JS shelf). Make hidden win. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- hero --- */
.alb-hero {
  position: relative;
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(201,162,39,.22), transparent 60%),
    linear-gradient(180deg, #0c2034 0%, #0a1a2c 60%, #081521 100%);
  padding: clamp(3.5rem, 8vw, 7rem) 0 clamp(4rem, 9vw, 8rem);
}
.alb-hero__sea {
  position: absolute; inset: auto 0 0 0; height: 42%;
  background:
    repeating-linear-gradient(115deg, rgba(247,241,227,.04) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, transparent, rgba(29,77,120,.35));
  mask-image: linear-gradient(180deg, transparent, #000 70%);
  pointer-events: none;
}
.alb-hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.alb-hero h1 { color: var(--cream); font-size: clamp(2.3rem, 6vw, 4.4rem); margin-bottom: .5rem; }
.alb-hero h1 em { color: var(--brass-lt); font-style: italic; }
.alb-hero .eyebrow { color: var(--brass-lt); }
.alb-hero .lead { color: rgba(247,241,227,.86); }
.alb-hero .lead strong { color: var(--cream); }
.alb-hero__stat { color: rgba(247,241,227,.6); font-size: .92rem; letter-spacing: .02em; }
.alb-hero__cta { margin-top: 1.4rem; }
.alb-hero__rope {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background:
    repeating-linear-gradient(90deg, var(--brass) 0 14px, var(--wood-dk) 14px 28px);
  opacity: .5;
}

/* The decorative leather photo album in the hero.
   A closed, premium album seen at a slight three-quarter angle: a tooled
   navy-leather cover with an embossed gold double-frame and corner flourishes,
   a real fore-edge stack of pages down the right side, and a dark spine on the
   left. The whole book is tilted as one rigid object (a single perspective
   transform on the container) so the cover and the page block share the same
   vanishing point and read as one solid, premium volume — rather than two flat
   planes that fight each other. */
.alb-hero__book {
  position: relative; justify-self: center; width: min(300px, 70vw); aspect-ratio: 4/5;
  filter: drop-shadow(0 36px 48px rgba(0,0,0,.55));
  animation: alb-book-float 9s var(--ease) infinite;
}
@keyframes alb-book-float {
  0%, 100% { transform: perspective(1700px) rotateY(-13deg) rotateX(3deg) translateY(0); }
  50%      { transform: perspective(1700px) rotateY(-10deg) rotateX(3deg) translateY(-9px); }
}

/* The page block sits a touch larger than the cover on the right and bottom and
   one layer behind it, so a clean fore-edge of stacked sheets peeks out exactly
   where a closed book's pages would. The fine vertical hairlines read as the
   edges of individual sheets; the warm cream gradient gives the stack a little
   bulge and roundness instead of a flat slab. */
.alb-hero__book-pages {
  position: absolute; top: 2.5%; left: 5%; right: -3.5%; bottom: -3%;
  z-index: 1;
  border-radius: 2px 7px 11px 7px;
  background:
    /* individual page edges along the fore-edge */
    repeating-linear-gradient(90deg, rgba(120,94,52,.28) 0 1px, transparent 1px 2.5px),
    /* a few horizontal page edges where the bottom of the stack shows */
    repeating-linear-gradient(0deg, rgba(120,94,52,.14) 0 1px, transparent 1px 5px),
    /* warm rounding of the stack: brighter in the middle, shaded at the edges */
    linear-gradient(180deg, #fffdf6 0%, #f1e7cf 45%, #ddccab 80%, #c9b48b 100%);
  box-shadow: inset 0 0 0 1px rgba(120,94,52,.18), inset -2px 0 4px rgba(120,94,52,.22);
}

.alb-hero__book-cover {
  position: absolute; inset: 0; z-index: 2; border-radius: 4px 12px 12px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
  /* Layered navy leather: a soft top-edge gloss, a corner sheen, the faintest
     grain, then the deep two-tone leather body. */
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(150% 130% at 0% 0%, rgba(255,255,255,.06), transparent 42%),
    repeating-linear-gradient(58deg, rgba(255,255,255,.018) 0 2px, transparent 2px 5px),
    linear-gradient(135deg, #1a3a59 0%, #11263e 60%, #0b1d31 100%);
  /* Dark, slightly raised spine down the left edge. */
  border-left: 7px solid #07131f;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 9px 0 14px -8px rgba(255,255,255,.10),
    inset -10px 0 22px -6px rgba(0,0,0,.5);
}
/* Engraved gold double-frame with little corner flourishes, debossed into the
   leather. */
.alb-hero__book-cover::before {
  content: ""; position: absolute; inset: 8%;
  border: 1.5px solid rgba(201,162,39,.7);
  border-radius: 3px;
  box-shadow:
    0 0 0 4px transparent,
    inset 0 0 0 5px transparent,
    inset 0 0 0 6px rgba(201,162,39,.32),
    0 1px 0 rgba(255,255,255,.10),
    inset 0 1px 2px rgba(0,0,0,.35);
}
/* A thin brass rule just inside the spine, the way a bound album is tooled. */
.alb-hero__book-cover::after {
  content: ""; position: absolute; left: 4.5%; top: 6%; bottom: 6%; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(227,195,90,.6) 18%, rgba(227,195,90,.6) 82%, transparent);
  box-shadow: 0 0 4px rgba(227,195,90,.4);
}
/* A soft brass halo breathing behind the mascot art, for a little extra shine. */
.alb-hero__book-glow {
  position: absolute; inset: -15%; z-index: 1;
  background: radial-gradient(45% 45% at 50% 48%, rgba(227,195,90,.5), transparent 70%);
  filter: blur(10px);
  animation: alb-glow-pulse 4.5s var(--ease) infinite;
}
@keyframes alb-glow-pulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.08); }
}
.alb-hero__book-art {
  position: relative; z-index: 2; width: 70%; max-width: 220px; height: auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.5));
  animation: alb-art-bob 7s var(--ease) infinite;
}
@keyframes alb-art-bob {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-6px) rotate(1.5deg); }
}
/* A few twinkling foil sparkles scattered around the artwork. */
.alb-hero__book-spark {
  position: absolute; z-index: 3; color: var(--brass-lt); font-size: .8rem; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(227,195,90,.85));
  animation: alb-spark-twinkle 2.6s ease-in-out infinite;
}
.alb-hero__book-spark--a { top: 13%; left: 12%; animation-delay: 0s; }
.alb-hero__book-spark--b { top: 18%; right: 13%; font-size: .55rem; animation-delay: .8s; }
.alb-hero__book-spark--c { bottom: 16%; left: 16%; font-size: .6rem; animation-delay: 1.5s; }
@keyframes alb-spark-twinkle {
  0%, 100% { opacity: .2; transform: scale(.7); }
  50%      { opacity: 1; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .alb-hero__book,
  .alb-hero__book-cover,
  .alb-hero__book-art,
  .alb-hero__book-glow,
  .alb-hero__book-spark { animation: none; }
  .alb-hero__book { transform: perspective(1700px) rotateY(-13deg) rotateX(3deg); }
}
@media (max-width: 760px) {
  .alb-hero__inner { grid-template-columns: 1fr; }
  .alb-hero__book { display: none; }
}

/* --------------------------------------------------------------- shelf --- */
.alb-shelf-section {
  background:
    linear-gradient(180deg, #081521 0%, #0a1a2c 100%);
}
.alb-shelf-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
}
.alb-shelf-head .eyebrow { color: var(--brass-lt); }
.alb-shelf-head .section-title { color: var(--cream); }
.alb-sort { display: inline-flex; align-items: center; gap: .55rem; color: rgba(247,241,227,.7); }
.alb-sort select {
  font-family: inherit; font-size: .92rem; padding: .5rem .8rem; border-radius: 999px;
  border: 1px solid rgba(201,162,39,.45); background: #0c2034; color: var(--cream);
}

.alb-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 2.5vw, 2rem);
}

/* Each album = a leather book standing on a wooden shelf rail. */
.alb-book-card {
  position: relative; display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0 0 26px; cursor: pointer;
  color: var(--cream); font: inherit;
}
.alb-book-card__shelf {
  position: absolute; left: -6%; right: -6%; bottom: 0; height: 22px; border-radius: 3px;
  background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dk) 65%, #5e3c1f 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
.alb-book-card__cover {
  display: block; /* it's a <span> — needs to be a block for aspect-ratio to size it */
  position: relative; aspect-ratio: 3/4; border-radius: 4px 12px 12px 4px; overflow: hidden;
  border-left: 7px solid #06121d;
  box-shadow:
    0 22px 40px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(201,162,39,.35),
    inset 0 0 60px rgba(0,0,0,.45);
  transform-origin: bottom center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  background: linear-gradient(135deg, #163d61, #0c2034 75%);
}
.alb-book-card__cover img,
.alb-book-card__cover video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.92) brightness(.78);
  transition: filter .4s var(--ease), transform .6s var(--ease);
}
.alb-book-card__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  background-size: 250% 100%; background-position: 120% 0;
  transition: background-position .8s var(--ease);
}
.alb-book-card__plate {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  padding: .7rem .85rem; border-radius: 8px;
  background: linear-gradient(180deg, rgba(8,18,29,.35), rgba(8,18,29,.82));
  border: 1px solid rgba(201,162,39,.4);
  backdrop-filter: blur(2px);
}
.alb-book-card__title {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; line-height: 1.15;
  color: var(--brass-lt); margin: 0; text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.alb-book-card__date { display: block; font-size: .78rem; color: rgba(247,241,227,.7); margin: .15rem 0 0; }
.alb-book-card__badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; gap: .35rem; }
.alb-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 600; padding: .25rem .55rem; border-radius: 999px;
  background: rgba(8,18,29,.78); color: var(--cream); border: 1px solid rgba(247,241,227,.18);
}
.alb-chip--event { background: var(--brass); color: var(--navy-900); border-color: transparent; }
.alb-chip--count { background: rgba(8,18,29,.78); }
.alb-chip--video { background: var(--red); color: #fff; border-color: transparent; }

.alb-book-card:hover .alb-book-card__cover,
.alb-book-card:focus-visible .alb-book-card__cover {
  transform: translateY(-10px) rotateZ(-1.2deg) scale(1.02);
  box-shadow: 0 34px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(201,162,39,.6);
}
.alb-book-card:hover .alb-book-card__cover img,
.alb-book-card:focus-visible .alb-book-card__cover img {
  filter: saturate(1.05) brightness(.92); transform: scale(1.06);
}
.alb-book-card:hover .alb-book-card__sheen { background-position: -120% 0; }
.alb-book-card__desc {
  margin: .8rem 2px 0; font-size: .9rem; color: rgba(247,241,227,.72); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alb-shelf-empty { color: rgba(247,241,227,.7); text-align: center; padding: 3rem 0; }

/* No-JS / crawlable fallback list. */
.alb-fallback { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.5rem; }
.alb-fallback__item { display: flex; gap: 1rem; color: var(--cream); }
.alb-fallback__item img { width: 120px; height: 150px; object-fit: cover; border-radius: 6px; flex: none; }
.alb-fallback__item h3 { color: var(--brass-lt); margin: 0 0 .2rem; }

/* -------------------------------------------------------------- viewer --- */
.alb-viewer { position: fixed; inset: 0; z-index: 200; display: flex; }
.alb-viewer[hidden] { display: none; }
.alb-viewer__backdrop {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 0, rgba(12,32,52,.85), rgba(4,10,17,.96));
  backdrop-filter: blur(6px);
}
.alb-viewer__shell {
  position: relative; z-index: 2; margin: auto; width: min(1180px, 96vw);
  /* vh is a fallback for browsers without dvh support; dvh tracks the *visible*
     viewport so the shell never runs under a mobile browser's address/tab bar
     and gets the bottom (the page-turn counter) clipped off-screen. */
  height: min(94vh, 900px);
  height: min(94dvh, 900px);
  display: flex; flex-direction: column; min-height: 0;
  background:
    radial-gradient(150% 90% at 50% -12%, rgba(201,162,39,.12), transparent 55%),
    linear-gradient(180deg, #123150 0%, #0c2238 46%, #081826 100%);
  border: 1px solid rgba(201,162,39,.45); border-radius: 18px; overflow: hidden;
  box-shadow:
    0 44px 120px rgba(0,0,0,.62),
    0 0 0 1px rgba(201,162,39,.10),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation: alb-pop .4s var(--ease) both;
}
@keyframes alb-pop { from { opacity: 0; transform: scale(.96) translateY(12px); } to { opacity: 1; transform: none; } }
.alb-viewer__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1.3rem; color: var(--cream); flex-wrap: wrap;
  border-bottom: 1px solid rgba(201,162,39,.28);
  background:
    linear-gradient(180deg, rgba(18,42,66,.6), rgba(8,18,29,.55));
  box-shadow: 0 1px 0 rgba(201,162,39,.12);
}
.alb-viewer__title { color: var(--brass-lt); margin: 0; font-size: 1.4rem; font-family: var(--font-display); letter-spacing: .01em; }
.alb-viewer__sub { margin: .15rem 0 0; font-size: .86rem; color: rgba(247,241,227,.72); }
.alb-viewer__sub a { color: var(--brass-lt); text-decoration: underline; }
.alb-viewer__tools { display: flex; align-items: center; gap: .8rem; }
.alb-viewer__modes { display: inline-flex; background: rgba(8,18,29,.6); border-radius: 999px; padding: 3px; border: 1px solid rgba(201,162,39,.25); }
.alb-mode {
  border: 0; background: none; color: rgba(247,241,227,.75); font: inherit; font-size: .85rem;
  padding: .4rem .85rem; border-radius: 999px; transition: background-color .2s, color .2s;
}
.alb-mode.is-active { background: var(--brass); color: var(--navy-900); font-weight: 600; }
.alb-viewer__x { border: 0; background: none; color: var(--cream); font-size: 1.8rem; line-height: 1; padding: 0 .3rem; }
.alb-viewer__x:hover { color: var(--brass-lt); }

/* FLIP MODE -------------------------------------------------------------- */
.alb-flip {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 3vw, 2.4rem); min-height: 0; overflow: hidden;
  background:
    radial-gradient(120% 120% at 50% 0, rgba(201,162,39,.06), transparent 55%);
}
.alb-flip[hidden] { display: none; }
.alb-book {
  position: relative; height: 100%; aspect-ratio: 3/2; max-width: 100%;
  min-height: 0; min-width: 0;
  perspective: 2600px;
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 720px) { .alb-book { aspect-ratio: 3/4; } }

/* A spread = left + right page, bound at the center. The thin brass ring and
   warm under-glow read as gilded page edges on a finely bound album. */
.alb-spread {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr;
  border-radius: 7px; overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(201,162,39,.45),
    0 40px 80px rgba(0,0,0,.6),
    0 6px 18px rgba(0,0,0,.4);
  background: var(--paper);
  transform-style: preserve-3d;
}
.alb-spread::after { /* center gutter shadow */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 60px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.22) 45%, rgba(0,0,0,.22) 55%, transparent);
  pointer-events: none; z-index: 4;
}
@media (max-width: 720px) {
  .alb-spread { grid-template-columns: 1fr; }
  .alb-spread::after { display: none; }
}
.alb-leaf {
  position: relative; padding: clamp(.7rem, 1.7vw, 1.2rem);
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  background:
    radial-gradient(120% 90% at 18% 8%, rgba(201,162,39,.05), transparent 45%),
    linear-gradient(180deg, #fdfaf3 0%, #f6efe0 100%);
}
.alb-leaf::after { /* soft page vignette for depth */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 44px rgba(120,94,52,.07);
}
.alb-leaf:first-child { box-shadow: inset -22px 0 30px -22px rgba(0,0,0,.5); }
.alb-leaf:last-child { box-shadow: inset 22px 0 30px -22px rgba(0,0,0,.5); }
@media (max-width: 720px) { .alb-leaf:nth-child(2) { display: none; } } /* one page at a time on phones */

/* A photo mounted on the page like a gallery print: warm rag-paper mat,
   layered drop shadow, and a hairline inner keyline for a framed feel. */
.alb-mount {
  position: relative; z-index: 1; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #ffffff, #fbf6ea); padding: 13px; border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 14px 30px rgba(12,32,52,.22),
    0 3px 8px rgba(12,32,52,.16);
}
.alb-mount::before { /* faint keyline just inside the mat */
  content: ""; position: absolute; inset: 7px; border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(12,32,52,.07); pointer-events: none; z-index: 3;
}
.alb-mount__media { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; border-radius: 2px; }
.alb-mount__media--video { cursor: pointer; }
/* A soft, blurred copy of the photo painted behind the contained print, so a
   portrait shot on a landscape page (or vice-versa) sits on its own colours
   instead of dead white margins. Falls back to the white mount when there's
   no still (e.g. a poster-less video). */
.alb-mount__fill {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  filter: blur(16px) saturate(1.15) brightness(.97);
  transform: scale(1.12); opacity: .5;
}
.alb-mount img, .alb-mount video { position: relative; z-index: 1; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 2px; }
.alb-mount__media .alb-mount__play { z-index: 2; }
.alb-mount__corner {
  position: absolute; width: 18px; height: 18px; z-index: 4;
  border: 2px solid rgba(201,162,39,.6);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.alb-mount__corner--tl { top: 2px; left: 2px; border-right: 0; border-bottom: 0; }
.alb-mount__corner--tr { top: 2px; right: 2px; border-left: 0; border-bottom: 0; }
.alb-mount__corner--bl { bottom: 2px; left: 2px; border-right: 0; border-top: 0; }
.alb-mount__corner--br { bottom: 2px; right: 2px; border-left: 0; border-top: 0; }
.alb-mount__play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5;
  background: radial-gradient(circle at 50% 35%, rgba(20,44,70,.92), rgba(8,18,29,.82));
  color: var(--brass-lt); font-size: 1.5rem; padding-left: .25rem;
  border: 2px solid rgba(201,162,39,.7);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 0 0 4px rgba(8,18,29,.5);
}
/* Once the muted preview is rolling we drop the big play badge. */
.alb-mount__media--video.is-playing .alb-mount__play { display: none; }
/* A small "tap for sound" pill while the preview plays silently. */
.alb-mount__sound {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5;
  display: none; align-items: center; gap: .3rem; pointer-events: none; white-space: nowrap;
  padding: .28rem .7rem; border-radius: 999px; font-family: var(--font-sans); font-size: .76rem;
  letter-spacing: .02em; color: var(--cream);
  background: rgba(8,18,29,.66); border: 1px solid rgba(201,162,39,.4); backdrop-filter: blur(3px);
  animation: alb-sound-fade 5.5s var(--ease) forwards;
}
.alb-mount__media--video.is-playing:not(.is-live) .alb-mount__sound { display: inline-flex; }
@keyframes alb-sound-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* A discreet brass "expand to full size" control, top-right of the print. */
.alb-mount__expand {
  position: absolute; top: 8px; right: 8px; z-index: 6; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; cursor: zoom-in;
  border-radius: 9px; font-size: 1.05rem; line-height: 1;
  color: var(--cream); background: rgba(8,18,29,.62);
  border: 1px solid rgba(201,162,39,.45); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .25s var(--ease), background-color .2s, color .2s;
}
.alb-mount__media--video:hover .alb-mount__expand,
.alb-mount__expand:focus-visible { opacity: 1; }
.alb-mount__expand:hover { background: var(--brass); color: var(--navy-900); }
@media (hover: none) { .alb-mount__expand { opacity: 1; } } /* touch: always reachable */
.alb-caption {
  margin: .6rem 4px 0; font-family: "Patrick Hand", var(--font-sans); font-size: 1.05rem;
  color: #33424d; text-align: center; line-height: 1.35;
  flex: none; max-height: 4.2em; overflow: hidden;
}
.alb-leaf__empty {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #9aa7b0; font-family: "Patrick Hand", var(--font-sans); font-size: 1.2rem;
}
.alb-leaf__cover { /* the album's "title page" leaf */
  align-items: center; justify-content: center; text-align: center; gap: .4rem;
  background: linear-gradient(135deg, #14324f, #0c2034 80%); color: var(--cream);
}
.alb-leaf__cover h3 { color: var(--brass-lt); font-size: 1.8rem; margin: 0; }
.alb-leaf__cover p { color: rgba(247,241,227,.8); margin: .3rem 0 0; max-width: 32ch; }

/* page turn animation */
.alb-spread.is-turning-next { animation: alb-turn-next .62s var(--ease) both; transform-origin: left center; }
.alb-spread.is-turning-prev { animation: alb-turn-prev .62s var(--ease) both; transform-origin: right center; }
@keyframes alb-turn-next {
  0% { transform: rotateY(0); opacity: 1; }
  100% { transform: rotateY(-105deg); opacity: 0; }
}
@keyframes alb-turn-prev {
  0% { transform: rotateY(0); opacity: 1; }
  100% { transform: rotateY(105deg); opacity: 0; }
}
.alb-spread.is-entering-next { animation: alb-enter-next .62s var(--ease) both; transform-origin: right center; }
.alb-spread.is-entering-prev { animation: alb-enter-prev .62s var(--ease) both; transform-origin: left center; }
@keyframes alb-enter-next {
  0% { transform: rotateY(100deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}
@keyframes alb-enter-prev {
  0% { transform: rotateY(-100deg); opacity: 0; }
  100% { transform: rotateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .alb-spread.is-turning-next, .alb-spread.is-turning-prev,
  .alb-spread.is-entering-next, .alb-spread.is-entering-prev { animation: none; }
}

.alb-flip__nav {
  position: relative; z-index: 5; flex: none; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(201,162,39,.45); background: rgba(8,18,29,.65); color: var(--brass-lt);
  font-size: 1.8rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background-color .2s, transform .2s;
}
.alb-flip__nav:hover { background: var(--brass); color: var(--navy-900); transform: scale(1.06); }
.alb-flip__nav:disabled { opacity: .3; cursor: default; transform: none; }
.alb-flip__counter {
  position: absolute; bottom: .7rem; left: 50%; transform: translateX(-50%);
  margin: 0; font-size: .76rem; color: var(--brass-lt); letter-spacing: .12em; text-transform: uppercase;
  padding: .26rem .8rem; border-radius: 999px;
  background: rgba(8,18,29,.6); border: 1px solid rgba(201,162,39,.32); backdrop-filter: blur(3px);
}

/* GRID / CONTACT SHEET MODE --------------------------------------------- */
.alb-grid {
  flex: 1; overflow-y: auto; padding: clamp(1rem, 2.5vw, 2rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.2rem;
  align-content: start;
}
.alb-grid[hidden] { display: none; }
.alb-card {
  background: #fff; border-radius: 6px; overflow: hidden; cursor: zoom-in;
  box-shadow: 0 10px 24px rgba(0,0,0,.35); border: 6px solid #fff;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.alb-card:hover { transform: translateY(-4px) rotate(.5deg); box-shadow: 0 18px 34px rgba(0,0,0,.45); }
.alb-card__media { position: relative; aspect-ratio: 1; background: #0c2034; }
.alb-card__media img, .alb-card__media video { width: 100%; height: 100%; object-fit: cover; }
.alb-card__media .alb-mount__play { width: 44px; height: 44px; font-size: 1rem; }
.alb-card__cap {
  font-family: "Patrick Hand", var(--font-sans); font-size: .95rem; color: #33424d;
  padding: .5rem .55rem .35rem; text-align: center; line-height: 1.3;
}

/* ----------------------------------------------------------- lightbox --- */
.alb-light { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; }
.alb-light[hidden] { display: none; }
.alb-light__backdrop { position: absolute; inset: 0; background: rgba(4,10,17,.94); backdrop-filter: blur(8px); }
/* The photo's own colours, blown up and blurred behind it, so portrait or
   landscape media (and portrait videos) fill the frame on a matched wash
   instead of stark black bars. */
.alb-light__fill {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-size: cover; background-position: center;
  filter: blur(46px) saturate(1.3) brightness(.5);
  transform: scale(1.2); opacity: .9;
  transition: opacity .45s var(--ease);
  /* Slow Ken Burns drift gives the wash a living, breathing feel. The scale
     never drops below the base 1.2 so the blurred edges stay off-screen. */
  animation: alb-kenburns 28s ease-in-out infinite;
}
.alb-light__fill.is-empty { opacity: 0; }
@keyframes alb-kenburns {
  0%   { transform: scale(1.2)  translate3d(0, 0, 0); }
  50%  { transform: scale(1.34) translate3d(-2.5%, -1.5%, 0); }
  100% { transform: scale(1.2)  translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .alb-light__fill { animation: none; transform: scale(1.2); }
}
.alb-light__fig { position: relative; z-index: 2; margin: 0; max-width: 92vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.alb-light__stage { display: flex; align-items: center; justify-content: center; max-width: 92vw; max-height: 80vh; }
.alb-light__stage img, .alb-light__stage video {
  max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7); background: #000;
  transition: opacity .35s var(--ease);
}
/* While the full-size media decodes, hold a softly shimmering placeholder so
   the frame never flashes empty on a slow connection. */
.alb-light__stage.is-loading {
  min-width: min(70vw, 52vh); min-height: 52vh; border-radius: 10px;
  background:
    linear-gradient(100deg, rgba(247,241,227,.05) 28%, rgba(247,241,227,.16) 50%, rgba(247,241,227,.05) 72%);
  background-size: 220% 100%;
  animation: alb-shimmer 1.25s linear infinite;
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.18);
}
.alb-light__stage.is-loading img, .alb-light__stage.is-loading video { opacity: 0; }
@keyframes alb-shimmer {
  0%   { background-position: 220% 0; }
  100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .alb-light__stage.is-loading { animation: none; }
}
/* Let each orientation claim the room it needs: tall media uses more height,
   wide media more width. */
.alb-light__stage.is-portrait img, .alb-light__stage.is-portrait video { max-height: 86vh; }
.alb-light__stage.is-landscape img, .alb-light__stage.is-landscape video { max-width: 94vw; }
.alb-light__count {
  margin: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(247,241,227,.55);
}
.alb-light__count:empty { display: none; }
.alb-light__cap {
  font-family: "Patrick Hand", var(--font-sans); font-size: 1.2rem; color: var(--cream);
  text-align: center; max-width: 60ch;
}
.alb-light__x { position: absolute; top: 1rem; right: 1.2rem; z-index: 3; border: 0; background: none; color: var(--cream); font-size: 2.2rem; line-height: 1; }
.alb-light__x:hover { color: var(--brass-lt); }
.alb-light__nav {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(247,241,227,.3);
  background: rgba(8,18,29,.6); color: var(--cream); font-size: 2rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background-color .2s;
}
.alb-light__nav:hover { background: var(--brass); color: var(--navy-900); }
.alb-light__nav--prev { left: max(1rem, 3vw); }
.alb-light__nav--next { right: max(1rem, 3vw); }
@media (max-width: 600px) { .alb-light__nav { width: 44px; height: 44px; font-size: 1.5rem; } }

body.alb-locked { overflow: hidden; }