:root{
  /* Modern, airy, mobile-first */
  --paper:#ffffff;
  --ink:#0b1220;
  --muted:#526075;
  --rule:#e8edf3;
  --card:#ffffff;
  --stroke:#e7eef6;
  --shadow:0 10px 28px rgba(16,24,40,.10);
  --accent:#d61f26;
  --accent2:#0f172a;
}
*{box-sizing:border-box}
html{font-size:18px;}
body{margin:0;background:#fbfbfd;color:var(--ink);font-family:Lato, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height:1.55;}
a{color:inherit}

.top{border-bottom:1px solid var(--rule);background:#fff;}
.top::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--accent),#fb7185,#f59e0b,#22c55e,#3b82f6);}
.wrap{max-width:1180px;margin:0 auto;padding:18px 14px 18px;}
.mast{display:flex;flex-direction:column;gap:10px;align-items:center;}
.title{font-family:'Playfair Display', ui-serif, Georgia, serif;font-size:52px;line-height:1.10;text-align:center;font-weight:800;letter-spacing:-.01em;max-width:760px;white-space:normal;}
@media(max-width:700px){.title{font-size:40px;max-width:520px}}
.sub{color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:center;}
/* hide empty mast blocks */
.mast:empty{display:none;}

.breadcrumb{max-width:1180px;margin:0 auto;padding:10px 14px 0;color:var(--muted);font-size:12px;}

/* breadcrumb: left nav + right action */
.bcrumbBar{display:flex;align-items:center;justify-content:flex-start;gap:12px;}

/* breadcrumb pills */
.bcrumb{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.bpill{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid var(--stroke);background:#fff;color:var(--accent2);text-decoration:none;font-weight:800;}
.bpill:hover{background:rgba(0,0,0,.03)}
.bpill.active{outline:3px solid rgba(214,31,38,.20);border-color:rgba(214,31,38,.35);color:var(--accent2);}
.bhome{width:44px;height:38px;padding:0;}
.bhome span{font-size:18px;line-height:1;}

.bcopy{width:44px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;}
.bcopy{border:2px solid rgba(214,31,38,.30);background:rgba(214,31,38,.08);color:var(--accent);}
.bcopy:hover{background:rgba(214,31,38,.12)}
.bcopy:active{transform:scale(.99)}
.bcopy[disabled]{opacity:.5;cursor:default;transform:none;}
.bcopy .ico{display:inline-flex;align-items:center;justify-content:center;}

.superpill{width:100%;border:1px solid var(--rule);background:#fff;padding:18px 14px;border-radius:28px;color:var(--muted);font-size:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;box-shadow:var(--shadow);}
.spMain{font-size:22px;font-weight:800;color:var(--accent2);text-align:center;width:100%;font-family:'Playfair Display', ui-serif, Georgia, serif;}
.spSub{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;width:100%;}

.homeTitlePill{max-width:1040px;margin:4px auto 0;border-radius:34px;padding:20px 16px;display:flex;align-items:center;justify-content:center;}
.homeTitle{font-family:'Playfair Display', ui-serif, Georgia, serif;font-size:52px;line-height:1.12;text-align:center;color:var(--accent2);width:100%;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  background:linear-gradient(90deg,var(--accent),#fb7185,#f59e0b,#22c55e,#3b82f6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
@media(max-width:700px){.homeTitle{font-size:34px}}
@media(max-width:700px){.title{font-size:34px}.superpill{flex-direction:column;align-items:flex-start}}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px;}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

/* home super-pills */
.homeCats{max-width:1040px;margin:14px auto 0;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px;align-items:stretch;}
@media(max-width:700px){.homeCats{grid-template-columns:1fr;}}
.superlink{cursor:pointer;text-decoration:none;transition:transform .05s ease, background .15s ease;}
.superlink:hover{background:rgba(214,31,38,.05)}
.superlink:active{transform:scale(.99)}

/* category list (1 super-card per recipe) */
.list{max-width:980px;margin:0 auto;padding:14px 14px 44px;}
.rGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media(max-width:700px){.rGrid{grid-template-columns:1fr}}

.rCard{display:block;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--stroke);box-shadow:var(--shadow);background:#fff;text-decoration:none;min-height:210px;}
.rCard:hover{transform:translateY(-1px)}

.rImg{position:absolute;inset:0;background:linear-gradient(135deg, rgba(214,31,38,.10), rgba(59,130,246,.10));}
.rImg img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.02)}

.rOverlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));}

.rText{position:absolute;left:14px;right:14px;bottom:12px;color:#fff;}
.rTitle{font-family:'Playfair Display', ui-serif, Georgia, serif;font-weight:800;font-size:22px;line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.rMeta{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;}
.rPill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.22);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);font-size:12px;}

