/* FARO FUEL cookbook — content-first recipe discovery and reading */
.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}

.cb-hub-hero{
  padding-block:calc(var(--header-h,72px) + 46px) 54px;
  border-block-end:1px solid var(--border-soft);
  background:
    radial-gradient(circle at 12% 12%,color-mix(in srgb,var(--champagne) 16%,transparent),transparent 38%),
    radial-gradient(circle at 88% 4%,color-mix(in srgb,var(--rose) 17%,transparent),transparent 40%),
    var(--bg);
}
.cb-hub-hero h1{
  max-width:19ch;
  margin:12px 0 16px;
  color:var(--head);
  font-size:clamp(2.1rem,5vw,4rem);
  font-weight:830;
  line-height:1.12;
  letter-spacing:-.025em;
}
.cb-hub-hero .seo-lead{max-width:62ch}
.cb-hub-stats{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:26px}
.cb-hub-stats span{
  display:grid;
  min-width:116px;
  padding:13px 16px;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:color-mix(in srgb,var(--surface) 76%,transparent);
}
.cb-hub-stats b{color:var(--champagne);font-size:1.35rem;font-variant-numeric:tabular-nums}
.cb-hub-stats small{color:var(--muted);font-size:.78rem}

.cb-browser{padding-block:46px 76px}
.cb-section-head{margin-block-end:20px}
.cb-section-head h2{
  margin:8px 0 0;
  color:var(--head);
  font-size:clamp(1.45rem,2.8vw,2.15rem);
  font-weight:790;
}
.cb-filters{
  display:grid;
  gap:13px;
  margin-block-end:14px;
  padding:16px;
  border:1px solid var(--border-soft);
  border-radius:22px;
  background:color-mix(in srgb,var(--surface) 82%,transparent);
}
.cb-filter-row,.cb-quick-filters{display:flex;flex-wrap:wrap;gap:8px}
.cb-search input{
  width:100%;
  min-height:48px;
  padding:12px 16px;
  border:1px solid color-mix(in srgb,var(--champagne) 24%,var(--border));
  border-radius:var(--r-pill);
  outline:none;
  background:color-mix(in srgb,var(--bg) 70%,var(--surface));
  color:var(--ink);
  font:inherit;
}
.cb-search input::placeholder{color:var(--muted)}
.cb-search input:focus{outline:2px solid color-mix(in srgb,var(--rose) 58%,transparent);outline-offset:2px}
.cb-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--text-soft);
  font:inherit;
  font-size:.84rem;
  font-weight:650;
  line-height:1.2;
}
button.cb-chip{cursor:pointer;transition:border-color var(--fast),background var(--fast),color var(--fast),transform var(--fast)}
button.cb-chip:hover{border-color:color-mix(in srgb,var(--rose) 46%,var(--border));color:var(--ink)}
button.cb-chip:focus-visible{outline:2px solid color-mix(in srgb,var(--rose) 65%,transparent);outline-offset:2px}
.cb-chip.is-on{
  border-color:color-mix(in srgb,var(--rose) 56%,var(--border));
  background:var(--metal);
  color:var(--metal-on);
  box-shadow:0 8px 22px -12px rgba(232,168,191,.65);
}
.cb-quick-filters{padding-block-start:2px}
.cb-toggle::before{content:"";width:9px;height:9px;margin-inline-end:8px;border:1px solid currentColor;border-radius:50%}
.cb-toggle.is-on::before{border-color:var(--metal-on);background:var(--metal-on);box-shadow:inset 0 0 0 2px var(--metal)}
.cb-result-count{margin:0 0 16px;color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}

