:root {
  --bg: #e8e8e6;
  --card: #f0f0ee; --edge: #cfcfcd; --ph: #d2d2d0; --glow: .5;
  --ink: #262524;
  --ink-soft: #7a7977;
  --line: #1b1a19;
  --outline: #1b1a19;
  --red: 20, 20, 20;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  --cond: Oswald, "Arial Narrow", Impact, sans-serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* snow-white paper: fine tooth, soft fibres, a breath of cool light */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .022' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .46 0 0 0 0 .47 0 0 0 0 .48 0 0 0 .7 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .40 0 0 0 0 .41 0 0 0 0 .42 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .32; mix-blend-mode: multiply;
  animation: grain .8s steps(1) infinite;
}
body::after {
  content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  animation: light 30s ease-in-out infinite alternate;
  background: radial-gradient(120% 90% at 30% 10%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%),
              radial-gradient(100% 80% at 90% 100%, rgba(214,216,218,.28), rgba(214,216,218,0) 65%);
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ---------- centre: an outlined exclamation mark ---------- */
.mark {
  position: fixed; left: 50%; top: calc(50% + 4.5vh); z-index: 1;
  height: min(64vh, 48vw); aspect-ratio: 698 / 420;
  transform: translate(-50%, -50%); pointer-events: none;
  transition: opacity .7s ease .3s, transform .9s ease .3s;
}
.mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mark path, .mark rect, .mark circle { fill: rgba(0, 0, 0, .03); stroke-linejoin: round; stroke: var(--outline); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
body:not([data-view="home"]) .mark { opacity: 0; transform: translate(-50%, -50%) scale(.97); transition: opacity .25s ease, transform .35s ease; }

/* red trace left on the exclamation mark, then it fades */
.trail { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; transition: opacity .7s ease .3s; }
body:not([data-view="home"]) .trail { opacity: 0; transition: opacity .25s ease; }

/* the red light that follows the cursor */
.glow {
  position: fixed; left: 0; top: 0; z-index: 30; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; pointer-events: none; will-change: transform;
  background: radial-gradient(circle, rgba(var(--red), .98) 0%, rgba(var(--red), .82) 28%, rgba(var(--red), .28) 56%, rgba(var(--red), 0) 72%);
}

/* ---------- decorative hairlines ---------- */
.rail { position: fixed; z-index: 1; width: 1.5px; background: var(--line); pointer-events: none; }
.rail.l { left: 7vw; top: 30vh; height: 42vh; }
.rail.r { right: 7.5vw; top: 51vh; height: 47vh; }

/* ---------- top bar ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: clamp(18px, 3.4vw, 40px) clamp(20px, 4vw, 56px);
  pointer-events: none;
}
.top > * { pointer-events: auto; }
.name {
  display: inline-flex; align-items: baseline; gap: .26em;
  font-family: var(--cond); font-weight: 500; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(30px, 3.2vw, 48px); line-height: 1; letter-spacing: .1em;
  color: #262524; -webkit-text-stroke: 1.8px #262524; paint-order: stroke fill;
  padding-top: 8px; transition: gap .55s cubic-bezier(.65, 0, .25, 1), color .6s ease;
}
/* the full name is drawn as an outline, the initials it shrinks to are solid */
body[data-view="home"] .name { color: transparent; }
.name .w { display: inline-flex; }
.name .r {
  display: grid; grid-template-columns: 1fr;
  transition: grid-template-columns .55s cubic-bezier(.65, 0, .25, 1);
}
.name .r > span { overflow: hidden; min-width: 0; padding-top: .3em; margin-top: -.3em; }
/* "Й" is written as "И" with a plain dot over it instead of the breve */
.name .yi { position: relative; }
.name .yi::after {
  content: ""; position: absolute; left: calc(50% - .05em); top: .12em; width: .15em; height: .15em; transform: translateX(-50%);
  border-radius: 50%; border: 1.8px solid #262524; box-sizing: border-box;
}
body:not([data-view="home"]) .name { gap: .02em; }
body:not([data-view="home"]) .name .r { grid-template-columns: 0fr; }
.nav { position: relative; display: flex; align-items: center; }
.nav button {
  padding: 10px 12px; font-family: var(--cond); font-weight: 500; font-size: 22px; line-height: 1; letter-spacing: .05em;
  color: #262524; transition: opacity .5s ease .75s, filter .5s ease .75s;
}
/* the colon: two drops that pour into the place of the chosen word */
.nav .colon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 26px; height: 22px; margin-top: 2px; }
.nav .colon i {
  display: block; width: 5px; height: 5px; border-radius: 50%; background: #262524;
  translate: var(--cx, 0px) 0;
  transition: translate 1s cubic-bezier(.45, 0, .2, 1);
}
.nav .colon .d2 { transition-duration: 1.15s; transition-delay: .1s; }
body[data-view="poems"] .nav { --cx: var(--dx-poems, 0px); }
body[data-view="photos"] .nav { --cx: var(--dx-photos, 0px); }
/* the word you chose dissolves, the drops take its place */
body[data-view="poems"] .nav [data-view="poems"],
body[data-view="photos"] .nav [data-view="photos"] { opacity: 0; filter: blur(4px); pointer-events: none; transition: opacity .3s ease, filter .3s ease; }
/* while pouring, the drops stretch along the way like liquid (stretch = transform, travel = translate, so the stretch
   never multiplies the distance and the drops cannot overshoot the word) */
.nav.go .d1 { animation: drop1 1.05s ease; }
.nav.go .d2 { animation: drop2 1.2s ease .1s; }
@keyframes drop1 { 0%, 100% { transform: scale(1, 1) translateY(0); } 45% { transform: scale(3.2, .72) translateY(-2px); } }
@keyframes drop2 { 0%, 100% { transform: scale(1, 1) translateY(0); } 45% { transform: scale(3, .74) translateY(2px); } }


/* ---------- social icons ---------- */
.social {
  position: fixed; z-index: 5;
  left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4.5vh, 48px);
  display: flex; flex-direction: column; gap: 18px;
}
.social a { position: relative; display: block; width: 23px; height: 23px; color: #1d1c1b; transition: color .2s; }
.social a::before {
  content: ""; position: absolute; inset: -12px; border-radius: 50%; pointer-events: none;
  background: rgba(0, 0, 0, .04);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .32), inset 0 -2px 3px rgba(255, 255, 255, .8);
  opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s;
}
.social a[hidden] { display: none; }
.social a:hover { color: rgb(var(--red)); }
.social a:hover::before { opacity: 1; transform: none; }
.social svg { position: relative; width: 100%; height: 100%; display: block; }

