/* styles.css - every style on the website, in the order the parts appear: the basics, the
   frame (header, footer, clock), the home carousel, Collections and Info, the intro and
   loader, the cursor dot, gallery pages, the photo viewer, the time page, phones, and the
   plain version of each page. */

/* ---- Basics ---- */
:root { color-scheme: dark; } /* the browser's own parts (scrollbars, form controls) are dark too */
* { box-sizing: border-box; } /* sizes include padding and borders, which makes layout simpler */

/* The page never scrolls: everything is placed on one screen, and the carousel and galleries
   move themselves. overscroll-behavior stops the "bounce" and pull-to-refresh on phones. */
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #000; }
/* White Newsreader text on black, 12px by default. The other fonts are only used if
   Newsreader can't load. */
body {
  color: #fff;
  font-family: "Newsreader", "Cormorant Garamond", Georgia, serif;
  font-size: 12px;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; /* thinner, crisper text on Macs */
}
a { color: inherit; text-decoration: none; } /* links look like the text around them */
/* Buttons lose the browser's grey box and look like plain text. */
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* A thin white outline shows what keyboard focus is on (not shown for mouse clicks). */
a:focus-visible, button:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }
img { -webkit-user-drag: none; } /* photos can't be dragged off the page in Safari */
[hidden] { display: none !important; } /* anything marked hidden stays hidden, whatever else applies */
::selection { background: #fff; color: #000; } /* selected text: black on white */

/* The orange dot replaces the normal cursor, and no other cursor ever shows. Without
   JavaScript there's no dot, so the normal cursor stays. */
@media (hover: hover) and (pointer: fine) {
  .js, .js * { cursor: none !important; }
}

/* ---- Projected background: fades and focuses in, softens and fades out.
   Each photo has its own layer; the holder sets how bright they show. ---- */
/* The holder fills the screen behind everything, at 60% brightness; clicks pass through it. */
#bgs { position: fixed; inset: 0; z-index: 0; opacity: .6; pointer-events: none; }
/* Each layer: the photo covering the screen, hidden and blurred until it's switched on. It's
   scaled up a little so the blur's soft edges are off screen. Fading out waits 0.18s. */
.bg {
  position: absolute; inset: 0; background: center / cover no-repeat;
  opacity: 0; filter: blur(22px); transform: scale(1.06);
  transition: opacity .7s ease .18s, filter .7s ease .18s;
}
.bg.on { opacity: 1; filter: none; transition-delay: 0s; } /* fading in starts at once */

/* ---- Frame ---- */
/* The header, footer and clock fade in once the intro is over. */
.fade { transition: opacity 1s, visibility 1s; }
.intro .fade { opacity: 0; visibility: hidden; }
.instant .fade { transition: none; } /* reduced motion: they're simply there */

/* The header across the top: three columns (links, name, empty), lined up on the text's
   baseline. env(safe-area-inset-top) keeps it clear of a phone's notch. */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 24px 0;
}
/* The left-hand column: the menu button (phones only) and the links. Lined up on the
   links' baseline, like the rest of the header. */
.top-left { display: flex; align-items: baseline; }
.top nav { display: flex; gap: 20px; } /* Collections, Info and Contact, side by side */
/* The three-line menu button: three 1px lines, hidden on bigger screens (see Phones below).
   Open, the middle line fades and the other two turn into an X. */
.menu-btn { display: none; position: relative; width: 22px; height: 16px; cursor: pointer; }
.menu-btn i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .4s cubic-bezier(.3, .7, .2, 1), opacity .2s ease; }
.menu-btn i:nth-child(1) { top: 2px; }
.menu-btn i:nth-child(2) { top: 7.5px; }
.menu-btn i:nth-child(3) { top: 13px; }
.menu-open .menu-btn i:nth-child(1), .menu-check:checked + .menu-btn i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.menu-open .menu-btn i:nth-child(2), .menu-check:checked + .menu-btn i:nth-child(2) { opacity: 0; }
.menu-open .menu-btn i:nth-child(3), .menu-check:checked + .menu-btn i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* "Charles Kerry" in the middle, a little bigger and tighter than the other links. */
#nm, .s-name { --tracking: -.03em; font-size: 14px; transition: opacity .25s, var(--weight-change); }
/* During the intro the name is hidden (the big one flies up into its place), then appears
   at regular weight and swells into bold. */
.moving #nm { opacity: 0; }
.moving #nm, .settling #nm { font-weight: 400; letter-spacing: var(--tracking); }
.expanding #nm { transition: opacity .25s, font-weight .8s ease, letter-spacing .8s ease; }

/* Page links swell into bold on hover and settle back. The page you're on and
   anything you've clicked stay bold. Reserved width stops neighbours shifting. */
:root { --weight-change: font-weight .3s ease, letter-spacing .3s ease; } /* the swell's timing, shared */
.page-link { letter-spacing: var(--tracking, -.01em); transition: var(--weight-change); }
/* Bold, and spaced a touch wider so it doesn't look cramped. */
.page-link.current, .page-link.clicked, .page-link:focus-visible {
  font-weight: 600; letter-spacing: calc(var(--tracking, -.01em) + .012em);
}
/* Hover effects only on devices with a real pointer (so they don't stick on touch screens). */
@media (hover: hover) {
  .page-link:hover { font-weight: 600; letter-spacing: calc(var(--tracking, -.01em) + .012em); }
  .logo img, #ig svg, .s-ig svg { transition: transform .3s ease; }
  .logo:hover img, #ig:hover svg, .s-ig:hover svg { transform: scale(1.08); } /* the logo and Instagram icon grow */
}
/* The reserved width: an invisible, zero-height bold copy of the link's text (from its
   data-label) sits inside it, so the link is always as wide as its bold version and the
   links beside it never shift when it swells. */
