/* ============================================================
   In Memory of Kathleen "Katie" Hoertkorn
   Built on the family's design system: claret / brass / sage,
   Cormorant Garamond + EB Garamond + Cormorant SC.
   ============================================================ */

/* ---------- Self-hosted fonts (no third-party CDN) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/cormorant-garamond-400.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/cormorant-garamond-400-italic.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cormorant-garamond-500.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/cormorant-garamond-600.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/eb-garamond-400.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/eb-garamond-400-italic.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/eb-garamond-500.woff2") format("woff2");}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/cormorant-sc-500.woff2") format("woff2");}
@font-face{font-family:"Cormorant SC";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/cormorant-sc-600.woff2") format("woff2");}

:root{
  --claret:#6b2434;
  --claret-deep:#4a1824;
  --brass:#b08d49;
  --brass-soft:#cdb27e;
  --sage:#7e8a6c;
  --sage-soft:#aab39a;
  --ivory:#f7f1e6;
  --paper:#fcf9f3;
  --ink:#2c2723;
  --ink-soft:#5b524a;
  --line:#e6dcc9;

  --serif-display:"Cormorant Garamond", Georgia, serif;
  --serif-body:"EB Garamond", Georgia, serif;
  --serif-caps:"Cormorant SC","Cormorant Garamond", Georgia, serif;

  --nav-h:62px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif-body); font-size:19px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:var(--claret);}

.wrap{max-width:980px; margin:0 auto; padding:0 28px;}
section{padding:78px 0; border-bottom:1px solid var(--line); scroll-margin-top:var(--nav-h);}
section:last-of-type{border-bottom:none;}
h1,h2,h3{font-family:var(--serif-display); font-weight:500; line-height:1.12; margin:0;}
.eyebrow{font-family:var(--serif-caps); letter-spacing:.22em; text-transform:uppercase;
  font-size:13px; color:var(--brass); margin:0 0 14px;}
.section-title{font-size:clamp(30px,5vw,44px); color:var(--claret); text-align:center;}
.section-sub{text-align:center; max-width:60ch; margin:14px auto 0; color:var(--ink-soft); font-style:italic;}
.lead{font-size:21px; color:var(--ink-soft); font-style:italic;}
.muted{color:var(--ink-soft);}
.center{text-align:center;}
hr.rule{border:none; height:1px; background:var(--line); margin:34px 0;}

/* brass ornament divider under section titles */
.ornament{display:block; width:64px; height:auto; margin:18px auto 0; color:var(--brass);}
.title-rule{width:70px; height:2px; background:var(--brass); margin:18px auto 0; border:none;}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:0 28px; background:rgba(252,249,243,.88); backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .brand{font-family:var(--serif-display); font-size:22px; color:var(--claret); text-decoration:none; white-space:nowrap;}
.nav .links{display:flex; gap:26px; align-items:center; flex-wrap:wrap;}
.nav .links a{
  font-family:var(--serif-caps); letter-spacing:.18em; text-transform:uppercase; font-size:13px;
  color:var(--ink-soft); text-decoration:none; transition:color .2s;
}
.nav .links a:hover{color:var(--brass);}
@media(max-width:640px){
  :root{--nav-h:auto;}
  .nav{flex-direction:column; gap:8px; padding:12px 20px;}
  .nav .brand{font-size:20px;}
  .nav .links{gap:18px; justify-content:center;}
  .nav .links a{font-size:12px; letter-spacing:.14em;}
}

/* ---------- HERO ---------- */
.hero{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(176,141,73,.18), transparent 60%),
    linear-gradient(180deg,var(--claret-deep),var(--claret));
  color:var(--ivory); text-align:center; padding:92px 28px 86px;
}
.hero .vine{color:var(--brass-soft); font-size:30px; letter-spacing:.5em; margin-bottom:24px;}
.hero h1{font-size:clamp(44px,8.5vw,86px); color:var(--ivory); font-weight:400; letter-spacing:.01em;}
.hero .dates{font-family:var(--serif-caps); letter-spacing:.34em; text-transform:uppercase;
  font-size:15px; color:var(--brass-soft); margin-top:20px;}
.hero .fulldates{font-style:italic; color:rgba(247,241,230,.7); font-size:16px; margin-top:8px; letter-spacing:.02em;}
.hero .epitaph{max-width:600px; margin:28px auto 0; font-style:italic; font-size:21px; color:rgba(247,241,230,.86);}

