/* ============================================================
   In loving memory of Rev. Dr. Dereje Fantaye Yimer
   ቄስ ዶ/ር ደረጀ ፋንታዬ ይመር · 1959–2026

   Editorial and cinematic, set for evening: a full-bleed hero,
   a narrow reading measure, letterspaced labels paired with their
   Amharic subtitles, and one warm sienna accent on a dark ground.
   ============================================================ */

:root {
  /* Every colour here is measured from his own photographs: the ground is the
     chancel curtain he preached against, the accent is the gilded cross that
     hung above him. */
  --ground:      #161F18;  /* chancel green, deepened */
  --ground-deep: #111813;  /* full-bleed bands: the verse, the colophon */
  --ground-lift: #1F2A21;  /* raised panels and cards */
  --cream:       #EDEAE0;  /* primary type */
  --soft:        #C2C6B9;  /* body prose */
  --faint:       #8B9188;  /* metadata, captions, Amharic subtitles */
  --accent:      #CCBF95;  /* the cross above his pulpit — labels, times, links */
  --accent-lift: #E3DABB;  /* accent on hover */
  --rule:        rgba(237, 234, 224, 0.13);
  --rule-strong: rgba(237, 234, 224, 0.22);
  --measure:     680px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--cream);
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* Amharic: its own serif, a touch larger, never oblique, never letterspaced. */
:where([lang="am"], .l-am) {
  font-family: "Noto Serif Ethiopic", "Abyssinica SIL", "Kefa", serif;
  font-style: normal;
  font-size: 1.02em;
}

a { color: var(--cream); text-decoration: underline;
    text-decoration-thickness: 1px; text-underline-offset: 4px;
    text-decoration-color: rgba(204, 191, 149, 0.55); }
a:hover { color: var(--accent-lift); text-decoration-color: var(--accent-lift); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 clamp(22px, 6vw, 32px); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60;
  background: var(--ground-lift); color: var(--cream);
  border: 1px solid var(--accent); padding: 10px 16px; text-decoration: none;
}
.skip-link:focus-visible { top: 12px; }

/* ---------- top bar: invisible over the hero, settles in on scroll ---------- */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 14px clamp(20px, 5vw, 44px);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background 320ms ease, border-color 320ms ease;
}
.topbar.stuck { background: rgba(22, 31, 24, 0.92); border-bottom-color: var(--rule); }
@supports (backdrop-filter: blur(8px)) {
  .topbar.stuck { background: rgba(22, 31, 24, 0.72); backdrop-filter: blur(12px) saturate(130%); }
}
.wordmark {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; white-space: nowrap;
  opacity: 0; transition: opacity 320ms ease;
}
.topbar.stuck .wordmark { opacity: 1; }
.wordmark .l-am { letter-spacing: 0.04em; text-transform: none; }
.wordmark .wm-years { color: var(--faint); }

.topnav { margin-left: auto; display: flex; gap: 30px; }
.topnav a {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; opacity: .85;
}
.topnav a .l-am { letter-spacing: 0.04em; text-transform: none; font-size: 14px; }
.topnav a:hover { color: var(--accent-lift); opacity: 1; }
@media (max-width: 780px) { .topnav { display: none; } }

.lang-btn {
  margin-left: auto; font: inherit; font-size: 14px; cursor: pointer;
  background: rgba(17, 24, 19, 0.4); color: var(--cream);
  border: 1px solid var(--rule-strong); padding: 8px 18px; min-height: 42px;
  letter-spacing: 0.04em;
}
.topnav ~ .lang-btn { margin-left: 0; }
.lang-btn:hover { border-color: var(--accent); color: var(--accent-lift); }

/* ---------- hero ---------- */

.hero {
  position: relative; min-height: 640px; height: 96vh;
  overflow: hidden; display: flex; align-items: flex-end;
}
.hero picture { display: contents; }
.hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  filter: saturate(0.97);
}
/* a warm veil so the type always has a ground to stand on, whatever the crop */
.hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(13, 18, 14, 0.94) 0%, rgba(13, 18, 14, 0.62) 22%, rgba(13, 18, 14, 0.06) 56%, rgba(13, 18, 14, 0.28) 100%),
    linear-gradient(to right, rgba(13, 18, 14, 0.42), rgba(13, 18, 14, 0) 55%);
}
.hero-inner {
  position: relative; z-index: 1; width: 100%;
  padding: 0 clamp(22px, 6vw, 64px) clamp(26px, 4vw, 44px);
}
.hero-text { max-width: 940px; }

