/* ============================================================
   אסתר שפר כ"ץ ומרדכי הירש מרמלשטיין — family archive
   Design: a book kept on a dark writing desk. Sepia paper,
   iron-gall ink, a wax seal stamped with ש (Shaddai) —
   the one word engraved on the pendant Esther kept through
   Auschwitz. That seal marks the site's title and every
   chapter's close.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Caveat:wght@500;600&display=swap');

:root{
  --desk:        #211a13;
  --desk-vignette:#150f0a;
  --paper:       #efe3c8;
  --paper-deep:  #e3d3ac;
  --paper-edge:  #cdb787;
  --ink:         #372a1c;
  --ink-soft:    #6d5a41;
  --ink-faint:   #96876b;
  --seal:        #7c2a28;
  --seal-dark:   #5c1e1d;
  --brass:       #a3812f;
  --brass-light: #c9a24f;

  --serif-he: 'Frank Ruhl Libre', 'David Libre', serif;
  --serif-en: 'EB Garamond', 'Georgia', serif;
  --hand:     'Caveat', cursive;

  --page-w: 700px;
  --radius: 2px;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:
    radial-gradient(ellipse at 50% 0%, #2a2117 0%, var(--desk) 55%, var(--desk-vignette) 100%);
  color: var(--ink);
  font-family: var(--serif-en);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* -------- language -------- */
/* Each page is single-language now (see esther-and-mordechai-hebrew.html /
   esther-and-mordechai-english.html). The cover (index.html) is the one
   place both scripts appear together, so nothing here hides either one —
   .he only overrides the typeface; English inherits the body default. */
body.lang-en{ direction: ltr; }
body.lang-he{ direction: rtl; }

.he, :lang(he){ font-family: var(--serif-he); }

body.lang-en .toc a::before{ content: attr(data-num-en) '.'; }
body.lang-he .toc a::before{ content: attr(data-num-he) '.'; }

/* -------- focus & selection -------- */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--seal);
  outline-offset: 3px;
}
::selection{ background: var(--brass-light); color: var(--desk); }

/* ============================================================
   Ribbon language toggle — fixed like a bookmark hanging
   from the top of the page
   ============================================================ */
.ribbon{
  position: fixed;
  top: 0;
  right: 2rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--seal) 0%, var(--seal-dark) 88%, var(--seal-dark) 100%);
  color: #f1e3c8;
  text-decoration: none;
  padding: .7rem 1.1rem 1.3rem;
  border: none;
  cursor: pointer;
  font-family: var(--serif-en);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
  box-shadow: 0 6px 14px rgba(0,0,0,.4);
  transition: transform .2s ease;
}
.ribbon:hover{ transform: translateY(2px); }
body.lang-he .ribbon{ right: auto; left: 2rem; font-family: var(--serif-he); }

@media (max-width: 640px){
  .ribbon{ right: 1rem; padding: .55rem .9rem 1.05rem; font-size: .76rem; }
  body.lang-he .ribbon{ left: 1rem; }
}

/* ============================================================
   The wax seal — signature ornament (real pressed-wax photograph)
   ============================================================ */
img.seal-mark{
  display: block;
  width: 84px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
img.seal-mark.small{ width: 46px; }

/* ============================================================
   Shared "page" surface
   ============================================================ */
.page{
  max-width: var(--page-w);
  margin: 0 auto;
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
  border: 1px solid var(--paper-edge);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 30px 60px rgba(0,0,0,.55),
    0 3px 10px rgba(0,0,0,.4);
  padding: 4.5rem 4.2rem 5rem;
  position: relative;
}
.page::before{
  /* aged edge vignette */
  content:"";
  position:absolute; top:0; right:0; bottom:0; left:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0) 55%, rgba(90,68,34,.10) 100%);
}
@media (max-width: 640px){
  .page{ padding: 3rem 1.4rem 3.5rem; }
}

.desk-wrap{ padding: 4.5rem 1.2rem 6rem; }
@media (max-width: 640px){ .desk-wrap{ padding: 5.5rem .6rem 3rem; } }

/* ============================================================
   Typography
   ============================================================ */
h1.title{
  text-align:center;
  font-weight:600;
  color: var(--ink);
  line-height:1.25;
  margin: .3rem 0 .2rem;
  font-family: var(--serif-en);
  font-size: 2.15rem;
  font-style: italic;
}
h1.title.he{ font-family: var(--serif-he); font-size: 2.3rem; font-style: normal; }

.subtitle{
  text-align:center;
  color: var(--ink-soft);
  font-size: 1.02rem;
  letter-spacing:.02em;
  margin: 0 0 2.2rem;
}
.subtitle .hand{ font-family: var(--hand); font-size: 1.3rem; color: var(--seal); }
.subtitle > .he, .subtitle > .en{ display:block; }
.subtitle > .en{ font-style: italic; margin-top:.2rem; }

