/* ========= Theme ========= */
:root{
    --bg: #F7F4EF;          /* soft warm background */
    --panel: #FFFFFF;
    --ink: #2B2B2B;         /* body text */
    --muted: #6B6B6B;
    --accent: #B08D57;      /* muted gold accent */
    --accent-ink: #2B2B2B;
    --border: #E6E0D6;
    --news-mobile-max-width: 480px;
    --admin-mobile-max-width: 480px;
  
    --radius: 16px;
    --shadow: 0 6px 24px rgba(0,0,0,.06);
  
    --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-display: "Playfair Display", Georgia, serif;
  }
  
  /* ========= Reset / Base ========= */
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
  }
  img, video{max-width:100%; height:auto; display:block}
  audio{width:100%;}
  a{color:inherit}
.container{max-width:1000px; margin:0 auto; padding:0 20px}
  @media (max-width: 480px){
    .container{padding:0 24px}
  }
@media (min-width: 1024px){
  .container{
    max-width:min(1360px, calc(100vw - 24px));
  }
}
  
  /* ========= Header / Nav ========= */
  .site-header{
    position:sticky; top:0; z-index:1000;
    background:rgba(247,244,239,.8);
    backdrop-filter: blur(6px);
    border-bottom:1px solid var(--border);
  }

  
  .header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
  .brand{display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:600}
  .brand-mark{font-size:1rem; color:var(--accent)}
  .brand-text{font-family:var(--font-display); font-size:1.15rem; letter-spacing:.2px}
  .brand{ margin-left:8px }           /* desktop */
  @media (max-width: 900px){
    .brand{ margin-left:3px }        /* mobile / tablet */
  }
  .site-nav{position:relative;}
  .site-nav .nav-list{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
  .nav-link{
    text-decoration:none; padding:.5rem .75rem; border-radius:999px;
    border:1px solid transparent;
  }
  .nav-link:hover{background:var(--panel); border-color:var(--border)}
  .nav-link.is-active{background:var(--accent); color:var(--accent-ink)}
  
  /* Mobile nav */
  .nav-toggle{
    display:none;
    border:1px solid transparent;
    background:transparent;
    cursor:pointer;
  }
  @media (max-width: 900px){
    .nav-toggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:36px;
      margin-right:2px;
      border:1px solid var(--border);
      border-radius:10px;
      background:var(--panel);
      padding:0;
    }
    .nav-toggle-bars{
      position:relative;
      display:block;
      width:18px;
      height:2px;
      background:var(--ink);
      border-radius:999px;
      transition:background .2s ease;
    }
    .nav-toggle-bars::before,
    .nav-toggle-bars::after{
      content:"";
      position:absolute;
      left:0;
      width:18px;
      height:2px;
      background:var(--ink);
      border-radius:999px;
      transition:transform .2s ease, top .2s ease;
    }
    .nav-toggle-bars::before{top:-6px;}
    .nav-toggle-bars::after{top:6px;}
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars{
      background:transparent;
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{
      top:0;
      transform:rotate(45deg);
    }
    .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{
      top:0;
      transform:rotate(-45deg);
    }
    .site-nav .nav-list{
      display:none;
      position:absolute;
      top:56px;
      right:5px;
      left:auto;
      width:min(160px, calc(100vw - 10px));
      min-width:120px;
      padding:6px 10px;
      border:1px solid var(--border);
      border-radius:16px;
      box-shadow:var(--shadow);
      background:var(--panel);
      flex-direction:column;
      gap:4px;
    }
    .site-nav[aria-expanded="true"] .nav-list{display:flex}
    .site-nav .nav-list li{width:100%;}
    .site-nav .nav-list .nav-link{
      display:block;
      width:100%;
      padding:8px 10px;
      border-radius:12px;
      font-size:clamp(0.9rem, 2.1vw, 1rem);
      white-space:nowrap;
      -webkit-tap-highlight-color: transparent;
    }
    .site-nav .nav-list .nav-link:active{
      box-shadow: inset 0 0 0 2px var(--border);
      background: var(--panel);
    }
  }
  
  /* ========= Typography ========= */
  .display{font-family:var(--font-display); font-size:56px; line-height:1.05; margin:0 0 .25em}
  .h1{font-family:var(--font-display); font-size:42px; line-height:1.15; margin:0}
  .h2{font-family:var(--font-display); font-size:28px; line-height:1.2; margin:0 0 .25em}
  .h3{font-family:var(--font-display); font-size:20px; line-height:1.2; margin:.2em 0}
  .lead{font-size:1.125rem}
  .subtle{color:var(--muted)}
  .small{font-size:.95rem}
  .tiny{font-size:.85rem}
  .muted{color:var(--muted)}
  
  /* ========= Sections ========= */
  .section{padding:56px 0}
  .section-muted{background: #F2EDE6; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.page-header{padding-top:36px}
  .page-header-compact{padding-bottom:24px}
  .page-header-compact + .section{padding-top:32px}
  .header-with-cta{display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
  .header-with-cta--admin{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1.5rem;
  }
  .header-with-cta--admin #admin-auth{
    flex-wrap:wrap;
    justify-content:flex-start;
    margin-top:0;
  }
  .admin-submissions-heading{
    margin:0 0 0.25rem;
  }
  .section-admin-list{
    padding-top:24px;
  }
  .section-bottom-cta{padding:24px 0 16px}
  .section-bottom-cta .header-with-cta{justify-content:flex-end}
  @media (max-width: 720px){
    .section-bottom-cta .header-with-cta{
      justify-content:flex-start;
    }
  }
  #admin-auth{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  
  /* ========= Hero / Panels ========= */
  .hero{padding:36px 0 48px}
.hero-inner{max-width:700px}
@media (min-width: 960px){
  .hero-inner{
    max-width:100%;
  }
}
.hero-note{
  font-size:1.1rem;
  margin:0 0 1.6rem;
  max-width:48ch;
}
.hero-acrostic{
  margin-top:1rem;
  display:grid;
  gap:0.6rem;
  font-size:1.05rem;
  line-height:1.55;
}
.hero-acrostic p{margin:0}
.hero-acrostic strong{
  font-family:var(--font-display);
  color:var(--accent);
  margin-right:0.35rem;
}
@media (min-width: 960px){
  .hero-note{
    max-width:none;
  }
}
  .panel{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
    padding:24px;
  }
.image-panel{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 16 / 9; /* keeps a consistent, responsive height */
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border-radius:12px;
}
  
  .grid{display:grid; gap:24px}
  .grid-2{grid-template-columns:1.1fr .9fr}
  @media (max-width: 880px){ .grid-2{grid-template-columns:1fr} }
  
  /* ========= Cards / Feeds ========= */
  .card-grid{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:16px;
  }
  .card{
    display:flex; flex-direction:column; gap:10px;
    background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
    overflow:hidden;
  }
  .card-media{aspect-ratio: 16 / 10; background:#EDE7DE}
  .card-media img{width:100%; height:100%; object-fit:cover}
  .card-media video{width:100%; height:100%; object-fit:cover; background:#000}
  .card-media audio{width:100%; display:block}
  .card-body{padding:14px 16px}
.card-snippet{
  margin:0.35rem 0 0;
  color:var(--muted);
  font-size:0.95rem;
  line-height:1.45;
}
.view-toggle{
  display:flex;
  gap:0.75rem;
  flex-wrap:wrap;
  align-items:center;
}
.view-toggle-btn{
  border:1px solid var(--border);
  background:transparent;
  border-radius:999px;
  padding:0.55rem 1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.view-toggle-btn.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}
.view-panel{
  margin-top:24px;
}
.view-panel[hidden]{
  display:none;
}
.memories-sort{
  margin-bottom:1.5rem;
}
  .card-meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:.9rem}
  .card-title{font-family:var(--font-display); font-size:20px; margin:.1rem 0}

.card-grid-memories{
  max-width:none;
  margin:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
  --masonry-row-height:12px;
  grid-auto-rows:var(--masonry-row-height);
}
#feed-memories,
#feed-silver,
#feed-actions{
  width:min(100%, 1160px);
  margin:0 auto;
}
@media (min-width: 1024px){
  #feed-actions,
  #feed-silver{
    margin-left:0;
    margin-right:auto;
  }
}
.card-grid-memories .card{
  min-height:0;
  gap:8px;
}
.card-grid-memories .card-body{
  padding:12px 16px;
}
.card-grid-memories .card-media{
  aspect-ratio:auto;
  background:#EDE7DE;
}
.card-grid-memories .card-media img{
  width:100%;
  height:auto;
  object-fit:contain;
}
.card-grid-memories .card-media video{
  width:100%;
  height:auto;
  background:#000;
}
.card-grid-memories .card-media audio{
  width:100%;
}
@media (max-width: 1024px){
  .card-grid-memories{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
  }
}
@media (max-width: 720px){
  .card-grid-memories{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
  }
}
  
  /* Quick links */
  .quick-links{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; list-style:none; padding:0; margin:0}
  .card-link{
    display:block; padding:18px; border-radius:14px; border:1px solid var(--border); background:var(--panel); text-decoration:none; box-shadow:var(--shadow)
  }
  .card-link:hover{border-color:#D7D0C4}
  .card-link .card-title{display:block; font-family:var(--font-display); font-size:20px}
  .card-desc{color:var(--muted); font-size:.95rem}
  
  /* Additions to existing CSS near card/entry styles */
  .card-link-wrap{
    display:block;
    text-decoration:none;
    color:inherit;
  }
  .card-link-wrap:hover .card-title{text-decoration:underline}
  
  /* Entry (single post) page */
  .entry-media img{
    display:block;
    width:auto;
    max-width:100%;
    max-height:68vh;
    margin:0 auto 18px;
    border-radius:12px;
    object-fit:contain;
  }
  .entry-media video{
    display:block;
    width:auto;
    max-width:100%;
    max-height:68vh;
    margin:0 auto 18px;
    border-radius:12px;
    background:#000;
    object-fit:contain;
  }
  .entry-media audio{width:100%; margin-bottom:16px}
  .entry-meta{margin-bottom:8px}
  .entry-title{margin-bottom:12px}
  .entry-body p{white-space:pre-wrap; line-height:1.65; margin-top:12px}

  /* Breadcrumb */
.breadcrumb{
    margin-bottom:16px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
  }
  .breadcrumb a{
    color:var(--muted);
    text-decoration:none;
  }
  .breadcrumb a:hover{text-decoration:underline}
  .breadcrumb-sep::after{
    content:"›";
    margin:0 4px;
    color:var(--muted);
  }
  
  
  /* ========= Buttons ========= */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    border-radius:999px; padding:.6rem 1rem; border:1px solid var(--border);
    background:var(--accent); color:var(--accent-ink); font-weight:600; cursor:pointer;
    text-decoration:none;
  }
  .btn:link,
  .btn:visited{
    text-decoration:none;
    color:var(--accent-ink);
  }
  .btn:hover{filter:brightness(.98)}
  .btn-ghost{background:transparent}
  
  /* ========= Forms ========= */
  form{width:100%}
  .form-grid{display:grid; grid-template-columns: repeat(2, 1fr); gap:14px}
  .field{display:flex; flex-direction:column; gap:6px}
  .field-wide{grid-column:1 / -1}
  .field span{font-weight:600}
  input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="file"], textarea{
    width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border); background:#FCFAF7
  }
  select{width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border); background:#FCFAF7}
  textarea{resize:vertical}
  .error{color:#8A2525; min-height:1.2em}
  .form-actions{margin-top:8px; display:flex; gap:10px}
  
  /* ========= Beck's Smile ========= */
  .beck-smile-spot{display:flex; align-items:center; gap:.75rem; margin-top:1.5rem;}
  .beck-smile-spot.smile-center{justify-content:center;}
  .beck-smile-spot.smile-right{justify-content:flex-end;}
  .beck-smile-mark{width:72px; height:auto; display:block;}
  .beck-smile-spot.header-smile{flex-basis:100%; margin-top:.75rem; justify-content:flex-end;}
  .title-with-smile{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;}
  .title-with-smile .beck-smile-mark{width:60px;}
  .beck-smile-spot.smile-compact{margin-top:0;}
  .beck-smile-mark.small{width:48px;}
  .smile-stack{display:flex; flex-direction:column; align-items:flex-end; gap:.35rem;}
  @media (max-width:720px){
    .smile-stack{align-items:flex-start;}
  }

  /* Admin email auth layout */
  .admin-email-form{
    display:none;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
  }
  .admin-email-form input[type="email"],
  .admin-email-form input[type="password"]{
    width:auto;
    flex:1 1 220px;
    min-width:200px;
  }
  .admin-email-form .btn{
    flex:0 0 auto;
  }
  
  /* ========= Modal ========= */
  .modal{position:fixed; inset:0; display:none}
  .modal[aria-hidden="false"]{display:block}
  .modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.36)}
  .modal-dialog{
    position:relative; z-index:1; margin:6vh auto; max-width:720px;
    background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
    padding:20px;
  }
  .modal-close{
    position:absolute; top:8px; right:8px; border:0; background:transparent; font-size:28px; cursor:pointer
  }
  
  /* ========= News List ========= */
  .news-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
  .news-item{display:grid; grid-template-columns: 130px 1fr; gap:16px; background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px}
  .news-item.news-item--no-date{
    grid-template-columns:1fr;
  }
  .news-item.news-item--no-date .news-body{
    grid-column:1 / -1;
  }
  .news-date{font-weight:600; color:var(--muted)}
  .news-body h3{margin:.1rem 0}
  .news-list-divider{
    display:flex;
    align-items:center;
    gap:0.75rem;
    color:var(--muted);
    font-size:0.85rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:4px 0;
  }
  .news-list-divider span[aria-hidden="true"]{
    flex:1;
    height:1px;
    background:var(--border);
  }
  .news-divider-label{
    white-space:nowrap;
  }
  @media (max-width: 720px){
    .page-header{
      padding-bottom:0px;
    }
    .header-with-cta{
      margin-bottom:20px;
    }
    .page-header + .section.section-muted{
      margin-top:20px;
    }
    /* Keep event cards centered without forcing horizontal scroll */
    .news-item{
      width:100%;
      margin-left:0;
      margin-right:0;
      grid-template-columns:1fr;
      row-gap:10px;
      padding:16px 22px;
      font-size:1.22rem;
    }
    .news-date{
      font-size:1.16rem;
    }
    .news-body .h3{
      font-size:1.34rem;
    }
    #admin-approvals .panel{
      width:min(calc(90% + 10px), var(--admin-mobile-max-width));
      margin-left:0;
      margin-right:15px;
      padding:16px 20px;
    }
    #admin-approvals .panel details{
      overflow-wrap:anywhere;
    }
    #admin-approvals .panel [data-field="media"] img,
    #admin-approvals .panel [data-field="media"] video{
      width:100% !important;
      max-width:100% !important;
      height:auto;
    }
    #admin-approvals .panel [data-field="media"] audio{
      width:100%;
    }
    #admin-approvals .panel .admin-edit .form-grid{
      grid-template-columns:1fr;
      gap:12px;
    }
  }
  
  /* ========= Footer ========= */
  .site-footer{padding:24px 0; border-top:1px solid var(--border); margin-top:18px}
  
  /* ========= Utilities ========= */
  .empty-state{margin-top:6px}
  .t-center{text-align:center}
  /* Approvals page lists */
  .stack{list-style:none; padding:0; margin:0; display:grid; gap:14px}
  .panel details > summary{list-style:none}
  details summary::-webkit-details-marker{display:none}
  /* Desktop spacing before Approved header */
  #admin-approved-header{margin-top:48px}
  
  /* ===== Mobile polish for Admin and Auth ===== */
  @media (max-width: 720px){
    /* bigger breathing room before the Approved header */
    #admin-approved-header{margin-top:32px}
    /* keep sign-in buttons on the same row */
    #admin-auth{gap:8px}
    #admin-auth .btn{padding:.5rem .8rem}
    #admin-status{flex-basis:100%}
  }