/* ============================================================
   tameside.online — design system  (warm & community)
   Single shared stylesheet. Palette: warm cream paper, terracotta
   primary, community-green accent, gold highlight. Rounded, friendly.
   ============================================================ */

:root{
  /* warm surfaces */
  --paper:#fdf7ef;
  --paper-2:#f7ecdc;
  --surface:#ffffff;
  /* warm ink */
  --ink:#2c2218;
  --ink-soft:#5c4f40;
  --muted:#8a7a66;
  --line:#ece0d0;
  --line-2:#e2d2bc;
  /* terracotta primary */
  --brand:#d2622f;
  --brand-deep:#a8451d;
  --brand-tint:#fbe9dd;
  /* community green accent */
  --accent:#2f7d52;
  --accent-deep:#236040;
  --accent-tint:#e3f1e8;
  /* warm gold highlight */
  --gold:#dd9326;
  --gold-tint:#fcedd1;
  /* signal colours */
  --red:#b23a26;
  --red-tint:#fdeae4;
  --shadow:0 10px 30px rgba(96,58,20,.10);
  --shadow-lg:0 22px 52px rgba(96,58,20,.16);
  --radius:18px;
  --radius-lg:26px;
  --radius-pill:999px;
  --maxw:1180px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(900px 480px at 8% -8%, #ffe9cf 0%, rgba(255,233,207,0) 60%),
                   radial-gradient(820px 460px at 100% 0%, #e6f1e6 0%, rgba(230,241,230,0) 55%);
  background-repeat:no-repeat;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{line-height:1.18;margin:.2em 0 .4em;letter-spacing:-.018em}
h1{font-size:clamp(2rem,4.4vw,3.2rem);font-weight:850}
h2{font-size:clamp(1.35rem,2.4vw,1.85rem);font-weight:820}
h3{font-size:1.08rem;font-weight:780}
p{margin:.4em 0 .9em}
hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}

/* ---- layout primitives ---- */
.wrap{width:min(var(--maxw),calc(100% - 34px));margin-inline:auto}
.section{padding:22px 0}
.section-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-end;margin-bottom:14px;flex-wrap:wrap}
.section-head h2{margin:0}
.section-head p{margin:0;color:var(--muted);font-size:.96rem}
.eyebrow{color:var(--accent-deep);font-weight:800;letter-spacing:.07em;text-transform:uppercase;font-size:.76rem;margin:0}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:60ch;margin:.5rem 0 1rem}
.muted{color:var(--muted)}
.small{font-size:.88rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:12px;z-index:60}
.skip-link:focus{left:14px}

/* ---- header / nav ---- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(253,247,239,.88);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px 0}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:850;color:var(--ink);letter-spacing:-.02em;font-size:1.12rem}
.brand:hover{text-decoration:none}
.brand-mark{width:40px;height:40px;border-radius:13px;display:block;box-shadow:0 6px 16px rgba(207,90,44,.32)}
.brand b{color:var(--accent)}
.navlinks{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.navlinks a{color:var(--ink-soft);font-weight:650;font-size:.95rem;padding:7px 11px;border-radius:var(--radius-pill)}
.navlinks a:hover{background:var(--brand-tint);color:var(--brand-deep);text-decoration:none}
.navlinks a.active{background:var(--brand);color:#fff}

/* ---- breadcrumbs ---- */
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.86rem;color:var(--muted);padding:14px 0 0}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs a:hover{color:var(--brand-deep)}
.breadcrumbs .sep{opacity:.5}
.breadcrumbs .here{color:var(--ink-soft);font-weight:650}

/* ---- hero ---- */
.hero{padding:30px 0 12px}
.hero-grid{display:grid;grid-template-columns:1.55fr .95fr;gap:30px;align-items:start}
.hero-copy h1{margin-top:.15em}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px}
.hero-proof{display:flex;gap:22px;flex-wrap:wrap;margin-top:8px}
.proof strong{display:block;font-size:1.7rem;font-weight:850;color:var(--brand-deep);line-height:1}
.proof span{color:var(--muted);font-size:.86rem}
.hero-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow)}
.hero-panel .mini-kicker{color:var(--accent-deep);font-weight:800;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;margin:0}
.quick-links{display:grid;gap:9px;margin-top:10px}
.quick-link{display:block;border:1px solid var(--line);border-radius:14px;padding:11px 13px;background:var(--paper);font-weight:750;color:var(--ink)}
.quick-link span{display:block;font-weight:500;color:var(--muted);font-size:.86rem;margin-top:2px}
.quick-link:hover{border-color:var(--brand);background:var(--brand-tint);text-decoration:none}

