/* ===== 橫幅靚照（關於頁 hero / 段落大圖、主廚手記與食記列表橫幅）=====
   .ab-hero 放在 <section class="page"> 之前、獨立於 .wrap（自然滿版，不用出血 hack）
   遮罩：固定酒紅 rgba(59,13,31)（theme-wine 下 --primary 會變金色，不能用變數），由下往上 .6→.12，上限 .6 */
.ab-hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(260px,72vw,380px);overflow:hidden;isolation:isolate;background:#3B0D1F;color:#FBF6EE}
.ab-hero-bg{position:absolute;inset:0;z-index:-2;display:block}
.ab-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.ab-hero-bl{position:absolute;inset:0;z-index:-3;display:none;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.ab-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(59,13,31,.1) 0%,rgba(59,13,31,.22) 40%,rgba(59,13,31,.52) 68%,rgba(59,13,31,.6) 100%)}
.ab-hero-in{position:relative;width:100%;padding-top:32px;padding-bottom:24px}
.ab-hero .ey{color:#C9A24A;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.35)}
.ab-hero h1{font-family:var(--serif);font-size:28px;line-height:1.3;margin:6px 0 0;color:#FBF6EE;text-shadow:0 1px 3px rgba(0,0,0,.55),0 8px 24px rgba(0,0,0,.25);letter-spacing:-.01em;text-wrap:balance}
.ab-hero .jn-lead,.ab-hero-lead{color:rgba(251,246,238,.88);font-size:15px;line-height:1.7;max-width:60ch;margin:8px 0 0;text-shadow:0 1px 2px rgba(0,0,0,.5)}
/* 列表頁矮版 */
.ab-hero--list{min-height:clamp(280px,64vw,320px)}
.ab-hero--list .ab-hero-bg img{object-position:50% 28%}
.ab-hero--list .ab-hero-in{padding-top:24px;padding-bottom:20px}
.ab-hero--list h1{font-size:22px}
.ab-hero--list .jn-lead{font-size:14px}
/* hero 之後的 .page 上緣收緊 */
.ab-hero + .page{padding-top:24px}
/* 深色主題：遮罩加深一點（仍 ≤ .6） */
body.theme-wine .ab-hero::before{background:linear-gradient(180deg,rgba(59,13,31,.2) 0%,rgba(59,13,31,.35) 40%,rgba(59,13,31,.58) 68%,rgba(59,13,31,.6) 100%)}
body.theme-wine .ab-hero+.page,body.theme-mix .ab-hero+.page{border-top:1px solid rgba(201,162,74,.45)}

/* ===== 段落間大圖 .ab-fig（關於頁）：手機出血 4:5、桌機 16:9 圓角 2px、下方 Fig. 圖說 ===== */
.ab-fig{margin:24px calc(50% - 50vw) 32px;padding:0;max-width:none}
.ab-fig picture,.ab-fig img{display:block;width:100%}
.ab-fig img{aspect-ratio:4/5;height:auto;object-fit:cover;object-position:50% 50%;border-radius:0}
.ab-fig .fig{margin:10px 16px 0}
.ab-fig .fig .fig-t{color:var(--ink)}
.ab-about .entry{max-width:72ch}
.ab-about .entry h2:first-child{margin-top:0}

@media (min-width:768px){
.ab-hero{min-height:clamp(380px,34vw,520px)}
.ab-hero-bg img{object-position:50% 45%}
.ab-hero-in{padding-top:48px;padding-bottom:40px}
.ab-hero h1{font-size:40px}
.ab-hero .jn-lead,.ab-hero-lead{font-size:16px;margin-top:12px}
.ab-hero--list .jn-lead{font-size:15px}
.ab-hero--list{min-height:clamp(300px,25vw,340px)}
.ab-hero--list .ab-hero-bg img{object-position:50% 30%}
.ab-hero--list .ab-hero-in{padding-bottom:32px}
.ab-hero--list h1{font-size:32px}
.ab-hero + .page{padding-top:40px}
.ab-fig{margin:32px 0 40px;max-width:960px}
.ab-fig img{aspect-ratio:16/9;border-radius:2px}
.ab-fig .fig{margin:12px 0 0}
}
@media (min-width:1024px){
.ab-hero h1{font-size:48px}
.ab-hero--list h1{font-size:36px}
/* 直式來源（寬不足 1600）的列表橫幅：底層墊 q1-blur，主圖置中最寬 1200、兩側漸隱 */
.ab-hero--narrow .ab-hero-bl{display:block}
.ab-hero--narrow .ab-hero-bg{left:50%;width:min(100%,1000px);transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
}
@media (prefers-reduced-motion:reduce){.ab-hero-bl{transform:none}}