/* WE-WIN FooD 企业生鲜 — page stylesheet (loads after ../shared/site.css). Page accent gem: emerald (the FooD logo colour), used sparingly. */

/* ============ SWAPPABLE IMAGES — change one line to replace a picture (sources in CREDITS.txt) ============
   Paths are written as ../fresh/assets/… so they resolve the same whether the browser resolves them from this file
   or from ../shared/site.css (where the variables are used). */
:root{
  --img-hero:     url("../fresh/assets/hero.webp");      /* hero — 菜心, tomato and half lemon on a dark wet surface, 9:16 (WE-WIN, user-created) */
  --img-surround: url("../fresh/assets/hero.webp");      /* desktop side areas — the same hero image, heavily blurred + darkened */
  --img-rhythm:   url("../fresh/assets/rhythm.webp");    /* 固定节奏 band — gold ribbon light on navy (WE-WIN library, eagle 091) */
  --img-ledger:   url("../fresh/assets/ledger.webp");    /* 对账 band — bowl of rice, rice sack and eggs on dark wood (WE-WIN, user-created) */
  --img-scenes:   url("../fresh/assets/scenes.webp");    /* 适用场景 band — wooden crates of greens, cucumber and eggplant (WE-WIN, user-created) */
  --gem:var(--emerald);
}
.phero{--hero-ratio:941/1672; --hero-pos:50% 0; --hero-card-at:1;   /* card starts just under the tomato and lemon (~57% of the photo) */
  --hero-shade:linear-gradient(180deg,rgba(6,13,31,.4) 0,rgba(6,13,31,0) 9%,rgba(6,13,31,0) 56%,rgba(6,13,31,.3) 76%,var(--bg) 100%)}
#rhythm{--band:var(--img-rhythm); --band-pos:88% 50%; --band-h:820px; --band-pad:180px;
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,.05) 14%,rgba(6,13,31,.45) 26%,rgba(6,13,31,.4) 50%,rgba(6,13,31,.6) 84%,var(--bg) 100%)}
#ledger{--band:var(--img-ledger); --band-size:auto 400px; --band-pos:84% 0; --band-h:560px; --band-pad:330px;   /* bowl + eggs + sack in frame */
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,0) 14%,rgba(6,13,31,0) 46%,rgba(6,13,31,.45) 60%,rgba(6,13,31,.82) 71%,rgba(6,13,31,.9) 85%,var(--bg) 100%)}
#scenes{--band:var(--img-scenes); --band-pos:50% 0; --band-h:780px; --band-pad:300px;
  --band-shade:linear-gradient(180deg,rgba(6,13,31,.3) 0%,rgba(6,13,31,0) 12%,rgba(6,13,31,.34) 26%,rgba(6,13,31,.74) 35%,rgba(6,13,31,.7) 48%,rgba(6,13,31,.64) 62%,rgba(6,13,31,.72) 86%,var(--bg) 100%)}

/* light fields behind the glass (navy/sapphire/gold, a hint of emerald) */
#pain   {--lf:radial-gradient(250px 190px at 6% 30%,rgba(74,127,240,.26),transparent 70%),radial-gradient(230px 180px at 96% 74%,rgba(226,196,106,.16),transparent 70%)}
#scenes {--lf:radial-gradient(250px 200px at 96% 26%,rgba(34,168,115,.14),transparent 70%),radial-gradient(260px 200px at 4% 76%,rgba(74,127,240,.24),transparent 70%)}
#faq    {--lf:radial-gradient(250px 190px at 94% 30%,rgba(226,196,106,.17),transparent 70%),radial-gradient(260px 200px at 6% 82%,rgba(74,127,240,.24),transparent 70%)}
#guide  {--lf:radial-gradient(260px 180px at 10% 50%,rgba(74,127,240,.24),transparent 70%),radial-gradient(220px 170px at 92% 50%,rgba(34,168,115,.12),transparent 70%)}
#closing{--lf:radial-gradient(260px 200px at 50% 50%,rgba(226,196,106,.12),transparent 70%)}

/* emerald mark next to the hero eyebrow text */
.eyebrow span{display:flex;align-items:center;gap:8px}
.eyebrow span::before{content:"";width:12px;height:2px;border-radius:1px;background:var(--gem)}

/* ---------- reconciliation sample (glass card with a table) ---------- */
.ledger{padding:16px 18px 14px;--g-r:22px}
.ledger figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ledger figcaption b{font-family:var(--serif);font-size:16.5px;font-weight:700}
.tag{flex:none;font-size:11.5px;letter-spacing:.08em;line-height:1;padding:6px 9px;border-radius:999px;color:#8fe0bd;border:1px solid rgba(34,168,115,.55);background:rgba(34,168,115,.1)}
.ledger .sub{font-size:13px;color:var(--tx2);margin-top:4px}
.ledger table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.ledger th{font-size:12.5px;font-weight:500;color:var(--tx2);text-align:left;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.ledger td{padding:11px 0;border-bottom:1px solid var(--line)}
.ledger td:first-child{width:62px;color:var(--gold-2);font-size:13px;letter-spacing:.04em}
.ledger th:last-child,.ledger td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.ledger .fine{font-size:12.5px;color:var(--tx2);margin-top:10px}