.cb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.cb-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border-soft);
  border-radius:22px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  transition:transform var(--base) var(--ease),border-color var(--base),box-shadow var(--base);
}
.cb-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--rose) 42%,var(--border));
  box-shadow:0 22px 42px -30px rgba(0,0,0,.72);
}
.cb-card:focus-visible{outline:2px solid color-mix(in srgb,var(--rose) 70%,transparent);outline-offset:3px}
.cb-card[hidden]{display:none}
.cb-card-media{
  display:block;
  aspect-ratio:3/2;
  overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--champagne) 15%,var(--surface)),var(--bg));
}
.cb-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .65s var(--ease)}
.cb-card:hover .cb-card-media img{transform:scale(1.035)}
.cb-card-body{display:flex;flex:1;flex-direction:column;gap:8px;padding:18px}
.cb-card-cat{color:var(--champagne);font-size:.78rem;font-weight:720}
.cb-card-body>b{color:var(--ink);font-size:1.08rem;font-weight:760;line-height:1.45}
.cb-card-body>p{
  display:-webkit-box;
  overflow:hidden;
  margin:0;
  color:var(--text-soft);
  font-size:.88rem;
  line-height:1.75;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.cb-card-stats{
  display:flex;
  flex-wrap:wrap;
  gap:7px 12px;
  margin-block-start:auto;
  padding-block-start:12px;
  border-block-start:1px solid var(--border-soft);
  color:var(--muted);
  font-size:.76rem;
  font-variant-numeric:tabular-nums;
}
.cb-card-stats strong{color:var(--ink);font-weight:720}
.cb-empty{
  margin-block:24px;
  padding:42px 20px;
  border:1px dashed var(--border);
  border-radius:20px;
  text-align:center;
  color:var(--muted);
}
.cb-empty h2{margin:0 0 8px;color:var(--head);font-size:1.3rem}.cb-empty p{margin:0}
.cb-hub-note{margin:28px 0 0;color:var(--muted);font-size:.88rem;line-height:1.8}
.cb-hub-note a{color:var(--champagne);font-weight:650}

.cb-article{padding-block-start:calc(var(--header-h,72px) + 24px)}
.cb-article-hero{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(380px,1.1fr);
  gap:clamp(24px,5vw,64px);
  align-items:center;
  padding-block:22px 42px;
}
.cb-article-hero h1{
  margin:12px 0;
  color:var(--head);
  font-size:clamp(2rem,4.5vw,3.55rem);
  font-weight:830;
  line-height:1.14;
  letter-spacing:-.025em;
}
.cb-cover{
  overflow:hidden;
  margin:0;
  aspect-ratio:3/2;
  border:1px solid var(--border-soft);
  border-radius:24px;
  background:var(--surface);
}
.cb-cover img{display:block;width:100%;height:100%;object-fit:cover}
.cb-time-grid{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:22px}
.cb-time-grid span{
  display:grid;
  min-width:106px;
  padding:10px 12px;
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:color-mix(in srgb,var(--surface) 78%,transparent);
}
.cb-time-grid b{color:var(--ink);font-size:1rem;font-variant-numeric:tabular-nums}
.cb-time-grid small{color:var(--muted);font-size:.7rem}

.cb-nutrition{
  padding-block:32px;
  border-block:1px solid var(--border-soft);
}
.cb-nutrition>p{margin:14px 0 0;color:var(--muted);font-size:.82rem}
.cb-macro-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.cb-macro{
  display:grid;
  gap:2px;
  min-width:0;
  padding:16px 12px;
  border:1px solid color-mix(in srgb,var(--champagne) 18%,var(--border-soft));
  border-radius:17px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--champagne) 6%,transparent),transparent),
    var(--surface);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.cb-macro span{color:var(--muted);font-size:.75rem}
.cb-macro b{color:var(--head);font-size:clamp(1.25rem,2vw,1.65rem);font-weight:800}
.cb-macro small{color:var(--champagne);font-size:.68rem}

