:root{--ink:#242322;--muted:#77736e;--paper:#f7f7f4;--lime:#d8e74b;--line:#deded8;--serif:Georgia,'Times New Roman',serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}.site-header{height:82px;padding:0 5.5%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:45px}.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;letter-spacing:-.7px}.brand-accent{font-weight:500}.brand-mark{width:25px;height:25px;border:2px solid var(--ink);border-radius:7px;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:4px 3px;transform:rotate(-9deg)}.brand-mark i{display:block;width:3px;border-radius:2px;background:var(--ink)}.brand-mark i:first-child{height:6px}.brand-mark i:nth-child(2){height:11px}.brand-mark i:last-child{height:15px}.main-nav{display:flex;gap:29px;font-size:12px;color:var(--muted);margin-right:auto}.main-nav a.active,.main-nav a:hover{color:var(--ink)}.main-nav a.active:after{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--ink);margin:8px auto 0}.header-cta{font-size:12px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:5px}.header-cta span,.text-link span{margin-left:5px}.menu-button{display:none;font-size:21px}.hero{min-height:575px;display:flex;position:relative;overflow:hidden;padding:88px 10% 72px}.hero-copy{position:relative;z-index:2;width:53%}.eyebrow{font-family:'DM Mono',monospace;text-transform:uppercase;letter-spacing:1.5px;font-size:10px;color:var(--muted);margin:0 0 21px}.eyebrow-dot{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--lime);margin:0 8px 1px 0}.hero h1{font-size:clamp(48px,6vw,78px);line-height:.98;letter-spacing:-4px;margin:0 0 25px;font-weight:800}.hero h1 em,.create-copy h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-3px}.hero-description{font-size:14px;line-height:1.7;color:var(--muted);max-width:415px;margin-bottom:31px}.search-form{height:57px;background:#fff;border:1px solid #d9d9d2;border-radius:5px;display:flex;align-items:center;max-width:500px;padding-left:17px;box-shadow:0 5px 20px rgba(42,42,30,.04)}.search-icon{font-family:Georgia;font-size:27px;line-height:1;transform:rotate(-20deg);color:#aaa}.search-form input{border:0;outline:0;font-family:Manrope;font-size:13px;flex:1;padding:0 10px;background:transparent}.search-form button{background:var(--ink);color:#fff;height:42px;margin-right:7px;padding:0 16px;border-radius:3px;font-size:11px;font-weight:700}.search-form button span{color:var(--lime);margin-left:8px}.popular{font-size:10px;color:var(--muted);margin-top:14px}.popular span{color:var(--ink);font-weight:700;margin-right:10px}.popular button{text-decoration:underline;text-underline-offset:3px;margin-right:12px;color:var(--muted);font-size:10px}.hero-art{position:absolute;right:5%;top:45px;width:43%;height:475px}.art-sun{position:absolute;width:360px;height:360px;border-radius:50%;right:4%;top:30px;background:#e5f19e}.art-sun:after{content:'';position:absolute;width:310px;height:310px;border-radius:50%;top:25px;right:25px;background:var(--lime)}.art-note{position:absolute;width:310px;height:370px;right:16%;top:63px;background:#fffdf9;z-index:2;padding:27px 25px;box-shadow:16px 20px 30px rgba(42,43,25,.12);transform:rotate(3deg)}.note-top,.note-footer{display:flex;justify-content:space-between;align-items:center}.note-label,.visual-label,.mini-list-title{font:10px 'DM Mono',monospace;letter-spacing:1px}.note-menu{font-size:11px;letter-spacing:2px;color:#aaa}.art-note h2{font-size:28px;line-height:1.07;letter-spacing:-1.5px;margin:31px 0 21px}.note-rule{height:1px;background:#e8e4da;margin-bottom:18px}.art-note label{display:flex;align-items:center;gap:11px;font-size:11px;margin:17px 0;color:#555}.fake-check{width:16px;height:16px;border:1px solid #c4c2b8;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);font-size:11px}.fake-check.checked{background:var(--lime);border-color:var(--lime)}.note-footer{position:absolute;bottom:24px;left:25px;right:25px;color:#999;font-size:9px}.progress{height:3px;background:#e5e3dd;width:82px}.progress i{display:block;width:50%;height:100%;background:var(--ink)}.art-sticker{position:absolute;z-index:3;background:var(--ink);color:var(--lime);font:10px 'DM Mono',monospace;text-align:center}.sticker-one{width:62px;height:62px;padding-top:11px;left:11%;top:100px;transform:rotate(-10deg)}.sticker-one b{font-size:23px;line-height:1.2}.sticker-two{border-radius:50%;font-size:24px;width:54px;height:54px;padding-top:12px;right:4%;bottom:48px;transform:rotate(10deg)}.explore-section{padding:80px 10% 105px;background:#fff}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:35px}.section-heading h2{font-size:38px;letter-spacing:-2px;margin:0}.text-link{font-size:11px;font-weight:700;border-bottom:1px solid var(--ink);padding-bottom:5px}.category-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}.pill{border:1px solid #deded8;border-radius:50px;padding:10px 16px;font-size:11px;color:var(--muted)}.pill span{font-size:9px;margin-left:4px}.pill.active,.pill:hover{background:var(--ink);border-color:var(--ink);color:#fff}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.template-card{border:1px solid var(--line);background:#fff;transition:transform .2s,box-shadow .2s}.template-card:hover{transform:translateY(-5px);box-shadow:0 12px 25px #20201813}.card-visual{height:165px;position:relative;overflow:hidden;padding:17px}.card-coral .card-visual{background:#f3a18e}.card-lilac .card-visual{background:#b5a5df}.card-yellow .card-visual{background:#e6de68}.card-blue .card-visual{background:#a9d4ce}.visual-label{font-size:9px}.visual-number{position:absolute;bottom:15px;right:17px;font:10px 'DM Mono';opacity:.55}.house-icon{font-size:93px;line-height:1;position:absolute;bottom:-18px;left:35%;font-family:Georgia}.suitcase-icon{font-size:95px;line-height:1;position:absolute;bottom:-15px;left:31%;transform:rotate(-10deg);font-family:Georgia}.week-icon{position:absolute;font:bold 50px Georgia;line-height:.8;bottom:14px;left:43%;transform:rotate(-9deg)}.week-icon b{color:#7c7a31}.sun-icon{position:absolute;font:100px Georgia;bottom:-16px;left:33%;line-height:1}.card-content{padding:17px 17px 15px}.card-content h3{font-size:15px;margin:0 0 6px;letter-spacing:-.4px}.card-content p{font-size:11px;line-height:1.55;color:var(--muted);height:35px;margin:0}.card-meta{display:flex;justify-content:space-between;border-top:1px solid #e8e8e2;margin-top:15px;padding-top:12px;font:9px 'DM Mono';color:#999}.card-meta a:first-child{color:#999}.arrow{color:var(--ink);font-size:15px}.no-results{text-align:center;color:var(--muted);font-size:13px;padding:35px}.no-results a{text-decoration:underline;color:var(--ink)}.create-banner{margin:0 5.5%;background:var(--ink);min-height:370px;color:#fff;position:relative;overflow:hidden;display:flex;padding:65px 8%;align-items:center}.create-shape{position:absolute;border-radius:50%;border:1px solid #4b4b45}.shape-left{width:380px;height:380px;left:-225px;top:-165px}.shape-right{width:480px;height:480px;right:-170px;bottom:-300px}.create-copy{position:relative;z-index:1;max-width:470px}.eyebrow.light{color:#aaa}.create-copy h2{font-size:43px;line-height:1.02;letter-spacing:-2px;margin:0 0 16px}.create-copy p:not(.eyebrow){font-size:12px;line-height:1.7;color:#aaa;max-width:370px}.light-button{display:inline-block;border:1px solid #777;color:#fff;padding:12px 16px;font-size:11px;margin-top:12px}.light-button span{color:var(--lime);margin-left:25px}.create-list{z-index:1;background:#f3f2ec;color:var(--ink);width:270px;padding:23px 25px;margin-left:auto;transform:rotate(4deg);box-shadow:14px 18px 20px #0003;font-size:11px}.mini-list-title{display:flex;justify-content:space-between;margin-bottom:22px}.mini-list-title span{color:#b4c618;font-size:16px}.create-list div:not(.mini-list-title):not(.mini-line){padding:11px 0;border-bottom:1px solid #ddddd5}.create-list i{display:inline-block;width:12px;height:12px;border:1px solid #aaa;border-radius:2px;vertical-align:-2px;margin-right:8px}.mini-line{height:1px;background:#bbb;width:55%;margin-top:22px}.site-footer{padding:75px 10% 35px;display:grid;grid-template-columns:1fr 2fr;gap:70px}.footer-brand p{font:11px 'DM Mono';color:#999;margin-top:20px}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.footer-links div{display:flex;flex-direction:column;gap:11px;font-size:11px;color:var(--muted)}.footer-links strong{color:var(--ink);font-size:10px;text-transform:uppercase;letter-spacing:1px;margin-bottom:7px}.footer-bottom{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;color:#aaa;font:9px 'DM Mono'}@media(max-width:800px){.site-header{padding:0 6%;height:70px}.main-nav,.header-cta{display:none}.menu-button{display:block;margin-left:auto}.hero{padding:60px 8% 30px;min-height:780px}.hero-copy{width:100%}.hero h1{font-size:56px}.hero-art{top:405px;right:0;width:100%;height:350px}.art-note{right:20%;top:35px;transform:scale(.83) rotate(3deg)}.art-sun{right:3%;top:15px;width:280px;height:280px}.art-sun:after{width:240px;height:240px}.sticker-one{left:7%;top:65px}.sticker-two{right:8%;bottom:0}.explore-section{padding:65px 8% 75px}.section-heading{align-items:start;gap:20px}.section-heading h2{font-size:31px}.text-link{white-space:nowrap;margin-top:29px}.template-grid{grid-template-columns:repeat(2,1fr)}.create-banner{margin:0;padding:55px 9%;display:block}.create-list{margin:40px 0 0 auto}.site-footer{padding:60px 8% 30px;display:block}.footer-links{margin-top:45px}.footer-bottom{margin-top:45px}}@media(max-width:480px){.hero h1{font-size:48px;letter-spacing:-3px}.hero-description{font-size:13px}.search-form button{padding:0 11px}.popular button{margin-right:5px}.hero-art{top:420px}.art-note{right:6%;}.template-grid{gap:10px}.card-visual{height:130px}.card-content{padding:13px}.card-content p{height:52px}.section-heading{display:block}.text-link{display:inline-block;margin-top:16px}.footer-links{grid-template-columns:1fr 1fr}.footer-links div:last-child{grid-column:1/-1;margin-top:12px}.footer-bottom{display:block;line-height:2}.footer-bottom span{display:block}}\n*** Add File: /Users/williejones/.copilot/repos/copilot-worktrees/templatechecklist/jjeb6894-sturdy-pancake/script.js
const input = document.querySelector('#search-input');
const form = document.querySelector('#search-form');
const cards = [...document.querySelectorAll('.template-card')];
const pills = [...document.querySelectorAll('.pill')];
const noResults = document.querySelector('#no-results');

function filterTemplates(query = '', category = 'all') {
  const normalized = query.trim().toLowerCase();
  let visible = 0;
  cards.forEach((card) => {
    const matchesText = !normalized || `${card.dataset.search} ${card.textContent}`.toLowerCase().includes(normalized);
    const matchesCategory = category === 'all' || card.dataset.category === category;
    const show = matchesText && matchesCategory;
    card.hidden = !show;
    if (show) visible += 1;
  });
  noResults.hidden = visible !== 0;
}

form.addEventListener('submit', (event) => {
  event.preventDefault();
  filterTemplates(input.value, document.querySelector('.pill.active').dataset.category);
  document.querySelector('#explore').scrollIntoView({ behavior: 'smooth' });
});

input.addEventListener('input', () => {
  filterTemplates(input.value, document.querySelector('.pill.active').dataset.category);
});

pills.forEach((pill) => {
  pill.addEventListener('click', () => {
    pills.forEach((item) => item.classList.remove('active'));
    pill.classList.add('active');
    filterTemplates(input.value, pill.dataset.category);
  });
});

document.querySelectorAll('[data-query]').forEach((button) => {
  button.addEventListener('click', () => {
    input.value = button.dataset.query;
    filterTemplates(input.value, document.querySelector('.pill.active').dataset.category);
    document.querySelector('#explore').scrollIntoView({ behavior: 'smooth' });
  });
});