/* ============================================================
   site.css — Camp Made Easy deployable site
   Builds on colors_and_type.css + ../ui_kits/shared.css
   New components: recipe FEEDS boxes, direction blocks,
   product cards, gear strip, blog article parts, photo slots
   ============================================================ */

/* ---- Page shell helpers ---- */
.cme-narrow { max-width: 920px; margin: 0 auto; padding: 0 24px; }
.cme-wrap   { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---- Photo placeholder (drop real <img> in later) ---- */
.photo-slot {
  position: relative; background:
    repeating-linear-gradient(45deg, var(--cme-neutral-100) 0 14px, var(--cme-neutral-50) 14px 28px);
  border: 2px dashed var(--cme-neutral-300);
  border-radius: var(--r-lg);
  display: grid; place-items: center; color: var(--fg-3);
  overflow: hidden; min-height: 160px;
}
.photo-slot.sticker { border: 2.5px solid var(--cme-neutral-900); border-style: solid; box-shadow: 0 5px 0 var(--cme-neutral-900); }
.photo-slot .ps-label { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; text-align: center; padding: 12px; }
.photo-slot .ps-label svg { width: 34px; height: 34px; stroke: var(--cme-neutral-400); fill: none; stroke-width: 1.75; }
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   RECIPE TOOL PAGE
   ============================================================ */
.recipe-top { background: var(--cme-yellow-100); border-bottom: 2px solid var(--cme-neutral-900); }
.recipe-top-inner { max-width: 920px; margin: 0 auto; padding: 36px 24px 32px; }
.recipe-top h1 { font-size: clamp(40px, 7vw, 72px); margin: 10px 0 10px; line-height: 1.02; }
.recipe-top .desc { font-size: clamp(17px, 2.4vw, 21px); line-height: 1.5; color: var(--fg-2); max-width: 640px; margin: 0; }
.recipe-top .recipe-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* Two FEEDS columns side by side */
.feeds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 36px 0; }
.feeds-box { background: #fff; border: 3px solid var(--cme-neutral-900); border-radius: var(--r-xl); box-shadow: 0 6px 0 var(--cme-neutral-900); overflow: hidden; }
.feeds-head { padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 3px solid var(--cme-neutral-900); }
.feeds-box.four  .feeds-head { background: var(--cme-sky-300); }
.feeds-box.eight .feeds-head { background: var(--cme-fire-300); }
.feeds-head .ft { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: -0.01em; color: var(--cme-neutral-900); white-space: nowrap; }
.feeds-head .pan { font-family: var(--font-body); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cme-neutral-800); background: rgba(255,255,255,0.6); padding: 5px 10px; border-radius: 999px; border: 1.5px solid var(--cme-neutral-900); text-align: right; }
.feeds-list { list-style: none; margin: 0; padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 9px; }
.feeds-list li { font-size: 16px; line-height: 1.4; color: var(--cme-neutral-800); display: flex; gap: 10px; align-items: flex-start; }
.feeds-list li::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--cme-yellow-500); margin-top: 8px; flex-shrink: 0; }
.feeds-list li.opt { color: var(--fg-3); }
.feeds-list li.opt::before { background: var(--cme-neutral-300); }
.feeds-list li.pan-line { font-weight: 800; color: var(--cme-neutral-900); border-top: 2px dashed var(--cme-neutral-300); margin-top: 6px; padding-top: 13px; }
.feeds-list li.pan-line::before { background: var(--cme-fire-500); }
.feeds-list li .or { font-weight: 800; color: var(--cme-fire-600); }