.eyebrow {
  margin: 0 0 18px; font-size: 13px; letter-spacing: 0.26em;
  color: var(--accent-lift);
}
.eyebrow [lang="am"] { letter-spacing: 0.04em; font-size: 15px; }

.hero-name { margin: 0; font-weight: 300; }
.hn-am {
  display: block; font-weight: 500; color: var(--cream);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem); line-height: 1.5;
  margin-bottom: 10px; opacity: .95;
}
.hn-en {
  display: block; font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-style: italic; font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(2.5rem, 6.2vw, 4.9rem); line-height: 1.08;
  letter-spacing: -0.005em; text-wrap: balance;
}
.hero-dates {
  margin: 20px 0 0; font-size: 1rem; color: var(--soft);
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
}
.hero-dates .sep { color: var(--faint); }

/* the three places, along the foot of the hero */
.hero-venues {
  margin-top: clamp(26px, 4vw, 44px);
  padding-top: 20px; border-top: 1px solid var(--rule-strong);
  gap: 0;
}
.hero-venues .venue {
  border: none; border-left: 1px solid var(--rule);
  padding: 2px 24px 4px; color: var(--cream); text-decoration: none;
  transition: border-color 220ms ease;
}
.hero-venues .venue:first-child { border-left: none; padding-left: 0; }
.hero-venues .venue:hover, .hero-venues .venue:focus-visible { border-left-color: var(--accent); outline: none; }
.venue .v-time {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  font-style: italic; font-size: 1.05rem; color: var(--accent-lift);
  letter-spacing: 0; text-transform: none; margin-bottom: 6px;
}
.venue .v-eth { font-style: normal; font-size: 0.82rem; color: var(--faint); }
.venue .v-name { font-size: 1.16rem; line-height: 1.35; }
.venue .v-role { font-size: 0.88rem; color: var(--faint); margin-top: 4px; }
.hero-venues .venue:hover .v-name { color: var(--accent-lift); }
/* On a phone the hero stacks: the photograph, then his name beneath it. */
@media (max-width: 760px) {
  .hero { display: block; height: auto; min-height: 0; }
  .hero-img {
    position: relative; inset: auto;
    width: 100%; height: 56vh; min-height: 330px;
    object-position: center 30%;
  }
  .hero-veil {
    top: 0; bottom: auto; height: 56vh; min-height: 330px;
    background: linear-gradient(to top, rgba(13, 18, 14, 0.55) 0%, rgba(13, 18, 14, 0) 34%, rgba(13, 18, 14, 0) 62%, rgba(13, 18, 14, 0.5) 100%);
  }
  .hero-inner { position: relative; padding-top: 30px; }
  .hero-venues .venue {
    border-left: none; border-top: 1px solid var(--rule); padding: 14px 0;
  }
  .hero-venues .venue:first-child { border-top: none; }
}

/* ---------- the lede and the obituary ---------- */

.lede-block { padding-top: clamp(64px, 9vw, 104px); }
.lede {
  margin: 0; font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(1.3rem, 2.8vw, 1.62rem); line-height: 1.7;
  text-wrap: pretty;
}
.lede .l-am { font-size: clamp(1.2rem, 2.6vw, 1.5rem); line-height: 1.8; }
.obit { margin-top: 44px; color: var(--soft); }
.obit p { margin: 0 0 22px; }
.obit .obit-note { margin: 0; font-style: italic; color: var(--faint); }
.obit .obit-note .l-am { font-style: normal; }

/* ---------- section labels ---------- */

section[id] { scroll-margin-top: 80px; }
#service, #remembrance { margin-top: clamp(72px, 10vw, 118px); }

.section-label {
  margin: 0 0 6px; font-size: 13px; font-weight: 400;
  letter-spacing: 0.24em; color: var(--accent);
}
.section-label .l-am { letter-spacing: 0.06em; font-size: 15px; }
.section-label-am {
  margin: 0 0 34px; font-size: 14px; color: var(--faint);
}

/* ---------- the order of the day ---------- */