/* ---------- content panel (poems / photos) ---------- */
.panel {
  position: fixed; z-index: 3;
  top: clamp(92px, 14vh, 132px); bottom: clamp(16px, 4vh, 40px);
  left: calc(7vw + 34px); right: calc(7.5vw + 34px);
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  padding: 18px 0 28px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 30px), transparent 100%);
  opacity: 0; transition: opacity .32s ease;
}
.panel::-webkit-scrollbar { display: none; }
body:not([data-view="home"]) .panel { opacity: 1; transition: opacity .6s ease .3s; }
.panel > section { max-width: 1100px; min-width: 0; margin: 0 auto; min-height: 100%; }

.cards { display: flex; flex-wrap: wrap; gap: 16px; min-height: 100%; align-content: stretch; }
.pcard {
  position: relative; isolation: isolate; flex: 1 1 250px; min-height: 140px; padding: 26px 22px;
  display: grid; place-items: center; text-align: center; color: var(--ink);
  opacity: 0; transform: translateY(8px);
  animation: rise .8s ease forwards; animation-delay: calc(var(--i) * 70ms + 250ms);
  transition: transform .25s;
}
.pcard::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 2px solid var(--line); border-radius: 10px;
  clip-path: polygon(0 0, calc(100% - 38px) 0, calc(100% - 38px) 38px, 100% 38px, 100% 100%, 38px 100%, 38px calc(100% - 38px), 0 calc(100% - 38px));
  transition: box-shadow .3s, background .3s, clip-path .4s ease;
}
.pcard span {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.35; overflow-wrap: anywhere;
}
.pcard:hover, .pcard:focus-visible { transform: translateY(1px); outline: none; }
.pcard:hover::before, .pcard:focus-visible::before {
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 100% 100%, 0 100%, 0 100%, 0 100%);
  background: rgba(0, 0, 0, .05);
  box-shadow: inset 0 4px 14px rgba(0, 0, 0, .26), inset 0 -2px 0 rgba(255, 255, 255, .75);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.grid { position: relative; }
