/* One narrow column, like the pages of a remembrance book. Grey with a slight warm bias;
   the only colour on the page is candlelight. */
:root {
  --bg: #18191b;
  --surface: #1f2023;
  --raised: #26272b;
  --line: #313236;
  --text: #dcd8d1;
  --muted: #8f8c86;
  --faint: #5f5d59;
  --flame: #e9b96e;
  --flame-core: #fff1d2;
  --danger: #d9837a;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.4rem;
  --small: 0.8125rem;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--step-0)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 40rem;
  margin: 0 auto;
  padding-block: max(2.5rem, env(safe-area-inset-top, 0px)) max(4rem, env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 300; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: var(--step-3); line-height: 1.1; }
h2 { font-size: var(--step-2); line-height: 1.2; }
h3 { font-size: var(--step-1); line-height: 1.3; }
p { margin: 0; }

a { color: inherit; text-decoration-color: var(--faint); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--text); }

.loading, .muted { color: var(--muted); }
.small { font-size: var(--small); }
.label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-sm { display: flex; flex-direction: column; gap: 0.4rem; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.spread { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; }

/* ---------- controls ---------- */

button, .button {
  font: 500 0.875rem/1 var(--sans);
  color: var(--text);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.75rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
}
button:hover, .button:hover { border-color: var(--faint); }
button:disabled { opacity: 0.5; cursor: default; }
button.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
button.primary:hover { background: #fff; }
button.quiet {
  background: none;
  border: none;
  padding: 0.4rem 0;
  min-height: 0;
  color: var(--muted);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-color: var(--faint);
  text-underline-offset: 3px;
}
button.quiet:hover { color: var(--text); }
button.danger { color: var(--danger); }
:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }

label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.875rem; color: var(--muted); }
input, textarea {
  font: 400 var(--step-0)/1.5 var(--sans);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.85rem;
  width: 100%;
  min-width: 0;
}
input:focus, textarea:focus { outline: none; border-color: var(--muted); }
textarea { resize: vertical; min-height: 6rem; }
textarea.words { font-family: var(--serif); font-size: 1.1rem; line-height: 1.6; min-height: 10rem; }
.fields-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.hint { font-size: var(--small); color: var(--faint); }

.error { color: var(--danger); font-size: 0.875rem; }
.notice { color: var(--muted); font-size: 0.875rem; }

/* ---------- header ---------- */

.masthead { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: 1rem; text-align: center; }
.masthead .subtitle { font-family: var(--serif); font-style: italic; font-size: var(--step-1); color: var(--muted); font-weight: 300; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.back { font-size: 0.875rem; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--text); }

/* ---------- name list ---------- */

.names { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.names li { border-bottom: 1px solid var(--line); }
.names a {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  text-decoration: none;
}
.names a:hover .who { color: #fff; }
.names .who { font-family: var(--serif); font-size: var(--step-2); font-weight: 300; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.names .when { font-size: var(--small); color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 0.25rem; }
.names .lit { display: flex; align-items: flex-end; gap: 0.5rem; color: var(--muted); font-size: var(--small); font-variant-numeric: tabular-nums; }

.empty { padding: 2.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

/* ---------- candle ---------- */

.candle {
  --u: 1px;
  position: relative;
  display: inline-block;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 30);
  flex: none;
}
.candle .wax {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * 18);
  background: linear-gradient(90deg, #4a4946, #6c6a65 45%, #55534f);
  border-radius: calc(var(--u) * 1.5) calc(var(--u) * 1.5) calc(var(--u) * 1) calc(var(--u) * 1);
}
.candle .wick {
  position: absolute; left: 50%; bottom: calc(var(--u) * 18);
  width: calc(var(--u) * 1.2); height: calc(var(--u) * 3);
  margin-left: calc(var(--u) * -0.6);
  background: #2a2927;
}
.candle .flame, .candle .glow { display: none; }
.candle.lit .wax { background: linear-gradient(90deg, #6e665a, #a39a8a 45%, #7b7366); }
.candle.lit .flame {
  display: block;
  position: absolute; left: 50%; bottom: calc(var(--u) * 20);
  width: calc(var(--u) * 6); height: calc(var(--u) * 10);
  margin-left: calc(var(--u) * -3);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, var(--flame-core) 0 22%, var(--flame) 55%, rgba(233, 185, 110, 0) 72%);
  transform-origin: 50% 90%;
  animation: flicker 3.2s ease-in-out infinite;
}
.candle.lit .glow {
  display: block;
  position: absolute; left: 50%; bottom: calc(var(--u) * 12);
  width: calc(var(--u) * 40); height: calc(var(--u) * 40);
  margin-left: calc(var(--u) * -20);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 185, 110, 0.16), rgba(233, 185, 110, 0) 65%);
  pointer-events: none;
}
.candle.big { --u: 3px; }
.candle.mid { --u: 1.6px; }

/* On the names list a lit candle casts a soft, breathing light around it. */
.names .candle.lit .glow {
  bottom: calc(var(--u) * -6);
  width: calc(var(--u) * 64); height: calc(var(--u) * 64);
  margin-left: calc(var(--u) * -32);
  background: radial-gradient(circle, rgba(233, 185, 110, 0.38), rgba(233, 185, 110, 0.12) 38%, rgba(233, 185, 110, 0) 68%);
  animation: breathe 3.2s ease-in-out infinite;
}
.names .candle.lit .flame { filter: drop-shadow(0 0 3px rgba(233, 185, 110, 0.9)); }

@keyframes breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  41% { opacity: 0.8; transform: scale(0.94); }
  84% { opacity: 0.92; transform: scale(1.03); }
}

@keyframes flicker {
  0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: 1; }
  23% { transform: scale(0.94, 1.06) rotate(-1.5deg); }
  41% { transform: scale(1.03, 0.95) rotate(1deg); opacity: 0.93; }
  67% { transform: scale(0.97, 1.04) rotate(-0.5deg); }
  84% { transform: scale(1.02, 0.97) rotate(1.2deg); opacity: 0.96; }
}
@media (prefers-reduced-motion: reduce) {
  .candle.lit .flame, .names .candle.lit .glow { animation: none; }
}