/* Direction blocks */
.directions { display: flex; flex-direction: column; gap: 20px; margin: 8px 0 36px; }
.dir-block { border: 3px solid var(--cme-neutral-900); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 6px 0 var(--cme-neutral-900); }
.dir-head { padding: 16px 24px; display: flex; align-items: center; gap: 14px; }
.dir-block.home .dir-head { background: var(--cme-yellow-300); }
.dir-block.camp .dir-head { background: var(--cme-pine-300); }
.dir-head .emoji { font-size: 28px; line-height: 1; }
.dir-head h2 { margin: 0; font-size: clamp(21px, 3vw, 28px); white-space: nowrap; }
.dir-head .day { margin-left: auto; font-family: var(--font-body); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--cme-neutral-900); color: #fff; padding: 6px 12px; border-radius: 999px; }
.dir-steps { list-style: none; counter-reset: step; margin: 0; padding: 22px 24px 24px; background: #fff; display: flex; flex-direction: column; gap: 16px; }
.dir-steps li { counter-increment: step; display: grid; grid-template-columns: 38px 1fr; gap: 16px; align-items: start; font-size: 17px; line-height: 1.55; color: var(--cme-neutral-800); }
.dir-steps li::before { content: counter(step); width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 17px; border: 2.5px solid var(--cme-neutral-900); box-shadow: 0 3px 0 var(--cme-neutral-900); flex-shrink: 0; }
.dir-block.home .dir-steps li::before { background: var(--cme-yellow-400); }
.dir-block.camp .dir-steps li::before { background: var(--cme-pine-300); }
.dir-steps li strong { color: var(--cme-neutral-900); }
.dir-steps li .flag { display: inline-block; background: var(--cme-fire-100); color: var(--cme-fire-700); font-weight: 800; font-size: 13px; padding: 1px 8px; border-radius: 6px; border: 1.5px solid var(--cme-fire-300); }

/* The only two buttons */
.recipe-actions { position: sticky; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 0 4px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.recipe-actions .cme-btn { justify-content: center; padding: 16px 24px; font-size: 17px; }
.btn-pdf { background: var(--cme-fire-500); color: #fff; box-shadow: var(--shadow-md); }
.btn-pdf:hover { background: var(--cme-fire-600); transform: translateY(-1px); }
.btn-copy { background: var(--cme-sky-500); color: #fff; box-shadow: var(--shadow-md); }
.btn-copy:hover { background: var(--cme-sky-600); transform: translateY(-1px); }
.btn-copy.copied { background: var(--cme-pine-600); }

/* Recipe notes */
.recipe-notes { background: var(--cme-earth-100); border: 2px solid var(--cme-earth-400); border-radius: var(--r-lg); padding: 22px 26px; margin: 12px 0 40px; }
.recipe-notes h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.recipe-notes ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.recipe-notes li { font-size: 16px; line-height: 1.55; color: var(--cme-neutral-700); }

/* Toast for copy confirmation */
.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px); background: var(--cme-neutral-900); color: #fff; padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 15px; box-shadow: var(--shadow-xl); opacity: 0; pointer-events: none; transition: all 280ms var(--ease-bounce); z-index: 200; display: flex; align-items: center; gap: 10px; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; stroke: var(--cme-pine-300); fill: none; stroke-width: 2.5; }

/* ============================================================
   PRODUCT CARD (gear strip + blog) — shared style
   ============================================================ */
.product-card { background: #fff; border: 2.5px solid var(--cme-neutral-900); border-radius: var(--r-lg); box-shadow: 0 5px 0 var(--cme-neutral-900); overflow: hidden; display: flex; flex-direction: column; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); }
.product-card:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--cme-neutral-900); }
.product-card .pc-photo { aspect-ratio: 4/3; }
.product-card .pc-photo .photo-slot { border: none; box-shadow: none; border-radius: 0; height: 100%; }
.product-card .pc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.product-card .pc-marker { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--cme-neutral-900); white-space: nowrap; }
.pc-marker { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-family: var(--font-body); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--cme-neutral-900); white-space: nowrap; }
.pc-marker.we-use { background: var(--cme-pine-300); color: var(--cme-neutral-900); }
.pc-marker.recommended { background: var(--cme-sky-200); color: var(--cme-neutral-900); }
.pc-marker.we-use { background: var(--cme-pine-300); color: var(--cme-neutral-900); }
.pc-marker.recommended { background: var(--cme-sky-200); color: var(--cme-neutral-900); }
.product-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; margin: 0; }
.product-card .pc-why { font-size: 14px; font-weight: 700; color: var(--cme-fire-700); margin: 0; }
.product-card .pc-take { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.product-card .pc-btn { margin-top: auto; }
.product-card .pc-btn .cme-btn { width: 100%; justify-content: center; }
.pc-link-pending { width: 100%; justify-content: center; background: var(--cme-neutral-200); color: var(--fg-3); border: 2px dashed var(--cme-neutral-400); cursor: not-allowed; }

/* Gear strip */
.gear-strip { background: var(--cme-neutral-900); padding: 56px 0 64px; margin-top: 24px; }
.gear-strip .cme-wrap { color: #fff; }
.gear-strip .gs-lead { max-width: 680px; margin: 0 0 8px; }
.gear-strip h2 { color: #fff; }
.gear-strip .gs-quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.4; color: var(--cme-yellow-300); margin: 14px 0 36px; max-width: 760px; }
.gear-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pan-connector { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; color: var(--cme-neutral-300); font-weight: 700; font-size: 14px; margin: 4px 0; }
.pan-connector::before, .pan-connector::after { content: ''; height: 2px; background: var(--cme-neutral-700); flex: 1; }

/* ============================================================
   RECIPE MENU PAGE (Layer 1)
   ============================================================ */
.menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.menu-card { display: flex; flex-direction: column; background: #fff; border: 2.5px solid var(--cme-neutral-900); border-radius: var(--r-xl); box-shadow: 0 6px 0 var(--cme-neutral-900); overflow: hidden; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out); text-decoration: none; color: inherit; }
.menu-card:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--cme-neutral-900); text-decoration: none; }
.menu-card .mc-photo { aspect-ratio: 16/10; }
.menu-card .mc-photo .photo-slot { border: none; box-shadow: none; border-radius: 0; height: 100%; }
.menu-card .mc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.menu-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0; line-height: 1.1; }
.menu-card .mc-desc { font-size: 16px; line-height: 1.55; color: var(--fg-2); margin: 0; flex: 1; }
.menu-card .mc-get { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--cme-yellow-400); border: 2.5px solid var(--cme-neutral-900); border-radius: var(--r-md); padding: 14px 20px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--cme-neutral-900); box-shadow: 0 4px 0 var(--cme-neutral-900); transition: all 150ms; }
.menu-card:hover .mc-get { background: var(--cme-yellow-500); }
.menu-card .mc-get svg { width: 22px; height: 22px; stroke: var(--cme-neutral-900); fill: none; stroke-width: 2.5; }
.menu-card.coming { border-style: dashed; box-shadow: none; background: var(--cme-neutral-50); align-items: center; justify-content: center; text-align: center; padding: 48px 24px; min-height: 280px; }
.menu-card.coming:hover { transform: none; box-shadow: none; }
.menu-card.coming .mc-icon { width: 64px; height: 64px; border-radius: 999px; background: var(--cme-yellow-200); display: grid; place-items: center; margin-bottom: 16px; }
.menu-card.coming .mc-icon svg { width: 32px; height: 32px; stroke: var(--cme-yellow-700); fill: none; stroke-width: 2; }
.menu-card.coming h3 { font-size: 22px; }
.menu-card.coming p { color: var(--fg-3); font-size: 15px; margin: 6px 0 0; }
/* "More coming" card with a photo behind it: full-bleed bg + dark scrim, solid border (drops the dashed placeholder look) */
.menu-card.coming.has-photo { position: relative; border: 2.5px solid var(--cme-neutral-900); box-shadow: 0 6px 0 var(--cme-neutral-900); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }
.menu-card.coming.has-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,20,0.55) 0%, rgba(20,22,20,0.80) 100%); z-index: 0; }
.menu-card.coming.has-photo > * { position: relative; z-index: 1; }
.menu-card.coming.has-photo h3 { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.75); }
.menu-card.coming.has-photo p { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.75); }
.menu-card.coming.has-photo .mc-icon { background: rgba(255,255,255,0.94); }

