/* Little Westies — Gumroad-style playful surface + Clutch-style directory structure.
   Palette retained from original: cream #fffaf3, orange #ff7a45, peach #ffe2c6/#ffd0b0,
   teal #2a7d6f, mint #d9f0ea, ink #222.
   Decorative dot / concentric-circle motifs below are original, generic CSS patterns
   created for this site — subtle accents only. */
:root{
  --cream:#fffaf3; --orange:#ff7a45; --peach:#ffe2c6; --peach-border:#ffd0b0;
  --teal:#2a7d6f; --teal-dark:#1f5f54; --mint:#d9f0ea; --ink:#222222;
  --muted:#555555; --muted-2:#666666; --card:#ffffff;
  --border:2px solid var(--ink); --border-thick:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink); --shadow-sm:4px 4px 0 var(--ink);
  --shadow-orange:6px 6px 0 var(--orange); --radius:16px; --radius-lg:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;margin:0;color:var(--ink);background:var(--cream);line-height:1.55;font-size:16px}
a{color:var(--teal-dark);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
::selection{background:var(--orange);color:var(--ink)}

/* ---------- Header / nav (Clutch: strong header, tidy nav) ---------- */
header{background:var(--orange);border-bottom:var(--border-thick);padding:14px 20px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;position:sticky;top:0;z-index:20}
header a{color:var(--ink);text-decoration:none}
.logo{font-weight:900;font-size:22px!important;letter-spacing:-.02em;background:#fff;border:var(--border);border-radius:999px;padding:7px 16px 8px;box-shadow:var(--shadow-sm);display:inline-block;line-height:1.2}
.logo:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
header nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
header nav a{font-size:14px;font-weight:700;padding:7px 12px;border-radius:999px;border:2px solid transparent}
header nav a:hover{background:var(--peach);border-color:var(--ink)}

/* ---------- Layout & typography (Gumroad: chunky headlines, whitespace) ---------- */
main{max-width:1080px;margin:auto;padding:32px 20px 44px}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;letter-spacing:-.035em;font-weight:900;margin:.2em 0 .45em;max-width:16em}
h2{font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.08;letter-spacing:-.03em;font-weight:900;margin:1.4em 0 .5em}
h3{line-height:1.2;letter-spacing:-.015em}
main>p{max-width:72ch;font-size:1.03rem}
main>p a,article a,.featured a{font-weight:700}

/* Original generic dot-field divider under page titles */
main>h1::after{content:"";display:block;width:148px;height:14px;margin-top:18px;border-radius:999px;background:
  radial-gradient(circle,var(--ink) 2.2px,transparent 2.8px) 0 50%/18px 14px repeat-x,
  var(--peach-border)}

/* ---------- Hero (sticker panel + dot band) ---------- */
.hero{background:var(--peach);border:var(--border-thick);border-radius:var(--radius-lg);padding:34px 30px 30px;box-shadow:var(--shadow);margin:8px 0 28px;position:relative;overflow:hidden}
.hero::before{content:"";display:block;height:16px;margin:-18px -12px 22px;border-radius:999px;background:
  radial-gradient(circle,var(--ink) 2.2px,transparent 2.8px) 0 50%/18px 16px repeat-x,
  radial-gradient(circle,rgba(34,34,34,.55) 1.6px,transparent 2.1px) 9px 50%/18px 16px repeat-x,
  var(--orange)}
.hero h1{margin-top:0}
.hero h2{margin-top:0}
.hero p{font-size:1.13rem;max-width:58ch;margin:.4em 0 1.1em}

/* ---------- Buttons (chunky pills, hard shadow) ---------- */
.btn,.signup button{background:var(--teal);color:#fff;padding:12px 20px;border-radius:999px;text-decoration:none;display:inline-block;font-weight:900;border:var(--border);box-shadow:var(--shadow-sm);cursor:pointer;font-size:1rem;line-height:1.2}
.btn:hover,.signup button:hover{background:var(--teal-dark);color:#fff;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active,.signup button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}

/* ---------- Category tiles (sticker tiles) ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:16px;margin:24px 0 30px}
.tile{background:#fff;border:var(--border-thick);border-radius:var(--radius);padding:18px 16px;text-decoration:none;color:var(--ink);font-weight:900;font-size:1.02rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.tile::after{content:"";position:absolute;right:-20px;top:-20px;width:64px;height:64px;border-radius:50%;opacity:.45;background:repeating-radial-gradient(circle,transparent 0 6px,rgba(255,122,69,.65) 6px 8px,transparent 8px 13px,rgba(42,125,111,.55) 13px 15px);pointer-events:none}
.tile:nth-child(even){transform:rotate(.4deg)}
.tile:nth-child(odd){transform:rotate(-.4deg)}
.tile:hover{transform:translate(-2px,-2px) rotate(0);box-shadow:7px 7px 0 var(--ink);color:var(--ink)}
.tile span{position:relative;z-index:1;display:inline-block;font-weight:700;font-size:12px;color:var(--ink);background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:2px 9px;margin-top:10px;text-transform:uppercase;letter-spacing:.04em}

/* ---------- Listing cards (Clutch: hierarchy, meta rows, dividers) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:20px;margin:18px 0}
article{background:var(--card);border:var(--border);border-radius:var(--radius);padding:20px 20px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px}
article::after{content:"";position:absolute;right:-22px;top:-22px;width:72px;height:72px;border-radius:50%;opacity:.38;background:repeating-radial-gradient(circle,transparent 0 6px,rgba(255,122,69,.7) 6px 8px,transparent 8px 14px,rgba(42,125,111,.6) 14px 16px);pointer-events:none}
article:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}
article h3{margin:0;font-size:1.22rem;font-weight:900;padding-right:28px}
article p{margin:0}
article>a,.cls>a{align-self:flex-start}
.where{font-size:13px;color:var(--muted);font-weight:700;background:var(--cream);border:1.5px solid var(--peach-border);border-radius:999px;padding:5px 11px;display:inline-block}
.where b{color:var(--ink)}
article>a:last-child{margin-top:auto}
.card-link,.cls .card-link{font-weight:900}
article a[href^="http"],.cls a{font-weight:700}
.card-actions{margin-top:auto;padding-top:8px;border-top:2px solid var(--peach-border);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}

/* Classes cards: chips + tidy definition meta rows */
.tag{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);margin:0;background:var(--peach);border:2px solid var(--ink);border-radius:999px;padding:3px 10px;display:inline-block;align-self:flex-start}
.cls dl{display:grid;grid-template-columns:96px 1fr;gap:6px 12px;font-size:14px;margin:6px 0;padding:12px 0;border-top:2px solid var(--peach-border);border-bottom:2px solid var(--peach-border)}
.cls dt{color:var(--muted);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:.05em;padding-top:2px}
.cls dd{margin:0;font-weight:600}

/* ---------- Filters (Clutch toolbar) ---------- */
.filters{background:#fff;padding:16px 18px;border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);margin:20px 0;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.filters label{font-weight:800;font-size:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters select{padding:9px 12px;border:var(--border);border-radius:999px;background:var(--cream);font:inherit;font-size:14px;font-weight:700;color:var(--ink)}
.filters #cnt{font-weight:900;background:var(--mint);border:2px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:13px}

/* ---------- Featured / signup panels ---------- */
.featured{border:3px dashed var(--orange);border-radius:var(--radius);padding:22px;margin:22px 0;background:#fff6ef;box-shadow:var(--shadow-sm)}
.featured h3{margin:.3em 0;font-size:1.35rem;font-weight:900}
.signup{background:var(--teal);color:#fff;border:var(--border-thick);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:28px;margin:30px 0;position:relative;overflow:hidden}
.signup::before{content:"";display:block;height:14px;margin:-12px -8px 18px;border-radius:999px;background:radial-gradient(circle,#fff 2px,transparent 2.6px) 0 50%/18px 14px repeat-x,rgba(255,255,255,.22)}
.signup h2{color:#fff;margin-top:0}
.signup form{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 10px}
.signup input{padding:12px 16px;width:min(320px,100%);border:var(--border);border-radius:999px;font:inherit;background:#fff;color:var(--ink)}
.signup button{background:var(--orange);color:var(--ink)}
.signup button:hover{background:var(--peach);color:var(--ink)}
.signup small{color:#fff;opacity:.92}
.note{font-size:13px;color:var(--muted-2);margin-top:24px;border-top:2px solid var(--peach-border);padding-top:14px;max-width:75ch}
main ul{line-height:1.7;max-width:70ch}
main li::marker{color:var(--orange)}

/* ---------- Footer + acknowledgement ---------- */
footer{text-align:center;font-size:13px;color:var(--muted-2);padding:28px 20px 34px;border-top:var(--border-thick);background:var(--peach);margin-top:10px}
footer p{max-width:820px;margin:0 auto 8px}
footer .ack{font-weight:800;color:var(--ink);font-size:14px}
footer::before{content:"";display:block;width:148px;height:14px;margin:0 auto 18px;border-radius:999px;background:radial-gradient(circle,var(--ink) 2.2px,transparent 2.8px) 0 50%/18px 14px repeat-x,var(--peach-border)}

/* ---------- Motion / mobile ---------- */
.tile,.btn,.signup button,article,.logo{transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media (max-width:640px){
  header{position:static;padding:12px 14px}
  main{padding:22px 14px 34px}
  .hero{padding:24px 18px 22px;box-shadow:4px 4px 0 var(--ink)}
  .grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(auto-fit,minmax(138px,1fr))}
  .signup form{flex-direction:column;align-items:stretch}
  .signup input{width:100%}
  .cls dl{grid-template-columns:84px 1fr}
}
.logo{display:inline-flex;align-items:center;gap:8px}
.logo img{height:40px;width:40px;display:block}

/* ---------- Phase 2: search, detail, homepage ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.homesearch{display:flex;gap:8px;margin:14px 0 16px;max-width:560px}
.homesearch input,.filters input,.filters select{font:inherit;padding:10px 12px;border:2px solid var(--ink);border-radius:10px;min-height:44px;background:#fff;width:100%}
.homesearch button,.filters button,.empty button{font:inherit;font-weight:800;padding:10px 16px;border:2px solid var(--ink);border-radius:10px;background:var(--orange);cursor:pointer;min-height:44px}
.filters{display:grid;grid-template-columns:2fr repeat(4,1fr) auto;gap:10px;align-items:end;margin:8px 0}
.filters label{display:flex;flex-direction:column;font-weight:700;font-size:14px;gap:4px}
.empty{grid-column:1/-1;padding:20px;border:2px dashed var(--ink);border-radius:12px;text-align:center}
.suburbs{display:flex;flex-wrap:wrap;gap:8px}.suburbs a{padding:8px 12px;border:2px solid var(--ink);border-radius:999px;text-decoration:none;min-height:24px}
.detail dl.facts{display:grid;grid-template-columns:140px 1fr;gap:6px 12px;max-width:640px}.detail dt{font-weight:800}.detail dd{margin:0}
.crumbs{font-size:14px}.verified{font-size:14px}.biz{margin:24px 0}
main,article,dd,.where{overflow-wrap:anywhere}
@media (max-width:640px){.filters{grid-template-columns:1fr 1fr}.filters label:first-child{grid-column:1/-1}.detail dl.facts{grid-template-columns:100px 1fr}.homesearch{flex-direction:column}}