/* photos album: palette of colour families → scrolling grid → one photo per snap page.
   The backdrop keeps the chosen colour the whole way through. */
@property --base { syntax: '<color>'; inherits: true; initial-value: #0b0b0b; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: #2a2826; }

body.album-page { overflow: hidden; height: 100dvh; display: flex; flex-direction: column; }
body.album-page .nav { position: relative; flex: none; background: transparent; border-bottom-color: color-mix(in srgb, var(--glow) 35%, #2a2826); transition: border-color .9s; }

.album-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--glow) 34%, transparent), transparent 72%),
    radial-gradient(120% 90% at 50% 120%, color-mix(in srgb, var(--glow) 18%, transparent), transparent 60%),
    var(--base);
  transition: --base .9s ease, --glow .9s ease;
}
/* film grain keeps big flat colour fields from looking digital */
.album-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.album { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.round { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.85); color: #fff; font-size: 20px; transition: background .2s, color .2s, opacity .2s, transform .2s; }
.round:hover:not(:disabled) { background: #fff; color: #0b0b0b; transform: scale(1.06); }

/* palette: nine slots; colours with photos show a fanned stack of them */
.palette-wrap { height: 100%; display: grid; place-items: center; padding: 3vh 20px 4vh; }
.palette { --size: min(88vw, calc(100dvh - 190px), 640px); width: var(--size); height: var(--size); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: clamp(10px, 1.8vw, 18px); }
.swatch { position: relative; overflow: hidden; border-radius: 18px; background: radial-gradient(120% 120% at 25% 15%, var(--b), var(--a) 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 24px 50px -28px rgba(0,0,0,.9); transition: transform .35s cubic-bezier(.2,1.2,.4,1), box-shadow .35s; isolation: isolate; }
.swatch::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%); background-size: 250% 100%; background-position: 100% 0; transition: background-position .8s ease; z-index: 2; pointer-events: none; }
.swatch:hover { transform: translateY(-4px) scale(1.03); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 30px 60px -24px color-mix(in srgb, var(--b) 60%, #000); z-index: 2; }
.swatch:hover::after { background-position: 0% 0; }
.slot-empty { border-radius: 18px; border: 2px dashed rgba(255,255,255,.08); }
.swatch .n { position: absolute; left: 12px; bottom: 10px; z-index: 3; font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.swatch .peek { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 1; }
/* --o is the card's offset from the middle of the stack (-1, 0, 1); hovering fans the stack wider */
.swatch .peek img { grid-area: 1 / 1; width: 42%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; border: 3px solid #f3f1ec; box-shadow: 0 10px 24px -8px rgba(0,0,0,.7); translate: calc(var(--o) * 16%) 4%; rotate: calc(var(--o) * 6deg); transition: translate .45s cubic-bezier(.2,1.3,.4,1), rotate .45s cubic-bezier(.2,1.3,.4,1); }
.swatch:hover .peek img { translate: calc(var(--o) * 30%) 0; rotate: calc(var(--o) * 10deg); }
.flood { position: fixed; z-index: 30; border-radius: 18px; background: radial-gradient(120% 120% at 25% 15%, var(--b), var(--a) 70%); pointer-events: none; }

/* grid: three columns that keep scrolling; landscapes take two cells */
.gscroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-block: 84px calc(40px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); scrollbar-width: thin; transition: opacity .35s; }
.gbox { --g: clamp(6px, 1.2vw, 14px); max-width: 1100px; margin: 0 auto; container-type: inline-size; }
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100cqi - 2 * var(--g)) / 3); grid-auto-flow: dense; gap: var(--g); }
.cellp { position: relative; display: block; width: 100%; height: 100%; padding: 0; overflow: hidden; border-radius: clamp(6px, 1vw, 12px); background: color-mix(in srgb, var(--glow) 22%, #000); cursor: zoom-in; opacity: 0; }
.cellp.wide { grid-column: span 2; }
.cellp img { width: 100%; height: 100%; object-fit: cover; display: block; transition: scale .6s cubic-bezier(.2,.9,.3,1), filter .4s; user-select: none; -webkit-user-drag: none; }
.cellp:hover img { scale: 1.05; }
.cellp:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* viewer: one photo per snap page, on every screen */
.viewer { position: absolute; inset: 0; z-index: 4; }
.pages { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.pages::-webkit-scrollbar { display: none; }
.page { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; padding: 80px max(20px, 6vw) calc(24px + env(safe-area-inset-bottom, 0px)); }
.ph { position: relative; margin: 0; overflow: hidden; border-radius: 14px; background: color-mix(in srgb, var(--glow) 20%, #000); box-shadow: 0 40px 80px -36px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.06); }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.rail { position: absolute; right: max(10px, env(safe-area-inset-right, 0px)); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 7px; }
.rail i { width: 4px; height: 14px; border-radius: 99px; background: rgba(255,255,255,.25); transition: background .4s, height .4s; }
.rail i.on { height: 30px; background: var(--orange); }

/* back: a chunky slab button with a heavy arrow, pinned top-left over the grid and viewer */
.feed-top { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); top: 16px; z-index: 6; }
.back { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 14px; border-radius: 14px; border: var(--rule) solid var(--ink); background: var(--paper); color: var(--ink); font-family: var(--f-mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; box-shadow: 4px 4px 0 var(--orange); transition: transform .12s, box-shadow .12s; }
.back svg { width: 22px; height: 22px; }
.back:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--orange); }
.back:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--orange); }
body.album-light .back { box-shadow: 4px 4px 0 var(--ink); }
body.album-light .back:hover { box-shadow: 6px 6px 0 var(--ink); }
.back:focus-visible { outline: var(--rule) solid var(--orange); outline-offset: 3px; }

/* light backdrop (the white feed): everything drawn in white switches to ink */
.round, .rail i { transition: color .6s, border-color .6s, background-color .6s, box-shadow .6s; }
body.album-light { color: var(--ink); }
body.album-light .nav { border-bottom-color: color-mix(in srgb, var(--ink) 22%, transparent); }
body.album-light .tabs { border-color: var(--ink); }
body.album-light .tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
body.album-light .round { border-color: var(--ink); color: var(--ink); background: rgba(255,255,255,.55); }
body.album-light .round:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
body.album-light .rail i { background: rgba(20,19,18,.2); }
body.album-light .rail i.on { background: var(--orange); }
body.album-light .ph { box-shadow: 0 40px 80px -40px rgba(30,40,60,.45), 0 0 0 1px rgba(20,19,18,.08); }
body.album-light .cellp { background: rgba(20,19,18,.06); }
body.album-light .album-bg::after { opacity: .04; }