/* ============================================================
   MATT & SOPH — shared design system
   A publication / Substack-style theme. Edit the tokens below to
   change color, type, and spacing across every page at once.
   ============================================================ */

:root{
  --paper:      #FAF6EF;
  --panel:      #FFFFFF;
  --panel-2:    #F3ECDF;
  --ink:        #211B14;
  --ink-dim:    #6E6355;
  --ink-faint:  #A69C8C;
  --rule:       rgba(33,27,20,0.12);
  --rule-2:     rgba(33,27,20,0.07);
  --brand:      #B3402E;
  --brand-dim:  #8A2F21;
  --brand-tint: #F4E3DD;
  --ok:         #3E6B4F;
  --shadow:     0 10px 34px rgba(33,27,20,0.09);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Source Serif 4', Georgia, serif;
  font-size:18px;
  line-height:1.65;
  min-height:100svh;
}
::selection{ background:var(--brand-tint); color:var(--brand-dim); }
a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
button, input, textarea{ font-family:inherit; }

h1,h2,h3,h4{ font-family:'Fraunces', Georgia, serif; font-weight:600; color:var(--ink); line-height:1.12; letter-spacing:-0.01em; }
.display{ font-family:'Fraunces', Georgia, serif; font-optical-sizing:auto; }
.ui{ font-family:'Inter', system-ui, sans-serif; }
.eyebrow{
  font-family:'Inter', system-ui, sans-serif; font-size:12px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--brand); display:flex; align-items:center; gap:0.6em;
}
.center{ text-align:center; }
.center .eyebrow{ justify-content:center; }

.wrap{ max-width:1080px; margin:0 auto; padding:0 6vw; }
.wrap-narrow{ max-width:760px; margin:0 auto; padding:0 6vw; }
section{ padding:min(9vw,72px) 0; }

/* ---------- buttons ---------- */
.btn{
  font-family:'Inter',system-ui,sans-serif; font-size:14px; font-weight:600; letter-spacing:0.01em;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  padding:0.75em 1.4em; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:0.5em;
  transition:transform .2s var(--ease), opacity .2s;
}
.btn:hover{ opacity:0.85; text-decoration:none; }
.btn:active{ transform:scale(0.98); }
.btn-outline{ background:none; color:var(--ink); border-color:var(--rule); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-small{ padding:0.5em 0.9em; font-size:12.5px; }
.btn-danger{ background:none; border-color:rgba(179,64,46,0.4); color:var(--brand); }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }

/* ---------- form fields ---------- */
.field{ display:flex; flex-direction:column; gap:0.4em; margin-bottom:1em; text-align:left; }
.field label{ font-family:'Inter',system-ui,sans-serif; font-size:12.5px; font-weight:600; color:var(--ink-dim); letter-spacing:0.02em; }
.field input, .field textarea{
  border:1px solid var(--rule); border-radius:3px; padding:0.75em 0.9em; font-size:15.5px; background:var(--panel); color:var(--ink);
}
.field textarea{ resize:vertical; min-height:110px; font-family:'Source Serif 4',serif; }
.field input:focus, .field textarea:focus{ border-color:var(--brand); }
.form-note{ font-family:'Inter',system-ui,sans-serif; font-size:12.5px; color:var(--ink-faint); margin-top:-0.3em; }
.form-error{ font-family:'Inter',system-ui,sans-serif; font-size:13px; color:var(--brand-dim); background:var(--brand-tint); border-radius:3px; padding:0.6em 0.8em; }

/* ============================================================
   AUTH GATE — full-screen overlay shown until signed in
   ============================================================ */