a[data-label] { display: inline-block; }
[data-label] { text-align: center; }
[data-label]::after {
  content: attr(data-label); display: block; height: 0; overflow: hidden;
  visibility: hidden; font-weight: 600; letter-spacing: calc(var(--tracking, -.01em) + .012em);
}

/* The clock in the top-right corner, written vertically and turned to read bottom to top. */
#clk {
  position: fixed; z-index: 5;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap; font-size: 11px; font-variant-numeric: tabular-nums; /* every digit the same width, so it doesn't jitter */
  transition: opacity 1s, visibility 1s, var(--weight-change);
}

/* The footer: logo, tagline and Instagram in three columns along the bottom. The footer
   itself lets clicks through (so it never blocks the page), but the things in it don't. */
.bot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  padding: 0 24px calc(env(safe-area-inset-bottom, 0px) + 20px);
  pointer-events: none;
}
.bot > * { pointer-events: auto; }
.logo { justify-self: start; display: block; } /* bottom left */
.logo img { display: block; height: 22px; width: auto; }
#ig, .s-ig { justify-self: end; display: block; } /* bottom right */
/* The Instagram icon is drawn in 1.5px white lines, with its little dot filled in. */
#ig svg, .s-ig svg { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.5; }
#ig .dot, .s-ig .dot { fill: currentColor; stroke: none; }
/* Privacy, Terms and Cookie Settings, close together in the middle. They swell into bold on
   hover like every page link. */
.legal { display: flex; gap: 12px; justify-self: center; }
.menu-check { display: none; } /* the no-JavaScript menu's tick box; only phones use it (see Phones) */

/* ---- Cookie consent ----
   A floating card with rounded corners, just above the footer (shared.js sets how far up).
   What's behind it is softly out of focus. It sits under the cursor dot, so the dot still
   shows over Accept and Reject. It fades and drifts in, and out again. */
#cookie-banner {
  position: fixed; left: 16px; right: 16px; z-index: 29;
  max-width: 520px; margin: 0 auto; padding: 18px 20px 20px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  background: rgba(16, 16, 16, .5);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  font-size: 14px; line-height: 1.4; text-align: center;
  opacity: 0; visibility: hidden; translate: 0 10px;
  transition: opacity .5s ease, translate .5s ease, visibility .5s;
}
/* Showing, it's visible at once (so focus can move into it) while it fades in. */
#cookie-banner.show { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .5s ease, translate .5s ease, visibility 0s; }
.lite #cookie-banner { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(16, 16, 16, .94); } /* slower computers: no blur */
#cookie-banner p { margin: 0 0 14px; }
#cookie-banner p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.cb-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* Accept is solid white, Reject an outline. Both grow a little under the pointer. */
.cb-btn {
  padding: 8px 18px; border: 1px solid #fff; border-radius: 999px;
  background: #fff; color: #000; font-size: 13px;
  transition: transform .3s cubic-bezier(.3, .7, .2, 1);
}
.cb-btn.cb-alt { background: transparent; color: #fff; }
@media (hover: hover) { .cb-btn:hover { transform: scale(1.08); } }

/* ---- Skip, bottom right during the intro: the word, then the skip icon after it ---- */
#skip {
  position: fixed; z-index: 26; right: 24px; bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex; align-items: center; gap: 6px;
  opacity: 0; transition: opacity .6s ease;
}
#skip.show { opacity: 1; }
#skip span { display: inline-block; letter-spacing: var(--tracking, -.01em); transition: var(--weight-change); }
#skip svg { display: block; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: transform .3s ease; }
@media (hover: hover) {
  #skip:hover span { font-weight: 600; letter-spacing: calc(var(--tracking, -.01em) + .012em); }
  #skip:hover svg { transform: scale(1.15); }
}
/* Skipped, the name in the header fades in rather than appearing at once. */
.skipped #nm { transition: opacity .8s ease, var(--weight-change); }

/* ---- Privacy Policy and Terms and Conditions ----
   The text scrolls in its own area between the header and the footer, and fades out at
   both edges (the same fade as Collections and Info), so it never runs into either. */
.legal-scroll {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  padding: calc(env(safe-area-inset-top, 0px) + 80px) 24px 48px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: var(--edge-fade); mask-image: var(--edge-fade);
}
.legal-scroll::-webkit-scrollbar { display: none; }
.legal-scroll:focus-visible { outline: none; } /* focused only so the keys can scroll it */
.js #legal-src { display: none; } /* the page's own copy: legal.js shows it in the frame */
.overlay-open .legal-page { visibility: hidden; }
.legal-doc { max-width: 640px; margin: 0 auto; font-size: clamp(14px, 1.3vw, 16px); line-height: 1.55; letter-spacing: -.005em; }
.legal-doc h1 { margin: 0 0 .25em; font-weight: 400; font-style: italic; font-size: clamp(36px, min(6.4vw, 11vh), 72px); line-height: .95; letter-spacing: -.045em; }
/* Grey by colour, not opacity, so it's already grey while the page's rise-in animates opacity. */
.legal-doc .updated { margin: 0 0 2.2em; color: rgb(255 255 255 / .6); font-size: 13px; }
.legal-doc h2 { margin: 2em 0 .5em; font-weight: 600; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.2; letter-spacing: -.02em; }
.legal-doc p, .legal-doc li { margin: 0 0 .8em; }
.legal-doc ul { margin: 0 0 .8em; padding-left: 1.2em; }
.legal-doc a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.legal-doc code { font-size: .9em; }

