@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&display=swap');

:root{
  --paper:#FAF3E8;
  --paper-deep:#F1E6D3;
  --ink:#3A2E26;
  --ink-soft:#6B5C4F;
  --candle:#C9974C;
  --candle-soft:#E8C988;
  --rose:#B8786A;
  --line:rgba(58,46,38,0.14);
  --radius:14px;
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Lora', Georgia, serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

a{color:var(--rose);}

.wrap{max-width:880px;margin:0 auto;padding:0 24px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:88px 24px 64px;
  text-align:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, var(--paper-deep) 0%, transparent 70%);
  overflow:hidden;
}

.candle{
  width:14px;height:34px;margin:0 auto 28px;
  position:relative;
}
.candle .flame{
  position:absolute;left:50%;top:-22px;transform:translateX(-50%);
  width:13px;height:22px;
  background:radial-gradient(circle at 50% 70%, #FFF4D6 0%, var(--candle-soft) 40%, var(--candle) 75%, transparent 100%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  filter:blur(0.3px);
  animation:flicker 3.2s ease-in-out infinite;
  transform-origin:50% 90%;
}
.candle .wax{
  width:14px;height:34px;background:linear-gradient(180deg,#FFFDF8,#EFE2C8);
  border-radius:3px 3px 1px 1px;box-shadow:0 1px 2px rgba(0,0,0,0.08);
}
@keyframes flicker{
  0%,100%{transform:translateX(-50%) scaleY(1) rotate(0deg);}
  25%{transform:translateX(-50%) scaleY(1.04) rotate(-1.5deg);}
  50%{transform:translateX(-48%) scaleY(0.97) rotate(1deg);}
  75%{transform:translateX(-52%) scaleY(1.02) rotate(-0.5deg);}
}

.eyebrow{
  font-family:'Lora',serif;
  font-size:13px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 18px;
}

h1.name{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  font-size:clamp(48px,9vw,84px);
  line-height:1;
  margin:0 0 10px;
  color:var(--ink);
}

.dates{
  font-style:italic;color:var(--ink-soft);font-size:18px;margin:0 0 28px;
}

.epitaph{
  max-width:560px;margin:0 auto;font-size:19px;color:var(--ink-soft);
  font-style:italic;
}

/* ---------- Sections ---------- */
section{padding:48px 0;}
.divider{
  height:1px;background:var(--line);max-width:120px;margin:0 auto;
}
h2.section-title{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:34px;text-align:center;margin:0 0 8px;
}
.section-sub{
  text-align:center;color:var(--ink-soft);margin:0 0 36px;font-size:16px;
}

/* ---------- Welcome ---------- */
.welcome{padding-top:0;padding-bottom:28px;text-align:center;}
.welcome-text{
  max-width:520px;margin:0 auto;font-size:16px;font-style:italic;color:var(--ink-soft);
}

/* ---------- Destinations ---------- */
.destinations{padding-top:0;padding-bottom:44px;}
.dest-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
}
.dest-card{
  display:block;background:#FFFDF8;border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;text-decoration:none;color:inherit;transition:border-color .2s;
}
.dest-card:hover{border-color:var(--candle);}
.dest-card:focus-visible{outline:2px solid var(--candle);outline-offset:2px;}
.dest-icon{display:block;font-size:26px;margin-bottom:10px;}
.dest-title{
  display:block;font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:19px;color:var(--ink);margin-bottom:6px;
}
.dest-desc{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft);}

/* ---------- Form ---------- */
.card{
  background:#FFFDF8;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:0 2px 10px rgba(58,46,38,0.05);
}
form .field{margin-bottom:18px;}
label{display:block;font-size:13px;letter-spacing:0.04em;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;}
input[type=text], textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  font-family:'Lora',serif;font-size:16px;background:#fff;color:var(--ink);
}
textarea{min-height:110px;resize:vertical;}
input[type=text]:focus, textarea:focus{outline:2px solid var(--candle-soft);outline-offset:1px;border-color:var(--candle);}

.file-drop{
  border:1.5px dashed var(--line);border-radius:10px;padding:22px;text-align:center;
  color:var(--ink-soft);cursor:pointer;background:var(--paper);transition:border-color .2s,background .2s;
}
.file-drop:hover{border-color:var(--candle);}
.file-drop input{display:none;}
.file-drop .fname{margin-top:8px;font-size:14px;color:var(--ink);}

button.submit{
  display:block;width:100%;padding:14px;border:none;border-radius:8px;
  background:var(--rose);color:#FFFDF8;font-family:'Lora',serif;font-size:16px;font-weight:500;
  cursor:pointer;transition:background .2s,transform .1s;
}
button.submit:hover{background:#A6695C;}
button.submit:active{transform:scale(0.99);}
button.submit:focus-visible{outline:2px solid var(--candle);outline-offset:2px;}
button.submit:disabled{opacity:0.6;cursor:default;}

.status-msg{margin-top:14px;text-align:center;font-size:14px;}
.status-msg.ok{color:#5B7A5E;}
.status-msg.err{color:var(--rose);}

/* ---------- Memory wall ---------- */
.wall{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;
}
.entry{
  background:#FFFDF8;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
}
.entry img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;}
.entry .body{padding:16px 18px;}
.entry .msg{font-size:15.5px;margin:0 0 10px;}
.entry .who{font-size:13px;color:var(--ink-soft);font-style:italic;}
.empty-wall{
  text-align:center;color:var(--ink-soft);padding:40px 0;font-style:italic;
}

footer{
  text-align:center;padding:36px 24px 60px;color:var(--ink-soft);font-size:13px;
}

/* Language toggle */
.lang-toggle{
  position:fixed;top:14px;right:14px;z-index:100;
  background:rgba(255,253,248,0.92);border:1px solid var(--line);
  border-radius:20px;padding:5px 14px;
  font-family:'Lora',serif;font-size:13px;cursor:pointer;
  color:var(--ink-soft);backdrop-filter:blur(4px);
  transition:color .2s,border-color .2s;
}
.lang-toggle:hover{color:var(--ink);border-color:var(--candle);}