/* ---- buttons ---- */
.btn,.cta{display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:780;font-size:.95rem;
  padding:11px 18px;border-radius:var(--radius-pill);border:1.5px solid var(--line-2);
  background:var(--surface);color:var(--ink);cursor:pointer;transition:transform .04s ease,background .15s ease,box-shadow .15s ease}
.btn:hover,.cta:hover{text-decoration:none;background:var(--paper-2)}
.btn:active,.cta:active{transform:translateY(1px)}
.btn-primary,.cta.primary,.btn.blue{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(207,90,44,.26)}
.btn-primary:hover,.cta.primary:hover,.btn.blue:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn-sm{padding:6px 11px;font-size:.84rem}

/* ---- pills & chips ---- */
.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--radius-pill);padding:5px 11px;font-size:.85rem;color:var(--ink-soft);font-weight:600}
a.pill:hover{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-deep);text-decoration:none}
.pill.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pill span{opacity:.7;font-weight:500}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:var(--radius-pill);padding:6px 12px;font-size:.86rem;font-weight:700;color:var(--ink-soft)}
a.chip:hover{background:var(--brand-tint);border-color:var(--brand);color:var(--brand-deep);text-decoration:none}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip span{font-weight:500;opacity:.7}

/* ---- badges ---- */
.badge{display:inline-flex;align-items:center;white-space:nowrap;border-radius:var(--radius-pill);
  padding:5px 10px;font-weight:800;font-size:.78rem;background:var(--paper-2);color:var(--ink-soft)}
.badge.done,.badge.fresh,.badge.public{color:var(--accent-deep);background:var(--accent-tint)}
.badge.todo{color:var(--brand-deep);background:var(--brand-tint)}
.badge.progress,.badge.due{color:var(--gold);background:var(--gold-tint)}
.badge.blocked,.badge.late,.badge.warn{color:var(--red);background:var(--red-tint)}
.badge.paused,.badge.unknown{color:var(--muted);background:var(--paper-2)}

/* ---- cards & grids ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card.muted{color:var(--ink-soft);background:#fffaf3}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:15px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:18px 0}
.summary .card{padding:15px}
.summary .card strong{font-size:1.6rem;font-weight:850;color:var(--brand-deep)}

/* ---- directory cards ---- */
.directory-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:14px}
.directory-card{display:flex;flex-direction:column;gap:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);border-left:5px solid var(--gold)}
.directory-card:hover{border-color:var(--brand);border-left-color:var(--brand);text-decoration:none;transform:translateY(-2px);transition:transform .12s ease}
.directory-card-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.directory-card-count{font-size:1.5rem;font-weight:850;color:var(--brand-deep)}
.directory-card .category{font-size:.78rem;font-weight:800;color:var(--accent-deep);text-transform:uppercase;letter-spacing:.04em}
.directory-card-link{font-weight:750;color:var(--brand-deep);margin-top:auto}

/* listing card (directory results + per-listing) */
.listing-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.listing-card .topline{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.listing-card h3{margin:.2em 0}
.listing-card .category{font-size:.82rem;color:var(--muted);font-weight:650}
.listing-card .category a{color:var(--accent-deep)}
.meta{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}
.source{color:var(--muted);font-size:.84rem;margin:6px 0 0}

/* ---- tools ---- */
.result-list{display:grid;gap:13px}
.result-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.result-top{display:flex;justify-content:space-between;align-items:flex-start;gap:11px;flex-wrap:wrap}
.result-card h3{margin:0;font-size:1.1rem}
.result-cat{color:var(--muted);font-size:.86rem;font-weight:700}
.result-desc{margin:9px 0;color:var(--ink-soft);line-height:1.55}
.result-facts{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}
.source-line{margin:8px 0 0;color:var(--muted);font-size:.86rem}
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px 18px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px}
.tool-card-live{border-left:5px solid var(--accent)}
.tool-card-muted{opacity:.92;border-left:5px solid var(--line-2)}
.tool-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:9px;flex-wrap:wrap}
.tool-card h3{margin:0;font-size:1.06rem;line-height:1.28}
.tool-card p{margin:3px 0 9px;color:var(--ink-soft);line-height:1.5}
.filter-chips{display:flex;gap:9px;flex-wrap:wrap}
.filter-chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line-2);background:var(--surface);
  border-radius:var(--radius-pill);padding:7px 13px;font-weight:700;color:var(--ink-soft);cursor:pointer;font-size:.9rem}
.filter-chip input{margin:0;width:15px;height:15px;accent-color:var(--brand)}
.filter-chip:has(input:checked){background:var(--brand-tint);border-color:var(--brand);color:var(--brand-deep)}