/* ---- Home carousel ---- */
.hero { position: fixed; inset: 0; display: flex; align-items: center; } /* holds the band in the middle of the screen */
/* The band the photos run through: 14% of the screen's height, at most 130px. It clips
   sideways but not up and down, so a photo can grow without being cut off. touch-action
   leaves sideways swipes to the carousel's own dragging. */
#strip {
  position: relative; z-index: 1; width: 100%;
  height: min(14vh, 130px); height: min(14svh, 130px);
  overflow: hidden; overflow-x: clip; overflow-y: visible;
  touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none;
}
/* Arriving from another page, the carousel fades in once. */
#strip.arrive { animation: arrive .9s ease backwards; }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }
/* The row of photos, as long as it needs to be; home.js slides it along. */
#track { display: flex; gap: 28px; height: 100%; width: max-content; will-change: transform; }
.pre .tile { visibility: hidden; } /* hidden until the intro shows them */
.tile { flex: none; display: block; height: 100%; aspect-ratio: var(--r, 1.5); } /* each at its photo's shape */
.box { position: relative; display: block; width: 100%; height: 100%; background: #000; transition: transform .5s ease; }

/* Leaving a photo: the name goes first, then the photo comes back into focus. */
/* The photo only fades. A blur would pull the black edges in and form a vignette on light photos. */
.pic {
  display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transition: opacity .5s ease .12s;
}
/* The collection's name, over its photo, hidden until selected. It writes in from the left:
   a mask three times its width (solid on the left, clear on the right) slides across it. */
.name {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 10px; text-align: center; font-size: 18px; font-style: italic; line-height: 1.1; letter-spacing: -.02em;
  opacity: 0; filter: blur(5px);
  -webkit-mask-image: linear-gradient(90deg, #000 33.3%, transparent 66.6%);
  mask-image: linear-gradient(90deg, #000 33.3%, transparent 66.6%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: opacity .16s ease, filter .16s ease, -webkit-mask-position 0s .16s, mask-position 0s .16s;
}
/* A name with a year at the end shows the year on its own line, a little smaller. */
.title, .year { display: block; }
.year { font-size: .8em; margin-top: .15em; }

/* Selecting a photo: it softens and fades, then the name writes in from the left. */
.tile.on .box, .tile.kbd .box { transform: scale(.94); }
.tile.on .pic, .tile.kbd .pic { opacity: 0; transition: opacity .45s ease; }
.tile.on .name, .tile.kbd .name {
  opacity: 1; filter: none;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition: opacity .5s ease .12s, filter .65s ease .12s,
    -webkit-mask-position .75s cubic-bezier(.3, .6, .2, 1) .12s, mask-position .75s cubic-bezier(.3, .6, .2, 1) .12s;
}
.tile:focus-visible { outline: none; } /* keyboard focus shows as the name writing in instead */
/* With Collections or Info open, the page underneath is hidden. */
.overlay-open #strip, .overlay-open .gal, .overlay-open .time-page, .overlay-open main.s-lost { visibility: hidden; }

/* ---- Overlays ---- */
/* The panel stops above the footer, and its contents fade out at the top and bottom
   edges, so the list never runs into the header or the footer's logo and text. At the top
   nothing shows at all until 40px down, just beneath Collections, Info, Contact and the
   name, then it fades in over the next 36px: the same fade line as above the footer. */
:root { --edge-fade: linear-gradient(to bottom, transparent 0, transparent calc(env(safe-area-inset-top, 0px) + 40px), #000 calc(env(safe-area-inset-top, 0px) + 76px), #000 calc(100% - 44px), transparent); }
#panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 4; overflow-y: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  padding: calc(env(safe-area-inset-top, 0px) + 80px) 24px 48px;
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade);
  overflow-x: hidden; scrollbar-width: none; /* scrolls if it must, but shows no scrollbar */
  visibility: hidden; /* until an overlay opens */
}
#panel::-webkit-scrollbar { display: none; } /* no scrollbar in Chrome, Edge and Safari either */
.overlay-open #panel { visibility: visible; }
/* Paragraphs in the overlays: short lines, growing a little with the screen. clamp(a, b, c)
   means b, but never less than a or more than c (vw is 1% of the screen's width). */
.pane p { margin: 0; max-width: 34ch; font-size: clamp(14px, 1.5vw, 18px); line-height: 1.25; letter-spacing: -.015em; }
#list, .s-list { list-style: none; margin: 0; padding: 0; } /* no bullet points */
/* The name under the pointer grows, and the names below move down to make room. */
#list a, .s-list a {
  --tracking: -.03em; display: block; padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .4);
  font-size: clamp(16px, 2.2vw, 26px); line-height: 1;
  transition: var(--weight-change), font-size .45s cubic-bezier(.3, .7, .2, 1), padding .45s cubic-bezier(.3, .7, .2, 1);
}
#list a.on, #list a:focus-visible { font-size: clamp(20px, 2.9vw, 35px); padding: 16px 0; } /* the grown size */

/* Info: a big headline over the introduction, the numbers and the kit, with the favourite
   photos stacked to the right. */
.info-pane { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(28px, 6vw, 96px); } /* words left, photos right */
.info-text { flex: 1 1 auto; min-width: 0; max-width: 620px; }
/* The headline shrinks on short screens as well as narrow ones, and sits close above the
   bio, so the whole page fits on screen without scrolling. */
.info-head {
  margin: 0 0 .18em; font-weight: 400; font-style: italic;
  font-size: clamp(36px, min(6.4vw, 11vh), 96px); line-height: .95; letter-spacing: -.045em;
}
/* Each word sits in a box that hides anything below it, so the word can rise up into view.
   The extra padding keeps letters with tails (g, y) from being cut off. */
.info-head .w { display: inline-block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.info-head .w > span { display: inline-block; }
/* A wider bio takes fewer lines, which keeps the page short enough not to scroll. */
.info-pane .info-bio { max-width: 54ch; }

/* The gaps between the sections close up on shorter screens (vh is the screen's height). */
.info-rule { margin: clamp(14px, 2.6vh, 36px) 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .4); }
/* The numbers, in as many equal columns as fit (at least 64px each). */
.info-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 18px; margin: clamp(8px, 1.4vh, 16px) 0 0; }
.stat { display: flex; flex-direction: column-reverse; } /* the number above its label */
.stat dd { margin: 0; font-size: clamp(30px, 3.6vw, 52px); line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat dt { margin-top: 6px; font-style: italic; font-size: 13px; opacity: .65; }

/* The cameras and lenses lists, side by side if there's room (each at least 200px). */
.info-kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px 24px; margin-top: clamp(14px, 2.4vh, 36px); }
.kit h3 { margin: 0 0 4px; font-weight: 400; font-style: italic; font-size: 13px; opacity: .65; }
.kit ul { list-style: none; margin: 0; padding: 0; }
/* Each item, with a faint line above it. */
.kit li { padding: clamp(4px, .7vh, 7px) 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: clamp(13px, 1.2vw, 15px); }

