/* Public recipe pages — the landing surface for Pinterest and search.
   Same tokens as the app so the jump from page to planner feels continuous. */
:root{
  --plum:#53306E; --plum-deep:#3E2255; --plum-soft:#EFE8F6; --plum-tint:#F7F3FB;
  --accent:#F07A3F; --accent-soft:#FDEBE0; --accent-ink:#B4501C;
  --bg:#FAF7F2; --card:#fff; --line:#EDE7E0; --line-2:#E4D9F0;
  --ink:#241E2E; --ink2:#5C5468; --ink3:#8B8494;
  --shadow:0 1px 2px rgba(36,30,46,.04), 0 8px 24px rgba(36,30,46,.06);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,Roboto,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 28px;background:rgba(250,247,242,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.4px}
.brand img{width:30px;height:30px;border-radius:9px}
.bar nav{display:flex;align-items:center;gap:8px}
.bar nav a{padding:8px 14px;border-radius:100px;font-size:14px;font-weight:700;color:var(--ink2)}
.bar nav a:hover{background:var(--plum-soft);color:var(--plum)}
.bar nav a.cta{background:var(--plum);color:#fff}
.bar nav a.cta:hover{background:var(--plum-deep);color:#fff}

main{max-width:1080px;margin:0 auto;padding:34px 24px 60px}

.hero{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:38px;align-items:center}
.shot img,.shot .plate{width:100%;aspect-ratio:1;border-radius:26px;object-fit:cover;box-shadow:var(--shadow)}
.shot .plate{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#fff 0%,var(--plum-tint) 70%);
  border:1px solid var(--line-2)}
.shot .plate span{font-size:150px;line-height:1}
.over{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--plum)}
h1{font-size:44px;font-weight:850;letter-spacing:-1.4px;line-height:1.08;margin:8px 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--plum-tint);border:1px solid var(--line-2);border-radius:100px;padding:6px 13px;
  font-size:13px;font-weight:700;color:var(--ink2)}
.sub{margin:16px 0 0;color:var(--ink2);font-size:16px}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:13px;padding:13px 22px;
  font-size:15px;font-weight:750;transition:transform .12s, filter .12s}
.btn:active{transform:translateY(1px)}
.btn.accent{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(240,122,63,.28)}
.btn.accent:hover{filter:brightness(1.05)}
.btn.ghost{background:#fff;border:1.5px solid var(--line);color:var(--plum)}
.btn.ghost:hover{border-color:var(--plum-soft);background:var(--plum-tint)}
.btn.big{padding:16px 30px;font-size:16.5px;margin-top:22px}
.tiny{font-size:12.5px;color:var(--ink3);margin-top:12px}
.dim{color:var(--ink3)}

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:22px;margin-top:46px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}
.card h2{font-size:20px;font-weight:800;letter-spacing:-.5px}
.ings{list-style:none;margin-top:14px}
.ings li{padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.ings li:first-child{border-top:none}
.ings b{color:var(--plum);font-weight:800;margin-right:6px}
.steps{margin:14px 0 0 20px}
.steps li{padding:8px 0 8px 4px;font-size:15.5px;color:var(--ink2)}
.steps li::marker{color:var(--accent);font-weight:800}
.nut{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;padding-top:18px;
  border-top:1px solid var(--line)}
.nut div{background:var(--plum-tint);border:1px solid var(--line-2);border-radius:14px;padding:12px;text-align:center}
.nut b{display:block;font-size:19px;font-weight:850;color:var(--plum);letter-spacing:-.5px}
.nut span{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink3)}

.pitch{margin-top:46px;background:linear-gradient(160deg,var(--plum) 0%,var(--plum-deep) 100%);color:#fff;
  border-radius:24px;padding:38px 34px;text-align:center}
.pitch h2{font-size:27px;font-weight:850;letter-spacing:-.9px}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px;text-align:left}
.steps3 div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:18px}
.steps3 span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);
  font-size:14px;font-weight:850;margin-bottom:10px}
.steps3 b{display:block;font-size:15.5px;font-weight:800}
.steps3 i{display:block;font-style:normal;font-size:13.5px;color:#DCCDEB;margin-top:5px}

.more{margin-top:46px}
.more h2{font-size:21px;font-weight:800;letter-spacing:-.6px;margin-bottom:14px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.rc{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;
  box-shadow:var(--shadow);transition:transform .14s, box-shadow .14s}
.rc:hover{transform:translateY(-3px);box-shadow:0 12px 34px rgba(36,30,46,.12)}
.rc .em{font-size:30px;display:block}
.rc b{display:block;font-size:15px;font-weight:750;margin-top:10px;letter-spacing:-.3px}
.rc i{display:block;font-style:normal;font-size:12.5px;color:var(--ink3);margin-top:3px}

.idxhead{text-align:center;max-width:660px;margin:12px auto 10px}
.idxhead h1{font-size:40px}
.idxhead p{color:var(--ink2);font-size:16.5px}

footer{border-top:1px solid var(--line);margin-top:60px;padding:26px 24px;display:flex;flex-wrap:wrap;
  gap:18px;justify-content:center;font-size:13.5px;color:var(--ink3)}
footer a:hover{color:var(--plum)}

@media (max-width:820px){
  main{padding:22px 16px 50px}
  .hero{grid-template-columns:minmax(0,1fr);gap:22px}
  h1{font-size:33px}
  .idxhead h1{font-size:30px}
  .cols{grid-template-columns:minmax(0,1fr)}
  .steps3{grid-template-columns:minmax(0,1fr)}
  .bar{padding:12px 16px}
  .bar nav a{padding:7px 11px;font-size:13px}
}