.glyph { width: 1.25rem; height: 1.25rem; flex: none; color: var(--muted); }
.glyph.big { width: 2.6rem; height: 2.6rem; }

/* ---------- memorial page ---------- */

/* Drawing, name and facts sit on the page's centre line; the facts are a ledger split on that line. */
.person { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.person h1 { font-size: clamp(2.2rem, 7vw, 3.2rem); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.25rem; margin: 0; width: 100%; font-variant-numeric: tabular-nums; }
.facts dt { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); padding-top: 0.3rem; text-align: right; }
.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; text-align: left; }
@media (max-width: 420px) {
  .facts { grid-template-columns: 1fr; gap: 0.1rem; }
  .facts dt, .facts dd { text-align: center; }
  .facts dd { margin-bottom: 0.6rem; }
}

.words {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 300;
  white-space: pre-line;
  max-width: 34rem;
  text-align: left;
  overflow-wrap: anywhere;
}

.vigil {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.75rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.vigil-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0.9rem 1.1rem; min-height: 4rem; padding-top: 0.5rem; }
.vigil-row .more { color: var(--muted); font-size: var(--small); align-self: center; }
.vigil-count { text-align: center; color: var(--muted); font-size: 0.875rem; }
.gestures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.gesture {
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 0.5rem 0.85rem;
  min-height: 7rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.25;
}
.gesture.done { border-color: var(--faint); color: var(--muted); }
.gesture[aria-pressed="true"] { border-color: var(--muted); background: var(--bg); }
@media (max-width: 380px) {
  .gesture { font-size: 0.8125rem; padding-inline: 0.25rem; }
}

.leave { display: flex; flex-direction: column; gap: 0.75rem; }

.tributes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tributes li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.9rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.tributes li:last-child { border-bottom: 1px solid var(--line); }
.tributes .icon { display: flex; justify-content: center; padding-top: 0.15rem; }
.tributes .body { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.tributes .note { font-family: var(--serif); font-size: 1.1rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.tributes .meta { font-size: var(--small); color: var(--muted); }

.confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

.foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; color: var(--faint); font-size: var(--small); padding-top: 1rem; border-top: 1px solid var(--line); }
.foot button.quiet { color: var(--faint); font-size: var(--small); }

/* ---------- sign in ---------- */

.signin { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.5rem; }
.signin form { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 22rem; }


/* ---------- pictures ---------- */

.portrait { display: block; width: auto; height: auto; max-width: 100%; max-height: 22rem; }
/* Drawings share one frame width with the face at the same size and spot, so they show at one width. */
.portrait.drawing { width: min(100%, 22rem); max-height: none; filter: drop-shadow(0 0 14px rgba(220, 192, 138, 0.12)); }
.portrait.photo { border-radius: 6px; }

.thumb {
  width: 3.5rem; height: 3.5rem; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  font-family: var(--serif); font-size: 1.1rem; color: var(--muted); letter-spacing: 0.04em;
}
.thumb { position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* eye level sits 320/880 of the frame width down (1.27rem in a 3.5rem circle); zoom in on it */
.thumb img.drawing { position: absolute; left: 0; top: 0; height: auto; transform: translateY(0.5rem) scale(1.7); transform-origin: 50% 1.27rem; }


/* ---------- school emblem and closing line ---------- */

.school-mark { display: block; width: auto; height: 4.5rem; opacity: 0.85; }
.signin .school-mark { height: 5.5rem; }
.closing {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  text-wrap: balance;
  padding-block: 1rem;
}