/* The favourite photos, stacked like prints: the top one in full, the others fanned out
   above and behind it (shared.js places them). Each card takes its own photo's shape, as
   large as fits the space. */
/* --w and --h are the most room a photo may take. The padding leaves space above and to
   the right for the photos fanned out behind. */
.info-photo {
  --w: min(36vw, 540px); --h: min(100svh - 300px, 560px);
  flex: none; margin: 0 clamp(8px, 2vw, 32px) 0 0; padding: calc(var(--w) * .17) calc(var(--w) * .1) 0 0;
}
.stack { display: grid; } /* every card in the same grid cell, so they sit on top of each other */
/* One print: as wide as fits, at its photo's shape (--r), with a soft shadow beneath. The
   springy easing makes moves overshoot slightly and settle. */
.card {
  --r: 1.5; grid-area: 1 / 1; place-self: center; position: relative; display: block; overflow: hidden;
  width: min(var(--w), var(--h) * var(--r)); aspect-ratio: var(--r);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9);
  transition: translate .7s cubic-bezier(.2, 1.3, .35, 1), rotate .7s cubic-bezier(.2, 1.3, .35, 1);
}
/* Each photo drifts slowly inside its frame, back and forth over 24 seconds. */
.card img { display: block; width: 100%; height: 100%; object-fit: cover; animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04) translate(-1%, .5%); } to { transform: scale(1.12) translate(1.5%, -1%); } }
/* Those behind are dimmed. While you're over the stack they brighten and fan further out. */
.card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.card:not(.top)::after { opacity: .45; }
.stack:hover .card:not(.top)::after { opacity: .15; }
.stack:hover [data-slot="1"] { translate: 3% -6%; rotate: 3deg; }
.stack:hover [data-slot="2"] { translate: -14% -5%; rotate: -4deg; }
.info-photo figcaption { margin-top: 10px; font-style: italic; font-size: 13px; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .card img { animation: none; } } /* no drifting */

/* Narrow screens: the photos go under the words instead of beside them. */
@media (max-width: 760px) {
  .info-pane { flex-direction: column; }
  .info-photo { --w: calc((100vw - 48px) / 1.1); --h: 52svh; margin: 0; }
}

/* ---- Intro ---- */
/* "Hello I'm" over a big "Charles Kerry", in the middle of the screen, above everything. */
#intro { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; transition: opacity .25s; }
#hi { margin: 0 0 .7em; font-size: clamp(11px, 1.1vw, 15px); }
#big { margin: 0; font-weight: 400; font-size: clamp(36px, 7.5vw, 112px); line-height: 1; letter-spacing: -.03em; white-space: nowrap; }
/* Both rise and fade in, the big name a moment after. */
#hi span, #big span { display: inline-block; animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; }
#hi span { animation-delay: .1s; }
#big span { animation-delay: .35s; animation-duration: 1.2s; }
.font-wait #hi span, .font-wait #big span { animation-play-state: paused; } /* held until the font has loaded */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* The loading bar: a 1px white line along the bottom, scaled from nothing to full width. */
#bar { position: fixed; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; z-index: 25; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); }
/* The photos that flash up in the middle during the intro (home.js places and sizes them). */
.fl { position: fixed; left: 0; top: 0; z-index: 15; pointer-events: none; background: #000; will-change: transform; transform-origin: 0 0; }
.fl img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* The Collections page's background on its way into the first gallery photo. */
.shrinking { position: fixed; z-index: 0; background: center / cover no-repeat; transform-origin: 0 0; pointer-events: none; will-change: transform; }

/* The loader (a gallery or the time page opened directly): a black screen over everything,
   with the percentage and the logo stacked in the same spot in the middle. */
#loader { position: fixed; inset: 0; z-index: 27; background: #000; display: grid; place-items: center; }
#loader > * { grid-area: 1 / 1; }
#loader-count { font-size: 14px; font-variant-numeric: lining-nums tabular-nums; }
/* The logo, at its own shape (1410 by 678). Its three pieces start fully hidden and are
   drawn downwards by shared.js. */
.loader-logo { position: relative; display: block; width: clamp(84px, 9vw, 130px); aspect-ratio: 1410 / 678; }
.loader-logo img { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 100% 0); }
.loader-logo img.whole { clip-path: none; }
#load-bar { position: fixed; left: 0; right: 0; bottom: 0; height: 1px; background: #fff; z-index: 28; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); }