.rows { list-style: none; margin: 0; padding: 0; }
.row {
  display: flex; gap: clamp(18px, 4vw, 32px); align-items: baseline;
  padding: 18px 0; border-top: 1px solid var(--rule);
}
.row:last-child { border-bottom: 1px solid var(--rule); }
.row-time {
  width: 104px; flex: none; font-style: italic; font-size: 1.02rem;
  color: var(--accent-lift); white-space: nowrap;
}
.row-eth {
  display: block; font-style: normal; font-size: 0.8rem;
  color: var(--faint); margin-top: 2px;
}
.row-what { display: block; }
.row-en { display: block; font-size: 1.18rem; }
.row-am { display: block; font-size: 0.94rem; color: var(--faint); margin-top: 3px; }
html[data-lang="am"] .row-en { color: var(--faint); font-size: 0.98rem; order: 2; margin-top: 3px; }
html[data-lang="am"] .row-what { display: flex; flex-direction: column; }
html[data-lang="am"] .row-am { font-size: 1.14rem; color: var(--cream); margin-top: 0; order: 1; }
@media (max-width: 560px) {
  .row { gap: 16px; }
  .row-time { width: 88px; font-size: 0.95rem; }
  .row-en { font-size: 1.06rem; }
}

.maps { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }
.maps-note { margin: 0 0 14px; font-size: 14px; color: var(--faint); }
.maps a { display: block; padding: 9px 0; font-size: 1.05rem; }

.stream {
  margin-top: 40px; padding: 26px 28px;
  background: var(--ground-lift); border: 1px solid var(--rule);
}
.stream-label { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.24em; color: var(--accent); }
.stream-label .l-am { letter-spacing: 0.05em; font-size: 14px; }
.stream-line { margin: 0; color: var(--soft); font-size: 1rem; }

/* ---------- the verse ---------- */

.verse-band {
  margin-top: clamp(80px, 11vw, 130px);
  padding: clamp(72px, 10vw, 128px) clamp(22px, 6vw, 32px);
  background: var(--ground-deep);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  text-align: center;
}
.verse { margin: 0 auto; max-width: 760px; }
.verse blockquote { margin: 0; }
.verse-am {
  margin: 0 0 28px; font-size: clamp(1.15rem, 2.3vw, 1.7rem);
  line-height: 1.95; color: var(--cream); text-wrap: pretty;
}
.verse-en {
  margin: 0 auto; max-width: 34em;
  font-family: "Bodoni Moda", Didot, Georgia, serif;
  font-style: italic; font-weight: 400; font-optical-sizing: auto;
  font-size: clamp(1rem, 1.5vw, 1.22rem); color: var(--soft);
}
.verse-ref {
  margin-top: 30px; font-size: 13px; letter-spacing: 0.22em; color: var(--accent);
}
.verse-ref [lang="am"] { letter-spacing: 0.04em; font-size: 15px; }

/* ---------- photographs ---------- */

.album { margin-top: clamp(80px, 11vw, 130px); }
.album-head { margin-bottom: 34px; }

/* A full-bleed band of plates. Portrait crops keep the face high in frame,
   and the band never crops so tightly that a face is lost. */
#gallery .ph-grid, .album .ph-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 2px;
}
#gallery .ph, .album .ph { margin: 0; position: relative; }
#gallery .ph img, .album .ph img {
  width: 100%; height: clamp(360px, 42vw, 520px);
  object-fit: cover; object-position: center 22%;
  display: block; border: none;
}
#gallery .ph figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 34px 20px 14px; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cream);
  background: linear-gradient(to top, rgba(12, 17, 13, 0.9), rgba(12, 17, 13, 0));
  opacity: 0; transition: opacity 260ms ease;
}
#gallery .ph:hover figcaption, #gallery .ph:focus-within figcaption { opacity: 1; }
#gallery .ph figcaption .l-am { letter-spacing: 0; text-transform: none; font-size: 14px; }
@media (hover: none) {
  #gallery .ph figcaption { opacity: 1; }
}

/* ---------- the book of remembrance ---------- */

#remembrance {
  --mem-paper: var(--ground);
  --mem-ink: var(--cream);
  --mem-meta: var(--faint);
  --mem-rule: var(--rule);
  --mem-accent: var(--accent);
}
.remembrance-intro { margin: 0 0 40px; color: var(--soft); }

#remembrance .mem-wall { gap: 0; }
#remembrance .mem-card {
  background: transparent; border: none; border-top: 1px solid var(--rule);
  padding: 26px 0;
}
#remembrance .mem-card blockquote {
  font-style: normal; font-size: 1.12rem; line-height: 1.8; color: var(--soft);
}
#remembrance .mem-attr {
  font-style: italic; font-size: 0.95rem; letter-spacing: 0;
  text-transform: none; color: var(--faint); margin-bottom: 0;
}
#remembrance .mem-attr .mem-name { color: var(--soft); }
#remembrance .mem-empty { color: var(--faint); font-style: italic; }