.kicker{
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:.7rem;
  color: var(--brass);
  margin-bottom: 1.1rem;
}

.rule{
  width: 120px; height: 1px;
  margin: 1.6rem auto;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}
.rule.tight{ margin: 1rem auto; }

/* Chapter headings */
.chapter{ margin: 3.6rem 0 0; scroll-margin-top: 6rem; }
.chapter:first-of-type{ margin-top: 2rem; }
.chapter h2{
  display:flex; align-items:baseline; gap:.65em;
  color: var(--seal);
  font-weight:600;
  margin: 0 0 1.1rem;
}
body.lang-he .chapter h2{ font-family: var(--serif-he); font-size:1.5rem; }
body.lang-en .chapter h2{ font-family: var(--serif-en); font-size:1.4rem; font-style:italic; }
.chapter h2 .num{
  font-family: var(--serif-en);
  font-style:normal;
  color: var(--brass);
  font-size: 1rem;
  letter-spacing:.08em;
}

.chapter p{
  margin: 0 0 1.15em;
  line-height: 1.85;
  font-size: 1.06rem;
  color: var(--ink);
}
body.lang-he .chapter p{ font-family: var(--serif-he); font-size: 1.1rem; line-height: 1.95; }
body.lang-en .chapter p{ font-family: var(--serif-en); }

.chapter p.aside{
  color: var(--ink-soft);
  font-style: italic;
  font-size: .95rem;
}

/* chapter end ornament */
.chapter-end{
  display:flex; align-items:center; justify-content:center;
  gap: .8rem;
  margin: 2.2rem 0 0;
  color: var(--brass);
}
.chapter-end::before, .chapter-end::after{
  content:""; height:1px; width: 70px;
  background: linear-gradient(90deg, transparent, var(--brass));
}
.chapter-end::after{ background: linear-gradient(90deg, var(--brass), transparent); }

/* ============================================================
   Table of contents
   ============================================================ */
