/* HarborBeat — structured article blocks (Recipe / HowTo / FAQ). Apple aesthetic. */
.hb-sd{margin:2rem 0;padding:1.5rem;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg,16px)}
.hb-sd-title{display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:600;color:var(--ink);margin:0 0 1rem}
.hb-sd-title .bi{color:var(--blue)}

/* Recipe */
.hb-sd-meta{display:flex;flex-wrap:wrap;gap:.5rem .75rem;margin-bottom:1.1rem}
.hb-sd-meta span{display:inline-flex;gap:.3rem;align-items:baseline;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;font-size:.85rem;color:var(--ink-2)}
.hb-sd-meta strong{color:var(--ink);font-weight:600}
.hb-sd-recipe-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:1.5rem}
.hb-sd-recipe-grid h4{font-size:.95rem;font-weight:600;color:var(--ink);margin:0 0 .6rem;letter-spacing:.01em}
.hb-sd-ingredients ul{list-style:none;padding:0;margin:0}
.hb-sd-ingredients li{position:relative;padding:.4rem 0 .4rem 1.4rem;border-bottom:1px solid var(--line);color:var(--ink);font-size:.95rem}
.hb-sd-ingredients li:last-child{border-bottom:0}
.hb-sd-ingredients li::before{content:"";position:absolute;left:0;top:.85rem;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.hb-sd-steps ol{margin:0;padding-left:1.2rem}
.hb-sd-steps li{padding:.35rem 0;color:var(--ink);font-size:.95rem;line-height:1.5}

/* HowTo */
.hb-sd-howto-list{margin:0;padding-left:1.3rem;counter-reset:howto}
.hb-sd-howto-list li{padding:.5rem 0;color:var(--ink);font-size:.95rem;line-height:1.55}
.hb-sd-howto-name{display:block;font-weight:600;color:var(--ink)}
.hb-sd-howto-text{display:block;color:var(--ink-2)}

/* FAQ */
.hb-sd-faq-list{display:flex;flex-direction:column;gap:.5rem}
.hb-sd-faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:.2rem .9rem}
.hb-sd-faq-item summary{cursor:pointer;font-weight:600;color:var(--ink);padding:.7rem 0;list-style:none;font-size:.98rem}
.hb-sd-faq-item summary::-webkit-details-marker{display:none}
.hb-sd-faq-item summary::after{content:"\002B";float:right;color:var(--ink-2);font-weight:400;transition:transform .2s}
.hb-sd-faq-item[open] summary::after{content:"\2212"}
.hb-sd-faq-item p{margin:0 0 .8rem;color:var(--ink-2);font-size:.93rem;line-height:1.6}

@media (max-width:640px){
  .hb-sd{padding:1.15rem}
  .hb-sd-recipe-grid{grid-template-columns:1fr;gap:1.1rem}
}

/* ---- Editorial content blocks (Phase 5b): TL;DR / fact box / pull quote /
   timeline / corrections. Apple aesthetic, mobile-first. ---- */
.hb-eb{margin:1.75rem 0}

/* TL;DR */
.hb-eb-tldr{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r,14px);padding:1.1rem 1.25rem}
.hb-eb-tldr-title{display:flex;align-items:center;gap:.45rem;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);margin:0 0 .6rem}
.hb-eb-tldr-list{margin:0;padding-left:1.2rem;display:flex;flex-direction:column;gap:.35rem}
.hb-eb-tldr-list li{color:var(--ink);font-size:1rem;line-height:1.5}
.hb-eb-tldr-text{margin:0;color:var(--ink);font-size:1.05rem;line-height:1.55}

/* Pull quote */
.hb-eb-pullquote{margin:2rem 0;padding:0 0 0 1.1rem;border-left:4px solid var(--blue)}
.hb-eb-pullquote blockquote{margin:0;font-size:clamp(1.25rem,3.5vw,1.6rem);font-weight:600;line-height:1.3;letter-spacing:-.02em;color:var(--ink)}

/* Fact box */
.hb-eb-factbox{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg,18px);padding:1.4rem 1.5rem;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.hb-eb-factbox-title{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:600;color:var(--ink);margin:0 0 .8rem}
.hb-eb-factbox-title .bi{color:var(--blue)}
.hb-eb-factbox-body{color:var(--ink-2);font-size:.96rem;line-height:1.6}
.hb-eb-factbox-body :first-child{margin-top:0}
.hb-eb-factbox-body :last-child{margin-bottom:0}
.hb-eb-factbox-body ul,.hb-eb-factbox-body ol{padding-left:1.2rem;margin:.4rem 0}
.hb-eb-factbox-body li{margin:.25rem 0}
.hb-eb-factbox-body a{color:var(--blue)}

/* Timeline */
.hb-eb-timeline{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg,18px);padding:1.4rem 1.5rem}
.hb-eb-timeline-title{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:600;color:var(--ink);margin:0 0 1rem}
.hb-eb-timeline-title .bi{color:var(--blue)}
.hb-eb-timeline-list{list-style:none;margin:0;padding:0;position:relative}
.hb-eb-timeline-list::before{content:"";position:absolute;left:6px;top:.4rem;bottom:.4rem;width:2px;background:var(--line)}
.hb-eb-timeline-item{position:relative;padding:0 0 1.1rem 1.7rem}
.hb-eb-timeline-item:last-child{padding-bottom:0}
.hb-eb-timeline-item::before{content:"";position:absolute;left:0;top:.35rem;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--blue)}
.hb-eb-timeline-date{display:block;font-size:.82rem;font-weight:600;color:var(--blue);margin-bottom:.15rem}
.hb-eb-timeline-text{display:block;color:var(--ink);font-size:.96rem;line-height:1.55}

/* Corrections & clarifications */
.hb-eb-corrections{background:#fbf6e9;border:1px solid #e8d9a8;border-radius:var(--r-lg,18px);padding:1.25rem 1.45rem}
.hb-eb-corrections-title{display:flex;align-items:center;gap:.5rem;font-size:1.02rem;font-weight:600;color:#7a5a00;margin:0 0 .7rem}
.hb-eb-corrections-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.hb-eb-corrections-item{font-size:.95rem;line-height:1.55;color:var(--ink)}
.hb-eb-corrections-date{display:block;font-size:.8rem;font-weight:600;color:#7a5a00;margin-bottom:.1rem}
.hb-eb-corrections-text{display:block;color:var(--ink-2)}

@media (max-width:640px){
  .hb-eb-factbox,.hb-eb-timeline,.hb-eb-corrections{padding:1.1rem}
}