/* the composer: a ghost button, and a dialog that matches the page */
#remembrance .mem-open {
  margin-top: 34px; background: transparent; color: var(--cream);
  border: 1px solid var(--rule-strong); padding: 14px 34px;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
#remembrance .mem-open .l-am { letter-spacing: 0.04em; text-transform: none; font-size: 15px; }
#remembrance .mem-open:hover { background: var(--cream); color: var(--ground); border-color: var(--cream); }

#remembrance .mem-dialog { background: var(--ground); border-color: var(--rule-strong); color: var(--cream); }
#remembrance .mem-dialog::backdrop { background: rgba(9, 13, 10, 0.8); }
#remembrance .mem-dhead { border-bottom-color: var(--rule); }
#remembrance .mem-dhead h3 { font-weight: 300; font-size: 1.4rem; }
#remembrance .mem-field label {
  font-size: 12px; letter-spacing: 0.16em; color: var(--faint);
}
#remembrance .mem-field label .l-am { letter-spacing: 0; text-transform: none; font-size: 14px; }
#remembrance .mem-field input[type="text"], #remembrance .mem-field textarea {
  border: none; border-bottom: 1px solid var(--rule-strong);
  padding: 8px 0; font-size: 1.05rem; color: var(--cream);
}
#remembrance .mem-field input[type="text"]:focus, #remembrance .mem-field textarea:focus {
  outline: none; border-bottom-color: var(--accent);
}
#remembrance .mem-drop { border-color: var(--rule-strong); }
#remembrance .mem-drop.drag { border-color: var(--accent); background: rgba(204, 191, 149, .08); }
#remembrance .mem-submit {
  background: transparent; color: var(--cream); border: 1px solid var(--rule-strong);
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; padding: 14px 34px;
}
#remembrance .mem-submit:hover { background: var(--cream); color: var(--ground); }
#remembrance .mem-status.ok { color: var(--accent-lift); }

/* ---------- colophon ---------- */

.colophon {
  margin-top: clamp(80px, 11vw, 130px);
  padding: clamp(64px, 9vw, 104px) 0 clamp(52px, 7vw, 80px);
  background: var(--ground-deep); border-top: 1px solid var(--rule);
  text-align: center;
}
.colophon-epitaph { margin: 0 auto 40px; max-width: 30em; font-style: italic; color: var(--soft); }
.colophon-epitaph .l-am { font-style: normal; }
.program-line { margin: 0 0 12px; font-size: 12px; letter-spacing: 0.22em; color: var(--accent); }
.program-line .l-am { letter-spacing: 0.05em; font-size: 14px; }
.program-links {
  margin: 0 0 36px; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
}
.family-line { margin: 0 0 6px; font-size: 0.9rem; color: var(--faint); }
.colophon-dates {
  margin: 0; font-size: 0.85rem; color: var(--faint);
  display: flex; gap: 4px 10px; justify-content: center; flex-wrap: wrap;
}
.lang-btn--foot { margin: 30px auto 0; display: inline-block; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 800ms ease, transform 800ms ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---------- signing in your own hand ---------- */

/* The pad's own colour is the ink the stroke is drawn in (memories.js reads it),
   so signatures come out in parchment on this dark ground. */
#remembrance .mem-sigpad {
  color: var(--cream);
  border: none; border-bottom: 1px solid var(--rule-strong);
  background: rgba(244, 239, 228, 0.03);
  position: relative;
}
#remembrance .mem-sigpad canvas { height: 150px; cursor: crosshair; }
/* a ruled line to sign along, the way a condolence book is ruled */
#remembrance .mem-sigpad::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 34px;
  border-bottom: 1px solid var(--rule); pointer-events: none;
}
#remembrance .mem-sigclear {
  top: auto; bottom: 8px; right: 10px;
  background: var(--ground); border-color: var(--rule-strong);
  color: var(--faint); letter-spacing: 0.1em; text-transform: uppercase; font-size: .72rem;
}
#remembrance .mem-sigclear:hover { color: var(--cream); border-color: var(--cream); }
#remembrance .mem-sigclear .l-am { letter-spacing: 0; text-transform: none; font-size: .9rem; }

/* signatures as they appear on approved memories */
#remembrance .mem-sig { color: var(--cream); margin-top: 14px; }
#remembrance .mem-sig svg { max-width: 220px; opacity: .92; }