/* portrait frame */
.portrait{margin:42px auto 0; max-width:330px;}
.frame{padding:12px; background:#fdfbf6; border:1px solid var(--line); box-shadow:0 10px 30px rgba(74,24,36,.28); border-radius:4px;}
.frame .photo{aspect-ratio:4/5; border-radius:2px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); font-style:italic; text-align:center; padding:14px;
  background:repeating-linear-gradient(45deg,#ece3d2,#ece3d2 12px,#e6dcc9 12px,#e6dcc9 24px);}
.frame .photo img{width:100%; height:100%; object-fit:cover;}

/* ---------- ABOUT ---------- */
.about .message{font-size:20px;}
.about .message p{margin:0 0 20px;}
.about .message .signoff{font-style:italic; color:var(--ink-soft);}
.about .drop::first-letter{font-family:var(--serif-display); font-size:64px; line-height:.8; float:left; color:var(--claret); padding:6px 10px 0 0;}
.quote{border-left:3px solid var(--brass); padding:4px 0 4px 22px; font-style:italic;
  font-size:23px; font-family:var(--serif-display); color:var(--claret); margin:34px 0;}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:6px;}
@media(max-width:680px){.grid2{grid-template-columns:1fr; gap:18px;}}
.pill{font-family:var(--serif-caps); letter-spacing:.14em; text-transform:uppercase; font-size:13px; margin:0 0 4px;}
.facet p.muted{margin-top:0;}

/* ---------- GALLERY ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; margin-top:42px;}
.gallery-grid .frame{padding:7px; margin:0; cursor:zoom-in; box-shadow:0 4px 12px rgba(74,24,36,.14);
  transition:transform .15s ease, box-shadow .15s ease;}
.gallery-grid .frame:hover{transform:translateY(-3px); box-shadow:0 9px 22px rgba(74,24,36,.24);}
.gallery-grid .thumb{aspect-ratio:1/1; overflow:hidden; border-radius:2px;}
.gallery-grid .thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.gallery-note{margin-top:28px; text-align:center; color:var(--ink-soft); font-style:italic;}

/* lightbox */
.lightbox{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  background:rgba(44,39,35,.92); padding:32px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:92vw; max-height:88vh; border:10px solid #fdfbf6; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox .close{position:absolute; top:20px; right:26px; color:var(--ivory); font-size:34px; cursor:pointer; line-height:1; background:none; border:none;}
.lightbox .nav{position:absolute; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--ivory); font-size:56px; line-height:1; cursor:pointer; padding:10px 20px; opacity:.7; transition:opacity .15s;}
.lightbox .nav:hover{opacity:1;}
.lightbox .nav.prev{left:6px;}
.lightbox .nav.next{right:6px;}
@media(max-width:560px){.lightbox .nav{font-size:40px; padding:10px;}}

/* ---------- MEMORIES ---------- */
.memories-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:24px; margin-top:42px;}
.memory-card{background:var(--ivory); border:1px solid var(--line); border-radius:12px; padding:26px 28px; display:flex; flex-direction:column;}
.memory-card .who{font-family:var(--serif-display); font-size:22px; color:var(--ink); line-height:1.15;}
.memory-card .rel{font-family:var(--serif-caps); letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--brass); margin-top:3px;}
.memory-card .msg{margin:16px 0 0;}
.memory-card .msg p{margin:0 0 10px;}
.memory-card .when{margin-top:18px; font-family:var(--serif-caps); letter-spacing:.1em; text-transform:uppercase; font-size:11px; color:var(--ink-soft);}
.memories-empty{margin-top:40px; text-align:center; color:var(--ink-soft); font-style:italic; font-size:20px;}

/* share-a-memory form */
.share{margin-top:56px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:34px 32px; max-width:680px; margin-left:auto; margin-right:auto; box-shadow:0 2px 0 var(--line);}
.share h3{font-size:27px; color:var(--claret); text-align:center;}
.share .share-sub{text-align:center; color:var(--ink-soft); font-style:italic; margin:8px 0 24px;}
.field{margin-bottom:18px;}
.field label{display:block; font-family:var(--serif-caps); letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--ink-soft); margin-bottom:6px;}
.field .opt{color:var(--brass); font-style:normal;}
.field input, .field textarea{
  width:100%; font-family:var(--serif-body); font-size:18px; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px 14px;
}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(176,141,73,.18);}
.field textarea{min-height:140px; resize:vertical;}
.field.check label{display:flex; align-items:center; gap:10px; text-transform:none; letter-spacing:normal; font-family:var(--serif-body); font-size:17px; color:var(--ink-soft); cursor:pointer; margin-bottom:0;}
.field.check input{width:auto; accent-color:var(--claret);}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.btn{display:inline-block; font-family:var(--serif-caps); letter-spacing:.16em; text-transform:uppercase; font-size:13px;
  padding:14px 30px; border-radius:999px; text-decoration:none; cursor:pointer; border:1px solid transparent;}
.btn-primary{background:var(--claret); color:var(--ivory);}
.btn-primary:hover{background:var(--claret-deep);}
.btn-ghost{background:transparent; color:var(--claret); border-color:var(--claret);}
.share .actions{text-align:center; margin-top:6px;}
.note{font-size:14px; color:var(--ink-soft); text-align:center; margin-top:14px;}

/* banners */
.banner{max-width:680px; margin:0 auto 30px; padding:16px 22px; border-radius:10px; text-align:center; font-style:italic;}
.banner.thanks{background:rgba(126,138,108,.16); border:1px solid var(--sage-soft); color:#4f5942;}
.banner.error{background:rgba(107,36,52,.08); border:1px solid var(--claret); color:var(--claret);}

/* ---------- GIVE ---------- */
.give{background:linear-gradient(180deg,var(--claret),var(--claret-deep)); color:var(--ivory); text-align:center; border-bottom:none;}
.give .eyebrow{color:var(--brass-soft);}
.give h2{color:var(--ivory); font-size:clamp(30px,5vw,44px);}
.give p{max-width:640px; margin:20px auto 0; color:rgba(247,241,230,.88);}
.give .btn-give{margin-top:30px; background:var(--brass); color:var(--claret-deep); font-weight:600;}
.give .btn-give:hover{background:var(--brass-soft);}
.give .small{font-size:14px; color:rgba(247,241,230,.66); margin-top:18px; font-style:italic;}

/* ---------- FOOTER ---------- */
footer{background:var(--claret-deep); color:rgba(247,241,230,.8); text-align:center; padding:56px 28px;}
footer .vine{color:var(--brass-soft); letter-spacing:.5em; font-size:24px; margin-bottom:14px;}
footer .name{font-family:var(--serif-display); font-size:27px; color:var(--ivory);}
footer .iml{font-family:var(--serif-caps); letter-spacing:.28em; text-transform:uppercase; font-size:12px; margin-top:10px;}
footer .dates{font-size:14px; color:rgba(247,241,230,.6); margin-top:6px; font-style:italic;}
footer a{color:var(--brass-soft);}
footer .admin-link{display:inline-block; margin-top:24px; font-family:var(--serif-caps); letter-spacing:.2em; text-transform:uppercase; font-size:11px; color:rgba(247,241,230,.3); text-decoration:none; transition:color .2s;}
footer .admin-link:hover{color:var(--brass-soft);}

/* ---------- ADMIN ---------- */
.admin-wrap{max-width:860px; margin:0 auto; padding:40px 24px;}
.admin-wrap h1{color:var(--claret); font-size:34px;}
.admin-row{border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin-top:16px; background:#fff;}
.admin-row.removed{opacity:.55; background:var(--ivory);}
.admin-row .meta{font-family:var(--serif-caps); letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:var(--ink-soft);}
.admin-row .who{font-family:var(--serif-display); font-size:21px; color:var(--ink);}
.admin-row form{display:inline;}
.admin-row button{font-family:var(--serif-caps); letter-spacing:.1em; text-transform:uppercase; font-size:12px; padding:8px 16px; border-radius:999px; border:1px solid var(--claret); background:#fff; color:var(--claret); cursor:pointer; margin-top:10px;}
.admin-row button.restore{border-color:var(--sage); color:var(--sage);}
.status-pill{display:inline-block; font-family:var(--serif-caps); letter-spacing:.1em; text-transform:uppercase; font-size:11px; padding:2px 10px; border-radius:999px;}
.status-pill.visible{background:rgba(126,138,108,.18); color:#4f5942;}
.status-pill.removed{background:rgba(107,36,52,.1); color:var(--claret);}

/* simple centered card pages (remove-confirm, 404) */
.simple{max-width:620px; margin:0 auto; padding:80px 28px; text-align:center;}
.simple h1{color:var(--claret); font-size:40px;}
.simple p{color:var(--ink-soft); margin-top:16px;}
.simple .card{background:var(--ivory); border:1px solid var(--line); border-radius:12px; padding:24px; margin:28px 0; text-align:left;}