#auth-gate{
  position:fixed; inset:0; z-index:2000; background:var(--paper);
  display:flex; align-items:center; justify-content:center; padding:8vw 6vw;
  overflow-y:auto;
}
#auth-gate.hidden{ display:none; }
.auth-card{
  width:100%; max-width:400px; background:var(--panel); border:1px solid var(--rule);
  border-radius:6px; padding:clamp(1.8rem,5vw,2.6rem); box-shadow:var(--shadow); text-align:center;
}
.auth-mark{ font-family:'Fraunces',serif; font-size:1.5rem; margin-bottom:0.2em; }
.auth-tag{ font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-dim); margin-bottom:1.6em; }
.auth-tabs{ display:flex; border:1px solid var(--rule); border-radius:4px; overflow:hidden; margin-bottom:1.4em; }
.auth-tabs button{
  flex:1; padding:0.6em; font-family:'Inter',sans-serif; font-size:13px; font-weight:600; background:none; border:none; color:var(--ink-dim); cursor:pointer;
}
.auth-tabs button.active{ background:var(--ink); color:var(--paper); }
.auth-form{ display:none; }
.auth-form.active{ display:block; }
#auth-loading{ padding:2em 0; color:var(--ink-dim); font-family:'Inter',sans-serif; font-size:13px; }

/* ============================================================
   MASTHEAD / TAB NAV — sticky top bar, present once signed in
   ============================================================ */
#masthead{
  position:sticky; top:0; z-index:500; background:rgba(250,246,239,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.masthead-row{
  max-width:1080px; margin:0 auto; padding:16px 6vw 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.masthead-brand{ font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; color:var(--ink); }
.masthead-brand span{ color:var(--brand); }
.masthead-user{ display:flex; align-items:center; gap:10px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--ink-dim); }
.masthead-user .pill{
  background:var(--panel-2); border-radius:20px; padding:0.35em 0.85em; font-weight:600; color:var(--ink);
}
.masthead-user .pill.admin{ background:var(--brand); color:#fff; }
.masthead-user button{ background:none; border:none; color:var(--ink-dim); font-family:'Inter',sans-serif; font-size:12.5px; cursor:pointer; text-decoration:underline; }
.tabs{
  max-width:1080px; margin:0 auto; padding:14px 6vw 0; display:flex; gap:clamp(14px,3vw,30px); overflow-x:auto;
}
.tabs a{
  font-family:'Inter',sans-serif; font-size:14px; font-weight:600; color:var(--ink-dim);
  padding-bottom:14px; border-bottom:2px solid transparent; white-space:nowrap; text-decoration:none;
}
.tabs a:hover{ color:var(--ink); }
.tabs a.active{ color:var(--ink); border-color:var(--brand); }
.page-content{ padding-top:8px; }

/* ============================================================
   HERO / COUNTDOWN (index.html)
   ============================================================ */
#hero-countdown{ min-height:78svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:10vw 6vw 6vw; }
.hero-kicker{ font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--brand); margin-bottom:1.2em; }
#hero-countdown h1{ font-size:clamp(2.1rem,6vw,4.2rem); max-width:16ch; }
.clock{ display:flex; justify-content:center; gap:clamp(0.7rem,3vw,2rem); margin-top:2.4em; flex-wrap:wrap; }
.clock-unit{ text-align:center; min-width:74px; }
.clock-num{ font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.1rem,6vw,3.6rem); color:var(--ink); font-variant-numeric:tabular-nums; }
.clock-label{ font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:0.18em; color:var(--ink-faint); text-transform:uppercase; margin-top:0.3em; }
.countdown-note{ margin-top:2em; font-style:italic; color:var(--ink-dim); max-width:44ch; }
.birthday-banner{ margin-top:2em; font-family:'Fraunces',serif; font-size:clamp(1.6rem,4vw,2.4rem); color:var(--brand); }

/* the letter */
.letter-wrap{ display:flex; justify-content:center; padding:2vw 6vw 8vw; }
.letter-card{
  max-width:640px; width:100%; background:var(--panel); border:1px solid var(--rule); border-radius:6px;
  padding:clamp(1.8rem,6vw,3.6rem); box-shadow:var(--shadow);
}
.letter-eyebrow{ font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:1.4em; }
.letter-body p{ margin-bottom:1.1em; font-size:1.14rem; }
.letter-body p:first-child{ font-family:'Fraunces',serif; font-style:italic; font-size:1.3rem; }
.letter-sign{ margin-top:1.8em; font-style:italic; color:var(--brand); font-size:1.25rem; }

.enter-site{ text-align:center; padding:2vw 6vw 8vw; }
.enter-site p{ color:var(--ink-dim); margin-bottom:1.2em; }
.admin-preview-note{
  max-width:640px; margin:0 auto 3em; background:var(--panel-2); border:1px solid var(--rule); border-radius:6px;
  padding:1em 1.3em; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink-dim);
}

/* ============================================================
   HOME TAB
   ============================================================ */
.home-hero{ display:flex; gap:clamp(24px,5vw,56px); align-items:center; flex-wrap:wrap; padding:5vw 0; }
.home-photo{ flex:1 1 320px; aspect-ratio:4/5; max-width:380px; background:var(--panel-2); border-radius:8px; overflow:hidden; border:1px solid var(--rule); }
.home-photo img{ width:100%; height:100%; object-fit:cover; }
.home-photo-empty{ display:flex; align-items:center; justify-content:center; height:100%; color:var(--ink-faint); font-family:'Inter',sans-serif; font-size:13px; text-align:center; padding:2em; }
.home-copy{ flex:1 1 340px; }
.home-copy h1{ font-size:clamp(2rem,5vw,3.2rem); margin-bottom:0.4em; }
.home-copy .body-text{ font-size:1.15rem; color:var(--ink-dim); white-space:pre-wrap; }

/* ============================================================
   GALLERY TAB
   ============================================================ */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; margin-top:2em; }
.gallery-item{ background:var(--panel); border:1px solid var(--rule); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.gallery-media{ aspect-ratio:4/3; background:var(--panel-2); cursor:pointer; }
.gallery-media img, .gallery-media video{ width:100%; height:100%; object-fit:cover; }
.gallery-caption{ padding:0.9em 1em; font-size:14.5px; color:var(--ink-dim); font-style:italic; }
.gallery-empty, .empty-state{
  text-align:center; padding:4em 2em; color:var(--ink-faint); font-family:'Inter',sans-serif; font-size:14px;
  border:1px dashed var(--rule); border-radius:8px; margin-top:2em;
}
#lightbox{
  position:fixed; inset:0; z-index:1500; background:rgba(20,16,10,0.92);
  display:flex; align-items:center; justify-content:center; padding:6vw;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
#lightbox.open{ opacity:1; visibility:visible; }
#lightbox img, #lightbox video{ max-height:84vh; max-width:100%; border-radius:6px; }
#lightbox-close{ position:absolute; top:24px; right:24px; background:none; border:none; color:#fff; font-family:'Inter',sans-serif; letter-spacing:0.1em; font-size:13px; cursor:pointer; }

/* ============================================================
   CELEBRATIONS TAB (blog / substack)
   ============================================================ */
.post-list{ display:flex; flex-direction:column; }
.post-item{ padding:2em 0; border-bottom:1px solid var(--rule); }
.post-item:first-child{ padding-top:0; }
.post-date{ font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:0.5em; }
.post-item h2{ font-size:clamp(1.4rem,3vw,1.9rem); margin-bottom:0.4em; }
.post-item h2 a{ color:var(--ink); text-decoration:none; }
.post-item h2 a:hover{ color:var(--brand); }
.post-excerpt{ color:var(--ink-dim); }
.post-cover{ width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:8px; margin-bottom:1em; border:1px solid var(--rule); }
.archive-list{ margin-top:0.5em; }
.archive-list a{ display:flex; justify-content:space-between; gap:1em; padding:0.55em 0; border-bottom:1px solid var(--rule-2); color:var(--ink); font-family:'Inter',sans-serif; font-size:14px; text-decoration:none; }
.archive-list a:hover{ color:var(--brand); }
.archive-list .archive-date{ color:var(--ink-faint); white-space:nowrap; }
.post-full h1{ font-size:clamp(1.9rem,5vw,2.8rem); margin-bottom:0.3em; }
.post-full .post-body{ font-size:1.15rem; margin-top:1.4em; white-space:pre-wrap; }
.post-full .post-body p{ margin-bottom:1.1em; }

/* ============================================================
   FRIENDS & FAMILY (message board)
   ============================================================ */
.prompt-card{ background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:1.6em 1.8em; margin-bottom:1.6em; box-shadow:var(--shadow); }
.prompt-card.pinned{ border-color:var(--brand); }
.prompt-title{ font-size:1.35rem; margin-bottom:0.3em; }
.prompt-body{ color:var(--ink-dim); margin-bottom:1em; }
.prompt-meta{ font-family:'Inter',sans-serif; font-size:11.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:1em; }
.reply-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:1.2em; }
.reply{ background:var(--panel-2); border-radius:6px; padding:0.85em 1em; }
.reply-head{ display:flex; justify-content:space-between; font-family:'Inter',sans-serif; font-size:12px; color:var(--ink-dim); margin-bottom:0.3em; }
.reply-head b{ color:var(--ink); }
.reply p{ font-size:15px; }
.reply-form{ display:flex; gap:10px; align-items:flex-start; }
.reply-form textarea{ flex:1; min-height:52px; }

/* ============================================================
   FUTURE EVENTS TAB (timeline)
   ============================================================ */
.timeline{ position:relative; margin-top:2.5em; padding-left:32px; max-width:820px; }
.timeline::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:1px; background:var(--rule); }
.event{ position:relative; padding-bottom:2.6em; }
.event:last-child{ padding-bottom:0; }
.event::before{ content:''; position:absolute; left:-32px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--paper); border:2px solid var(--brand); }
.event-date{ font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.1em; color:var(--brand); text-transform:uppercase; font-weight:600; }
.event h3{ font-size:clamp(1.3rem,3vw,1.7rem); margin:0.25em 0 0.3em; }
.event p{ color:var(--ink-dim); max-width:56ch; }
.event.blank{ opacity:0.6; font-style:italic; }

/* ============================================================
   ADMIN PANELS — shown inline, admin only
   ============================================================ */
.admin-panel{ background:var(--panel-2); border:1px solid var(--rule); border-radius:8px; padding:1.6em 1.8em; margin:2em 0; }
.admin-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1em; gap:1em; flex-wrap:wrap; }
.admin-panel-head h3{ font-size:1.1rem; }
.admin-tag{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#fff; background:var(--brand); padding:0.25em 0.6em; border-radius:20px; }
.admin-list-row{ display:flex; align-items:center; justify-content:space-between; gap:1em; padding:0.7em 0; border-bottom:1px solid var(--rule-2); }
.admin-list-row .grow{ flex:1; min-width:0; }
.admin-list-row .grow p{ font-size:13px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(140%); z-index:2100;
  background:var(--ink); color:var(--paper); font-family:'Inter',sans-serif; font-size:13px;
  padding:0.8em 1.3em; border-radius:6px; transition:transform .35s var(--ease);
}
.toast.show{ transform:translateX(-50%) translateY(0); }

/* ============================================================
   FOOTER
   ============================================================ */
#site-footer{ text-align:center; padding:5vw 6vw 8vw; color:var(--ink-faint); font-family:'Inter',sans-serif; font-size:12.5px; }
#site-footer .heart{ color:var(--brand); }

@media (max-width:640px){
  section{ padding:56px 0; }
  .clock-unit{ min-width:58px; }
  .home-hero{ flex-direction:column; align-items:stretch; }
}