/* ============================================================
   BLOG ARTICLE (Layer: flagship trip post)
   ============================================================ */
.article-hero { background: var(--cme-sky-100); border-bottom: 2px solid var(--cme-neutral-900); }
.article-hero-inner { max-width: 920px; margin: 0 auto; padding: 40px 24px 36px; }
.article-hero h1 { font-size: clamp(34px, 5vw, 56px); margin: 12px 0 14px; }
.article-hero .standfirst { font-size: clamp(17px, 2.4vw, 21px); line-height: 1.5; color: var(--fg-2); max-width: 680px; margin: 0; }
.article-disclosure { font-size: 13px; color: var(--fg-3); background: rgba(255,255,255,0.6); border: 1.5px solid var(--cme-sky-300); border-radius: var(--r-md); padding: 12px 16px; margin-top: 20px; line-height: 1.5; }

.article-layout { max-width: 1160px; margin: 0 auto; padding: 40px 24px 24px; display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.section-nav { position: sticky; top: 92px; }
.section-nav h5 { font-family: var(--font-body); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); margin: 0 0 12px; }
.section-nav ol { list-style: none; counter-reset: sn; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.section-nav li { counter-increment: sn; }
.section-nav a { display: flex; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--fg-2); text-decoration: none; transition: all 150ms; }
.section-nav a::before { content: counter(sn, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--cme-fire-600); }
.section-nav a:hover, .section-nav a.active { background: var(--cme-yellow-100); color: var(--fg-1); }

