:root {
  --paper: #f6f1e8;
  --paper-2: #efe8db;
  --ink: #2b2620;
  --ink-soft: #6b6157;
  --line: #d9cfbf;
  --accent: #8a7350;
  --serif-he: "Frank Ruhl Libre", "David", serif;
  --serif-en: "Cormorant Garamond", "Georgia", serif;
  --sans: "Heebo", system-ui, sans-serif;
  --serif: var(--serif-he);
  --measure: 40rem;
}
html[lang="en"] { --serif: var(--serif-en); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
html[lang="en"] body { font-size: 1.4rem; line-height: 1.7; }

/* ---------- top bar ---------- */
.topbar {
  position: fixed; inset-block-start: 0; inset-inline-end: 0;
  padding: 14px 18px; z-index: 5;
}
.lang {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 1rem; color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper) 85%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
}
.lang button {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  padding: 2px 4px; letter-spacing: 0.04em;
}
.lang button[aria-pressed="true"] { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ---------- */
.hero {
  min-height: 92svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 72px 16px 48px;
}
/* Framed print: photo on a paper mat with a thin frame line. */
.portrait {
  margin: 0 0 36px;
  width: min(320px, 72vw); aspect-ratio: 4 / 5;
  padding: 16px;
  border-radius: 2px;
  background: #fcfaf5;
  box-shadow: 0 0 0 1px var(--line), 0 22px 44px -26px rgba(60, 45, 25, 0.5);
}
.portrait img, .portrait .ph {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: 1px; outline: 1px solid rgba(60, 45, 25, 0.12);
}
.name {
  margin: 0; font-weight: 400; font-size: clamp(2.4rem, 7.5vw, 3.9rem); line-height: 1.15;
  letter-spacing: 0.01em; text-wrap: balance;
}
html[lang="en"] .name { font-weight: 500; letter-spacing: 0.005em; }
.dates {
  margin: 14px 0 0; font-family: var(--sans); font-weight: 300; font-size: 1.1rem;
  color: var(--ink-soft); letter-spacing: 0.06em;
}
.subtitle { margin: 18px 0 0; color: var(--ink-soft); font-size: 1.35rem; max-width: 30rem; text-wrap: balance; }
html[lang="en"] .subtitle { font-style: italic; }

/* ---------- sections ---------- */
.block { padding: 56px 16px; }
.block h2 {
  text-align: center; margin: 0 0 32px;
  font-family: var(--sans); font-weight: 400; font-size: 0.8rem;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent);
}
html[lang="he"] .block h2 { letter-spacing: 0.04em; font-size: 1.15rem; }
.block h2::after {
  content: ""; display: block; width: 36px; height: 1px; background: var(--line); margin: 14px auto 0;
}

.story-text { max-width: var(--measure); margin: 0 auto; }
.story-text p { margin: 0 0 1.2em; text-wrap: pretty; }
.story-text p:first-child::first-letter { font-size: 1.15em; }
.note {
  max-width: var(--measure); margin: -12px auto 20px; text-align: center;
  font-family: var(--sans); font-size: 1rem; color: var(--ink-soft);
}

/* ---------- gallery ---------- */
/* Columns are filled by app.js (shortest column first) so the photos read
   roughly in date order across each row, not down each column. */
.gallery {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 14px;
}
.gcol { flex: 1; min-width: 0; }
.tile {
  margin: 0 0 14px; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in; text-align: inherit; color: inherit;
  font: inherit;
}
.tile .frame { background: var(--paper-2); border-radius: 4px; overflow: hidden; }
.tile img, .tile .ph { width: 100%; height: auto; display: block; transition: opacity .5s ease; }
.tile img { opacity: 0; }
.tile img.ready { opacity: 1; }
.tile figcaption, .tile .cap {
  display: block; padding: 8px 2px 0; font-size: 1.1rem; color: var(--ink-soft); line-height: 1.4;
}
.tile .yr { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0.08em; color: var(--accent); margin-inline-end: 6px; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* ---------- videos ---------- */
.videos {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px;
}
.video .frame {
  aspect-ratio: 16 / 9; background: #1e1b17; border-radius: 6px; overflow: hidden; position: relative;
}
.video video, .video iframe, .video .ph { width: 100%; height: 100%; border: 0; display: block; object-fit: contain; background: #1e1b17; }
.video .play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.25); color: #fff; font-size: 22px;
  display: grid; place-items: center; cursor: pointer; padding-inline-start: 4px;
}
.video p { margin: 10px 2px 0; font-size: 1.15rem; color: var(--ink-soft); }
.video .dur { font-family: var(--sans); font-size: 0.9rem; color: var(--accent); margin-inline-start: 8px; }

/* ---------- closing ---------- */
.closing { text-align: center; padding: 48px 16px 120px; }
.closing .rule { width: 1px; height: 64px; background: var(--line); margin: 0 auto 28px; }
.closing p { margin: 0; font-size: 1.7rem; color: var(--ink); }
html[lang="en"] .closing p { font-style: italic; }

.demo-flag {
  display: block; width: fit-content; margin: -80px auto 40px;
  font-family: var(--sans); font-size: 0.75rem; color: #7a5a1e;
  background: #fbf0d6; border: 1px solid #ead8a8; border-radius: 6px; padding: 6px 10px;
}

/* ---------- lightbox ---------- */
.lightbox {
  width: 100vw; height: 100svh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(24, 21, 17, 0.96); color: #eee6d8;
}
.lightbox::backdrop { background: rgba(24, 21, 17, 0.96); }
.lightbox[open] { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
.lb-figure { margin: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0 32px; min-width: 0; }
.lb-img { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.lb-img img, .lb-img .ph { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.lb-figure figcaption { padding-top: 14px; text-align: center; font-size: 1.25rem; min-height: 1.6em; padding-inline: 12px; }
.lb-nav, .lb-close {
  background: none; border: 0; color: inherit; cursor: pointer; font-size: 2.4rem; line-height: 1;
  width: 64px; height: 64px; opacity: .75; font-family: var(--sans); font-weight: 300;
}
.lb-nav:hover, .lb-close:hover { opacity: 1; }
.lb-close { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; font-size: 2rem; }
.lb-count { position: absolute; inset-block-start: 20px; inset-inline-start: 22px; margin: 0; font-family: var(--sans); font-size: .8rem; opacity: .6; }
/* ‹ › are bidi-mirrored characters, so they already point outward in RTL. */

@media (max-width: 640px) {
  .gallery { gap: 10px; }
  .tile { margin-bottom: 10px; }
  .lightbox[open] { grid-template-columns: 0 1fr 0; }
  .lb-nav { display: none; }
  .block { padding: 44px 16px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }