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

:root {
  --bg:#F7F3EE;
  --surface:#FFFDFC;
  --surface-soft:#F3EEE7;
  --ink:#1E1E1E;
  --muted:#6B6B6B;
  --faint:#A0A0A0;
  --accent:#2F4F3E;
  --accent-dark:#243D30;
  --border:#E6DED3;
  --footer:#17231D;
  --cream:#F7F3EE;
  --max:1120px;
  --read:680px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Lora,serif;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit}
button,input,textarea,select{font:inherit}

.shell{width:min(100% - 32px,var(--max));margin:auto}
.reading{width:min(100% - 32px,var(--read));margin:auto}
h1,h2,h3,.brand,.footer-brand{font-family:"Cormorant Garamond",serif}
h1,h2,h3,p{margin-top:0}
.muted{color:var(--muted)}
.page-hero{padding:86px 0 54px;border-bottom:1px solid var(--border)}
.page-hero h1{font-size:clamp(3rem,8vw,5.2rem);line-height:.95;letter-spacing:-.035em;margin-bottom:22px}
.page-hero p{font-size:1.08rem;color:#4f4f4f;max-width:56ch}

.nav{position:sticky;top:0;z-index:20;background:rgba(247,243,238,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(230,222,211,.8)}
.nav-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{font-weight:700;font-size:1.45rem;text-decoration:none;line-height:1.1}
.links{display:flex;gap:26px;align-items:center}
.links a{text-decoration:none;color:var(--muted);font-size:.95rem}
.links a:hover,.links a.active{color:var(--ink)}
.nav-toggle{display:none;background:none;border:0;font-size:1.6rem;color:var(--ink)}

.btn{min-height:48px;padding:0 22px;border-radius:999px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:.18s ease}
.primary{background:var(--accent);border-color:var(--accent);color:white}
.primary:hover{background:var(--accent-dark)}
.secondary{background:transparent;border-color:var(--accent);color:var(--accent)}
.secondary:hover{background:rgba(47,79,62,.06)}
.text-link{background:none;border:0;padding:0;color:var(--accent);font-weight:600;cursor:pointer;text-decoration:none}
.text-link:hover{text-decoration:underline}

.hero{min-height:72vh;display:flex;align-items:center;padding:86px 0}
.hero-copy{max-width:650px}
.kicker{font-size:.95rem;color:var(--muted);margin-bottom:16px}
.hero h1{font-size:clamp(3.2rem,9vw,5.8rem);line-height:.93;letter-spacing:-.04em;max-width:9.2ch;margin-bottom:26px}
.hero-sub{font-size:1.14rem;line-height:1.9;color:#4f4f4f}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.section{padding:72px 0}
.section.soft{background:var(--surface-soft)}
.section-title{font-size:clamp(2.25rem,5vw,3.35rem);line-height:1.05;margin-bottom:12px}
.context{border-top:1px solid var(--border);padding:62px 0}
.context p{font-size:1.1rem;line-height:1.95;margin-bottom:1.25rem}
.context strong{font-weight:600}

.entries{display:grid;gap:36px;margin-top:42px;max-width:820px}
.entry{border-bottom:1px solid var(--border);padding-bottom:32px}
.entry:last-child{border-bottom:0}
.meta{font-size:.9rem;color:var(--muted);margin-bottom:12px}
.entry h3{font-size:2rem;line-height:1.13;margin-bottom:12px}
.entry p:not(.meta){max-width:58ch}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.pill{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:5px 13px;font-size:.86rem;background:rgba(255,255,255,.25)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card,.belief-card,.resource-card,.faq-item,.guideline-card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:26px}
.card h3,.belief-card h3,.resource-card h3,.faq-item h3,.guideline-card h3{font-size:1.62rem;line-height:1.1;margin-bottom:10px;color:var(--accent)}
.quote-box{border:1px solid var(--border);background:rgba(255,255,255,.35);border-radius:24px;padding:30px;text-align:center;font-style:italic;color:var(--muted);margin:42px 0}
.emphasis{font-size:1.35rem;color:var(--accent);font-weight:600;font-style:italic;margin:30px 0}

.write-cta{text-align:center}
.write-cta h2{font-size:clamp(2.35rem,6vw,4rem);line-height:.98;margin-bottom:12px}
.write-cta p{font-size:1.22rem;margin-bottom:28px}

.filter-bar{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0}
.search{width:min(100%,520px);border:1px solid var(--border);border-radius:999px;padding:14px 18px;background:white;outline:none}
.filter{border:1px solid var(--border);background:rgba(255,255,255,.35);border-radius:999px;padding:10px 16px;color:var(--muted);cursor:pointer}
.filter.active{background:var(--accent);color:white;border-color:var(--accent)}

.form-shell{background:var(--surface);border:1px solid var(--border);border-radius:28px;padding:30px;margin-top:32px}
.form-section{border-top:1px solid var(--border);padding-top:24px;margin-top:24px}
.form-section:first-child{border-top:0;margin-top:0;padding-top:0}
.form-section h3{font-size:1.75rem;color:var(--accent);margin-bottom:8px}
label,fieldset{display:grid;gap:8px;margin:16px 0}
input,select,textarea{width:100%;border:1px solid var(--border);background:white;border-radius:14px;padding:13px 15px;outline:none}
textarea{min-height:220px;resize:vertical;line-height:1.8}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,79,62,.08)}
fieldset{border:1px solid var(--border);border-radius:18px;padding:18px}
.check,.radio{display:flex!important;gap:10px;color:var(--muted);align-items:flex-start}
.check input,.radio input{width:auto;margin-top:7px}
.help{font-size:.9rem;color:var(--muted)}
.note-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

.resources-intro{font-size:1.08rem;line-height:1.95}
.resources-intro a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.resources-intro a:hover{border-bottom-color:var(--accent)}
.contact-form{margin-top:28px}

.footer{background:var(--footer);color:rgba(247,243,238,.78);padding:58px 0 32px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:32px}
.footer-brand{font-size:2rem;color:var(--cream);margin-bottom:12px}
.footer h3{font-family:Lora,serif;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cream)}
.footer a{display:block;color:rgba(247,243,238,.78);text-decoration:none;margin:8px 0}
.footer a:hover{color:white}
.footer-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.footer .secondary{border-color:rgba(247,243,238,.7);color:var(--cream)}
.footer-bottom{border-top:1px solid rgba(247,243,238,.14);margin-top:36px;padding-top:22px;color:rgba(247,243,238,.55)}