/* ---- forms ---- */
.search-form{display:grid;grid-template-columns:2fr 1fr auto;gap:12px;align-items:end}
.search-form label,.form label{display:flex;flex-direction:column;font-weight:750;font-size:.84rem;color:var(--ink-soft);gap:6px}
input,select,textarea{font:inherit;padding:11px 12px;border:1.5px solid var(--line-2);border-radius:12px;
  background:var(--surface);color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:3px solid var(--brand-tint);outline-offset:0;border-color:var(--brand)}
.search{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr auto;gap:10px;margin-top:14px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.form .full{grid-column:1/-1}
.form label,.form .form-row{display:flex;flex-direction:column;font-weight:750;font-size:.84rem;color:var(--ink-soft);gap:6px}
.form button[type=submit]{justify-self:start}
.notice{border-left:5px solid var(--accent);background:var(--accent-tint)}
.error{border-left:5px solid var(--red);background:var(--red-tint)}
.empty{background:#fffaf3;border:1px dashed var(--line-2);border-radius:var(--radius);padding:20px;color:var(--ink-soft)}

/* ---- stats ---- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  box-shadow:var(--shadow);border-top:5px solid var(--accent)}
.stat-card .figure{font-size:2rem;font-weight:850;color:var(--brand-deep);line-height:1.05}
.stat-card .metric{font-weight:780;margin:4px 0 2px}

/* ---- tables ---- */
.table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--paper-2)}
tr:last-child td{border-bottom:0}

/* ---- pagination ---- */
.pagination{display:flex;gap:10px;align-items:center;margin-top:16px}

/* ---- footer ---- */
.site-footer{margin-top:40px;border-top:1px solid var(--line);background:var(--paper-2)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:24px;padding:30px 0}
.footer-group strong{display:block;margin-bottom:6px;color:var(--ink)}
.footer-group a{display:block;color:var(--ink-soft);margin:4px 0;font-size:.94rem}
.footer-small{grid-column:1/-1;color:var(--muted);font-size:.82rem;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}

/* ---- history timeline ---- */
.timeline{position:relative;margin:20px 0}
.timeline:before{content:"";position:absolute;left:128px;top:0;bottom:0;width:3px;background:var(--line-2);border-radius:3px}
.event{display:grid;grid-template-columns:115px 1fr;gap:30px;margin:0 0 18px}
.event .date{font-weight:850;color:var(--brand-deep);text-align:right;padding-top:18px;font-size:.98rem}
.event .card{position:relative}
.event .card:before{content:"";position:absolute;left:-37px;top:23px;width:16px;height:16px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px var(--brand-tint),0 0 0 6px var(--brand)}
.town-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.town-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);border-top:5px solid var(--gold)}
.town-card h3{margin:.1em 0 .35em}
.town-card ul{padding-left:1.1rem;margin:.65rem 0;color:var(--ink-soft)}
.town-card li{margin:.4rem 0}
.town-source{font-size:.82rem;color:var(--muted);border-top:1px solid var(--line);padding-top:.6rem;margin-top:.4rem}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 18px}
.tabs .pill.active,.tabs a.pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}

@media(max-width:760px){
  .timeline:before{left:8px}
  .event{grid-template-columns:1fr;gap:6px}
  .event .date{text-align:left;padding-left:28px;padding-top:0}
  .event .card{margin-left:28px}
  .event .card:before{left:-28px}
}

/* ---- per-listing page ---- */
.listing-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--shadow);border-left:6px solid var(--brand)}
.listing-hero h1{margin:.1em 0 .15em;font-size:clamp(1.7rem,3.4vw,2.5rem)}
.listing-facts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.listing-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

/* ---- page-body compat (guide pages, directory listing cards) ---- */
.pagebody{white-space:pre-wrap;line-height:1.7;color:var(--ink-soft)}
.topline{display:flex;justify-content:space-between;gap:11px;align-items:flex-start;flex-wrap:wrap}
.category{font-size:.82rem;font-weight:750;color:var(--accent-deep)}
.category a{color:var(--accent-deep)}
.source-filters{margin:2px 0 14px}
.fact strong{font-size:1.55rem;font-weight:850;color:var(--brand-deep)}
.card>h3:first-child,.card>h2:first-child{margin-top:0}
a.card:hover{border-color:var(--brand);text-decoration:none;transform:translateY(-2px);transition:transform .12s ease}

/* ---- responsive ---- */
@media(max-width:880px){
  .hero-grid{grid-template-columns:1fr}
  .summary{grid-template-columns:repeat(2,1fr)}
  .search{grid-template-columns:1fr}
  .search-form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .nav{flex-wrap:wrap}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}