/* ---- Cursor dot ---- */
/* An 18px orange circle above everything; clicks pass through it. shared.js moves it. */
#ball { position: fixed; left: 0; top: 0; width: 18px; height: 18px; z-index: 30; pointer-events: none; }
#ball i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #ff6a13; transition: transform .5s cubic-bezier(.2, .9, .2, 1.2); }
/* A click: the dot shrinks while the button is held, then springs back. */
#ball.press i { transform: scale(.55); transition: transform .12s ease-out; }
#ball.out i { transform: scale(0); transition-timing-function: ease; } /* the pointer is off the page: shrinks away */

/* ---- Gallery page ---- */
/* The title row above the row of photos, together in the middle of the screen. */
.gal { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.gal-head { display: flex; justify-content: space-between; align-items: flex-end; padding: 0 24px; } /* title left, counter right */
.gal-head h1 { margin: 0; font: inherit; font-size: clamp(20px, 2.2vw, 32px); line-height: 1; letter-spacing: -.025em; }
/* The year of the photo in the middle of the row, under the title. */
.gal-year {
  position: relative; height: 1.3em; margin: 5px 0 0; overflow: hidden;
  font-size: 13px; font-style: italic; font-variant-numeric: lining-nums;
}
.gal-year span { position: absolute; left: 0; top: 0; } /* old and new years overlap as they swap */
#count { font-variant-numeric: tabular-nums; }
/* The band of photos: each photo is 46% of the screen's height (or 52% of its width, if
   that's smaller). Clips sideways only, like the carousel. */
#row { --photo-height: min(46vh, 52vw); width: 100%; overflow: hidden; overflow-x: clip; overflow-y: visible; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
#row-track { position: relative; display: flex; align-items: flex-start; gap: 28px; width: max-content; padding-left: 24px; will-change: transform; }
.shot { flex: none; margin: 0; }
.shot img { display: block; height: var(--photo-height); aspect-ratio: var(--r, 1.5); object-fit: cover; pointer-events: none; }
/* width 0 + min-width 100%: the caption wraps at its photo's width, never wider. */
.shot figcaption { width: 0; min-width: 100%; margin-top: 9px; line-height: 1.3; }
.shot:focus-visible { outline: 1px solid #fff; outline-offset: 6px; }
/* The photo under the pointer grows by 5%; gallery.js moves its neighbours aside to match. */
.shot, .shot img, .shot figcaption { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.shot.grown img { transform: scale(1.05); }
.shot.grown figcaption { transform: translateY(calc(var(--photo-height) * .025)); } /* moves down with the photo's bottom edge */
@media (prefers-reduced-motion: reduce) {
  .shot, .shot img, .shot figcaption { transition: none; }
}

/* ---- Photo viewer: the photo on the left, its details on a frosted panel to the right ---- */
.viewer { position: fixed; inset: 0; z-index: 8; --panel: clamp(300px, 31vw, 460px); } /* --panel: the details panel's width */
/* The whole screen behind darkens and softens evenly, so no photo behind is ever cut in two
   by a sharp edge. The panel is only a faint tint on top. */
.v-shade {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(26px) saturate(1.15); backdrop-filter: blur(26px) saturate(1.15);
}
/* The photo sits above the panel, so it's never blurred or clipped as it flies in or out. */
.v-stage {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; right: var(--panel);
  display: flex; align-items: center; justify-content: center; padding: 72px 56px;
}
.v-photo { display: block; flex: none; object-fit: cover; transform-origin: 0 0; }
/* The details panel down the right: scrolls if its details are long. */
.v-panel {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: var(--panel);
  display: flex; flex-direction: column; overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 84px) 36px calc(env(safe-area-inset-bottom, 0px) + 32px);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .08);
}

/* Camera details fold away under their heading. */
/* The "Camera details" heading, with a + on the right that turns into a - when open. */
.v-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 0 16px; font-size: 13px; }
.v-toggle i { position: relative; width: 11px; height: 11px; }
/* The + is two 1px lines; the upright one turns flat when the details are open. */
.v-toggle i::before, .v-toggle i::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #fff;
  transition: transform .45s cubic-bezier(.3, .7, .2, 1);
}
.v-toggle i::after { transform: rotate(90deg); }
.v-toggle[aria-expanded="true"] i::after { transform: rotate(0deg); }
/* Folding: a grid row that animates between its full height (1fr) and nothing (0fr). */
.v-more {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .55s cubic-bezier(.3, .7, .2, 1), opacity .4s ease;
}
.v-more[data-closed] { grid-template-rows: 0fr; opacity: 0; }
.v-more > .v-specs { min-height: 0; overflow: hidden; }
.v-info { flex: 1; } /* takes the panel's spare height, pushing Previous and Next to the bottom */
/* The gallery's name and "3 / 12", along the top of the panel. */
.v-where { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 30px; font-size: 12px; font-variant-numeric: tabular-nums; }
.v-where .title { font-style: italic; }
.v-caption { margin: 0 0 34px; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.2; letter-spacing: -.015em; }
/* The details in two columns; camera, lens and location are long, so they take a full row. */
.v-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 22px; margin: 0; }
.v-row { min-width: 0; }
.v-camera, .v-lens, .v-location { grid-column: 1 / -1; }
.v-specs dt { margin-bottom: 4px; font-size: 11px; opacity: .55; } /* the label, faint */
.v-specs dd { margin: 0; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: lining-nums; }
.v-none { margin: 0; font-size: 14px; opacity: .55; } /* "No camera details were saved..." */
/* Previous and Next at the bottom of the panel; a button that can't be used is faded. */
.v-nav { display: flex; justify-content: space-between; padding-top: 28px; font-size: 13px; }
.v-nav button:disabled { opacity: .3; cursor: default; }
.v-step { display: inline-flex; align-items: center; gap: 9px; }
.v-step [data-label] { display: inline-block; }
.v-step .arrow { flex: none; width: 18px; height: 10px; transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
.v-step[data-step="1"] .arrow { transform: scaleX(-1); } /* Next's arrow is the same one, flipped */
/* On hover, each arrow nudges 4px the way it points. */
@media (hover: hover) {
  .v-step[data-step="-1"]:hover:not(:disabled) .arrow { transform: translateX(-4px); }
  .v-step[data-step="1"]:hover:not(:disabled) .arrow { transform: scaleX(-1) translateX(-4px); }
}
/* The close button, top right: an X made of two crossed lines, which spins a quarter on hover. */
.v-close { position: absolute; z-index: 3; top: calc(env(safe-area-inset-top, 0px) + 18px); right: 18px; width: 34px; height: 34px; }
.v-close i { position: absolute; left: 7px; right: 7px; top: 50%; height: 1px; background: #fff; transition: transform .4s cubic-bezier(.3, .7, .2, 1); }
.v-close i:first-child { transform: rotate(45deg); }
.v-close i:last-child { transform: rotate(-45deg); }
@media (hover: hover) {
  .v-close:hover i:first-child { transform: rotate(135deg); }
  .v-close:hover i:last-child { transform: rotate(45deg); }
}

/* Narrow screens: the photo above, and the details on a sheet across the bottom (44% of
   the screen's height) instead of a panel down the right. */
@media (max-width: 760px) {
  .viewer { --sheet: 44svh; }
  .v-stage { right: 0; bottom: var(--sheet); padding: 64px 14px 18px; }
  .v-panel { top: auto; left: 0; width: auto; height: var(--sheet); padding: 24px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); }
  .v-where { margin-bottom: 18px; }
  .v-caption { margin-bottom: 20px; }
}

/* ---- Time page ---- */
/* Everything sits along the bottom of the screen, above the footer. */
.time-page {
  position: fixed; inset: 0; z-index: 1; display: flex; align-items: flex-end;
  padding: 0 24px calc(env(safe-area-inset-bottom, 0px) + 62px);
}
/* Three columns: seconds, zone and note on the first row; hours, colon and minutes below. */
.clock {
  width: 100%; display: grid; grid-template-columns: auto auto auto; justify-content: space-between;
  align-items: end; row-gap: clamp(12px, 2.4vh, 26px);
}
.clock-label { font-size: clamp(14px, 1.4vw, 22px); font-variant-numeric: lining-nums tabular-nums; }
#t-zone { justify-self: center; }
/* The note and contact links, right-aligned in the top-right cell. */
.note { justify-self: end; width: max-content; max-width: 100%; text-align: right; font-size: clamp(14px, 1.25vw, 19px); line-height: 1.3; }
.note p { margin: 0 0 .2em; }
/* The huge digits: a third of the screen's width, or 62% of its height if that's smaller. */
.digits {
  font-size: min(33.5vw, 62vh); font-size: min(33.5vw, 62svh);
  font-weight: 600; line-height: .74; letter-spacing: -.03em;
  padding-top: .11em; margin-bottom: -.11em; /* matches the box to the digits' real height */
  font-variant-numeric: lining-nums tabular-nums;
}
#t-mins { justify-self: end; }

/* ---- Phones ---- */
/* Screens up to 560px wide: the name stays top middle, Collections, Info and Contact fold
   behind the three-line button top left, the side margins narrow to 14px, and the time
   page's note moves above the clock. */
@media (max-width: 560px) {
  .top { align-items: center; padding-inline: 14px; } /* the button and the name line up on their centres */
  .top-left { align-items: center; }
  .menu-btn { display: block; }
  /* Without JavaScript the menu is a tick box: kept invisible but reachable with the keyboard
     (Tab to it, Space opens the menu), its focus ring drawn on the three-line button. */
  .menu-check { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .menu-check:focus-visible + .menu-btn { outline: 1px solid #fff; outline-offset: 4px; }
  /* The links, stacked below the button on a black backdrop that fades out at the bottom.
     Hidden (and out of reach of the keyboard) until the menu opens; then they slide down
     a little as they fade in. */
  .top nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1; /* full width, so nothing shows beside it */
    flex-direction: column; align-items: flex-start; gap: 14px;
    padding: 18px 14px 28px; font-size: 15px;
    background: linear-gradient(#000 70%, transparent);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .menu-open nav, .menu-check:checked ~ nav { visibility: visible; opacity: 1; transform: none; }
  .top nav [data-label] { text-align: left; } /* stacked, they line up on the left (elsewhere they're centred in their reserved width) */
  #nm, .s-name { justify-self: center; } /* the middle column */
  .bot, #panel, .gal-head, .time-page { padding-inline: 14px; }
  .js .legal a { display: none; } /* phones: just Cookie Settings in the middle (the plain version keeps its links) */
  #skip { right: 14px; }
  .legal-scroll { padding-inline: 14px 30px; } /* clear of the clock on the right, like #panel */
  /* Collections and Info keep 30px clear on the right, so their text never runs under the
     clock in the top-right corner as it scrolls. */
  #panel { padding-right: 30px; }
  #row-track { padding-left: 14px; }
  .time-page { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  .note { grid-column: 1 / -1; grid-row: 1; margin-bottom: 14px; }
  #t-sec, #t-zone { grid-row: 2; }
  #t-sec { grid-column: 1; }
  #t-zone { grid-column: 2; }
  .digits { grid-row: 3; }
}

/* With reduced motion, links turn bold at once instead of swelling. */
@media (prefers-reduced-motion: reduce) {
  .page-link { transition: none; }
}

/* ---- The plain version of each page (written into the page by build.ps1) ----
   Search engines read it, and it's what visitors see with JavaScript switched off. It uses
   the real site's own header, footer, links and Info styles (above), laid out in the same
   places, and nothing scrolls up and down: the carousel and galleries scroll sideways.
   With JavaScript on it's never shown, because the site draws its own version instead. */

/* With JavaScript on (the "js" class is added in each page's <head>), it's hidden at once. */
.js #static { display: none; }
/* With JavaScript off, the intro text, loading bar and empty carousel holder are hidden. */
html:not(.js) #intro, html:not(.js) #bar, html:not(.js) .hero { display: none; }

/* Hidden from view, but still read by search engines and screen readers. */
.s-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* "Time", top right of the 404 page, in the third column of the header. */
.s-time { grid-column: 3; justify-self: end; }

/* The note that JavaScript is off: one small line under the header. */
/* One layer below the header (5), so the phone menu opens over it. */
.s-note {
  position: fixed; z-index: 4; left: 24px; right: 24px; margin: 0;
  top: calc(env(safe-area-inset-top, 0px) + 46px);
  text-align: center; font-size: 12px; font-style: italic; opacity: .65;
}
.s-note a { text-decoration: underline; text-underline-offset: .15em; }

/* ---- The sideways rail (the carousel and the gallery rows) ----
   Browsers only turn the mouse wheel into up-and-down scrolling, so the rail is a column
   that scrolls up and down, turned a quarter to the left to lie across the screen: scrolling
   the wheel down moves the photos left. It fills the whole screen, so the wheel works
   anywhere, and each photo inside is turned back the right way up. */
.s-rail {
  position: fixed; z-index: 1; left: 50%; top: 50%;
  width: 100vh; height: 100vw; /* swapped, because the rail is turned */
  transform: translate(-50%, -50%) rotate(-90deg); /* centred on the screen, then turned */
  display: flex; flex-direction: column; align-items: center; gap: 28px; /* 28px between photos, as on the real site */
  padding: 24px 0; /* the space before the first photo and after the last */
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none; /* no scrollbar, as on the real site */
}
.s-rail::-webkit-scrollbar { display: none; } /* no scrollbar in Chrome, Edge and Safari either */

/* One place in the rail. Its size is given turned too: --band across (how much room the
   photo and its caption need, top to bottom on screen) by the photo's width along the rail.
   --size is the photo's height on screen, and --r its shape (written in by build.ps1). */
.s-tile, .s-shot {
  flex: none; position: relative; display: block; margin: 0;
  width: var(--band); height: calc(var(--r) * var(--size));
}
/* The photo and caption, turned back upright and centred in their place. */
.s-turn {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--r) * var(--size)); height: var(--band);
  transform: translate(-50%, -50%) rotate(90deg);
}
/* The photo sits in the middle of the band, at its own shape. */
.s-turn img {
  position: absolute; left: 0; top: 50%; width: 100%; height: var(--size);
  margin-top: calc(var(--size) / -2); object-fit: cover; background: #111;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* The home carousel: small photos, the same height as on the real site. */
.s-carousel { --size: min(14vh, 130px); --band: calc(var(--size) + 120px); }
/* Hovering over a collection (or tabbing to it) enlarges it... */
.s-tile:hover img, .s-tile:focus-visible img { transform: scale(1.12); }
.s-tile:focus-visible { outline: none; }
.s-tile:focus-visible img { outline: 1px solid #fff; outline-offset: 4px; }
/* ...and its name and dates appear underneath, clear of the enlarged photo. */
.s-label {
  position: absolute; left: -20px; right: -20px; top: calc(50% + var(--size) * .56 + 10px);
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  font-size: 15px; font-style: italic; line-height: 1.1; letter-spacing: -.02em;
  opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease;
}
.s-label .s-m { font-size: 11px; font-style: normal; opacity: .65; letter-spacing: 0; }
.s-tile:hover .s-label, .s-tile:focus-visible .s-label { opacity: 1; transform: none; }
/* Phones and tablets can't hover, so their names always show. */
@media (hover: none) { .s-label { opacity: 1; transform: none; } }

/* Phones and tablets have no mouse wheel, and swipe sideways instead, which only an
   ordinary sideways strip follows. So for them the rail isn't turned: it's a plain row
   that scrolls sideways, and the photos are laid out the usual way round. */
@media (hover: none) {
  .s-rail {
    left: 0; top: 0; width: 100vw; height: 100vh; transform: none;
    flex-direction: row; padding: 0 14px; overflow-x: auto; overflow-y: hidden;
  }
  .s-tile, .s-shot { width: calc(var(--r) * var(--size)); height: var(--band); }
  .s-turn { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
}

/* A gallery: large photos, the same height as on the real gallery page, with room below
   each for its caption. */
.s-row { --size: min(46vh, 52vw); --band: calc(var(--size) + 160px); }
/* Hovering over a photo grows it a little, as on the real site. */
.s-shot:hover img { transform: scale(1.05); }
/* The caption, the width of its photo, just below it. */
.s-shot figcaption {
  position: absolute; left: 0; width: 100%; top: calc(50% + var(--size) / 2 + 9px);
  display: flex; flex-direction: column; gap: 2px; line-height: 1.3;
}
.s-shot .s-m { font-style: italic; opacity: .65; }

/* The gallery's title, years and number of photos, just above the row (as on the real
   gallery page). The wheel passes through it to the row underneath. */
.s-gal-head {
  position: fixed; z-index: 2; left: 0; right: 0;
  top: calc(50% - min(46vh, 52vw) / 2 - 14px); transform: translateY(-100%);
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 24px; pointer-events: none;
}
.s-gal-head h1 { margin: 0; font: inherit; font-size: clamp(20px, 2.2vw, 32px); line-height: 1; letter-spacing: -.025em; }
.s-year { margin: 5px 0 0; font-size: 13px; font-style: italic; }

/* ---- Collections and Info ----
   Each opens over the home page when the address ends in #collection or #info (the links
   in the header), with the same look as on the real site. The carousel hides while one is
   open. The logo or the name takes you back. */
.s-panel {
  display: none; position: fixed; z-index: 4; top: 0; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 58px); /* stops above the footer */
  padding: calc(env(safe-area-inset-top, 0px) + 80px) 24px 48px;
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none;
  /* The contents fade out beneath the header and above the footer, as on the real site. */
  -webkit-mask-image: var(--edge-fade);
  mask-image: var(--edge-fade);
}
.s-panel::-webkit-scrollbar { display: none; }
.s-panel:target { display: block; } /* shown when the address names it */
.s-panel:target ~ .s-main { visibility: hidden; } /* the carousel steps aside meanwhile */
/* Collection names grow when you hover over them (the real site does this with JavaScript). */
.s-list a:hover { font-size: clamp(20px, 2.9vw, 35px); padding: 16px 0; }

/* The favourite photos on Info, stacked like prints: the first on top, the next two fanned
   out above and behind it, exactly where the real site's JavaScript puts them. Any more
   wait unseen at the back. */
#static .card[data-slot="0"] { z-index: 4; }
#static .card[data-slot="1"] { z-index: 3; transform: translate(31%, -45%) rotate(4deg) scale(.5); }
#static .card[data-slot="2"] { z-index: 2; transform: translate(5%, -41%) rotate(-4deg) scale(.48); }
#static .card[data-slot="3"] { z-index: 1; transform: translate(5%, -41%) rotate(-4deg) scale(.46); opacity: 0; }

/* ---- The 404 page ----
   A plain black page with the usual header and footer, and the message in the middle. */
.lost-page { background: #000; }
/* The message, centred on the screen; the padding keeps it clear of the header and footer. */
.s-lost {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 90px 24px; text-align: center;
}
.s-lost-code { margin: 0 0 .35em; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: -.02em; } /* "Error 404" */
/* "Nothing Here." in large bold italic. */
.s-lost h1 { margin: 0 0 .5em; font-weight: 600; font-style: italic; font-size: clamp(48px, 7.5vw, 112px); line-height: 1; letter-spacing: -.035em; }
/* The three lines below it, kept to about 22 words wide. */
.s-lost p { margin: 0 0 1.1em; max-width: 22em; font-size: clamp(17px, 1.8vw, 24px); line-height: 1.3; }
/* Its links are underlined and swell into bold on hover (from .page-link, above). */
.s-lost a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
/* The hidden bold copy that stops the line shifting on hover would otherwise lift the link
   above the line; stacking the two keeps the link on the line with the words around it.
   The same goes for links inside sentences in the cookie banner and the Privacy Policy. */
.s-lost a[data-label], #cookie-banner p [data-label], .legal-doc [data-label] { display: inline-flex; flex-direction: column; }

/* Phones: narrower side margins. */
@media (max-width: 560px) {
  .s-note { left: 14px; right: 14px; }
  .s-gal-head, .s-panel { padding-inline: 14px; }
}

/* ---- Slower computers (see "lite" in shared.js): no blurs over large areas, and the
   favourite photos hold still ---- */
.lite .bg { filter: none; } /* backgrounds appear without the blur */
.lite .v-shade { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0, 0, 0, .9); } /* a darker plain backdrop instead of frosted glass */
.lite .card img { animation: none; } /* the favourite photos stop drifting */