.card{border:1px solid var(--stroke);background:var(--card);box-shadow:var(--shadow);border-radius:14px;overflow:hidden;}
.card a{display:block;text-decoration:none}
.card .inner{padding:12px 12px 14px;}
.kicker{color:var(--muted);font-size:12px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;}
.h2{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-size:18px; margin:0 0 8px; font-weight:800;}
.desc{color:#2b2f35;font-size:14px;line-height:1.45;}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.badge{border:1px solid rgba(0,0,0,.14);background:rgba(255,255,255,.65);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--muted);}

.recipe{max-width:1180px;margin:0 auto;padding:14px 14px 44px;}

.hero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:16px;
  align-items:stretch;
  margin-top:14px;
}
@media(max-width:900px){
  .hero{grid-template-columns:1fr; gap:10px;}
  /* On mobile: remove the visual “separator line” between image and chips, and reduce spacing */
  .heroCard{margin-top:-10px;border-top:0;border-top-left-radius:0;border-top-right-radius:0;}
}

.heroImg{position:relative;border:1px solid var(--stroke);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,#fff,#f3f4f6);min-height:46px;display:grid;place-items:center;
  /* Keep hero image from becoming too tall (especially on mobile) */
  height:320px;
}
@media(max-width:560px){.heroImg{height:220px;}}
.heroImg img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none;}
.heroPh{color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase;}
.heroTitleWrap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62));}
.heroTitle{color:#fff;font-family:'Playfair Display', ui-serif, Georgia, serif;font-weight:800;font-size:30px;line-height:1.10;text-shadow:0 2px 14px rgba(0,0,0,.35);letter-spacing:-.01em;user-select:none;}
@media(max-width:560px){.heroTitle{font-size:24px}}

.heroCard{border:1px solid var(--stroke);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#fff;padding:14px 14px 16px;}
.heroMeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;justify-content:center;}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid var(--stroke);background:rgba(255,255,255,.92);font-size:14px;color:var(--muted);width:100%;}
.chip b{color:var(--ink)}
/* fixed colors by type (not by position) */
.chip.is-prep{border-color:rgba(214,31,38,.35);background:rgba(214,31,38,.06)}
.chip.is-total{border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08)}
.chip.is-diff{border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.08)}
.chip.is-cat{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)}

/* tags (e.g. Thermomix) */
.chip.is-tag{border-color:rgba(15,23,42,.28);background:rgba(15,23,42,.06)}
.chip.is-tag b{color:var(--ink)}

.columns{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;margin-top:12px;}
@media(max-width:560px){.columns{margin-top:10px;}}
.box{border:1px solid var(--stroke);background:#fff;border-radius:16px;padding:14px 14px 16px;box-shadow:var(--shadow);}
.box h2{margin:0 0 10px;font-family:'Playfair Display', ui-serif, Georgia, serif;text-transform:none;letter-spacing:.00em;font-size:18px;font-weight:800;color:var(--accent2);}
.ing li{margin:6px 0;}
.steps{counter-reset:step;}
.step{margin:10px 0;padding-left:2px;}
.step b{font-weight:900;}

/* Steps carousel */
.carousel{user-select:none;}
.cFrame{border:1px solid var(--stroke);background:rgba(255,255,255,.75);border-radius:12px;padding:12px 12px 14px;box-shadow:var(--shadow);}
.cTop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
.cTabs{display:flex;align-items:center;gap:12px;}
.cTab{border:none;background:transparent;padding:0;margin:0;font-weight:800;color:var(--accent2);cursor:pointer;font-size:14px;letter-spacing:.10em;text-transform:uppercase;}
.cTab.active{color:var(--accent);text-decoration:underline;text-underline-offset:3px;}
.cCounter.active{color:var(--accent);}
.cNav{display:flex;gap:10px;align-items:center;}
.cBtn{width:54px;height:48px;border-radius:14px;border:2px solid rgba(214,31,38,.35);background:rgba(214,31,38,.10);font-weight:900;cursor:pointer;color:var(--accent);font-size:24px;line-height:1;}
.cBtn:hover{background:rgba(214,31,38,.14)}
.cBtn:disabled{opacity:.35;border-color:rgba(0,0,0,.12);background:rgba(255,255,255,.75);color:rgba(0,0,0,.35)}
.cBtn:active{transform:scale(.98)}
.cCounter{color:var(--muted);font-size:13px;letter-spacing:.10em;text-transform:uppercase;}
.cBody{display:flex;flex-direction:column;gap:12px;}
.cStep{padding:14px 14px;border:1px solid rgba(0,0,0,.10);border-radius:14px;background:#fff;}
.cStep.is-second{background:#f3f4f6;}
.cStep .n{font-weight:900;color:var(--accent2);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.cStep div:last-child{font-size:18px;line-height:1.55;color:#1f2937;}
.cHint{display:none;}

@media(max-width:560px){
  .cBtn{width:58px;height:52px;}
  .cStep div:last-child{font-size:19px;}
}

footer{color:var(--muted);font-size:12px;text-align:center;margin-top:18px;}