{"id":1220,"date":"2026-04-21T07:56:36","date_gmt":"2026-04-21T07:56:36","guid":{"rendered":"https:\/\/boredbarista.com\/?page_id=1220"},"modified":"2026-04-21T09:52:37","modified_gmt":"2026-04-21T09:52:37","slug":"brew-guide-app","status":"publish","type":"page","link":"https:\/\/boredbarista.com\/?page_id=1220","title":{"rendered":"Coffee Lab App"},"content":{"rendered":"<!-- Bored Barista Coffee Lab \u2014 Light Version -->\r\n<style>\r\n  #bb-app * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; }\r\n  #bb-app {\r\n    max-width: 960px;\r\n    margin: 0 auto;\r\n    padding: 48px 24px;\r\n    background: #faf8f4;\r\n    color: #1a1a1a;\r\n  }\r\n  #bb-hero {\r\n    border-bottom: 2px solid #1a1a1a;\r\n    padding-bottom: 32px;\r\n    margin-bottom: 40px;\r\n  }\r\n  #bb-hero h2 {\r\n    font-size: 12px;\r\n    letter-spacing: .25em;\r\n    text-transform: uppercase;\r\n    color: #c8a84b;\r\n    margin-bottom: 14px;\r\n  }\r\n  #bb-hero h1 {\r\n    font-size: 42px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n    line-height: 1.1;\r\n    margin-bottom: 12px;\r\n  }\r\n  #bb-hero p {\r\n    font-size: 16px;\r\n    color: #666;\r\n    line-height: 1.7;\r\n    max-width: 600px;\r\n  }\r\n  #bb-nav {\r\n    display: flex;\r\n    gap: 8px;\r\n    flex-wrap: wrap;\r\n    margin-bottom: 40px;\r\n  }\r\n  #bb-nav button {\r\n    padding: 10px 22px;\r\n    border-radius: 2px;\r\n    border: 1.5px solid #ccc;\r\n    background: transparent;\r\n    cursor: pointer;\r\n    font-size: 12px;\r\n    letter-spacing: .12em;\r\n    text-transform: uppercase;\r\n    color: #666;\r\n    transition: all .15s;\r\n    font-weight: 500;\r\n  }\r\n  #bb-nav button:hover { border-color: #1a1a1a; color: #1a1a1a; }\r\n  #bb-nav button.active { background: #1a1a1a; color: #faf8f4; border-color: #1a1a1a; }\r\n  .bb-section { display: none; }\r\n  .bb-section.visible { display: block; }\r\n  .bb-section-label {\r\n    font-size: 11px;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: #999;\r\n    margin-bottom: 20px;\r\n    font-weight: 600;\r\n  }\r\n  .bb-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\r\n    gap: 20px;\r\n    margin-bottom: 20px;\r\n  }\r\n  .bb-card {\r\n    background: #fff;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 8px;\r\n    padding: 24px;\r\n    cursor: pointer;\r\n    transition: all .15s;\r\n  }\r\n  .bb-card:hover { border-color: #c8a84b; transform: translateY(-2px); }\r\n  .bb-card h3 {\r\n    font-size: 17px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n    margin-bottom: 10px;\r\n    line-height: 1.3;\r\n  }\r\n  .bb-card p {\r\n    font-size: 14px;\r\n    color: #555;\r\n    line-height: 1.7;\r\n    margin-bottom: 14px;\r\n  }\r\n  .bb-tags { display: flex; gap: 6px; flex-wrap: wrap; }\r\n  .bb-tag {\r\n    font-size: 11px;\r\n    padding: 3px 10px;\r\n    border-radius: 20px;\r\n    font-weight: 500;\r\n    letter-spacing: .04em;\r\n  }\r\n  .bb-tag.gold { background: #fef9ec; color: #8a6a00; border: 1px solid #e8c96a; }\r\n  .bb-tag.dark { background: #f0ede8; color: #444; border: 1px solid #d8d4cc; }\r\n  .bb-flavor-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\r\n    gap: 16px;\r\n    margin-bottom: 28px;\r\n  }\r\n  .bb-flavor-btn {\r\n    padding: 24px 20px;\r\n    background: #fff;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n    text-align: left;\r\n    transition: all .15s;\r\n  }\r\n  .bb-flavor-btn:hover { border-color: #c8a84b; transform: translateY(-2px); }\r\n  .bb-flavor-icon { font-size: 28px; display: block; margin-bottom: 10px; }\r\n  .bb-flavor-title { font-size: 16px; font-weight: 700; color: #1a1a1a; display: block; margin-bottom: 4px; }\r\n  .bb-flavor-hint { font-size: 12px; color: #999; display: block; }\r\n  .bb-result {\r\n    background: #fff;\r\n    border: 1.5px solid #c8a84b;\r\n    border-radius: 8px;\r\n    padding: 28px;\r\n    margin-top: 4px;\r\n    display: none;\r\n  }\r\n  .bb-result-label {\r\n    font-size: 11px;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: #c8a84b;\r\n    margin-bottom: 10px;\r\n    font-weight: 600;\r\n  }\r\n  .bb-result h3 { font-size: 24px; font-weight: 700; color: #1a1a1a; margin-bottom: 12px; }\r\n  .bb-result .explanation { font-size: 15px; color: #555; margin-bottom: 24px; line-height: 1.7; }\r\n  .bb-result .fixes-label {\r\n    font-size: 11px;\r\n    letter-spacing: .2em;\r\n    text-transform: uppercase;\r\n    color: #999;\r\n    margin-bottom: 12px;\r\n    font-weight: 600;\r\n  }\r\n  .bb-result ul { padding-left: 0; list-style: none; }\r\n  .bb-result ul li {\r\n    font-size: 15px;\r\n    color: #333;\r\n    padding: 12px 0;\r\n    border-bottom: 1px solid #f0ede8;\r\n    padding-left: 20px;\r\n    position: relative;\r\n    line-height: 1.5;\r\n  }\r\n  .bb-result ul li:last-child { border-bottom: none; }\r\n  .bb-result ul li::before {\r\n    content: \"\u2192\";\r\n    position: absolute;\r\n    left: 0;\r\n    color: #c8a84b;\r\n    font-weight: 700;\r\n  }\r\n  .bb-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }\r\n  .bb-filter {\r\n    padding: 7px 16px;\r\n    border: 1.5px solid #ccc;\r\n    background: transparent;\r\n    font-size: 11px;\r\n    letter-spacing: .1em;\r\n    text-transform: uppercase;\r\n    color: #777;\r\n    cursor: pointer;\r\n    transition: all .15s;\r\n    border-radius: 2px;\r\n    font-weight: 500;\r\n  }\r\n  .bb-filter:hover { border-color: #1a1a1a; color: #1a1a1a; }\r\n  .bb-filter.on { background: #1a1a1a; color: #faf8f4; border-color: #1a1a1a; }\r\n  .bb-loading {\r\n    text-align: center;\r\n    padding: 60px;\r\n    color: #bbb;\r\n    font-size: 13px;\r\n    letter-spacing: .1em;\r\n    text-transform: uppercase;\r\n  }\r\n  .bb-detail {\r\n    background: #fff;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 8px;\r\n    padding: 32px;\r\n    display: none;\r\n  }\r\n  .bb-detail h3 {\r\n    font-size: 26px;\r\n    font-weight: 700;\r\n    color: #1a1a1a;\r\n    margin-bottom: 20px;\r\n    line-height: 1.2;\r\n  }\r\n  .bb-detail p { font-size: 15px; color: #555; line-height: 1.8; }\r\n  .bb-back {\r\n    font-size: 11px;\r\n    letter-spacing: .15em;\r\n    text-transform: uppercase;\r\n    color: #999;\r\n    cursor: pointer;\r\n    margin-bottom: 24px;\r\n    display: inline-block;\r\n    transition: color .15s;\r\n    font-weight: 600;\r\n  }\r\n  .bb-back:hover { color: #1a1a1a; }\r\n  .bb-stat-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }\r\n  .bb-stat {\r\n    background: #faf8f4;\r\n    border: 1.5px solid #e8e4dc;\r\n    border-radius: 4px;\r\n    padding: 8px 14px;\r\n    font-size: 12px;\r\n    color: #777;\r\n    text-transform: uppercase;\r\n    letter-spacing: .05em;\r\n  }\r\n  .bb-stat span { color: #1a1a1a; font-weight: 700; }\r\n  .bb-consult {\r\n    margin-top: 56px;\r\n    padding: 48px 40px;\r\n    background: #1a1a1a;\r\n    border-radius: 8px;\r\n    text-align: center;\r\n  }\r\n  .bb-consult h3 {\r\n    font-size: 12px;\r\n    letter-spacing: .25em;\r\n    text-transform: uppercase;\r\n    color: #c8a84b;\r\n    margin-bottom: 16px;\r\n  }\r\n  .bb-consult p {\r\n    font-size: 28px;\r\n    font-weight: 700;\r\n    color: #fff;\r\n    margin-bottom: 10px;\r\n    line-height: 1.3;\r\n  }\r\n  .bb-consult small {\r\n    font-size: 15px;\r\n    color: #888;\r\n    display: block;\r\n    margin-bottom: 28px;\r\n    line-height: 1.6;\r\n  }\r\n  .bb-consult a {\r\n    display: inline-block;\r\n    background: #c8a84b;\r\n    color: #1a1a1a;\r\n    padding: 14px 36px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: .15em;\r\n    text-transform: uppercase;\r\n    text-decoration: none;\r\n    border-radius: 2px;\r\n    transition: background .15s;\r\n  }\r\n  .bb-consult a:hover { background: #e0bf5a; }\r\n  .bb-notice {\r\n    background: #fff8e8;\r\n    border: 1.5px solid #e8c96a;\r\n    border-radius: 8px;\r\n    padding: 16px 20px;\r\n    font-size: 14px;\r\n    color: #7a5c00;\r\n    line-height: 1.6;\r\n    margin-bottom: 24px;\r\n  }\r\n  .bb-notice strong { font-weight: 700; }\r\n<\/style>\r\n\r\n<div id=\"bb-app\">\r\n  <div id=\"bb-hero\">\r\n    <h2>Bored Barista<\/h2>\r\n    <h1>Coffee Lab<\/h1>\r\n    <p>Extraction science, sensory training, cultivar guides, and Philippine coffee origins \u2014 everything you need to brew better.<\/p>\r\n  <\/div>\r\n\r\n  <div id=\"bb-nav\">\r\n    <button class=\"active\" onclick=\"showSection('flavor', this)\">Flavor Fixer<\/button>\r\n    <button onclick=\"showSection('brewing', this)\">Brew Guides<\/button>\r\n    <button onclick=\"showSection('cultivars', this)\">Cultivars<\/button>\r\n    <button onclick=\"showSection('processing', this)\">Processing<\/button>\r\n    <button onclick=\"showSection('origins', this)\">PH Origins<\/button>\r\n    <button onclick=\"showSection('equipment', this)\">Gear Guide<\/button>\r\n  <\/div>\r\n\r\n  <!-- FLAVOR FIXER -->\r\n  <div id=\"flavor\" class=\"bb-section visible\">\r\n    <p class=\"bb-section-label\">What does your coffee taste like?<\/p>\r\n    <div class=\"bb-flavor-grid\">\r\n      <button class=\"bb-flavor-btn\" onclick=\"getFlavor('sour')\">\r\n        <span class=\"bb-flavor-icon\">\ud83d\ude23<\/span>\r\n        <span class=\"bb-flavor-title\">Too sour<\/span>\r\n        <span class=\"bb-flavor-hint\">Under-extracted<\/span>\r\n      <\/button>\r\n      <button class=\"bb-flavor-btn\" onclick=\"getFlavor('bitter')\">\r\n        <span class=\"bb-flavor-icon\">\ud83d\ude2c<\/span>\r\n        <span class=\"bb-flavor-title\">Too bitter<\/span>\r\n        <span class=\"bb-flavor-hint\">Over-extracted<\/span>\r\n      <\/button>\r\n      <button class=\"bb-flavor-btn\" onclick=\"getFlavor('weak')\">\r\n        <span class=\"bb-flavor-icon\">\ud83d\udca7<\/span>\r\n        <span class=\"bb-flavor-title\">Too weak<\/span>\r\n        <span class=\"bb-flavor-hint\">Low strength<\/span>\r\n      <\/button>\r\n      <button class=\"bb-flavor-btn\" onclick=\"getFlavor('flat')\">\r\n        <span class=\"bb-flavor-icon\">\ud83d\ude36<\/span>\r\n        <span class=\"bb-flavor-title\">Flat \/ dull<\/span>\r\n        <span class=\"bb-flavor-hint\">Stale or underdeveloped<\/span>\r\n      <\/button>\r\n      <button class=\"bb-flavor-btn\" onclick=\"getFlavor('astringent')\">\r\n        <span class=\"bb-flavor-icon\">\ud83d\ude16<\/span>\r\n        <span class=\"bb-flavor-title\">Astringent<\/span>\r\n        <span class=\"bb-flavor-hint\">Dry, mouth-coating<\/span>\r\n      <\/button>\r\n      <button class=\"bb-flavor-btn\" onclick=\"getFlavor('salty')\">\r\n        <span class=\"bb-flavor-icon\">\ud83e\uddc2<\/span>\r\n        <span class=\"bb-flavor-title\">Salty<\/span>\r\n        <span class=\"bb-flavor-hint\">Mineral imbalance<\/span>\r\n      <\/button>\r\n    <\/div>\r\n    <div class=\"bb-result\" id=\"flavor-result\">\r\n      <p class=\"bb-result-label\">Diagnosis<\/p>\r\n      <h3 id=\"flavor-issue\"><\/h3>\r\n      <p class=\"explanation\" id=\"flavor-explanation\"><\/p>\r\n      <p class=\"fixes-label\">How to fix it<\/p>\r\n      <ul id=\"flavor-fixes\"><\/ul>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- BREW GUIDES -->\r\n  <div id=\"brewing\" class=\"bb-section\">\r\n    <p class=\"bb-section-label\">Choose your brew method<\/p>\r\n    <div class=\"bb-grid\" id=\"brewing-grid\">\r\n      <div class=\"bb-loading\">Loading brew guides...<\/div>\r\n    <\/div>\r\n    <div class=\"bb-detail\" id=\"brewing-detail\">\r\n      <span class=\"bb-back\" onclick=\"closeDetail('brewing-detail', 'brewing-grid')\">\u2190 All methods<\/span>\r\n      <h3 id=\"bd-name\"><\/h3>\r\n      <div class=\"bb-stat-row\" id=\"bd-stats\"><\/div>\r\n      <p id=\"bd-tips\"><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- CULTIVARS -->\r\n  <div id=\"cultivars\" class=\"bb-section\">\r\n    <p class=\"bb-section-label\">Coffee cultivars<\/p>\r\n    <div class=\"bb-filter-row\">\r\n      <button class=\"bb-filter on\" onclick=\"filterCultivars('all', this)\">All<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterCultivars('arabica', this)\">Arabica<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterCultivars('robusta', this)\">Fine Robusta<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterCultivars('liberica', this)\">Liberica \/ Barako<\/button>\r\n    <\/div>\r\n    <div class=\"bb-grid\" id=\"cultivars-grid\">\r\n      <div class=\"bb-loading\">Loading cultivars...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- PROCESSING -->\r\n  <div id=\"processing\" class=\"bb-section\">\r\n    <p class=\"bb-section-label\">Processing methods<\/p>\r\n    <div class=\"bb-filter-row\">\r\n      <button class=\"bb-filter on\" onclick=\"filterProcessing('all', this)\">All<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterProcessing('traditional', this)\">Traditional<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterProcessing('classic', this)\">Classic<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterProcessing('developed', this)\">Developed<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterProcessing('modern', this)\">Modern<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterProcessing('experimental', this)\">Experimental<\/button>\r\n    <\/div>\r\n    <div class=\"bb-grid\" id=\"processing-grid\">\r\n      <div class=\"bb-loading\">Loading processing methods...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- PH ORIGINS -->\r\n  <div id=\"origins\" class=\"bb-section\">\r\n    <p class=\"bb-section-label\">Philippine coffee regions<\/p>\r\n    <div class=\"bb-grid\" id=\"origins-grid\">\r\n      <div class=\"bb-loading\">Loading origins...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- EQUIPMENT -->\r\n  <div id=\"equipment\" class=\"bb-section\">\r\n    <p class=\"bb-section-label\">Gear guide<\/p>\r\n    <div class=\"bb-filter-row\">\r\n      <button class=\"bb-filter on\" onclick=\"filterGear('all', this)\">All gear<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterGear('entry', this)\">Entry level<\/button>\r\n      <button class=\"bb-filter\" onclick=\"filterGear('mid', this)\">Mid range<\/button>\r\n    <\/div>\r\n    <div class=\"bb-grid\" id=\"equipment-grid\">\r\n      <div class=\"bb-loading\">Loading gear guide...<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- CONSULT CTA -->\r\n  <div class=\"bb-consult\">\r\n    <h3>Work with me<\/h3>\r\n    <p>Want someone to actually fix your coffee?<\/p>\r\n    <small>One-on-one sessions, group sensory workshops, and cafe consulting \u2014 with a real expert.<\/small>\r\n<a href=\"https:\/\/boredbarista.com\/?page_id=799\">Book a session \u2192<\/a>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  const API = \"https:\/\/bored-barista-api-production.up.railway.app\";\r\n\r\n  let allCultivars = [];\r\n  let allProcessing = [];\r\n  let allGear = [];\r\n\r\n  function showSection(id, btn) {\r\n    document.querySelectorAll('.bb-section').forEach(s => s.classList.remove('visible'));\r\n    document.querySelectorAll('#bb-nav button').forEach(b => b.classList.remove('active'));\r\n    document.getElementById(id).classList.add('visible');\r\n    btn.classList.add('active');\r\n    if (id === 'brewing' && !document.getElementById('brewing-grid').querySelector('.bb-card')) loadBrewing();\r\n    if (id === 'cultivars' && allCultivars.length === 0) loadCultivars();\r\n    if (id === 'processing' && allProcessing.length === 0) loadProcessing();\r\n    if (id === 'origins') loadOrigins();\r\n    if (id === 'equipment' && allGear.length === 0) loadGear();\r\n  }\r\n\r\n  async function getFlavor(taste) {\r\n    try {\r\n      const res = await fetch(`${API}\/flavor?taste=${taste}`);\r\n      const data = await res.json();\r\n      document.getElementById('flavor-issue').textContent = data.issue;\r\n      document.getElementById('flavor-explanation').textContent = data.explanation;\r\n      const ul = document.getElementById('flavor-fixes');\r\n      ul.innerHTML = data.fixes.map(f => `<li>${f}<\/li>`).join('');\r\n      const result = document.getElementById('flavor-result');\r\n      result.style.display = 'block';\r\n      result.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\r\n    } catch(e) { console.error(e); }\r\n  }\r\n\r\n  async function loadBrewing() {\r\n    try {\r\n      const res = await fetch(`${API}\/brewing-guides`);\r\n      const data = await res.json();\r\n      const grid = document.getElementById('brewing-grid');\r\n      grid.innerHTML = data.map((b, i) => `\r\n        <div class=\"bb-card\" onclick=\"showBrewDetail(${i})\">\r\n          <h3>${b.method}<\/h3>\r\n          <p>${b.tips}<\/p>\r\n          <div class=\"bb-tags\">\r\n            <span class=\"bb-tag gold\">${b.roast}<\/span>\r\n            <span class=\"bb-tag dark\">${b.temp}<\/span>\r\n            <span class=\"bb-tag dark\">${b.ratio}<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      `).join('');\r\n      window._brewData = data;\r\n    } catch(e) { console.error(e); }\r\n  }\r\n\r\n  function showBrewDetail(i) {\r\n    const b = window._brewData[i];\r\n    document.getElementById('bd-name').textContent = b.method;\r\n    document.getElementById('bd-stats').innerHTML = `\r\n      <span class=\"bb-stat\">Roast <span>${b.roast}<\/span><\/span>\r\n      <span class=\"bb-stat\">Grind <span>${b.grind}<\/span><\/span>\r\n      <span class=\"bb-stat\">Temp <span>${b.temp}<\/span><\/span>\r\n      <span class=\"bb-stat\">Ratio <span>${b.ratio}<\/span><\/span>\r\n      <span class=\"bb-stat\">Time <span>${b.time}<\/span><\/span>\r\n    `;\r\n    document.getElementById('bd-tips').textContent = b.tips;\r\n    document.getElementById('brewing-grid').style.display = 'none';\r\n    document.getElementById('brewing-detail').style.display = 'block';\r\n  }\r\n\r\n  function closeDetail(detailId, gridId) {\r\n    document.getElementById(detailId).style.display = 'none';\r\n    document.getElementById(gridId).style.display = 'grid';\r\n  }\r\n\r\n  async function loadCultivars() {\r\n    try {\r\n      const res = await fetch(`${API}\/cultivars`);\r\n      allCultivars = await res.json();\r\n      renderCultivars(allCultivars);\r\n    } catch(e) { console.error(e); }\r\n  }\r\n\r\n  function renderCultivars(data) {\r\n    document.getElementById('cultivars-grid').innerHTML = data.map(c => `\r\n      <div class=\"bb-card\">\r\n        <h3>${c.name}<\/h3>\r\n        <p>${c.description}<\/p>\r\n        <div class=\"bb-tags\">\r\n          <span class=\"bb-tag gold\">${c.species}<\/span>\r\n          ${c.flavor.slice(0,3).map(f => `<span class=\"bb-tag dark\">${f}<\/span>`).join('')}\r\n        <\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n\r\n  function filterCultivars(species, btn) {\r\n    document.querySelectorAll('#cultivars .bb-filter').forEach(b => b.classList.remove('on'));\r\n    btn.classList.add('on');\r\n    const filtered = species === 'all' ? allCultivars : allCultivars.filter(c => c.species === species);\r\n    renderCultivars(filtered);\r\n  }\r\n\r\n  async function loadProcessing() {\r\n    try {\r\n      const res = await fetch(`${API}\/processing`);\r\n      allProcessing = await res.json();\r\n      renderProcessing(allProcessing);\r\n    } catch(e) { console.error(e); }\r\n  }\r\n\r\n  function renderProcessing(data) {\r\n    document.getElementById('processing-grid').innerHTML = data.map(p => `\r\n      <div class=\"bb-card\">\r\n        <h3>${p.name}<\/h3>\r\n        <p>${p.description}<\/p>\r\n        <div class=\"bb-tags\">\r\n          <span class=\"bb-tag gold\">${p.category}<\/span>\r\n          ${p.flavor.slice(0,2).map(f => `<span class=\"bb-tag dark\">${f}<\/span>`).join('')}\r\n        <\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n\r\n  function filterProcessing(cat, btn) {\r\n    document.querySelectorAll('#processing .bb-filter').forEach(b => b.classList.remove('on'));\r\n    btn.classList.add('on');\r\n    const filtered = cat === 'all' ? allProcessing : allProcessing.filter(p => p.category === cat);\r\n    renderProcessing(filtered);\r\n  }\r\n\r\n  async function loadOrigins() {\r\n    const grid = document.getElementById('origins-grid');\r\n    if (grid.querySelector('.bb-card')) return;\r\n    try {\r\n      const res = await fetch(`${API}\/origins\/philippines`);\r\n      const data = await res.json();\r\n      grid.innerHTML = data.map(o => `\r\n        <div class=\"bb-card\">\r\n          <h3>${o.region}<\/h3>\r\n          <p>${o.description}<\/p>\r\n          <div class=\"bb-tags\">\r\n            <span class=\"bb-tag gold\">${o.altitude}<\/span>\r\n            ${o.flavor.slice(0,2).map(f => `<span class=\"bb-tag dark\">${f}<\/span>`).join('')}\r\n          <\/div>\r\n        <\/div>\r\n      `).join('');\r\n    } catch(e) { console.error(e); }\r\n  }\r\n\r\n  async function loadGear() {\r\n    try {\r\n      const res = await fetch(`${API}\/equipment`);\r\n      allGear = await res.json();\r\n      renderGear(allGear);\r\n    } catch(e) { console.error(e); }\r\n  }\r\n\r\n  function renderGear(data) {\r\n    document.getElementById('equipment-grid').innerHTML = data.map(g => `\r\n      <div class=\"bb-card\">\r\n        <h3>${g.item}<\/h3>\r\n        <p>${g.description}<\/p>\r\n        <p style=\"font-size:13px;color:#999;margin-top:8px;line-height:1.6\">${g.why_it_matters}<\/p>\r\n        <div class=\"bb-tags\" style=\"margin-top:12px\">\r\n          <span class=\"bb-tag gold\">${g.price_php}<\/span>\r\n          <span class=\"bb-tag dark\">${g.category}<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    `).join('');\r\n  }\r\n\r\n  function filterGear(tier, btn) {\r\n    document.querySelectorAll('#equipment .bb-filter').forEach(b => b.classList.remove('on'));\r\n    btn.classList.add('on');\r\n    const filtered = tier === 'all' ? allGear : allGear.filter(g => g.tier === tier);\r\n    renderGear(filtered);\r\n  }\r\n<\/script>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1220","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"brizy_media":[],"_links":{"self":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages\/1220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/boredbarista.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1220"}],"version-history":[{"count":3,"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages\/1220\/revisions"}],"predecessor-version":[{"id":1274,"href":"https:\/\/boredbarista.com\/index.php?rest_route=\/wp\/v2\/pages\/1220\/revisions\/1274"}],"wp:attachment":[{"href":"https:\/\/boredbarista.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}