.article-body { min-width: 0; max-width: 720px; }
.article-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); margin: 48px 0 16px; scroll-margin-top: 92px; letter-spacing: -0.015em; }
.article-body h2:first-child { margin-top: 0; }
.article-body p { font-size: 18px; line-height: 1.75; color: var(--cme-neutral-800); margin: 0 0 22px; }
.article-body p.lead-para { font-size: 20px; }
.article-body strong { color: var(--fg-1); }

/* product card inline in article — horizontal */
.product-inline { display: grid; grid-template-columns: 150px 1fr; gap: 0; border: 2.5px solid var(--cme-neutral-900); border-radius: var(--r-lg); box-shadow: 0 5px 0 var(--cme-neutral-900); overflow: hidden; margin: 28px 0; background: #fff; }
.product-inline .pi-photo .photo-slot { border: none; box-shadow: none; border-radius: 0; height: 100%; min-height: 150px; }
.product-inline .pi-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.product-inline .pc-marker { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; border: 1.5px solid var(--cme-neutral-900); }
.product-inline h4 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin: 0; line-height: 1.2; }
.product-inline .pi-why { font-size: 14px; font-weight: 700; color: var(--cme-fire-700); margin: 0; }
.product-inline .pi-take { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.product-inline .pi-actions { margin-top: 4px; }

/* highlight / accent card — one per post */
.highlight-card { border: 3px solid var(--cme-neutral-900); border-radius: var(--r-2xl); overflow: hidden; box-shadow: 0 8px 0 var(--cme-fire-500); margin: 36px 0; background: #fff; }
.highlight-card .hc-top { background: var(--cme-fire-500); color: #fff; padding: 10px 22px; font-family: var(--font-body); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; }
.highlight-card .hc-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; }
.highlight-card .hc-photo .photo-slot { border: none; box-shadow: none; border-radius: 0; height: 100%; min-height: 220px; }
.highlight-card .hc-body { padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.highlight-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 26px; margin: 0; line-height: 1.1; }
.highlight-card .hc-take { font-size: 16px; line-height: 1.6; color: var(--fg-2); margin: 0; }

/* comparison section */
.compare { border: 2.5px solid var(--cme-neutral-900); border-radius: var(--r-lg); overflow: hidden; margin: 32px 0; }
.compare-head { background: var(--cme-neutral-900); color: #fff; padding: 14px 22px; font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.compare-col { padding: 20px; border-right: 1.5px solid var(--border); display: flex; flex-direction: column; gap: 8px; background: #fff; }
.compare-col:last-child { border-right: none; }
.compare-col.pick { background: var(--cme-yellow-50); }
.compare-col .cc-rank { font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-3); }
.compare-col.pick .cc-rank { color: var(--cme-fire-600); }
.compare-col h4 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0; }
.compare-col p { font-size: 13px; line-height: 1.45; color: var(--fg-2); margin: 0; }

/* technique-only callout — no product */
.technique { background: var(--cme-pine-50); border: 2.5px solid var(--cme-pine-600); border-radius: var(--r-lg); padding: 22px 26px; margin: 32px 0; position: relative; }
.technique .tq-tag { position: absolute; top: -13px; left: 22px; background: var(--cme-pine-600); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: 999px; display: flex; align-items: center; gap: 6px; }
.technique h4 { font-family: var(--font-display); font-weight: 600; font-size: 20px; margin: 6px 0 8px; }
.technique p { font-size: 16px; line-height: 1.6; color: var(--cme-neutral-800); margin: 0; }
.technique strong { color: var(--cme-pine-700); }

.article-closer { max-width: 720px; margin: 8px auto 0; padding: 24px; font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.4; color: var(--cme-neutral-900); border-top: 2px dashed var(--cme-neutral-300); }

/* Editorial flags — visible draft markers */
.flag-pending { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--cme-yellow-200); color: var(--cme-neutral-900); border: 1.5px dashed var(--cme-neutral-700); border-radius: 6px; padding: 1px 7px; letter-spacing: 0.02em; vertical-align: middle; white-space: nowrap; }
.flag-pending.take { background: var(--cme-fire-100); border-color: var(--cme-fire-600); color: var(--cme-fire-700); }
.take-pending-blurb { font-size: 14px; line-height: 1.5; color: var(--fg-3); font-style: italic; margin: 0; }