nav.toc{
  margin: 2.4rem 0 3.2rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--paper-edge);
  background: rgba(255,255,255,.18);
}
nav.toc h3{
  margin:0 0 .9rem;
  text-align:center;
  font-weight:600;
  color: var(--ink-soft);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
}
nav.toc ol{
  list-style:none; margin:0; padding:0;
  columns: 2;
  column-gap: 2rem;
}
@media (max-width: 640px){ nav.toc ol{ columns: 1; } }
nav.toc li{ break-inside: avoid; margin-bottom:.55rem; }
nav.toc a{
  color: var(--ink);
  text-decoration:none;
  font-size: .96rem;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
body.lang-he nav.toc a{ font-family: var(--serif-he); }
body.lang-en nav.toc a{ font-family: var(--serif-en); }
nav.toc a:hover, nav.toc a.active{
  color: var(--seal);
  border-color: var(--seal);
}
nav.toc a::before{
  color: var(--brass);
  margin-right: .4em;
  font-variant-numeric: normal;
}
body.lang-he nav.toc a::before{ margin-right:0; margin-left:.4em; }

/* ============================================================
   Letters — inset exhibit cards
   ============================================================ */
.letter{
  position: relative;
  margin: 1.6rem 0 2rem;
  padding: 1.9rem 2.1rem 1.7rem;
  background: repeating-linear-gradient(180deg, var(--paper-deep) 0px, var(--paper-deep) 27px, #e6d7b3 28px);
  border: 1px solid var(--paper-edge);
  box-shadow: 0 8px 18px rgba(60,44,20,.25);
}
.letter::before{
  content:"";
  position:absolute; top:-10px; left: 24px;
  width: 26px; height: 26px; border-radius:50%;
  background: radial-gradient(circle at 34% 30%, var(--seal-dark), var(--seal));
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
body.lang-he .letter::before{ left:auto; right:24px; }
.letter .letterhead{
  font-family: var(--hand);
  color: var(--seal);
  font-size: 1.15rem;
  margin: 0 0 .6rem;
  text-align: center;
}
.letter p{ font-style: italic; }
.letter .meta{
  display:block;
  margin-top: .9rem;
  text-align: end;
  font-family: var(--serif-en);
  font-style: normal;
  font-size: .8rem;
  letter-spacing:.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ============================================================
   Photograph placeholders — album corner-mount frames
   ============================================================ */
figure.frame{
  margin: 2.2rem auto;
  max-width: 380px;
}
figure.frame .mount{
  position: relative;
  width: 100%;
  padding-top: 125%; /* maintains a 4:5 box via the padding trick, not the aspect-ratio property, so it renders consistently everywhere */
  border: 1px dashed var(--brass);
  background: rgba(255,255,255,.15);
  overflow: hidden;
}
figure.frame .mount::before, figure.frame .mount::after,
figure.frame .mount .c2, figure.frame .mount .c3{
  content:""; position:absolute; width:14px; height:14px;
  border: 1px solid var(--brass);
  z-index: 2;
}
figure.frame .mount::before{ top:6px; left:6px; border-width:1px 0 0 1px; }
figure.frame .mount::after{ top:6px; right:6px; border-width:1px 1px 0 0; }
figure.frame .mount .c2{ bottom:6px; left:6px; border-width:0 0 1px 1px; }
figure.frame .mount .c3{ bottom:6px; right:6px; border-width:0 1px 1px 0; }
figure.frame img{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  display: block;
}
/* David's source photo is an extremely narrow strip (the original scan itself,
   not a crop choice) — cover would remove most of it regardless of position,
   so it's shown whole instead, letterboxed within the frame. */
figure.frame img[src*="david.jpg"],
figure.frame img[src*="esther-mordechai-simcha-haogen.jpg"]{
  object-fit: contain;
  background: rgba(0,0,0,.06);
}
figure.frame img[src*="mordechai-esther-israel.jpg"]{
  object-position: center 4%;
}
figure.frame .placeholder-text{
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hand);
  color: var(--ink-faint);
  font-size: 1rem;
  text-align:center;
  padding: 0 1rem;
}
figure.frame figcaption{
  margin-top: .6rem;
  text-align:center;
  font-size: .82rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ============================================================
   Cover page (index.html)
   ============================================================ */
.cover .page{ padding: 4rem 3.4rem 4rem; }

.hero-photo{
  width: 100%;
  margin: 0 0 1.8rem;
  display: block;
}
.hero-photo img{ display:block; width:100%; height:auto; }
.hero-photo figcaption{
  text-align:center;
  font-size:.78rem;
  font-style: italic;
  color: var(--ink-soft);
  padding: .9rem 1rem 0;
}
@media (max-width:640px){
  .cover .page{ padding: 3.2rem 1.4rem 3.5rem; }
}

.cover .seal-mark{ margin: 1.7rem auto 1rem; }

.cover .lede-text{
  text-align:center;
  max-width: 46ch;
  margin: 0 auto 2.2rem;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.8;
  font-family: var(--serif-en);
  font-style: italic;
}
.cover .lede-text.he{ font-family: var(--serif-he); font-style: normal; margin-bottom: .5rem; }

.volumes{ list-style:none; margin: 0; padding:0; }
.volume{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--paper-edge);
  background: rgba(255,255,255,.2);
  margin-bottom: .9rem;
  text-decoration:none;
  color: var(--ink);
  transition: background .15s ease, transform .15s ease;
}
.volume:hover{ background: rgba(255,255,255,.4); transform: translateY(-1px); }
.volume .vt{ font-weight:600; font-family: var(--serif-en); font-size:1.1rem; font-style:italic; }
.volume .vt.he{ font-family: var(--serif-he); font-size:1.15rem; font-style:normal; }
.volume .vs{ display:block; color: var(--ink-soft); font-size: .85rem; margin-top:.2em; font-family: var(--serif-en); }
.volume .vs.he{ font-family: var(--serif-he); }
.volume .arrow{ color: var(--brass); font-size: 1.3rem; flex: none; }
.volume-he .arrow{ transform: scaleX(-1); }

.volume.future{
  opacity: .55;
  cursor: default;
}
.volume.future:hover{ background: rgba(255,255,255,.2); transform:none; }

.cover footer.note{
  text-align:center;
  margin-top: 2.6rem;
  font-size: .82rem;
  color: var(--ink-faint);
}
.cover footer.note .en{ font-style: italic; display:block; }
.cover footer.note .he{ display:block; margin-bottom:.2rem; }

/* ============================================================
   Story page shell
   ============================================================ */
.masthead{ text-align:center; }
.masthead .authorline{
  text-align:center;
  color: var(--ink-soft);
  font-size: .92rem;
  margin-bottom: .3rem;
}
.back-link{
  display:inline-block;
  margin-bottom: 2rem;
  color: var(--ink-soft);
  text-decoration:none;
  font-size: .85rem;
  letter-spacing:.03em;
}
.back-link:hover{ color: var(--seal); }

footer.colophon{
  text-align:center;
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--paper-edge);
  font-size: .8rem;
  color: var(--ink-faint);
  font-style: italic;
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  body{ background:#fff; }
  .ribbon, .back-link, nav.toc{ display:none !important; }
  .page{ box-shadow:none; border:none; max-width:100%; padding:0; }
  .he{ display:block !important; }
  .en{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ribbon, .volume{ transition:none; }
}