.fab{position:fixed;right:22px;bottom:24px;width:58px;height:58px;border-radius:50%;border:0;background:var(--accent);color:white;font-size:1.8rem;box-shadow:0 14px 30px rgba(47,79,62,.22);cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center}

.story-full{padding:70px 0}
.story-full h1{font-size:clamp(2.7rem,7vw,4.8rem);line-height:.95;letter-spacing:-.025em;margin-bottom:18px}
.story-body{font-size:1.08rem;line-height:1.95;margin-top:28px}
.story-body p{margin-bottom:1.5em}
.divider{border:0;border-top:1px solid var(--border);margin:46px 0}
.responses textarea{min-height:130px}

@media(max-width:800px){
  .links{display:none;position:absolute;left:0;right:0;top:76px;background:var(--bg);border-bottom:1px solid var(--border);padding:18px 24px;flex-direction:column;align-items:flex-start}
  .links.open{display:flex}
  .nav-toggle{display:block}
  .hero{min-height:auto;padding:72px 0}
  .hero h1{font-size:clamp(3rem,17vw,4.2rem)}
  .actions,.btn{width:100%}
  .grid-2,.grid-3,.footer-grid{grid-template-columns:1fr}
  .note-grid{grid-template-columns:1fr}
  .form-shell{padding:22px}
  .fab{width:52px;height:52px}
}


/* Expanded story category filters */
.theme-strip,
.category-group {
  margin: 28px 0;
}

.theme-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: .92rem;
}

.theme-pills,
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.theme-pills {
  padding-bottom: 2px;
}

.filter {
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.filter:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: var(--accent);
}

.filter.active:hover {
  color: white;
}

@media(max-width:800px){
  .theme-pills,
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .theme-pills::-webkit-scrollbar,
  .filter-bar::-webkit-scrollbar {
    display: none;
  }

  .filter {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


/* Final agreed updates */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.footer-brand-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.home-page .context {
  padding-bottom: 34px;
}
.home-page .section:first-of-type {
  padding-top: 44px;
}
.required {
  color: #C74646;
}
.optional {
  color: var(--muted);
  font-size: .95rem;
  font-family: Lora, serif;
}
.diary-intro {
  font-size: 1.08rem;
  line-height: 1.85;
}
.diary-intro em {
  color: var(--accent);
}
.direct-email {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
}
.direct-email a {
  color: var(--accent);
  font-weight: 600;
}
.gentle-reminder {
  width: min(100% - 32px, 720px);
  margin: 64px auto 0;
  text-align: center;
  color: var(--accent);
  font-style: italic;
  font-size: clamp(1.35rem, 4vw, 2rem);
  line-height: 1.55;
}
.guidelines-hero {
  background: linear-gradient(135deg, #F7F3EE 0%, #E9F0E6 100%);
}
.guidelines-section {
  padding-top: 52px;
}
.why-guidelines {
  margin-bottom: 34px;
  padding: 28px;
  border-radius: 24px;
  background: rgba(255,255,255,.38);
  border: 1px solid var(--border);
}
.why-guidelines h2 {
  color: var(--accent);
  font-size: 2rem;
  margin-bottom: 10px;
}
.guideline-grid {
  gap: 18px;
}
.guideline-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.guideline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(47,79,62,.08);
}
.guideline-closing {
  margin-top: 42px;
  text-align: center;
  color: var(--accent);
  font-style: italic;
  font-size: 1.25rem;
}
@media(max-width:800px){
  .brand-logo { width: 34px; height: 34px; }
  .brand { gap: 8px; }
  .footer-logo { width: 54px; height: 54px; }
  .home-page .context { padding-bottom: 20px; }
  .home-page .section:first-of-type { padding-top: 32px; }
}


.form-status {
  margin-top: 18px;
  color: #7A4B4B;
  font-size: .98rem;
}

.form-status.success {
  color: var(--accent);
}

button:disabled,
.btn:disabled {
  opacity: .65;
  cursor: not-allowed;
}


.approved-entries { margin-top: 42px; }
.dynamic-entry { animation: fadeInUp .35s ease both; }
.empty-state {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,.55);
  margin: 32px 0;
}
.empty-state h3 { color: var(--accent); margin-bottom: 8px; font-size: 1.45rem; }
.empty-state p { color: var(--muted); }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}



/* Cleaner dynamic story tags */
.dynamic-entry .entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 20px;
}

.dynamic-entry .entry-tags span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.45);
  font-size: .94rem;
  line-height: 1.2;
}

.dynamic-entry .story-full {
  display: none;
}

.dynamic-entry.expanded .story-preview {
  display: none;
}

.dynamic-entry.expanded .story-full {
  display: block;
}

.read-more-button {
  border: 0;
  background: transparent;
  color: var(--accent);
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  margin-top: 10px;
}

.read-more-button:hover {
  text-decoration: underline;
}



.home-recent-entries {
  margin-top: 34px;
}

.home-dynamic-entry {
  margin-bottom: 34px;
}

.home-dynamic-entry .entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 18px;
}

.home-dynamic-entry .entry-tags span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.45);
  font-size: .94rem;
  line-height: 1.2;
}



.back-link {
  display: inline-block;
  margin-bottom: 32px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.entry-detail {
  border-bottom: 1px solid var(--border);
  padding-bottom: 44px;
  margin-bottom: 44px;
}

.entry-detail h1 {
  font-size: clamp(2.7rem, 8vw, 5rem);
  line-height: .98;
  margin: 14px 0 22px;
}

.entry-detail .entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 34px;
}