/* PICK PENDING — primary card + alternate candidates */
.pick-note { font-size: 13px; color: var(--fg-3); margin: 2px 0 0; line-height: 1.5; }
.pick-note .pn-label { font-weight: 800; color: var(--cme-fire-600); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.alt-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.alt-links li { font-size: 13px; }
.alt-links a { color: var(--link); }

/* inline card: allow stacked actions + multi-link groups */
.product-inline .pi-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 6px; }
.link-group { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 0; padding: 0; list-style: none; }
.link-group li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.link-group li .lg-name { color: var(--fg-2); flex: 1; }
.link-group li a.lg-buy { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cme-fire-700); white-space: nowrap; }
.link-group li a.lg-buy.pending { color: var(--fg-3); font-style: italic; text-transform: none; letter-spacing: 0; }

/* compare column buy button + reference-link callout variant of technique */
.compare-col .cme-btn { margin-top: 8px; width: 100%; justify-content: center; }
.technique.reference { background: var(--cme-sky-50); border-color: var(--cme-sky-600); }
.technique.reference .tq-tag { background: var(--cme-sky-600); }
.technique.warning { background: var(--cme-fire-50, #FEF2EC); border-color: var(--cme-fire-600); }
.technique.warning .tq-tag { background: var(--cme-fire-600); }
.technique .tq-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; color: var(--cme-sky-700); }

/* ============================================================
   DISCLOSURE PAGE
   ============================================================ */
.disclosure-page { max-width: 720px; margin: 0 auto; padding: 56px 24px 0; }
.disclosure-page h1 { margin: 8px 0 20px; }
.disclosure-page p { font-size: 18px; line-height: 1.7; color: var(--cme-neutral-800); margin: 0 0 20px; }
.disclosure-page .big-quote { font-family: var(--font-display); font-weight: 500; font-size: 24px; line-height: 1.4; color: var(--cme-neutral-900); background: var(--cme-yellow-100); border-left: 5px solid var(--cme-yellow-500); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 22px 26px; margin: 0 0 28px; }

/* ============================================================
   HOME — "This Week's Featured Gear" block
   ============================================================ */
.featured-gear .fg-rotation-note { font-size: 12px; color: var(--fg-3); margin: 12px 0 0; }
.support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 22px; }
/* dual-action row used on every featured-gear card */
.pc-actions-two { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.pc-actions-two .cme-btn { flex: 1; justify-content: center; min-width: 130px; }
.btn-why { background: transparent; color: var(--cme-neutral-900); border: 2px solid var(--cme-neutral-900); }
.btn-why:hover { background: var(--cme-neutral-900); color: #fff; }
.highlight-card .hc-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HOME
   ============================================================ */
.home-hero { position: relative; min-height: 520px; background-size: cover; background-position: center; display: flex; align-items: center; border-bottom: 2px solid var(--cme-neutral-900); }
.home-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38,36,31,0.1), rgba(38,36,31,0.6)); }
.home-hero .hh-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 72px 24px; color: #fff; width: 100%; box-sizing: border-box; }
.home-hero h1 { color: #fff; font-size: clamp(40px, 6.5vw, 76px); max-width: 820px; margin: 14px 0 18px; line-height: 1.02; }
.home-hero .hh-sub { color: rgba(255,255,255,0.94); font-size: clamp(18px, 2.6vw, 23px); max-width: 600px; line-height: 1.45; margin: 0 0 28px; }
.home-hero .hh-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.home-hero .cme-eyebrow { color: var(--cme-yellow-300); }

.two-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.job-card { border: 2.5px solid var(--cme-neutral-900); border-radius: var(--r-2xl); box-shadow: 0 6px 0 var(--cme-neutral-900); padding: 36px 34px; display: flex; flex-direction: column; gap: 14px; }
.job-card.give { background: var(--cme-pine-100); }
.job-card.earn { background: var(--cme-sky-100); }
.job-card .job-icon { width: 60px; height: 60px; border-radius: 16px; border: 2.5px solid var(--cme-neutral-900); display: grid; place-items: center; box-shadow: 0 4px 0 var(--cme-neutral-900); }
.job-card.give .job-icon { background: var(--cme-pine-300); }
.job-card.earn .job-icon { background: var(--cme-sky-300); }
.job-card .job-icon svg { width: 30px; height: 30px; stroke: var(--cme-neutral-900); fill: none; stroke-width: 2; }
.job-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin: 0; }
.job-card p { font-size: 17px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.job-card .cme-btn { align-self: flex-start; margin-top: 6px; }

.video-slot { border: 3px solid var(--cme-neutral-900); border-radius: var(--r-xl); box-shadow: 0 6px 0 var(--cme-neutral-900); overflow: hidden; aspect-ratio: 16/9; background: var(--cme-neutral-900); display: grid; place-items: center; }
.video-slot .vs-label { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--cme-neutral-300); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; }
.video-slot .vs-play { width: 76px; height: 76px; border-radius: 999px; background: var(--cme-fire-500); border: 3px solid #fff; display: grid; place-items: center; }
.video-slot .vs-play svg { width: 30px; height: 30px; fill: #fff; stroke: none; margin-left: 4px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .article-layout { grid-template-columns: 1fr; gap: 24px; }
  .section-nav { position: static; }
  .section-nav ol { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .highlight-card .hc-grid { grid-template-columns: 1fr; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-col { border-right: none; border-bottom: 1.5px solid var(--border); }
  .gear-grid { grid-template-columns: 1fr 1fr; }
  .two-jobs { grid-template-columns: 1fr; }
  .cme-nav { display: none; }
}
@media (max-width: 600px) {
  .feeds-grid { grid-template-columns: 1fr; }
  .menu-grid { grid-template-columns: 1fr; }
  .gear-grid { grid-template-columns: 1fr; }
  .product-inline { grid-template-columns: 1fr; }
  .product-inline .pi-photo .photo-slot { min-height: 180px; }
  .recipe-actions { grid-template-columns: 1fr; }
}

/* === EDIT PASS 2026-06-11 — pending-state collapse (recoverable: delete this block to restore) === */
.take-pending-blurb { display: none !important; }        /* 33 owner-take placeholders hidden until takes drop in */
.flag-pending { display: none !important; }              /* ALL pending flag chips hidden (VOICE PASS + TAKE); draft prose stays */
.pc-link-pending {                                       /* quiet "Coming soon" label, not a broken/dashed button */
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--cme-neutral-300, #9aa0a6) !important;
  font-style: italic; font-weight: 500;
  padding-left: 0 !important; cursor: default !important;
}

/* === EDIT PASS 5 2026-06-11 — mobile hamburger nav (recoverable: delete this block) === */
.cme-nav-toggle { display: none; }
.cme-mobile-nav { display: none; }
@media (max-width: 860px) {
  .cme-header-inner > a.cme-btn { display: none; }
  .cme-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; flex-shrink: 0; background: var(--cme-yellow-400); border: 2.5px solid var(--cme-neutral-900); border-radius: 10px; box-shadow: 0 3px 0 var(--cme-neutral-900); color: var(--cme-neutral-900); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .cme-nav-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--cme-neutral-900); }
  .cme-nav-toggle svg { width: 24px; height: 24px; stroke: var(--cme-neutral-900); fill: none; stroke-width: 2.25; stroke-linecap: round; }
  .cme-mobile-nav:not([hidden]) { display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 16px; background: rgba(250,250,247,0.98); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 2.5px solid var(--cme-neutral-900); box-shadow: 0 8px 18px rgba(0,0,0,0.10); }
  .cme-mobile-nav a:not(.cme-btn) { font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--fg-1); text-decoration: none; padding: 12px 14px; border-radius: 12px; min-height: 44px; display: flex; align-items: center; }
  .cme-mobile-nav a:not(.cme-btn):active { background: var(--cme-yellow-100); }
  .cme-mobile-nav a.active:not(.cme-btn) { background: var(--cme-yellow-300); color: var(--cme-neutral-900); }
  .cme-mobile-nav .cme-btn { width: 100%; justify-content: center; margin-top: 8px; min-height: 44px; }
}
@media (min-width: 861px) { .cme-nav-toggle, .cme-mobile-nav { display: none !important; } }

/* Pending/pick staging labels — public preview hides them; markup stays (recoverable) */
.pick-note { display: none !important; }   /* "Pick pending" staging notes hidden */
.alt-note { font-size: 13px; color: var(--fg-3); margin: 2px 0 0; line-height: 1.5; }   /* preserved "Also" alt-product note */
.alt-note .pn-label { font-weight: 800; color: var(--cme-fire-600); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }