:root{
  --plum:#4B2E6E;
  --plum-deep:#37204F;
  --teal:#1E6E6E;
  --teal-soft:#2E8B8B;
  --gold:#D9A441;
  --coral:#E8825F;
  --sand:#FBF6EC;
  --sand-deep:#F3EBDB;
  --ink:#2C2438;
  --white:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:'Nunito',sans-serif;
  color:var(--ink);
  background:var(--sand);
  line-height:1.6;
}
h1,h2,h3{font-family:'Fraunces',serif;line-height:1.12}
.script{font-family:'Caveat',cursive}

/* ---------- Nav ---------- */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,246,236,.92);
  backdrop-filter:blur(8px);
  border-bottom:2px solid var(--sand-deep);
  padding:.7rem 1.4rem;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.nav-brand{display:flex;align-items:center;gap:.55rem;font-weight:800;color:var(--plum);text-decoration:none;font-size:1.02rem}
.nav-brand svg{width:30px;height:30px}
.nav-links{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.9rem;padding:.25rem 0;border-bottom:2px solid transparent}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--teal);border-bottom-color:var(--gold)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.nav-cta{
  background:var(--plum);color:#fff!important;border-radius:999px;
  padding:.45rem 1.1rem!important;border-bottom:none!important;font-size:.85rem!important;
}
.nav-cta:hover{background:var(--plum-deep)}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(168deg,#4B2E6E 0%,#5E3A7E 34%,#8A527C 58%,#C97A63 80%,#E8A45F 100%);
  color:#fff;
  padding:5rem 1.5rem 8.5rem;
  text-align:center;
}
.hero-eyebrow{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;padding:.3rem 1rem;
  font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:1.4rem;
}
.hero h1{
  font-size:clamp(2.3rem,6vw,4.2rem);
  font-weight:900;max-width:820px;margin:0 auto .4rem;
}
.hero .script{font-size:clamp(1.6rem,3.6vw,2.5rem);color:var(--gold);display:block;margin-top:.3rem}
.hero p{max-width:620px;margin:1.3rem auto 2rem;font-size:1.08rem;opacity:.93}
.hero-ctas{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block;border-radius:999px;padding:.85rem 1.9rem;
  font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;
  border:none;font-family:'Nunito',sans-serif;transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-gold{background:var(--gold);color:var(--plum-deep)}
.btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.btn-plum{background:var(--plum);color:#fff}
.btn-teal{background:var(--teal);color:#fff}

/* sun */
.hero-sun{
  position:absolute;left:50%;bottom:-160px;transform:translateX(-50%);
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,140,.55),rgba(255,214,140,0) 70%);
  pointer-events:none;
}
/* boardwalk strip at hero base with cat silhouettes */
.boardwalk{
  position:absolute;left:0;right:0;bottom:0;height:74px;
  background:
    repeating-linear-gradient(90deg,#6B4B32 0 84px,#5C3F29 84px 88px);
  border-top:5px solid #7C5A3C;
}
.boardwalk-cats{
  position:absolute;left:0;right:0;bottom:70px;height:60px;
  display:flex;justify-content:center;gap:clamp(1.2rem,6vw,4.5rem);
  align-items:flex-end;pointer-events:none;
}
.boardwalk-cats svg{height:52px;width:auto;opacity:.95}

/* ---------- Sections ---------- */
section{padding:4.5rem 1.5rem}
.wrap{max-width:1060px;margin:0 auto}
.section-eyebrow{
  font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal);margin-bottom:.5rem;
}
.section-title{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:900;color:var(--plum);margin-bottom:.7rem}
.section-lede{max-width:640px;font-size:1.05rem;color:#4a4258;margin-bottom:2.4rem}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem}
.step{
  background:#fff;border-radius:18px;padding:1.5rem 1.3rem;
  border:2px solid var(--sand-deep);
  position:relative;
}
.step-paw{
  width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  margin-bottom:.9rem;font-size:1.35rem;
}
.step:nth-child(1) .step-paw{background:#EFE6F7}
.step:nth-child(2) .step-paw{background:#E2F1EF}
.step:nth-child(3) .step-paw{background:#FBEEDB}
.step:nth-child(4) .step-paw{background:#FBE5DC}
.step h3{font-size:1.12rem;color:var(--plum);margin-bottom:.4rem}
.step p{font-size:.92rem;color:#57506a}
.step .month-tag{
  position:absolute;top:1.1rem;right:1.1rem;
  font-size:.72rem;font-weight:800;color:var(--teal);letter-spacing:.06em;
  background:var(--sand);border-radius:999px;padding:.15rem .6rem;
}

/* ---------- Calendar Wall ---------- */
.calendar-section{background:var(--plum-deep);color:#fff}
.calendar-section .section-eyebrow{color:var(--gold)}
.calendar-section .section-title{color:#fff}
.calendar-section .section-lede{color:#CBBFE0}
.cal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.9rem;
}
.cal-month{
  background:rgba(255,255,255,.06);
  border:1.5px solid rgba(255,255,255,.14);
  border-radius:14px;overflow:hidden;
  transition:transform .15s ease,border-color .15s ease;
}
.cal-month:hover{transform:translateY(-3px);border-color:var(--gold)}
.cal-month-head{
  background:rgba(255,255,255,.1);
  padding:.35rem .7rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:center;
}
.cal-month-head .votes{color:var(--gold);letter-spacing:0;text-transform:none;font-weight:700}
.cal-photo{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;position:relative}
.cal-photo svg{width:62%;height:auto}
.cal-name{padding:.4rem .7rem .6rem;font-size:.85rem;font-weight:700}
.cal-empty{border-style:dashed;border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.03)}
.cal-empty:hover{border-color:var(--gold)}
.cal-empty .cal-photo{flex-direction:column;gap:.4rem;color:rgba(255,255,255,.4);font-size:.74rem;text-align:center;padding:0 .8rem;font-weight:700}
.cal-empty .cal-photo svg{width:44%;opacity:.35}
.cal-empty .open-tag{
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:rgba(217,164,65,.14);
  border:1px solid rgba(217,164,65,.4);border-radius:999px;padding:.1rem .6rem;
}
/* gallery empty state */
.gallery-empty{
  grid-column:1/-1;
  background:#fff;border:2.5px dashed #D9CCAF;border-radius:22px;
  padding:3.5rem 1.5rem;text-align:center;
}
.gallery-empty svg{width:90px;height:auto;opacity:.5;margin-bottom:1rem}
.gallery-empty h3{color:var(--plum);font-size:1.4rem;margin-bottom:.4rem}
.gallery-empty p{color:#8a819c;font-size:.95rem;max-width:420px;margin:0 auto 1.4rem}
.cal-note{margin-top:1.6rem;font-size:.88rem;color:#B9ACD1}
.cal-note strong{color:var(--gold)}

/* ---------- Gallery / voting ---------- */
.gallery-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.gc-label{font-weight:700;color:var(--plum);font-size:.9rem;margin-right:.3rem}
.gc-btn{
  background:#fff;border:2px solid var(--sand-deep);color:var(--ink);
  font-weight:700;font-size:.85rem;padding:.4rem 1rem;border-radius:999px;cursor:pointer;
}
.gc-btn:hover{border-color:var(--teal);color:var(--teal)}
.gc-btn.is-on{background:var(--plum);color:#fff;border-color:var(--plum)}
.gallery-more{text-align:center;margin:1.8rem 0 0}
.gallery-more[hidden]{display:none}
.gallery-controls[hidden]{display:none}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.3rem}
.card{
  background:#fff;border-radius:18px;overflow:hidden;
  border:2px solid var(--sand-deep);
  display:flex;flex-direction:column;
}
.card-photo{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center}
.card-photo svg{width:52%;height:auto}
.card-body{padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.card-body h3{font-size:1.08rem;color:var(--plum)}
.card-body .by{font-size:.8rem;color:#8a819c}
.card-body p{font-size:.88rem;color:#57506a;flex:1}
.vote-row{display:flex;align-items:center;justify-content:space-between;margin-top:.7rem;gap:.6rem}
.vote-count{font-weight:800;color:var(--teal);font-size:.9rem}
.vote-btn{
  background:var(--teal);color:#fff;border:none;border-radius:999px;
  padding:.45rem 1.15rem;font-weight:800;font-family:'Nunito',sans-serif;font-size:.88rem;cursor:pointer;
  transition:background .15s ease,transform .1s ease;
}
.vote-btn:hover{background:var(--teal-soft)}
.vote-btn:active{transform:scale(.96)}
.vote-btn.voted{background:var(--gold);color:var(--plum-deep);cursor:default}

/* ---------- Submit form ---------- */
.submit-section{background:var(--sand-deep)}
.submit-card{
  background:#fff;border-radius:22px;padding:2.2rem;max-width:640px;
  border:2px solid #E8DCC4;
}
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:800;font-size:.86rem;margin-bottom:.35rem;color:var(--plum)}
.field input[type=text],.field input[type=email],.field textarea,.field select{
  width:100%;border:2px solid var(--sand-deep);border-radius:12px;
  padding:.7rem .9rem;font-family:'Nunito',sans-serif;font-size:.95rem;background:var(--sand);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.dropzone{
  border:2.5px dashed var(--teal);border-radius:14px;background:#F0F7F6;
  padding:2rem 1rem;text-align:center;color:var(--teal);font-weight:700;cursor:pointer;font-size:.92rem;
}
.form-fine{font-size:.78rem;color:#8a819c;margin-top:1rem}

/* ---------- Sunny story ---------- */
.sunny{display:grid;grid-template-columns:1fr 1.3fr;gap:2.6rem;align-items:center}
@media(max-width:760px){.sunny{grid-template-columns:1fr}}
.sunny-portrait{
  background:linear-gradient(160deg,#F6E7C8,#EFC98A);
  border-radius:26px;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  border:2px solid #E8D3A6;position:relative;
}
.sunny-portrait svg{width:64%;height:auto}
.sunny-portrait .badge{
  position:absolute;top:-14px;right:-10px;transform:rotate(6deg);
  background:var(--gold);color:var(--plum-deep);font-family:'Caveat',cursive;
  font-size:1.15rem;font-weight:700;padding:.2rem .9rem;border-radius:999px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}
.sunny p{margin-bottom:1rem;color:#4a4258}
.stat-row{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.4rem}
.stat b{display:block;font-family:'Fraunces',serif;font-size:1.7rem;color:var(--teal)}
.stat span{font-size:.82rem;color:#8a819c;font-weight:700}

/* ---------- Volunteer / meeting ---------- */
.volunteer{background:var(--teal);color:#fff}
.volunteer .section-title{color:#fff}
.volunteer .section-eyebrow{color:#FBE1AE}
.vol-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2.4rem;align-items:start}
@media(max-width:760px){.vol-grid{grid-template-columns:1fr}}
.vol-roles{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.1rem}
.vol-roles span{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);
  border-radius:999px;padding:.35rem .95rem;font-size:.83rem;font-weight:700;
}
.meeting-card{
  background:#fff;color:var(--ink);border-radius:20px;padding:1.7rem;
  box-shadow:0 12px 30px rgba(0,0,0,.14);
}
.meeting-card h3{color:var(--plum);margin-bottom:.9rem;font-size:1.2rem}
.meeting-card ul{list-style:none}
.meeting-card li{display:flex;gap:.6rem;margin-bottom:.6rem;font-size:.93rem;font-weight:600}
.meeting-card li b{color:var(--teal);min-width:20px}
.meeting-card .btn{margin-top:1rem;width:100%;text-align:center;font-size:.92rem}

/* ---------- Waiver modal ---------- */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  background:rgba(44,36,56,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:1.2rem;
}
.modal-overlay.open{display:flex}
.modal{
  background:#fff;border-radius:22px;max-width:560px;width:100%;
  max-height:88vh;overflow-y:auto;
  padding:2rem 2rem 1.6rem;
  border-top:8px solid var(--gold);
  box-shadow:0 24px 60px rgba(0,0,0,.3);
}
.modal h3{color:var(--plum);font-size:1.35rem;margin-bottom:.3rem}
.modal .modal-sub{font-size:.88rem;color:#8a819c;margin-bottom:1.1rem}
.waiver-box{
  background:var(--sand);border:2px solid var(--sand-deep);border-radius:14px;
  padding:1.1rem 1.2rem;font-size:.88rem;color:#4a4258;margin-bottom:1.1rem;
}
.waiver-box ul{margin:.5rem 0 .5rem 1.1rem}
.waiver-box li{margin-bottom:.45rem}
.agree-row{
  display:flex;gap:.7rem;align-items:flex-start;
  background:#F0F7F6;border:2px solid #CFE5E2;border-radius:12px;
  padding:.85rem 1rem;margin-bottom:1.2rem;cursor:pointer;
}
.agree-row input[type=checkbox]{
  width:20px;height:20px;margin-top:.15rem;accent-color:var(--teal);cursor:pointer;flex-shrink:0;
}
.agree-row span{font-size:.9rem;font-weight:700;color:var(--ink)}
.modal-actions{display:flex;gap:.8rem;justify-content:flex-end;flex-wrap:wrap}
.btn-quiet{background:transparent;color:#8a819c;border:2px solid var(--sand-deep)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ---------- Footer ---------- */
footer{background:var(--plum-deep);color:#C9BCE0;padding:3rem 1.5rem 2rem;text-align:center;font-size:.86rem}
footer .script{color:var(--gold);font-size:1.9rem;display:block;margin-bottom:.9rem}
footer .disclaimer{
  max-width:560px;margin:1.4rem auto 0;font-size:.75rem;color:#9A8CB8;
  border-top:1px solid rgba(255,255,255,.12);padding-top:1.2rem;
}
footer a{color:var(--gold)}

/* ---------- Shared additions (v2: database, admin, volunteer) ---------- */
.subnav-back{font-size:.85rem;font-weight:700;color:var(--teal);text-decoration:none}
.subnav-back:hover{color:var(--plum)}
.page-head{background:linear-gradient(168deg,#4B2E6E 0%,#5E3A7E 45%,#8A527C 100%);color:#fff;padding:3rem 1.5rem 2.4rem;text-align:center}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;margin-bottom:.4rem}
.page-head p{opacity:.9;max-width:560px;margin:0 auto}

/* status pill on submissions */
.pill{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:.12rem .6rem}
.pill-live{background:#E2F1EF;color:var(--teal)}
.pill-hidden{background:#FBE5DC;color:#B4472A}

/* real uploaded photo fills the card/calendar slot */
.photo-img{width:100%;height:100%;object-fit:cover;display:block}
.card-photo,.cal-photo{overflow:hidden}

/* small inline notice */
.notice{background:#FFF7E6;border:1.5px solid #EBCF8F;border-radius:12px;padding:.8rem 1rem;font-size:.86rem;color:#7A5B1E;margin-bottom:1rem}
.notice-bad{background:#FDECE7;border-color:#E7A992;color:#A23B1E}
.notice-good{background:#E9F6F0;border-color:#A9D8C2;color:#1E6E4E}

/* admin table */
.admin-wrap{max-width:1000px;margin:0 auto;padding:2.5rem 1.3rem}
.admin-item{display:grid;grid-template-columns:96px 1fr auto;gap:1rem;align-items:center;background:#fff;border:2px solid var(--sand-deep);border-radius:16px;padding:1rem;margin-bottom:1rem}
@media(max-width:620px){.admin-item{grid-template-columns:72px 1fr}}
.admin-thumb{width:96px;height:96px;border-radius:12px;object-fit:cover;background:var(--sand-deep)}
@media(max-width:620px){.admin-thumb{width:72px;height:72px}}
.admin-meta h4{color:var(--plum);font-size:1.02rem;margin-bottom:.15rem}
.admin-meta .muted{color:#8a819c;font-size:.82rem}
.admin-meta .story-txt{font-size:.88rem;color:#57506a;margin-top:.3rem}
.admin-actions{display:flex;flex-direction:column;gap:.45rem}
@media(max-width:620px){.admin-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}}
.mini-btn{border:none;border-radius:999px;padding:.4rem .9rem;font-family:'Nunito',sans-serif;font-weight:800;font-size:.8rem;cursor:pointer}
.mini-edit{background:var(--teal);color:#fff}
.mini-hide{background:var(--gold);color:var(--plum-deep)}
.mini-del{background:#C0442A;color:#fff}
.mini-quiet{background:var(--sand-deep);color:var(--ink)}
.login-card{max-width:380px;margin:3rem auto;background:#fff;border-radius:20px;border:2px solid var(--sand-deep);padding:2rem}

/* ---------- Additions (v3: July 2026 team requests) ---------- */

/* footer social links */
.social-row{margin-top:.6rem;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}

/* price summary on the buy block */
.price-row{
  display:flex;gap:2.4rem;flex-wrap:wrap;
  background:var(--sand);border:2px solid var(--sand-deep);border-radius:14px;
  padding:1rem 1.2rem;margin-bottom:1.3rem;
}
.price-label{display:block;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.price-val{display:block;font-family:'Fraunces',serif;font-size:1.35rem;font-weight:900;color:var(--plum)}

/* print-readiness badge in admin */
.pill-print{background:#E2F1EF;color:var(--teal)}
.pill-lowres{background:#FFF3DA;color:#8A6212}
.pill-optin{background:#EFE6F7;color:var(--plum)}
.login-card h2{color:var(--plum);margin-bottom:1rem}
.spin{display:inline-block;width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* =============================================================
   COUNTDOWN (added July 2026)
   Two pieces: a thin strip pinned to the very top, and a big
   band under the hero. Appended on purpose so no existing rule
   is touched. The only existing behaviour changed is the nav's
   sticky offset, overridden below so the nav sits under the strip.
   ============================================================= */
:root{ --vcs-h:42px; }

/* pinned top strip: always visible, page scrolls beneath it */
.vc-sticky{
  position:sticky;top:0;z-index:60;
  height:var(--vcs-h);
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  background:linear-gradient(90deg,#37204F 0%,#4B2E6E 100%);
  border-bottom:2px solid var(--gold);
  font-family:'Nunito',sans-serif;color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,.16);
}
.vcs-paw{font-size:1rem}
.vcs-label{font-weight:700;font-size:.9rem;color:#E7DEF4}
.vcs-time{font-weight:800;font-size:1rem;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.vcs-date{font-weight:700;font-size:.9rem;color:#CBBFE0}
@media (max-width:480px){.vcs-label{display:none}.vcs-date{display:none}.vcs-time{font-size:1.05rem}}

/* drop the sticky nav below the pinned strip so they stack, not overlap */
nav{ top:var(--vcs-h); }

/* big band under the hero */
.vote-countdown{background:linear-gradient(180deg,#2E1A47 0%,#37204F 100%);color:#fff;text-align:center;padding:2.4rem 1.2rem 2.6rem;border-top:4px solid var(--gold);border-bottom:4px solid var(--gold)}
.vote-countdown .vc-eyebrow{font-family:'Nunito',sans-serif;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:var(--gold);margin:0 0 1.1rem}
.vote-countdown .vc-clock{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin:0 auto 1.15rem;max-width:640px}
.vote-countdown .vc-cell{background:rgba(255,255,255,.07);border:1px solid rgba(217,164,65,.35);border-radius:16px;padding:.85rem .4rem .7rem;min-width:92px;flex:1 1 92px;max-width:130px}
.vote-countdown .vc-num{font-family:'Fraunces',serif;font-weight:900;font-size:2.9rem;line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.vote-countdown .vc-label{font-family:'Nunito',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;color:#CBBFE0;margin-top:.45rem}
.vote-countdown .vc-sub{font-family:'Nunito',sans-serif;font-size:.98rem;color:#E7DEF4;margin:0}
.vote-countdown .vc-sub strong{color:#fff}
@media (max-width:520px){.vote-countdown .vc-num{font-size:2.1rem}.vote-countdown .vc-cell{min-width:70px;flex-basis:70px;padding:.7rem .3rem .55rem}}

/* ---------- Additions (v4: July 26 2026, entry numbers + search) ---------- */

/* The number badge on each card. Quiet enough that it does not compete
   with the cat's name, loud enough to read off a phone at arm's length. */
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.card-head h3{flex:1;min-width:0}
.card-no{
  flex:none;font-weight:800;font-size:.78rem;letter-spacing:.02em;
  color:var(--teal);background:#E9F4F4;border:1.5px solid #C4E2E2;
  border-radius:999px;padding:.12rem .5rem;white-space:nowrap;
}

/* Search box above the gallery */
.gallery-search{margin:0 0 1rem}
.gallery-search[hidden]{display:none}
.gs-label{display:block;font-weight:700;color:var(--plum);font-size:.9rem;margin-bottom:.4rem}
.gs-field{display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap}
.gs-field input[type="search"]{
  flex:1;min-width:220px;
  font-family:'Nunito',sans-serif;font-size:.95rem;color:var(--ink);
  background:#fff;border:2px solid var(--sand-deep);border-radius:999px;
  padding:.55rem 1.1rem;
}
.gs-field input[type="search"]:focus{outline:none;border-color:var(--teal)}
.gs-field input[type="search"]::placeholder{color:#9a92ab}
.gs-clear{
  flex:none;background:var(--sand-deep);color:var(--ink);border:none;border-radius:999px;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.85rem;padding:.55rem 1.1rem;cursor:pointer;
}
.gs-clear:hover{background:var(--gold);color:var(--plum-deep)}
.gs-clear[hidden]{display:none}
.gs-hint{font-size:.8rem;color:#8a819c;margin:.45rem 0 0}
.gs-hint strong{color:var(--teal)}

/* The line that reports what the search found */
.gallery-result{margin:0 0 1.1rem;font-size:.9rem;color:#57506a}
.gallery-result[hidden]{display:none}
.gr-count{font-weight:700;color:var(--plum)}
.gr-none{font-weight:700;color:#A23B1E}
.gr-link{
  background:none;border:none;padding:0;margin-left:.2rem;
  font-family:'Nunito',sans-serif;font-weight:800;font-size:.9rem;
  color:var(--teal);text-decoration:underline;cursor:pointer;
}
.gr-link:hover{color:var(--plum)}
.gr-note{display:block;margin-top:.35rem;font-size:.82rem;color:#8a819c}

/* A cat arrived at by a ?cat=147 link gets a ring so it is obvious
   which one the link meant. */
.card-found{border-color:var(--teal);box-shadow:0 0 0 3px rgba(30,110,110,.18)}

/* ---------- Additions (v5: July 27 2026, published rules) ---------- */

/* Sits under the four steps. Deliberately looks like a notice rather than
   marketing: this is the page's receipt that the rules predate the result. */
.rules-panel{
  margin:2.2rem 0 0;
  background:var(--sand);
  border:2px solid var(--sand-deep);
  border-left:6px solid var(--teal);
  border-radius:16px;
  padding:1.5rem 1.6rem 1.3rem;
}
.rules-title{font-size:1.15rem;color:var(--plum);margin-bottom:.4rem}
.rules-lede{font-size:.9rem;color:#57506a;margin-bottom:1.1rem}
.rule{margin-bottom:1.1rem}
.rule:last-of-type{margin-bottom:.9rem}
.rule h4{
  font-family:'Fraunces',serif;font-size:.98rem;color:var(--teal);
  line-height:1.25;margin-bottom:.3rem;
}
.rule p{font-size:.88rem;color:#57506a}
.rule strong{color:var(--plum);font-weight:800}
.rules-stamp{
  font-size:.78rem;color:#8a819c;font-style:italic;
  border-top:1.5px solid var(--sand-deep);padding-top:.7rem;margin-top:.2rem;
}
@media(max-width:620px){
  .rules-panel{padding:1.2rem 1.1rem 1rem;border-left-width:5px}
}

/* ---------- Additions (v6: July 27 2026, nav shows where you are) ---------- */

/* The hook was already here: .nav-links a has a transparent bottom border
   and a gold hover. This just fills it in for the current section. Teal
   rather than gold so "where I am" never looks like "what I am hovering". */
.nav-links a.is-here{
  color:var(--teal);
  border-bottom-color:var(--teal);
}
/* Hover still wins, so the link under the cursor is always the loud one. */
.nav-links a.is-here:hover,
.nav-links a.is-here:focus-visible{
  border-bottom-color:var(--gold);
}
@media (prefers-reduced-motion: no-preference){
  .nav-links a{transition:color .15s ease,border-bottom-color .15s ease}
}

/* ---------- Additions (v7: July 28 2026, admin numbers + search) ---------- */

/* Robyn's screen. The entry number reuses .card-no from the public gallery
   on purpose, so a number looks identical wherever she sees it. */
.admin-search{
  background:#fff;border:2px solid var(--sand-deep);border-radius:16px;
  padding:1rem 1.1rem;margin-bottom:1.4rem;
}
.as-label{display:block;font-weight:800;color:var(--plum);font-size:.92rem;margin-bottom:.45rem}
.as-field{display:flex;gap:.5rem;align-items:stretch;flex-wrap:wrap}
.as-field input[type="search"]{
  flex:1;min-width:220px;
  font-family:'Nunito',sans-serif;font-size:.95rem;color:var(--ink);
  background:var(--sand);border:2px solid var(--sand-deep);border-radius:999px;
  padding:.6rem 1rem;
}
.as-field input[type="search"]:focus{outline:none;border-color:var(--teal)}
.as-field input[type="search"]::placeholder{color:#9a92ab}
.as-hint{color:#8a819c;font-size:.78rem;margin:.5rem 0 0}

.as-sort{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.8rem}
.as-sort-label{color:#8a819c;font-size:.78rem;font-weight:800;margin-right:.15rem}
/* Off state is quiet, on state is the same teal as every other "this is
   selected" cue on the site. */
.as-sort-btn{background:var(--sand-deep);color:var(--ink)}
.as-sort-btn.is-on{background:var(--teal);color:#fff}

/* The number sits before the name in admin, unlike the public card where it
   sits after. Robyn scans a column of numbers; a visitor reads a name. */
.admin-meta h4 .card-no{margin-right:.15rem;vertical-align:.02em}
.modal h3 .card-no{margin-left:.4rem;font-size:.72rem;vertical-align:.12em}
.modal h3 .card-no[hidden]{display:none}