/* Fonts, reset, the candle window, the photo viewer and the bones of the forms; the look is in site.css. */
@font-face { font-family: Assistant; src: url(/fonts/assistant-he.woff2) format('woff2'); font-weight: 300 800; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: Assistant; src: url(/fonts/assistant-latin.woff2) format('woff2'); font-weight: 300 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: 'Frank Ruhl Libre'; src: url(/fonts/frank-ruhl-libre-he.woff2) format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Frank Ruhl Libre'; src: url(/fonts/frank-ruhl-libre-latin.woff2) format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122, U+2212; }

:root { --screen: 100svh; --focus: #3b82f6; --ease: cubic-bezier(.16, 1, .3, 1); }
html.shot { --screen: 900px; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 90px; scroll-behavior: smooth; }
body { margin: 0; font-size: 1.125rem; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; text-wrap: balance; }
p, blockquote { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[dir=ltr], .ltr { direction: ltr; unicode-bidi: isolate; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; top: 8px; right: 8px; z-index: 100; padding: 10px 16px; background: #000; color: #fff; border-radius: 6px; transform: translateY(-150%); }
.skip:not(:focus) { clip-path: inset(50%); }
.skip:focus { transform: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }
[hidden] { display: none !important; }

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* ---------- flame ---------- */
.flame { flex: none; overflow: visible; }
.flame-out { fill: var(--flame-out, #f2a33a); }
.flame-in { fill: var(--flame-in, #fff3c4); }
.flame-lit { transform-origin: 50% 90%; animation: flicker 3.2s ease-in-out infinite; filter: drop-shadow(0 0 8px var(--glow, rgba(242, 163, 58, .55))); }
@keyframes flicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.04, .97) rotate(-1.5deg); } 55% { transform: scale(.97, 1.04) rotate(1deg); } 80% { transform: scale(1.02, .99) rotate(-.6deg); } }

/* ---------- dialogs ---------- */
dialog { padding: 0; border: 0; max-width: calc(100% - 24px); }
.dlg { width: 520px; border-radius: 18px; }
.dlg::backdrop { background: rgba(10, 8, 6, .62); }
.dlg[open] { animation: dlg-in .35s var(--ease); }
@keyframes dlg-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.dlg-body { padding: 34px 32px 30px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.dlg-body .form { width: 100%; text-align: start; }
.dlg-h { font-size: 1.5rem; }
.dlg-x-form { position: absolute; inset-inline-end: 10px; top: 10px; }
.dlg-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; }
.dlg-x:hover { background: rgba(127, 127, 127, .15); }
.dlg-done .f-btn { margin-top: 6px; }

/* ---------- forms (bones; colours per sketch) ---------- */
.form { display: grid; gap: 18px; }
.f-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.f-field { display: grid; gap: 6px; }
.f-label { font-weight: 600; font-size: 1rem; }
.f-opt { font-weight: 400; opacity: .75; }
.f-input { width: 100%; min-height: 48px; padding: 11px 14px; font-size: 1rem; border-radius: 10px; }
textarea.f-input { resize: vertical; line-height: 1.6; }
.f-file { padding: 9px; }
.f-err { font-size: .92rem; font-weight: 600; color: var(--err, #b42318); }
.f-input[aria-invalid=true] { border-color: var(--err, #b42318) !important; }
.f-btn { justify-self: start; min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; font-weight: 700; font-size: 1.05rem; }
.f-note { font-size: .95rem; opacity: .8; }
.f-done { padding: 14px 16px; border-radius: 10px; font-weight: 600; }

/* ---------- photo viewer ---------- */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: rgba(8, 7, 6, .94); color: #fff; }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: transparent; }
.lb-fig { display: grid; gap: 12px; justify-items: center; padding: 64px 80px 56px; max-height: 100dvh; }
.lb-fig img { max-height: calc(100dvh - 160px); width: auto; object-fit: contain; border-radius: 4px; }
.lb-fig figcaption { font-size: 1rem; color: #ddd; }
.lb-btn { position: fixed; display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; }
.lb-btn:hover { background: rgba(255,255,255,.22); }
.lb-prev { right: 18px; top: 50%; translate: 0 -50%; }
.lb-next { left: 18px; top: 50%; translate: 0 -50%; }
.lb-close { top: 16px; left: 16px; }
.lb-count { position: fixed; top: 28px; right: 24px; font-size: .95rem; color: #ccc; }
@media (max-width: 640px) { .lb-fig { padding: 64px 8px 80px; } .lb-prev, .lb-next { top: auto; bottom: 16px; translate: none; } }
.zoom { display: block; cursor: zoom-in; }

/* ---------- player ---------- */
.yt-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.yt-frame iframe, .yt-frame img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }
html.shot [data-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}
@media print { .dlg, .lb, .n-head, .n-light { display: none; } }