/* ===== Shared site styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&display=swap');

.font-wordmark {
  font-family: 'Playfair Display', 'EB Garamond', Georgia, serif;
  font-feature-settings: 'lnum';
  letter-spacing: -0.01em;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  color: #151A22;
  /* Layered parchment: warm cream + organic SVG noise + vignette + soft stains */
  background-color: #F0E8D4;
  background-image:
    /* Vignette: darken corners slightly for "aged paper" depth */
    radial-gradient(ellipse 75% 65% at 50% 50%, transparent 45%, rgba(60, 40, 15, 0.09) 100%),
    /* Warm gold spotting top-left */
    radial-gradient(ellipse 35% 30% at 22% 18%, rgba(168, 119, 42, 0.06) 0%, transparent 70%),
    /* Subtle warm wine spotting bottom-right */
    radial-gradient(ellipse 30% 25% at 78% 78%, rgba(122, 46, 42, 0.04) 0%, transparent 70%),
    /* Real fractal-noise paper texture, sepia-tinted */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.13 0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 100% 100%, 100% 100%, 280px 280px;
  background-attachment: fixed;
}
.font-display { font-family:'Fraunces',Georgia,serif; font-optical-sizing:auto; letter-spacing:-0.01em; }
.grain { background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px); background-size:3px 3px; }
.ring-gold { box-shadow: inset 0 0 0 1px rgba(194,149,71,.35); }
.img-fallback { background: linear-gradient(135deg,#2A3340 0%,#151A22 100%); color:#D4AF6A; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(15,18,22,.08), 0 16px 40px rgba(15,18,22,.10); }
.filter-btn { transition: all .15s ease; }
.filter-btn.active { background:#151A22; color:#FAF7F1; border-color:#151A22; }
.hero-img { filter: grayscale(15%) contrast(1.05); }
.num-bg { font-variant-numeric: tabular-nums; }
@keyframes fadeup { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
.fade-up { animation: fadeup .5s ease both; }
details > summary { list-style:none; cursor:pointer; }
details > summary::-webkit-details-marker { display:none; }
.prose-article p:not(.not-prose, .not-prose *) { margin-top: 1.25em; line-height: 1.75; color:#2A3340; font-size: 1.0625rem; }
.prose-article h2:not(.not-prose, .not-prose *) { font-family:'Fraunces',serif; font-weight:600; font-size:1.875rem; margin-top:2.5em; color:#0E1116; }
.prose-article h3:not(.not-prose, .not-prose *) { font-family:'Fraunces',serif; font-weight:600; font-size:1.5rem; margin-top:2em; color:#0E1116; }
.prose-article blockquote:not(.not-prose, .not-prose *) { border-left:3px solid #C29547; margin:2em 0; padding:0.5em 0 0.5em 1.5em; font-family:'Fraunces',serif; font-size:1.5rem; font-style:italic; color:#1F2632; line-height:1.4; }
.prose-article a:not(.not-prose, .not-prose *) { color:#A8772A; text-decoration:underline; text-underline-offset:3px; }

/* ===== Premium minimalist accents ===== */
/* Gold-fill button: solid gold bg, ink text — primary CTA */
.btn-gold {
  background: linear-gradient(180deg, #D4AF6A 0%, #C29547 100%);
  color: #0E1116;
  border: 1px solid #A8772A;
  transition: all .2s ease;
}
.btn-gold:hover {
  background: linear-gradient(180deg, #E0BE7B 0%, #C29547 100%);
  box-shadow: 0 4px 12px rgba(168,119,42,0.25);
  transform: translateY(-1px);
}
/* Gold-outline button: refined museum-style ghost */
.btn-gold-outline {
  background: transparent;
  color: #A8772A;
  border: 1px solid #C29547;
  transition: all .2s ease;
}
.btn-gold-outline:hover {
  background: rgba(212,175,106,0.08);
  border-color: #A8772A;
}
/* Ink button: dark for secondary use */
.btn-ink {
  background: #0E1116;
  color: #FAF7F1;
  border: 1px solid #0E1116;
  transition: all .2s ease;
}
.btn-ink:hover { background: #1F2632; }

/* Gold underline link — for highlighted inline references */
.gold-link {
  color: #A8772A;
  border-bottom: 1px solid rgba(194,149,71,0.4);
  transition: border-color .2s ease;
}
.gold-link:hover { border-color: #A8772A; }

/* Numerals/stats highlight in gold */
.stat-gold {
  color: #A8772A;
  font-family: 'Fraunces', Georgia, serif;
  font-feature-settings: 'lnum';
  font-variant-numeric: lining-nums tabular-nums;
}

/* Hairline divider */
.hairline { height: 1px; background: linear-gradient(to right, transparent, rgba(168,119,42,.3), transparent); }
.hairline-v { width: 1px; background: linear-gradient(to bottom, transparent, rgba(168,119,42,.3), transparent); }

/* Refined card: subtler shadow, hairline border */
.museum-card {
  background: #FAF7F1;
  border: 1px solid rgba(168,119,42,0.18);
  box-shadow: 0 1px 2px rgba(15,18,22,.04), 0 8px 28px rgba(15,18,22,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.museum-card:hover {
  border-color: rgba(168,119,42,0.4);
  box-shadow: 0 2px 4px rgba(15,18,22,.05), 0 16px 40px rgba(15,18,22,.08);
  transform: translateY(-2px);
}

/* Floating "Scroll to read" cue on long pages */
@keyframes scroll-hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.scroll-hint-bob { animation: scroll-hint-bob 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .scroll-hint-bob { animation: none; } }

/* Cropped photos keep the upper part of the picture, where faces usually are,
   instead of cutting through foreheads with a centre crop. */
img.object-cover { object-position: 50% 18%; }

/* Brand star: two tiny twinkles that fade in and out, slowly and out of step. */
@keyframes star-twinkle { 0%, 70%, 100% { opacity: 0; transform: scale(.6); } 82% { opacity: .9; transform: scale(1); } }
.gold-star .star-twinkle { opacity: 0; transform-box: fill-box; transform-origin: center; animation: star-twinkle 4.5s ease-in-out infinite; }
.gold-star .star-twinkle-2 { animation-delay: 2.3s; animation-duration: 5.5s; }
@media (prefers-reduced-motion: reduce) { .gold-star .star-twinkle { animation: none; } }


/* Memorial candle: glass yahrzeit candle with a flame that never goes out. */
.mc { position: relative; width: 150px; height: 290px; margin: 0 auto; }
.mc-halo { position: absolute; left: 50%; top: 40px; width: 360px; height: 360px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,196,110,.42) 0%, rgba(255,160,70,.16) 32%, rgba(255,140,60,0) 66%); animation: mc-breathe 3.2s ease-in-out infinite; pointer-events: none; }
.mc-flame-wrap { position: absolute; left: 50%; bottom: 196px; width: 34px; height: 92px; transform: translateX(-50%); transform-origin: 50% 100%; animation: mc-sway 4.2s ease-in-out infinite; }
.mc-flame { position: absolute; inset: 0; border-radius: 50% 50% 46% 46% / 64% 64% 36% 36%; background: radial-gradient(ellipse at 50% 78%, #fffbe6 0%, #ffe9a8 18%, #ffc35a 42%, #ff8a24 66%, rgba(255,100,20,.0) 82%); filter: blur(.6px); box-shadow: 0 0 22px 8px rgba(255,170,70,.55), 0 0 60px 18px rgba(255,140,50,.28); transform-origin: 50% 100%; animation: mc-flicker 1.6s ease-in-out infinite; }
.mc-core { position: absolute; left: 50%; bottom: 8px; width: 12px; height: 34px; transform: translateX(-50%); border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; background: radial-gradient(ellipse at 50% 70%, #ffffff 0%, #fff6d0 45%, rgba(255,240,190,0) 75%); filter: blur(.4px); animation: mc-core 1.3s ease-in-out infinite; }
.mc-blue { position: absolute; left: 50%; bottom: 0; width: 16px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, rgba(120,170,255,.75), rgba(80,120,255,.0) 70%); filter: blur(.8px); }
.mc-wick { position: absolute; left: 50%; bottom: 190px; width: 3px; height: 14px; transform: translateX(-50%) rotate(4deg); border-radius: 2px; background: linear-gradient(#2a1a10, #120a05); box-shadow: 0 -2px 3px rgba(255,140,50,.6); }
.mc-glass { position: absolute; left: 0; right: 0; bottom: 0; height: 200px; border-radius: 14px 14px 22px 22px; background: linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.28) 12%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.02) 62%, rgba(255,255,255,.16) 86%, rgba(255,255,255,.06) 100%); border: 1px solid rgba(255,240,215,.28); box-shadow: inset 0 0 18px rgba(255,200,130,.18), 0 18px 40px rgba(0,0,0,.45); overflow: hidden; }
.mc-wax { position: absolute; left: 6px; right: 6px; bottom: 6px; top: 22px; border-radius: 10px 10px 18px 18px; background: linear-gradient(180deg, #fff6e6 0%, #f3e3c4 30%, #e2cba2 100%); box-shadow: inset 0 10px 18px rgba(255,190,110,.55), inset 0 -10px 20px rgba(120,80,30,.25); }
.mc-wax::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 20px; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, #fff8e3 0%, #ffd9a0 40%, #f0d7ad 70%); box-shadow: 0 0 16px rgba(255,190,110,.6); }
.mc-rim { position: absolute; left: -2px; right: -2px; bottom: 192px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,240,215,.35); background: radial-gradient(ellipse, rgba(255,255,255,.05), rgba(255,255,255,0) 70%); }
.mc-shine { position: absolute; left: 14px; bottom: 18px; width: 9px; height: 160px; border-radius: 6px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.05)); filter: blur(1px); }
.mc-label { position: absolute; left: 50%; bottom: 62px; transform: translateX(-50%); font-family: 'Fraunces', serif; font-size: 22px; color: rgba(120,80,30,.55); letter-spacing: .02em; white-space: nowrap; }
.mc-base-glow { position: absolute; left: 50%; bottom: -24px; width: 240px; height: 40px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,170,80,.28), rgba(255,170,80,0) 70%); animation: mc-breathe 3.8s ease-in-out infinite; }
@keyframes mc-flicker { 0%,100% { transform: scale(1,1) skewX(0deg); opacity: 1; } 12% { transform: scale(.95,1.07) skewX(-2.5deg); } 27% { transform: scale(1.04,.95) skewX(1.8deg); opacity: .93; } 41% { transform: scale(.97,1.09) skewX(-1.2deg); } 58% { transform: scale(1.05,.96) skewX(2.2deg); opacity: .97; } 73% { transform: scale(.96,1.05) skewX(-2deg); } 88% { transform: scale(1.02,.99) skewX(.8deg); opacity: .95; } }
@keyframes mc-core { 0%,100% { transform: translateX(-50%) scale(1); opacity: .95; } 50% { transform: translateX(-50%) scale(.92,1.06); opacity: .85; } }
@keyframes mc-sway { 0%,100% { transform: translateX(-50%) rotate(0deg); } 22% { transform: translateX(-50%) rotate(-3deg); } 48% { transform: translateX(-50%) rotate(2.2deg); } 70% { transform: translateX(-50%) rotate(-1.4deg); } 86% { transform: translateX(-50%) rotate(1deg); } }
@keyframes mc-breathe { 0%,100% { opacity: .7; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } }
.mc-base-glow { animation-name: mc-breathe-base; }
@keyframes mc-breathe-base { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mc-flame, .mc-core, .mc-flame-wrap, .mc-halo, .mc-base-glow { animation: none; } }

/* The same candle, shrunk, for the memorial band on profiles. */
.mini-candle { position: relative; width: 34px; height: 64px; flex: none; }
.mini-candle .mc { position: absolute; left: 0; top: 0; transform: scale(.225); transform-origin: 0 0; }
.mini-candle .mc-label { display: none; }
.mini-candle .mc-halo { width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,196,110,.6) 0%, rgba(255,160,70,.22) 32%, rgba(255,140,60,0) 66%); }

/* Profile photos: on in-between widths (narrow desktop windows, tablets) the photo column
   would stretch to the full page width. Keep it a comfortable, centred size there. */
@media (min-width: 480px) and (max-width: 1023px) {
  .lg\:col-span-5:has(img.hero-img) { max-width: 26rem; margin-left: auto; margin-right: auto; width: 100%; }
}