.cb-article-layout{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.7fr);
  gap:clamp(24px,5vw,60px);
  align-items:start;
  padding-block:48px;
}
.cb-main,.cb-aside{display:grid;gap:18px}
.cb-content-card,.cb-note{
  padding:22px;
  border:1px solid var(--border-soft);
  border-radius:20px;
  background:var(--surface);
}
.cb-content-card h2,.cb-note h2{margin:8px 0 16px;color:var(--head);font-size:1.3rem;font-weight:770}
.cb-content-card ul,.cb-note ul{margin:0;padding-inline-start:20px;color:var(--text-soft);line-height:1.85}
.cb-ings ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}
.cb-ings li{padding:10px 0;border-block-end:1px solid var(--border-soft)}
.cb-steps ol{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:cb-step}
.cb-steps li{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
  padding:20px 0;
  border-block-end:1px solid var(--border-soft);
  counter-increment:cb-step;
}
.cb-steps li:last-child{border-block-end:0}
.cb-steps li::before{
  content:counter(cb-step);
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--metal);
  color:var(--metal-on);
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.cb-step-copy h3{margin:0 0 6px;color:var(--ink);font-size:1.03rem}
.cb-step-copy p{margin:0;color:var(--text-soft);line-height:1.9}
.cb-step-copy small{display:block;margin-block-start:8px;color:var(--muted);line-height:1.7}
.cb-step-time{padding:5px 9px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--rose) 9%,transparent);color:var(--rose);font-size:.72rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.cb-aside{position:sticky;top:94px}
.cb-note{background:color-mix(in srgb,var(--champagne) 6%,var(--surface))}
.cb-note p{margin:0;color:var(--text-soft);line-height:1.85}
.cb-note--safety{border-color:color-mix(in srgb,var(--rose) 28%,var(--border-soft));background:color-mix(in srgb,var(--rose) 7%,var(--surface))}
.cb-labels>div+div{margin-block-start:16px}.cb-labels div>b{display:block;margin-block-end:8px;color:var(--muted);font-size:.78rem}
.cb-labels p{display:flex;flex-wrap:wrap;gap:7px;margin:0}
.cb-labels .cb-chip{min-height:34px;padding:7px 11px;font-size:.76rem}
.cb-chip--warn{border-color:color-mix(in srgb,var(--rose) 38%,var(--border));color:var(--rose)}
.cb-disclaimer{margin-block:0 48px}
.cb-disclaimer>div{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:16px}
.cb-disclaimer a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;border:1px solid var(--border);border-radius:var(--r-pill);color:var(--champagne);font-weight:650}
.cb-disclaimer a:hover{border-color:var(--rose);color:var(--rose)}
.cb-related{padding-block:44px 76px;border-block-start:1px solid var(--border-soft)}
.cb-related>h2{margin:9px 0 20px;color:var(--head);font-size:clamp(1.4rem,2.7vw,2rem)}

@media (max-width:1000px){
  .cb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-macro-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cb-article-hero{grid-template-columns:1fr}
  .cb-cover{max-width:760px}
  .cb-article-layout{grid-template-columns:1fr}
  .cb-aside{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  .cb-hub-hero{padding-block-end:38px}
  .cb-grid{grid-template-columns:1fr}
  .cb-filters{padding:12px}
  .cb-filter-row{flex-wrap:nowrap;overflow-x:auto;padding-block-end:3px;scrollbar-width:none}
  .cb-filter-row::-webkit-scrollbar{display:none}
  .cb-filter-row .cb-chip{flex:0 0 auto}
  .cb-macro-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cb-article{padding-block-start:calc(var(--header-h,72px) + 12px)}
  .cb-article-hero{padding-block-end:30px}
  .cb-cover{border-radius:18px}
  .cb-time-grid span{flex:1 1 105px}
  .cb-ings ul{grid-template-columns:1fr}
  .cb-aside{grid-template-columns:1fr}
  .cb-steps li{grid-template-columns:44px minmax(0,1fr)}
  .cb-step-time{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .cb-card,.cb-card-media img,button.cb-chip{transition:none}
  .cb-card:hover,.cb-card:hover .cb-card-media img{transform:none}
  html:focus-within{scroll-behavior:auto}
}