.entry-detail .entry-tags span {
  display: inline-flex;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.45);
}

.story-body {
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  line-height: 1.9;
}

.responses-section {
  margin-top: 28px;
}

.resonate-count {
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 18px;
}

.response-form {
  margin-top: 26px;
}

.approved-comments {
  margin-top: 34px;
}

.comment-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,.56);
  margin-bottom: 18px;
}

.no-responses {
  margin-top: 22px;
}



/* iPad / tablet reading layout fix */
@media (min-width: 760px) and (max-width: 1180px) {
  body {
    overflow-x: hidden;
  }

  .site-header {
    padding: 22px 42px;
    gap: 28px;
  }

  .brand {
    gap: 14px;
  }

  .brand-logo {
    width: 58px;
    height: auto;
  }

  .brand span {
    font-size: clamp(1.7rem, 3.2vw, 2.35rem);
    line-height: 1;
  }

  .links {
    gap: 26px;
    font-size: 1rem;
  }

  .section {
    padding: 70px 0;
  }

  .shell {
    width: min(100% - 96px, 920px);
    margin-inline: auto;
  }

  .entry-detail {
    max-width: 820px;
    margin-inline: auto;
    padding-bottom: 48px;
  }

  .back-link {
    max-width: 820px;
    margin-inline: auto;
    display: block;
  }

  .entry-detail h1 {
    font-size: clamp(3.3rem, 7vw, 5.4rem);
    max-width: 780px;
    line-height: .95;
    letter-spacing: -0.03em;
  }

  .entry-detail .entry-meta {
    font-size: 1.08rem;
  }

  .entry-detail .entry-tags {
    max-width: 760px;
    gap: 12px;
  }

  .story-body {
    max-width: 780px;
    font-size: clamp(1.35rem, 2.7vw, 1.75rem);
    line-height: 1.82;
  }

  .responses-section,
  #responsesClosed {
    max-width: 780px;
    margin-inline: auto;
  }

  .response-form {
    max-width: 760px;
  }

  .comment-card {
    max-width: 760px;
  }

  .site-footer {
    padding-left: 56px;
    padding-right: 56px;
  }

  .floating-add {
    right: 42px;
    bottom: 42px;
  }
}

/* Larger desktop reading layout */
@media (min-width: 1181px) {
  .shell {
    width: min(100% - 120px, 980px);
    margin-inline: auto;
  }

  .entry-detail,
  .responses-section,
  #responsesClosed,
  .back-link {
    max-width: 820px;
    margin-inline: auto;
  }

  .story-body {
    max-width: 800px;
    font-size: 1.55rem;
    line-height: 1.86;
  }

  .entry-detail h1 {
    max-width: 820px;
    font-size: clamp(4.2rem, 6vw, 6.2rem);
  }
}

/* Keep story pages from feeling stretched on landscape tablets */
@media (orientation: landscape) and (min-width: 900px) and (max-width: 1366px) {
  .entry-detail,
  .responses-section,
  #responsesClosed,
  .back-link {
    max-width: 760px;
  }

  .story-body {
    max-width: 740px;
    font-size: 1.48rem;
    line-height: 1.78;
  }

  .entry-detail h1 {
    max-width: 760px;
    font-size: clamp(3.7rem, 5.2vw, 5.2rem);
  }
}



.delete-section {
  max-width: 780px;
  margin: 0 auto 42px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 36px;
}

.delete-section details {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 22px;
  background: rgba(255,255,255,.46);
}

.delete-section summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 700;
  font-size: 1.05rem;
}

.delete-form {
  margin-top: 18px;
}

.delete-form label {
  display: block;
  margin: 16px 0;
}

.delete-form input {
  width: 100%;
}

.btn.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}



.responses-closed {
  max-width: 780px;
  margin: 42px auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: rgba(255,255,255,.5);
}

.responses-closed h2 {
  color: var(--accent);
  margin-bottom: 10px;
}