.grid button {
  position: absolute; background: var(--ph); line-height: 0; border-radius: 4px; overflow: hidden;
  opacity: 0; animation: rise .8s ease forwards; animation-delay: calc(var(--i) * 55ms + 200ms);
}
.grid button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, .5), inset 0 0 0 1.5px rgba(0, 0, 0, .4); opacity: 0; transition: opacity .25s;
}
.grid button:hover::after, .grid button:focus-visible::after { opacity: 1; }
.grid button:focus, .grid button:focus-visible { outline: none; }
.grid .badge {
  position: absolute; top: 7px; right: 7px; z-index: 1; width: 27px; height: 27px; padding: 6px; box-sizing: border-box;
  display: grid; place-items: center; pointer-events: none; line-height: 0;
  border-radius: 4px;                                 /* same corner as the photos */
  background: var(--bg); color: #1b1a19;
}
.grid .badge svg { width: 100%; height: 100%; display: block; }

.grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.grid button:hover img { transform: scale(.985); }

.emptyboard { margin: 18vh 0; text-align: center; font-family: var(--serif); font-size: 22px; color: var(--ink-soft); }

/* ---------- poem reader ---------- */
.reader {
  position: fixed; inset: 0; z-index: 10; overflow-y: auto;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 8vh 16px; animation: fade .4s ease;
}
@keyframes fade { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.reader.out, .lightbox.out { animation: fadeout .34s ease forwards; pointer-events: none; }
.lightbox.out .lb-actions, .lightbox.out .x, .lightbox.out .arrow { opacity: 0; transition: opacity .08s ease; }
.sheet {
  position: relative; max-width: 600px; margin: 0 auto; color: #222120;
  background: var(--card); border: 1px solid var(--edge); border-radius: 8px;
  padding: clamp(36px, 7vw, 68px) clamp(28px, 7vw, 68px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .16);
  font-family: var(--serif); font-size: 17px; line-height: 1.75;
}
/* a poem opens in the dark: the room goes quiet and only the page stays lit. A tap on the page turns the light
   back on (and off again); a tap anywhere else closes it */
.reader { transition: background .45s ease; }
.reader.focus { background: rgba(11, 11, 10, .93); }
.reader.focus .x { color: #a9a8a5; }
.reader.focus .x:hover { color: #fff; }
.sheet { cursor: pointer; }
.sheet h2 { margin: 0 0 28px; font-weight: 700; font-style: normal; font-size: 22px; line-height: 1.25; }
.sheet p { margin: 0 0 26px; }
.sheet-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 38px; }
.sheet time { display: block; margin: 0; font-family: var(--sans); font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: #999896; }
.share-wrap { display: inline-flex; align-items: center; gap: 10px; }
#share-note { font-family: var(--sans); font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: #999896; opacity: 0; transition: opacity .3s ease; }
#share-note.on { opacity: 1; }
.share {
  position: relative; display: grid; place-items: center; width: 22px; height: 22px; color: #262524; transition: color .2s;
}
.share::before {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, .28), inset 0 -2px 3px rgba(255, 255, 255, .85); background: rgba(0, 0, 0, .03);
  opacity: 0; transform: scale(.85); transition: opacity .25s, transform .25s;
}
.share:hover, .share:focus-visible { color: #000; outline: none; }
.share:hover::before, .share:focus-visible::before { opacity: 1; transform: none; }
.share svg { position: absolute; width: 20px; height: 20px; transition: opacity .2s, transform .25s; }
.share .i-done { opacity: 0; transform: scale(.6); }
.share.done .i-link { opacity: 0; transform: scale(.6); }
.share.done .i-done { opacity: 1; transform: none; color: #1b1a19; }

.x {
  position: absolute; top: 10px; right: 14px; z-index: 2; width: 40px; height: 40px;
  font-size: 34px; line-height: 1; font-weight: 200; font-family: var(--sans); color: #999896;
}
.x:hover { color: #222120; }

/* ---------- series viewer ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 10; background: var(--bg);
  display: grid; grid-template-columns: clamp(180px, 23vw, 360px) minmax(0, 1fr); animation: fade .3s ease;
}
.lightbox .x { color: #868583; top: 16px; right: 20px; position: absolute; }
.lightbox .x:hover { color: #000; }
.lb-actions { position: absolute; left: clamp(24px, 4vw, 56px); bottom: 30px; z-index: 2; display: flex; align-items: center; gap: 24px; }
.note { font-family: var(--sans); font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: #6d6c6a; opacity: 0; transition: opacity .3s ease; white-space: nowrap; }
.note.on { opacity: 1; }
.lb-info { align-self: start; padding: 64px 12px 0 clamp(24px, 4vw, 56px); transition: opacity .5s ease; }
.lb-info.dim { opacity: .38; }
.lb-info h2 {
  margin: 0; font-family: var(--serif); font-style: normal; font-weight: 400; color: var(--ink);
  font-size: clamp(20px, 1.8vw, 27px); line-height: 1.2; overflow-wrap: anywhere;
}
.lb-info p { margin: 14px 0 0; font: 500 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lb-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 56px 24px 18px; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; touch-action: pan-y; min-height: 0; min-width: 0; }
.lightbox img { max-width: min(100%, calc(100vw - clamp(180px, 23vw, 360px) - 190px)); max-height: calc(100vh - 210px); object-fit: contain; display: block; user-select: none; border-radius: 6px; }
.lightbox figcaption { display: flex; gap: 18px; margin-top: 14px; min-height: 1.4em; padding: 0 16px; text-align: center; color: #6d6c6a; font-size: 14px; letter-spacing: .04em; }
.lightbox figcaption #lb-count { color: #a6a5a3; }
.lb-strip { display: flex; gap: 8px; margin-top: 16px; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.lb-strip::-webkit-scrollbar { display: none; }
.lb-strip button { flex: none; height: 46px; opacity: .45; border-radius: 4px; overflow: hidden; transition: opacity .25s; outline-offset: 2px; }
.lb-strip button.on, .lb-strip button:hover { opacity: 1; }
.lb-strip button.on { outline: 1px solid var(--ink); }
.lb-strip img { height: 100%; width: auto; max-width: none; max-height: none; border-radius: 0; display: block; }
/* tap the photo: the light goes down everywhere and only the picture stays; tap anywhere else to come back */
.lightbox { transition: background .45s ease; }
.lightbox .x, .lb-actions, .lb-info, .arrow, .lb-strip, .lightbox figcaption { transition: opacity .4s ease; }
.lightbox.focus { background: #0b0b0a; }
.lightbox.focus .x, .lightbox.focus .lb-actions, .lightbox.focus .lb-info, .lightbox.focus .arrow,
.lightbox.focus .lb-strip, .lightbox.focus figcaption { opacity: 0; pointer-events: none; }
.lightbox #lb-img { cursor: zoom-in; }
.lightbox.focus #lb-img { cursor: zoom-out; }
.lb-main { display: flex; align-items: center; justify-content: center; max-width: 100%; min-height: 0; }
.lb-photo { position: relative; display: flex; max-width: 100%; }
.arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 90px;
  font-size: 54px; font-weight: 200; color: #868583; font-family: var(--sans); line-height: 1;
}
.arrow:hover { color: #000; }
.arrow.prev { right: calc(100% + 10px); }
.arrow.next { left: calc(100% + 10px); }

.nojs { position: fixed; top: 50%; width: 100%; text-align: center; }

@media (max-width: 900px) {
  .rail { display: none; }
}

@media (max-width: 640px) {
  .name { font-size: 34px; letter-spacing: .07em; padding-top: 6px; }
  .mark { height: min(56vh, 47vw); }
  .nav button { padding: 9px 9px; font-size: 22px; }
  .nav .colon { width: 20px; gap: 7px; }
  .social a { width: 28px; height: 28px; }
  .social { flex-direction: row; gap: 26px; left: 20px; bottom: calc(18px + env(safe-area-inset-bottom)); }
  .panel { left: 18px; right: 18px; bottom: 72px; top: 84px; }
  .cards { gap: 12px; }
  .pcard { flex-basis: 100%; }
  .grid { --h: 130px; gap: 8px; }
  .sheet { font-size: 16px; }
  .lb-photo { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; }
  .lb-photo #lb-img { grid-column: 1 / -1; grid-row: 1; }
  .arrow { position: static; transform: none; width: 44px; height: 38px; font-size: 32px; color: #1d1c1b; margin-top: 6px; grid-row: 2; }
  .arrow:hover { color: #1d1c1b; }
  .arrow.prev { grid-column: 1; justify-self: start; }
  .arrow.next { grid-column: 2; justify-self: end; }
  .lightbox img { max-width: calc(100vw - 80px); }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .lb-info { align-self: start; padding: 22px 56px 0 20px; }
  .lb-info h2 { font-size: 20px; }
  .lb-info p { margin-top: 8px; }
  .lb-stage { padding: 14px 8px 62px; }
  .lb-actions { bottom: 18px; left: 20px; gap: 22px; }
  .lightbox img { max-height: calc(100vh - 290px); }
}

/* no pointer on a touch screen: no cursor spot */
@media (hover: none), (pointer: coarse) { .glow { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mark, .panel, .glow { transition: none; }
  .pcard, .grid button { animation-duration: .01s; animation-delay: 0s; }
}
body::after { opacity: var(--glow); }

/* plain copy of the page for search engines and screen readers' fallbacks; the visible site is drawn by main.js */
.seo { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* language switch */
.social a.lang { width: auto; height: 23px; display: flex; align-items: center; font: 500 14px/1 var(--cond); letter-spacing: .14em; text-indent: .14em; }
.social a.lang::before { inset: -10px -8px; border-radius: 14px; }
@media (max-width: 640px) { .social a.lang { height: 28px; font-size: 16px; } }

/* English: "street photography" is longer than "фото", so the right hairline (which the colon lines up with) moves
   inwards on narrower screens, and (in both languages) on phones the menu sits on its own line under the name */
html.en .rail.r { right: max(7.5vw, 128px); }
html.en .panel { right: calc(max(7.5vw, 128px) + 34px); }
@media (max-width: 900px) { html.en .panel { right: calc(7.5vw + 34px); } }
@media (max-width: 640px) {
  .top { flex-wrap: wrap; row-gap: 12px; }
  .nav { flex-basis: 100%; margin-left: -9px; }
  .panel { top: 128px; }
  html.en .panel { right: 18px; top: 136px; }
}

/* paper that is slightly alive: the fine grain shimmers like film, a soft light drifts across the sheet */
@keyframes grain {
  0%   { background-position: 0 0, 0 0; }
  12%  { background-position: 0 0, -47px 31px; }
  25%  { background-position: 0 0, 29px -63px; }
  37%  { background-position: 0 0, -71px -22px; }
  50%  { background-position: 0 0, 53px 44px; }
  62%  { background-position: 0 0, -18px 77px; }
  75%  { background-position: 0 0, 66px -9px; }
  87%  { background-position: 0 0, -39px -55px; }
}
@keyframes light {
  from { transform: translate3d(-4%, -3%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }

#wave { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; transition: opacity .5s ease; }
body.reading #wave { opacity: 0; }
body.reading::before, body.reading::after { animation-play-state: paused; }

/* phones: the viewer fits whatever part of the screen the browser leaves visible (its address bar and toolbar change
   the height). The photo takes all the room left between the title and the bottom row, centred, never over the text;
   the arrows and the "1 / 2" counter share one slim row under it. */
@media (max-width: 640px) {
  .lightbox { height: 100dvh; }
  .lb-stage { min-height: 0; padding: 16px 10px 40px; justify-content: flex-start; }
  .lb-actions { bottom: 12px; }
  .lb-main { flex: 1 1 0; min-height: 0; width: 100%; align-items: stretch; }
  .lightbox figure {
    flex: 1 1 auto; min-height: 0; width: 100%; height: 100%;
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-rows: minmax(0, 1fr) auto; align-items: center;
  }
  .lb-photo { display: contents; }
  .lb-photo #lb-img { grid-column: 1 / -1; grid-row: 1; min-height: 0; max-height: 100%; max-width: 100%; width: auto; height: auto; justify-self: center; align-self: center; }
  .arrow { grid-row: 2; margin: 0; width: 44px; height: 34px; font-size: 30px; }
  .arrow.prev { grid-column: 1; justify-self: start; }
  .arrow.next { grid-column: 3; justify-self: end; }
  .lightbox figcaption { grid-column: 2; grid-row: 2; margin: 0; padding: 0 4px; justify-content: center; flex-wrap: wrap; gap: 2px 12px; font-size: 13px; }
  .lb-strip { flex: none; margin-top: 4px; padding: 5px 6px; }
  .lb-strip button { height: 38px; }
}
/* the thumbnail ring was clipped by the strip's edges: give it room */
.lb-strip { padding: 5px 6px; }
.lb-strip button.on { outline-offset: 2px; }