/* ============================================================
   REACH FOR YOU — design tokens
   A sunrise you scroll through: dusk navy → golden hour → cream
   ============================================================ */
:root{
  --night:   #1C2B40;
  --water:   #2C4560;
  --gold:    #E2A24A;
  --peach:   #F3C99B;
  --cream:   #FBF4E8;
  --ink:     #2B2620;
  --ink-soft:#6B5F4E;
  --sky-soft:#C9D3DE;

  --display: "Fraunces", Georgia, serif;
  --body:    "Public Sans", -apple-system, "Segoe UI", sans-serif;

  --measure: 62ch;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:1.0625rem;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

/* ---------- shared layout ---------- */
.wrap{ max-width:960px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.section{ padding-top:clamp(3.5rem,8vw,6rem); padding-bottom:clamp(3.5rem,8vw,6rem); }

.eyebrow{
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  font-weight:600; color:var(--gold);
}

h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.75rem,4vw,2.5rem); line-height:1.15;
  margin:.5rem 0 1.25rem; color:var(--ink);
}
.on-navy h2{ color:var(--cream); }

.prose p{ max-width:var(--measure); margin-bottom:1.1em; }
.prose p:last-child{ margin-bottom:0; }

/* ---------- top nav ---------- */
.topnav{
  position:sticky; top:0; z-index:20;
  background:rgba(28,43,64,.92);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  color:var(--cream);
  border-bottom:1px solid rgba(226,162,74,.18);
}
.topnav .row{
  max-width:1080px; margin:0 auto; padding:.75rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.topnav .brand{
  font-family:var(--display); font-weight:600; font-size:.95rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--peach); text-decoration:none;
}
.topnav nav{ display:flex; gap:1.15rem; flex-wrap:wrap; }
.topnav nav a{
  color:var(--sky-soft); text-decoration:none; font-size:.88rem;
  padding:.3rem .1rem; border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.topnav nav a:hover{ color:var(--cream); }
.topnav nav a.here{ color:var(--gold); border-bottom-color:var(--gold); }

@media (max-width:640px){
  .topnav .row{ flex-direction:column; align-items:flex-start; gap:.4rem; padding:.65rem var(--pad) .7rem; }
  .topnav nav{ gap:.85rem; }
  .topnav nav a{ font-size:.82rem; }
}

/* ---------- reach divider motif ---------- */
.reach-divider{
  display:flex; align-items:center; gap:14px;
  max-width:420px; margin:0 auto;
  padding:clamp(1.5rem,4vw,2.5rem) var(--pad);
}
.reach-divider .line{ height:1px; flex:1; background:var(--gold); opacity:.8; }
.reach-divider .gap{ width:22px; }
.reach-divider.touching .gap{ width:0; }
.reach-divider.touching .line{ opacity:1; }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-decoration:none; font-weight:600;
  font-size:.95rem; padding:.85rem 1.7rem; border-radius:999px;
  border:1px solid transparent; cursor:pointer;
  font-family:var(--body);
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn-sun{ background:var(--gold); color:#241A0D; }
.btn-sun:hover{ background:#EDB768; }
.btn-ghost{ border-color:rgba(251,244,232,.55); color:var(--cream); background:transparent; }
.btn-ghost:hover{ border-color:var(--cream); }
.btn-navy{ background:var(--night); color:var(--cream); }
.btn-navy:hover{ background:var(--water); }
.btn-outline{ border-color:#D8C49B; color:#A9741F; background:transparent; }
.btn-outline:hover{ background:#F4E7CC; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background:linear-gradient(180deg, #162336 0%, var(--night) 34%, var(--water) 62%, #8A6B4E 84%, var(--gold) 100%);
  color:var(--cream);
  text-align:center;
  position:relative;
  overflow:hidden;
  padding-top:clamp(4.5rem,10vw,7.5rem);
}
.hero .brand{
  font-size:.8rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--sky-soft); font-weight:600;
}
.hero .anniversary{
  margin-top:1.75rem; font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--peach); font-weight:600;
}
.hero h1{
  font-family:var(--display);
  font-variation-settings:"SOFT" 100;
  font-weight:700;
  font-size:clamp(3rem,11vw,6.5rem);
  line-height:1.02;
  margin:.35em 0 .3em;
  color:var(--cream);
  animation:rise .9s ease-out both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
.hero .oneliner{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.15rem,3vw,1.5rem); color:var(--peach);
  animation:rise .9s .15s ease-out both;
}
.hero .tagline{
  margin-top:1rem; color:var(--sky-soft); font-size:.95rem;
  animation:rise .9s .25s ease-out both;
}
.hero .actions{
  display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap;
  margin-top:2.25rem; animation:rise .9s .35s ease-out both;
}

/* horizon: sun half-risen */
.horizon{ position:relative; height:96px; margin-top:clamp(3rem,7vw,4.5rem); }
.horizon::before{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:120px; height:60px; border-radius:120px 120px 0 0;
  background:radial-gradient(circle at 50% 100%, #FFE9BF 0%, #F6C066 55%, var(--gold) 100%);
  box-shadow:0 0 60px 18px rgba(246,192,102,.45);
}
.horizon::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, #FFE9BF 30%, #FFE9BF 70%, transparent);
}

/* subpage hero (lighter version for /story, /music, /wall, /reach, /donate) */
.subhero{
  background:linear-gradient(180deg, var(--night) 0%, var(--water) 100%);
  color:var(--cream);
  padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,4rem);
  text-align:center;
}
.subhero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.2rem,6vw,3.6rem); line-height:1.05;
  color:var(--cream);
}
.subhero .oneliner{
  font-family:var(--display); font-style:italic;
  color:var(--peach); font-size:clamp(1.05rem,2.4vw,1.3rem);
  margin-top:.55rem;
}
.subhero .eyebrow{ color:var(--peach); }

/* ============================================================
   CAMPAIGN
   ============================================================ */
.campaign{ background:linear-gradient(180deg, #F7E8CE 0%, var(--cream) 22%); }
.campaign .lede{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.45rem); line-height:1.5;
  color:var(--ink); max-width:58ch;
}
.campaign .prose{ margin-top:1.4rem; color:var(--ink); }
.campaign .kicker{
  font-family:var(--display); font-style:italic; font-weight:600;
  color:#A9741F; font-size:1.15rem;
}

/* ============================================================
   MUSIC / TRACK LIST
   ============================================================ */
.music{ background:var(--cream); }
.music .free-note{
  color:var(--ink-soft); font-size:.95rem; max-width:var(--measure);
  margin-bottom:2.25rem;
}
.album-controls{ margin:.5rem 0 1.75rem; }
.album-play{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:1rem; padding:.95rem 1.9rem; box-shadow:0 2px 10px rgba(28,43,64,.12);
}
.album-play:hover{ transform:translateY(-1px); }
.album-play .album-play-icon{ display:inline-flex; }
.album-play .album-play-icon svg{ width:15px; height:15px; fill:currentColor; }

.side-label{
  font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:.08em; color:#A9741F;
  display:flex; align-items:center; gap:.8rem;
  margin:2.2rem 0 .4rem;
}
.side-label::after{ content:""; height:1px; flex:1; background:#E4D5B8; }
.side-label:first-of-type{ margin-top:0; }

.track{
  display:grid;
  grid-template-columns:2ch 1fr auto auto auto auto;
  gap:.9rem; align-items:center;
  padding:.95rem .25rem;
  border-bottom:1px solid #EDE1CB;
}
.track .lyrics-link{
  font-size:.8rem; font-weight:600; text-decoration:none; color:#A9741F; white-space:nowrap;
}
.track .lyrics-link:hover{ text-decoration:underline; }
.track .num{ font-family:var(--display); font-style:italic; color:#B9A377; font-size:.95rem; }
.track .title{ font-weight:600; font-size:1rem; }
.track .title small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.8rem; }
.track .time{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.85rem; }

.play{
  width:42px; height:42px; border-radius:50%; border:1px solid #D8C49B;
  background:transparent; cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease;
}
.play:hover{ background:#F4E7CC; }
.play svg{ width:14px; height:14px; fill:#A9741F; }
.play.playing{ background:var(--gold); border-color:var(--gold); }
.play.playing svg{ fill:#241A0D; }

.dl{
  font-size:.8rem; font-weight:600; text-decoration:none;
  color:#A9741F; border:1px solid #D8C49B; border-radius:999px;
  padding:.45rem .9rem; white-space:nowrap;
  transition:background .15s ease;
}
.dl:hover{ background:#F4E7CC; }

/* ---------- individual song page ---------- */
.song-meta{ font-variant-numeric:tabular-nums; color:var(--ink-soft); font-size:.9rem; margin-top:.35rem; }
.song-actions{ display:flex; align-items:center; gap:1rem; margin-top:1.5rem; }

.lyrics-wrap{ max-width:640px; }
.lyrics{ font-family:var(--display); font-size:1.2rem; line-height:1.7; color:var(--ink); }
.lyric-stanza{ margin:0 0 2.25rem; }
.lyric-stanza:last-child{ margin-bottom:0; }

.reach-theme{ margin-top:2.75rem; padding-top:1.5rem; border-top:1px solid #EDE1CB; }
.reach-theme-label{
  display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:.5rem;
}
.reach-theme p{
  font-family:var(--display); font-style:italic; font-size:1.25rem; line-height:1.5;
  color:var(--ink); margin:0;
}

.song-nav{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid #EDE1CB;
}
.song-nav a{ color:#A9741F; font-weight:600; text-decoration:none; font-size:.95rem; }
.song-nav a:hover{ text-decoration:underline; }
.song-nav-next{ margin-left:auto; text-align:right; }

@media (max-width:600px){
  .track{ grid-template-columns:2ch 1fr auto auto auto; }
  .track .time{ display:none; }
}

/* ============================================================
   CHALLENGE
   ============================================================ */
.challenge{ background:var(--night); color:var(--cream); }
.challenge .steps{
  display:grid; gap:1.75rem; margin-top:2.25rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.step .step-num{ font-family:var(--display); font-style:italic; font-weight:600; color:var(--gold); font-size:1.6rem; }
.step h3{ font-family:var(--display); font-weight:600; font-size:1.3rem; margin:.35rem 0 .5rem; color:var(--cream); }
.step p{ color:var(--sky-soft); font-size:.97rem; }

/* ============================================================
   REACH FORM
   ============================================================ */
.reach-form{ background:var(--cream); }
.reach-form form{ max-width:640px; margin-top:1.75rem; }
.field{ margin-bottom:1.4rem; }
.field label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.field .hint{ font-weight:400; color:var(--ink-soft); }

input[type=text], input[type=password], select, textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  background:#FFFDF8; border:1px solid #DCCBA6; border-radius:10px;
  padding:.8rem .95rem;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible, .play:focus-visible, .dl:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
textarea{ min-height:150px; resize:vertical; }
.char-count{ font-size:.8rem; color:var(--ink-soft); text-align:right; margin-top:.3rem; }
.form-note{ font-size:.85rem; color:var(--ink-soft); margin-top:1rem; max-width:52ch; }
.form-error{
  background:#fff4e1; border:1px solid var(--gold); color:#7a4d10;
  padding:.85rem 1rem; border-radius:10px; margin-bottom:1.25rem; font-size:.95rem;
}

.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

.wall-note{
  margin-top:2.5rem; padding:1.5rem 1.75rem;
  border:1px dashed #D8C49B; border-radius:14px;
  max-width:640px; color:var(--ink-soft); font-size:.95rem;
}
.wall-note strong{ color:var(--ink); }

/* ============================================================
   WALL OF REACHES
   ============================================================ */
.wall-list{ display:grid; gap:1.25rem; margin-top:2rem; }
.reach-card{
  background:#FFFDF8; border:1px solid #EDE1CB; border-left:3px solid var(--gold);
  border-radius:12px; padding:1.35rem 1.5rem;
  box-shadow:0 1px 2px rgba(60,40,10,.03);
}
.reach-card .story{
  font-family:var(--body); color:var(--ink); font-size:1.02rem; line-height:1.6;
  white-space:pre-wrap;
}
.reach-card .attr{
  margin-top:.85rem; color:var(--ink-soft); font-size:.88rem;
  font-family:var(--display); font-style:italic;
}
.reach-card .song-tag{
  display:inline-block; margin-left:.6rem;
  font-family:var(--body); font-style:normal;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:#A9741F; background:#F4E7CC; padding:.2rem .55rem; border-radius:999px;
}
.wall-empty{
  margin-top:2rem; padding:2.5rem 1.75rem; text-align:center;
  border:1px dashed #D8C49B; border-radius:14px;
  color:var(--ink-soft);
}
.wall-empty h3{ font-family:var(--display); color:var(--ink); margin-bottom:.4rem; }

.pager{
  display:flex; gap:1rem; justify-content:center; margin-top:2.5rem;
  font-size:.9rem; color:var(--ink-soft);
}
.pager a{ color:#A9741F; text-decoration:none; padding:.4rem .8rem; border:1px solid #D8C49B; border-radius:999px; }
.pager a:hover{ background:#F4E7CC; }
.pager .disabled{ opacity:.4; }

/* ============================================================
   STORY (long-form)
   ============================================================ */
.story-body{ background:var(--cream); }
.story-body .prose{
  max-width:64ch; margin:0 auto;
  font-size:1.09rem; line-height:1.75; color:var(--ink);
}
.story-body .prose p{ margin-bottom:1.25em; max-width:none; }
.story-body .prose h3{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:1.4rem; margin:2rem 0 .8rem;
}
.story-body .prose blockquote{
  border-left:3px solid var(--gold); padding-left:1.15rem; margin:1.4rem 0;
  color:var(--ink-soft); font-family:var(--display); font-style:italic;
  font-size:1.1rem;
}
.story-body .drop-cap::first-letter{
  font-family:var(--display); font-weight:700; font-size:3.6rem;
  float:left; line-height:.9; padding:.35rem .55rem 0 0; color:#A9741F;
}

/* ============================================================
   DONATE
   ============================================================ */
.donate{ background:linear-gradient(180deg, var(--cream) 0%, #F7E8CE 100%); }
.donate .promise{ font-family:var(--display); font-weight:600; font-size:1.3rem; color:var(--ink); }
.donate .buttons{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:1.5rem; }
.donate .venmo{ margin-top:1.75rem; display:flex; align-items:center; gap:1rem; color:var(--ink-soft); font-size:.9rem; }
.donate .qr{
  width:96px; height:96px; border:1px solid #DCCBA6; border-radius:10px;
  display:grid; place-items:center; font-size:.65rem; color:var(--ink-soft);
  text-align:center; background:#FFFDF8;
}

/* ============================================================
   FINAL CTA + FOOTER
   ============================================================ */
.final{ background:var(--night); color:var(--cream); text-align:center; }
.final .big{
  font-family:var(--display); font-style:italic; font-weight:600;
  font-size:clamp(1.5rem,4vw,2.2rem); color:var(--cream); max-width:24ch; margin:0 auto;
}
.final .sub{ color:var(--sky-soft); margin-top:.9rem; }
.final .actions{ margin-top:2rem; display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; }

footer.site-footer{
  background:#141F30; color:#8FA0B5; text-align:center;
  font-size:.82rem; padding:2.5rem var(--pad);
}
footer.site-footer .site{ color:var(--peach); font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.78rem; }
footer.site-footer p{ margin-top:.5rem; }
footer.site-footer nav{ margin-top:1.1rem; display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; }
footer.site-footer nav a{ color:#B5C4D7; text-decoration:none; font-size:.82rem; }
footer.site-footer nav a:hover{ color:var(--cream); }

/* ============================================================
   ADMIN
   ============================================================ */
.admin-shell{ background:var(--cream); min-height:100vh; }
.admin-topnav{
  background:var(--night); color:var(--cream);
  padding:.9rem var(--pad); display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
.admin-topnav .brand{ font-family:var(--display); color:var(--peach); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.9rem; }
.admin-topnav nav{ display:flex; gap:1.1rem; }
.admin-topnav nav a, .admin-topnav nav form button{
  color:var(--sky-soft); text-decoration:none; font-size:.9rem;
  background:transparent; border:none; cursor:pointer; font-family:var(--body);
}
.admin-topnav nav a:hover, .admin-topnav nav form button:hover{ color:var(--cream); }
.admin-topnav nav .here{ color:var(--gold); }

.admin-wrap{ max-width:1100px; margin:0 auto; padding:2rem var(--pad) 4rem; }

.stat-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); margin-bottom:2rem; }
.stat-card{
  background:#FFFDF8; border:1px solid #EDE1CB; border-radius:12px; padding:1.1rem 1.3rem;
}
.stat-card .n{ font-family:var(--display); font-weight:700; font-size:2.1rem; color:var(--ink); line-height:1; }
.stat-card .l{ margin-top:.35rem; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); }
.stat-card.warn{ border-left:3px solid var(--gold); }

.admin-h2{ font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--ink); margin:1.75rem 0 1rem; }

.filter-bar{ display:flex; gap:.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.filter-bar a{
  font-size:.85rem; text-decoration:none; color:var(--ink-soft);
  border:1px solid #DCCBA6; border-radius:999px; padding:.4rem .9rem;
}
.filter-bar a.here{ background:var(--night); color:var(--cream); border-color:var(--night); }

.sub-card{
  background:#FFFDF8; border:1px solid #EDE1CB; border-radius:12px;
  padding:1.25rem 1.4rem; margin-bottom:1rem;
}
.sub-card.flagged{ border-left:3px solid #C0392B; }
.sub-card .meta{ display:flex; gap:.75rem; flex-wrap:wrap; font-size:.82rem; color:var(--ink-soft); margin-bottom:.65rem; }
.sub-card .meta .tag{ background:#F4E7CC; color:#7a4d10; padding:.15rem .55rem; border-radius:999px; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; }
.sub-card .meta .tag.pending{ background:#FFE9BF; color:#8A5A0F; }
.sub-card .meta .tag.approved{ background:#D9EFCF; color:#3F6B2D; }
.sub-card .meta .tag.rejected{ background:#EAD8D6; color:#8B3A2F; }
.sub-card .meta .tag.flag{ background:#F7D6D1; color:#8B2E24; }
.sub-card .story{ color:var(--ink); white-space:pre-wrap; font-size:1rem; line-height:1.55; }
.sub-card .attr{ margin-top:.7rem; color:var(--ink-soft); font-size:.85rem; font-family:var(--display); font-style:italic; }
.sub-card .actions{ margin-top:1rem; display:flex; gap:.6rem; flex-wrap:wrap; }
.sub-card .actions button{
  font-family:var(--body); font-weight:600; font-size:.85rem;
  padding:.5rem 1rem; border-radius:999px; cursor:pointer; border:1px solid transparent;
}
.sub-card .btn-approve{ background:#3F6B2D; color:#fff; }
.sub-card .btn-approve:hover{ background:#345A24; }
.sub-card .btn-reject{ background:#fff; color:#8B3A2F; border-color:#EAD8D6; }
.sub-card .btn-reject:hover{ background:#FBEFED; }
.sub-card .btn-unpub{ background:#fff; color:#7a4d10; border-color:#DCCBA6; }
.sub-card .btn-unpub:hover{ background:#F4E7CC; }

.track-table{
  width:100%; border-collapse:collapse; background:#FFFDF8;
  border:1px solid #EDE1CB; border-radius:12px; overflow:hidden; margin-bottom:2rem;
}
.track-table th, .track-table td{ padding:.7rem 1rem; text-align:right; border-bottom:1px solid #F0E6D2; }
.track-table th:first-child, .track-table td:first-child{ text-align:left; }
.track-table thead th{
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; background:#FBF4E4;
}
.track-table tbody tr:last-child td{ border-bottom:none; }
.track-table td.track-name{ color:var(--ink); font-weight:600; }
.track-table td.track-name .num{ color:var(--ink-soft); font-weight:400; margin-right:.5rem; }
.track-table td.num-cell{ font-variant-numeric:tabular-nums; color:var(--ink); }
.track-table td.num-cell.zero{ color:#C7B896; }

.admin-login-shell{
  min-height:100vh; background:linear-gradient(180deg, var(--night) 0%, var(--water) 100%);
  display:grid; place-items:center; padding:var(--pad);
}
.admin-login-card{
  background:var(--cream); padding:2rem 2.25rem; border-radius:14px; width:100%; max-width:380px;
}
.admin-login-card h1{
  font-family:var(--display); font-weight:600; font-size:1.6rem; color:var(--ink); margin-bottom:.4rem;
}
.admin-login-card p{ color:var(--ink-soft); font-size:.9rem; margin-bottom:1.25rem; }

/* ============================================================
   CONFIRMATION / ERROR PAGES
   ============================================================ */
.plain-page{
  min-height:70vh; background:var(--cream); display:grid; place-items:center;
  padding:4rem var(--pad);
}
.plain-page .card{
  background:#FFFDF8; border:1px solid #EDE1CB; border-radius:14px;
  padding:2.5rem; max-width:560px; text-align:center;
}
.plain-page h1{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:1.9rem; margin-bottom:.75rem;
}
.plain-page p{ color:var(--ink-soft); margin-bottom:1.5rem; }

/* ============================================================
   STORY PERMALINK (/wall/:id) + share row
   ============================================================ */
.permalink-story{ max-width:760px; margin:0 auto; }
.permalink-quote{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(1.6rem, 4.5vw, 2.5rem); line-height:1.3;
  white-space:pre-wrap; border:0; padding:0; margin:0;
}
.permalink-attr{
  margin-top:1.4rem; color:var(--ink-soft);
  font-family:var(--display); font-style:italic; font-size:1.15rem;
}
.permalink-song{ margin-top:.5rem; }
.permalink-song a, .permalink-song{
  color:#A9741F; font-weight:600; text-decoration:none; font-size:.95rem;
}
.permalink-song a:hover{ text-decoration:underline; }
.share-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin-top:2rem;
}
.share-row .btn{ font-size:.9rem; padding:.7rem 1.3rem; }
.copy-status{ color:var(--ink-soft); font-size:.85rem; min-height:1em; }

/* per-card share row on /wall */
.reach-card .card-share{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid #EDE1CB;
}
.reach-card .card-share a, .reach-card .card-share button{
  font-family:var(--body); font-size:.78rem; font-weight:600;
  color:#A9741F; background:transparent; border:1px solid #D8C49B;
  border-radius:999px; padding:.32rem .8rem; cursor:pointer; text-decoration:none;
}
.reach-card .card-share a:hover, .reach-card .card-share button:hover{ background:#F4E7CC; }
.reach-card .card-share .permalink-link{ margin-right:auto; }
.reach-card .card-share .copy-status{ font-size:.75rem; }
.reach-card .story-link{ text-decoration:none; color:inherit; display:block; }
.reach-card .story-link:hover .story{ color:#A9741F; }
.field .field-note{ font-size:.8rem; color:var(--ink-soft); margin-top:.35rem; max-width:52ch; }

/* ============================================================
   B3 — live reach counter (hero) + admin trend
   ============================================================ */
.reach-count{
  margin:.35rem 0 1.25rem; font-family:var(--body);
  font-size:.95rem; letter-spacing:.02em; color:var(--sky-soft);
}
.reach-count .reach-count-num{
  font-weight:600; color:var(--peach);
  font-variant-numeric:tabular-nums;
}
.reach-count .reach-count-invite{ color:var(--sky-soft); }
.reach-count .reach-count-invite a{ color:var(--peach); font-weight:600; text-decoration:none; }
.reach-count .reach-count-invite a:hover{ text-decoration:underline; }

.trend{ display:flex; align-items:flex-end; gap:.5rem; height:110px; margin:.5rem 0 2rem; }
.trend-col{ display:flex; flex-direction:column; align-items:center; gap:.3rem; flex:1; }
.trend-bar{ width:100%; max-width:38px; background:var(--gold); border-radius:4px 4px 0 0; min-height:2px; }
.trend-bar.empty{ background:#E4D6BC; }
.trend-n{ font-size:.8rem; font-weight:600; color:var(--ink); }
.trend-d{ font-size:.7rem; color:var(--ink-soft); }

/* ============================================================
   B4 — hand-the-phone confirmation, hashtags, /join
   ============================================================ */
.handphone{
  margin:1.75rem 0 1rem; padding:1.5rem; border-radius:14px;
  background:linear-gradient(180deg, #F7E8CE 0%, var(--cream) 100%);
  border:1px solid #E4D6BC; text-align:center;
}
.handphone-cta{ font-family:var(--display); font-size:1.15rem; color:var(--ink); margin-bottom:1rem; }
.hashtag, .footer-hashtag{
  font-weight:600; letter-spacing:.04em; color:var(--gold);
}
.handphone .hashtag{ margin-top:1rem; font-size:.95rem; }
.footer-hashtag{ margin-top:1rem; font-size:.9rem; color:var(--peach); }
.conf-actions{ margin-top:1.25rem; }

/* /join */
.join-format{ display:grid; gap:1rem; margin:1.5rem 0 2rem; }
.join-step{
  display:flex; gap:1rem; align-items:baseline;
  padding:1.1rem 1.35rem; background:#FFFDF8; border:1px solid #EDE1CB;
  border-left:3px solid var(--gold); border-radius:12px;
}
.join-step .step-n{ font-family:var(--display); font-style:italic; font-weight:600; color:var(--gold); font-size:1.5rem; }
.join-step p{ margin:0; }
.owner-placeholder{
  display:block; margin:.4rem 0; padding:.9rem 1.1rem;
  background:#FFF4E1; border:1px dashed var(--gold); border-radius:10px;
  color:#7a4d10; font-size:.9rem;
}
.owner-placeholder strong{ text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }
.free-use{ font-family:var(--display); font-size:1.2rem; color:var(--ink); font-style:italic; margin:1.5rem 0; max-width:var(--measure); }
.join-downloads{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }

/* ============================================================
   Today's Reach — pinned wall card + admin controls
   ============================================================ */
.todays-reach{
  margin:2rem 0; padding:1.75rem 1.9rem; border-radius:16px;
  background:linear-gradient(180deg, #FFF6E6 0%, #FFFDF8 100%);
  border:1px solid #E4CE9E; border-left:4px solid var(--gold);
  box-shadow:0 4px 18px rgba(120,80,10,.08);
}
.todays-reach .todays-label{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:#A9741F; margin-bottom:.75rem;
}
.todays-reach .story{
  font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:clamp(1.2rem,2.6vw,1.5rem); line-height:1.4; white-space:pre-wrap;
}
.todays-reach .story-link{ text-decoration:none; color:inherit; display:block; }
.todays-reach .story-link:hover .story{ color:#8a5e17; }
.todays-reach .attr{ margin-top:1rem; color:var(--ink-soft); font-family:var(--display); font-style:italic; }

/* admin */
.tag.featured{ background:var(--gold); color:#241A0D; }
.btn-feature{
  background:transparent; border:1px solid var(--gold); color:#A9741F;
  border-radius:999px; padding:.35rem .85rem; font-weight:600; cursor:pointer; font-size:.85rem;
}
.btn-feature:hover{ background:#F4E7CC; }
.btn-feature.on{ background:var(--gold); color:#241A0D; border-color:var(--gold); }
.featured-slot{
  display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;
  margin:1.25rem 0; padding:.85rem 1.1rem; border-radius:10px;
  background:#FFF7E8; border:1px dashed var(--gold);
}
.featured-slot .featured-txt{ font-size:.9rem; color:var(--ink); }
/* win specificity over `.sub-card .actions button` */
.sub-card .actions .btn-feature{ border-color:var(--gold); color:#A9741F; }
.sub-card .actions .btn-feature.on{ background:var(--gold); color:#241A0D; border-color:var(--gold); }
.permalink-date{ margin-top:.5rem; color:var(--ink-soft); font-size:.85rem; }