/* ---------------------------------------------------------------
   Recipes - the single recipe page and the /recipes/ hub.
   One stylesheet, one visual language: dark photo hero, pale body,
   white cards on a warm ground.
   --------------------------------------------------------------- */

.recipe-page,.recipes-hub{background:var(--pale)}

/* ---- dark hero (shared) ----------------------------------------- */
.rh{position:relative;background:var(--green-900);color:#fff;overflow:hidden}
.rh__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:0;align-items:stretch;max-width:1368px;margin:0 auto}
.rh__txt{padding:56px 48px 60px 24px;align-self:center;min-width:0}
.rh__shot{position:relative;min-height:440px}
.rh__shot .l-media,.rh__shot img{height:100%;width:100%;object-fit:cover}
.rh__shot .l-media{position:absolute;inset:0;border-radius:0}
.rh__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--green-900) 0,rgba(30,59,41,.55) 14%,rgba(30,59,41,0) 42%)}

.rh__pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#eaf2e6;font-size:var(--t-sm);font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.rh__pill .ic{width:14px;height:14px}
.rh h1{color:#fff;font-size:clamp(34px,4.4vw,56px);line-height:1.07;letter-spacing:-.015em;margin:16px 0 0}
.rh__dek{margin-top:14px;max-width:46ch;color:#d7e3d5;font-size:var(--t-lg);line-height:1.65}

.rh__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;color:#cbdcc8;font-size:var(--t-md)}
.rh__meta li{display:flex;align-items:center;gap:8px}
.rh__meta .ic{width:17px;height:17px;color:#8fc07c}
.rh__meta b{color:#fff;font-weight:600}

.rh__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.rh__cta .btn{border-radius:10px;font-size:var(--t-lg);padding:13px 22px}
.btn--leaf{background:#4c8c3f;color:#fff;border:1px solid #4c8c3f}
.btn--leaf:hover{background:#417832;border-color:#417832}
.btn--ghost-w{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.38)}
.btn--ghost-w:hover{background:rgba(255,255,255,.1)}
.btn--ghost-w.is-saved{background:#fff;color:var(--green-900);border-color:#fff}

.rh__script{position:absolute;right:38px;bottom:34px;z-index:2;font-family:var(--script);font-style:var(--script-style);font-weight:var(--script-weight);font-size:var(--t-3xl);line-height:1.25;color:#fff;text-align:right;text-shadow:0 2px 14px rgba(0,0,0,.45);max-width:15ch}

/* ---- body shell -------------------------------------------------- */
.rcp-wrap{max-width:1224px;margin:0 auto;padding:0 24px}
.rcp-sec{padding:44px 0 0}
.rcp-h2{font-family:var(--serif);font-size:var(--t-3xl);font-weight:700;color:var(--green-900);letter-spacing:-.01em}
.rcp-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.rcp-sechead .link-arrow{font-size:var(--t-md)}

.rcp-body{padding-top:4px;font-size:var(--t-lg);line-height:1.75;color:#3a3a33;max-width:74ch}
.rcp-body p+p{margin-top:16px}

/* ---- ingredients + quick info ------------------------------------ */
.rcp-two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start;padding-top:36px}
/* card primitives live in guide.css - shared with the review template */

.tips li{display:flex;gap:10px;font-size:var(--t-lg);line-height:1.6;color:#3f4a3d}
.tips li+li{margin-top:11px}
.tips .ic{width:17px;height:17px;flex:none;margin-top:3px;color:#4c8c3f}

/* ---- steps ------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(var(--cols,5),minmax(0,1fr));gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column}
.step__shot{position:relative;aspect-ratio:4/3;background:var(--beige)}
.step__shot .l-media,.step__shot img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;border-radius:0}
.step__n{position:absolute;left:10px;top:10px;z-index:2;width:28px;height:28px;border-radius:50%;background:#4c8c3f;color:#fff;font-size:var(--t-md);font-weight:700;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.step__txt{padding:14px 15px 17px}
.step__txt b{display:block;font-family:var(--serif-2);font-size:var(--t-lg);font-weight:700;color:var(--green-900);line-height:1.3}
.step__time{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font-size:var(--t-sm);font-weight:600;color:#6d7d67;background:#eef4ea;border-radius:999px;padding:3px 9px}
.step__time .ic{width:12px;height:12px}
.step__txt p{margin-top:8px;font-size:var(--t-md);line-height:1.6;color:#59554a}

/* ---- notes / storage --------------------------------------------- */
.rcp-note{margin-top:22px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:16px 20px;font-size:var(--t-lg);line-height:1.65;color:#4a463c}
.rcp-note b{color:var(--green-900)}

/* ---- equipment + share ------------------------------------------- */
.rcp-foot{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start;padding-top:36px}
.equip li{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-lg);line-height:1.55;color:#4a463c}
.equip li+li{margin-top:10px}
.equip .ic{width:17px;height:17px;flex:none;margin-top:2px;color:#4c8c3f}

.share-row{display:flex;flex-wrap:wrap;gap:10px}
.sb{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;border:0;cursor:pointer;flex:none}
.sb .ic{width:20px;height:20px}
.sb--fb{background:#1877f2}.sb--wa{background:#25d366}.sb--pin{background:#e60023}
.sb--x{background:#111}.sb--mail{background:#7a7364}.sb--link{background:#e9e3d4;color:#4a463c}
.sb--print{background:#e9e3d4;color:#4a463c}
.sb.is-copied{background:#4c8c3f;color:#fff}

/* ---- closing green band ------------------------------------------ */
.rcp-band{margin-top:52px;background:var(--green-700)}
.rcp-band__in{max-width:1224px;margin:0 auto;padding:30px 24px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.rcp-band__q{display:flex;align-items:center;gap:13px;font-family:var(--script);font-style:var(--script-style);font-weight:var(--script-weight);font-size:var(--t-3xl);color:#fff}
.rcp-band__q .ic{width:24px;height:24px;color:#9ccb86}
.btn--cream{background:#fff;color:var(--green-900);border:1px solid #fff;border-radius:10px;padding:12px 22px;font-size:var(--t-lg)}
.btn--cream:hover{background:var(--cream)}

/* =================================================================
   /recipes/ hub
   ================================================================= */
.rh--hub h1{font-size:clamp(44px,6.4vw,82px);letter-spacing:-.025em}
.rh--hub .rh__txt{padding-top:64px;padding-bottom:70px}
.rh__kick{font-size:var(--t-sm);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#9ec48d}
.rh__lede{margin-top:10px;font-family:var(--serif);font-size:clamp(19px,2.1vw,25px);font-weight:600;color:#f0f4ec}
.rh__stamp{position:absolute;right:42px;top:50%;transform:translateY(-50%);z-index:2;width:132px;height:132px;border-radius:50%;border:1px solid rgba(255,255,255,.6);display:grid;place-items:center;text-align:center;font-family:var(--script);font-style:var(--script-style);font-weight:var(--script-weight);font-size:var(--t-lg);line-height:1.25;color:#fff;background:rgba(30,59,41,.24);backdrop-filter:blur(2px);padding:14px}
.rh__stamp .ic{width:16px;height:16px;color:#ff9c86;margin:5px auto 0}

/* category strip */
.catstrip{border-bottom:1px solid var(--line);background:var(--pale)}
.catstrip__in{max-width:1224px;margin:0 auto;padding:26px 24px;display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.catstrip__list{display:flex;gap:30px;flex-wrap:wrap;flex:1 1 auto}
.catlink{display:flex;flex-direction:column;align-items:center;gap:9px;width:104px;text-align:center}
.catlink__shot{width:80px;height:80px;border-radius:50%;overflow:hidden;background:var(--beige);position:relative;box-shadow:0 2px 10px rgba(60,50,20,.1)}
.catlink__shot .l-media,.catlink__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.catlink span{font-size:var(--t-md);font-weight:600;color:var(--green-900);line-height:1.3}
.catlink:hover .catlink__shot{box-shadow:0 4px 16px rgba(60,50,20,.2)}
.catstrip__note{font-family:var(--script);font-style:var(--script-style);font-weight:var(--script-weight);font-size:var(--t-xl);line-height:1.3;color:var(--green-700);border-left:1px solid var(--line);padding-left:26px;max-width:15ch}
.catstrip__note .ic{width:17px;height:17px;color:var(--orange);margin-top:5px}

/* hub layout */
.hub2{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:30px;align-items:start;padding-top:40px}

.rcards{display:grid;gap:18px}
.rcards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.rcards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.rcard{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column}
.rcard:hover{box-shadow:0 6px 22px rgba(60,50,20,.1)}
.rcard__shot{position:relative;aspect-ratio:16/11;background:var(--beige)}
.rcard__shot .l-media,.rcard__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.rcard__tag{position:absolute;left:11px;top:11px;z-index:2;background:rgba(30,59,41,.9);color:#fff;font-size:var(--t-xs);font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 10px;border-radius:6px}
.rcard__txt{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.rcard__txt b{font-family:var(--serif-2);font-size:var(--t-lg);font-weight:700;color:var(--green-900);line-height:1.32}
.rcard__txt p{margin-top:8px;font-size:var(--t-md);line-height:1.6;color:#66614f;flex:1}
.rcard__meta{display:flex;gap:18px;margin-top:14px;padding-top:12px;border-top:1px solid #f0ebdf;font-size:var(--t-base);color:var(--muted)}
.rcard__meta li{display:flex;align-items:center;gap:6px}
.rcard__meta .ic{width:14px;height:14px;color:#9a937d}

/* numbered start-here row */
.rank{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.rankcard__shot{position:relative;aspect-ratio:16/10;border-radius:11px;overflow:hidden;background:var(--beige)}
.rankcard__shot .l-media,.rankcard__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.rankcard__n{position:absolute;left:9px;top:9px;z-index:2;width:28px;height:28px;border-radius:50%;background:var(--green-900);color:#fff;font-size:var(--t-base);font-weight:700;display:grid;place-items:center;border:2px solid rgba(255,255,255,.85)}
.rankcard b{display:block;margin-top:11px;font-family:var(--serif-2);font-size:var(--t-lg);font-weight:700;color:var(--green-900);line-height:1.32}
.rankcard ul{display:flex;gap:15px;margin-top:8px;font-size:var(--t-base);color:var(--muted)}
.rankcard li{display:flex;align-items:center;gap:5px}
.rankcard .ic{width:13px;height:13px;color:#9a937d}

/* filter rail */
.rail{position:sticky;top:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 20px 22px}
.rail h3{font-family:var(--serif);font-size:var(--t-xl);font-weight:700;color:var(--green-900)}
.rail h4{margin:20px 0 9px;font-family:var(--sans);font-size:var(--t-base);font-weight:700;letter-spacing:.05em;color:var(--green-900)}
.rail h4:first-of-type{margin-top:18px}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font:inherit;font-size:var(--t-base);cursor:pointer;background:#f4f2ea;border:1px solid var(--line);color:#5d5849;border-radius:999px;padding:5px 12px}
.chip[aria-pressed="true"]{background:var(--green-700);border-color:var(--green-700);color:#fff}
.rail label{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:var(--t-md);color:#4a463c;cursor:pointer}
.rail input{appearance:none;-webkit-appearance:none;margin:0;width:16px;height:16px;flex:none;border:1.5px solid #c9c2ac;border-radius:4px;background:#fff;position:relative;cursor:pointer}
.rail input:checked{background:#4c8c3f;border-color:#4c8c3f}
.rail input:checked::after{content:"";position:absolute;left:4.8px;top:1.6px;width:3.4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}
.rail__clear{margin-top:18px;width:100%;justify-content:center}
.rail__count{margin-top:10px;font-size:var(--t-base);color:var(--muted);text-align:center}
.is-hidden{display:none!important}
.hub-none{padding:34px 0;text-align:center;color:var(--muted);font-size:var(--t-lg)}

/* ---- responsive --------------------------------------------------- */
@media (max-width:1080px){
	.steps{grid-template-columns:repeat(3,minmax(0,1fr))}
	.rank{grid-template-columns:repeat(3,minmax(0,1fr))}
	.rcards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
	.hub2{grid-template-columns:minmax(0,1fr);gap:26px}
	.rail{position:static}
	.rh__stamp{width:108px;height:108px;font-size:var(--t-lg);right:22px}
}
@media (max-width:900px){
	.rh__in{grid-template-columns:minmax(0,1fr)}
	.rh__txt{padding:40px 24px 34px;order:2}
	.rh__shot{min-height:300px;order:1}
	.rh__shot::after{background:linear-gradient(0deg,var(--green-900) 0,rgba(30,59,41,0) 55%)}
	.rh__script{right:22px;bottom:20px;font-size:var(--t-2xl)}
	.rh__stamp{display:none}
	.rcp-two,.rcp-foot{grid-template-columns:minmax(0,1fr)}
	.rcards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
	.catstrip__note{border-left:0;padding-left:0}
}
@media (max-width:640px){
	.steps,.rank,.rcards--3,.rcards--4{grid-template-columns:minmax(0,1fr)}
	.rcp-band__in{flex-direction:column;align-items:flex-start}
	.rh__meta{gap:8px 18px;font-size:var(--t-base)}
	.catlink{width:88px}
	.catlink__shot{width:68px;height:68px}
	.rcp-wrap,.catstrip__in,.rcp-band__in{padding-left:18px;padding-right:18px}
}

/* A step with no photograph yet: the number carries the card instead of a
   placeholder box, so a half-illustrated row never looks broken. */
.step--noshot .step__txt{padding-top:18px}
.step__n--flat{position:static;display:inline-grid;margin-bottom:10px;box-shadow:none;background:#eef4ea;color:var(--green-900)}