/* FNB-04 家常煮炒 — tze char. Young Serif + Noto Serif SC + Nunito. */
.tpl-fnb-04{--gut:clamp(16px,5vw,80px);--max:1360px;--pad-x:max(var(--gut),calc((100% - var(--max))/2 + var(--gut)));--serif:"Young Serif","Noto Serif SC",Georgia,serif;--r:22px;font-family:Nunito,"Noto Sans SC",system-ui,sans-serif;font-size:16.5px;line-height:1.75}
.tpl-fnb-04 h1,.tpl-fnb-04 h2,.tpl-fnb-04 h3{font-family:var(--serif);font-weight:600;font-synthesis:none}
.f4-main>section{padding:clamp(72px,9vw,128px) var(--pad-x)}

/* paper menu tag (hand-tied label) */
.f4-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:6px 16px 6px 12px;border:1.5px dashed var(--accent);border-radius:6px 999px 999px 6px;color:var(--accent);font-weight:800;font-size:13.5px;letter-spacing:.08em;transform:rotate(-2deg);transform-origin:left center;background:var(--bg)}
.f4-tag::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex:none}

/* header */
.f4-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 30px;padding:14px var(--pad-x)}
.f4-brand{margin-right:auto;font-family:var(--serif);font-size:clamp(19px,1.7vw,23px);font-weight:600;text-decoration:none;min-height:44px;display:flex;align-items:center;line-height:1.2}
.f4-nav{display:flex;flex-wrap:wrap;gap:0 clamp(14px,2vw,28px)}
.f4-nav a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;font-weight:700;font-size:15px;color:var(--muted);transition:color .2s}
.f4-nav a:hover{color:var(--accent)}
.f4-head-cta{display:inline-flex;align-items:center;min-height:46px;padding:8px 22px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:800;font-size:15px;white-space:nowrap}

/* hero */
.f4-main>.f4-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,80px);align-items:center;padding-top:clamp(28px,4vw,64px);padding-bottom:clamp(56px,7vw,104px)}
.f4-hero--text{grid-template-columns:minmax(0,1fr)!important;text-align:center}
.f4-hero--text .f4-hero-copy{max-width:860px;margin:0 auto}
.f4-hero--text .f4-actions{justify-content:center}
.f4-hero h1{font-size:clamp(40px,4.9vw,76px);line-height:1.12;letter-spacing:-.005em;margin:6px 0 24px}
.f4-sub{font-size:clamp(17px,1.35vw,19.5px);color:var(--muted);max-width:30em}
.f4-sub p:last-child{margin:0}
.f4-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.f4-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 30px;border-radius:999px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-weight:800;font-size:16.5px;box-shadow:0 6px 0 color-mix(in srgb,var(--accent) 55%,var(--fg));transition:transform .15s,box-shadow .15s}
.f4-btn:hover{transform:translateY(2px);box-shadow:0 4px 0 color-mix(in srgb,var(--accent) 55%,var(--fg))}
.f4-btn2{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 26px;border-radius:999px;border:2px solid var(--fg);color:var(--fg);text-decoration:none;font-weight:800;font-size:16px}
.f4-btn2:hover{background:var(--fg);color:var(--bg)}
.f4-hero-media{position:relative;margin:0}
.f4-hero-img{border-radius:var(--r);overflow:hidden;box-shadow:0 30px 60px -30px color-mix(in srgb,var(--fg) 45%,transparent)}
.f4-hero-img img{width:100%;aspect-ratio:4/3.4;object-fit:cover}
.f4-stamp{position:absolute;left:clamp(-28px,-2vw,-12px);bottom:clamp(-28px,-2vw,-16px);display:grid;place-content:center;width:clamp(96px,9vw,128px);aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--on-accent);font-family:"Noto Serif SC",var(--serif);font-weight:700;font-size:clamp(22px,2.1vw,30px);line-height:1.05;text-align:center;letter-spacing:.06em;transform:rotate(-10deg);box-shadow:inset 0 0 0 5px var(--accent),inset 0 0 0 7px var(--on-accent),0 12px 24px -10px color-mix(in srgb,var(--fg) 60%,transparent)}
.f4-stamp span{display:block}

/* ticker */
.f4-ticker{background:var(--accent);color:var(--on-accent);padding:16px 0;font-family:var(--serif);font-size:clamp(18px,1.8vw,24px)}
.f4-ticker b{font-weight:600}
.f4-ticker i{font-style:normal;opacity:.7}

/* about */
.f4-main>.f4-about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(40px,7vw,112px);align-items:center}
.f4-about--text{grid-template-columns:minmax(0,1fr)!important}
.f4-about--text .f4-about-copy{max-width:760px;margin:0 auto}
.f4-about-media{margin:0;border-radius:var(--r);overflow:hidden;position:relative}
.f4-about-media img{width:100%;aspect-ratio:4/4.6;object-fit:cover}
.f4-main h2{font-size:clamp(32px,4vw,54px);line-height:1.22}
.f4-about h2{margin-bottom:clamp(24px,3vw,36px)}
.f4-about-body{font-size:clamp(16.5px,1.3vw,18.5px);color:var(--muted);max-width:32em}
.f4-about-body p:first-child{color:var(--fg)}
.f4-steps{display:grid;gap:14px}
.f4-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--soft)}
.f4-chip{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-family:var(--serif);font-size:19px}
.f4-steps p{margin:0;font-size:17px;font-weight:700}

/* services: menu board */
.f4-main>.f4-services{background:var(--soft)}
.f4-board{max-width:1180px;margin:0 auto;background:var(--bg);border-radius:calc(var(--r) + 6px);padding:clamp(36px,5vw,72px) clamp(20px,5vw,72px);box-shadow:0 0 0 2px var(--accent),0 0 0 8px var(--bg),0 0 0 9px color-mix(in srgb,var(--accent) 40%,transparent)}
.f4-board-head{text-align:center;max-width:720px;margin:0 auto clamp(32px,4vw,56px)}
.f4-board-head .f4-tag{transform:rotate(-2deg);transform-origin:center}
.f4-intro{color:var(--muted);margin-top:16px}
.f4-intro p:last-child{margin:0}
.f4-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,5vw,72px)}
.f4-dish{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;padding:24px 0;border-top:2px dotted color-mix(in srgb,var(--fg) 30%,transparent)}
.f4-no{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--accent);color:var(--accent);font-family:var(--serif);font-size:18px}
.f4-dish h3{font-size:clamp(21px,1.8vw,25px);line-height:1.35;font-weight:600}
.f4-desc{color:var(--muted);margin-top:6px;font-size:15.5px}
.f4-desc p{margin:0}
.f4-price{margin:6px 0 0;font-weight:800;color:var(--accent)}
.f4-ask{grid-column:2;justify-self:start;display:inline-flex;align-items:center;min-height:44px;font-weight:800;font-size:14.5px;color:var(--accent);text-decoration:none}
.f4-ask:hover{text-decoration:underline;text-decoration-style:wavy}

/* gallery */
.f4-work-head{max-width:720px;margin-bottom:clamp(32px,4vw,56px)}
.f4-gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,22px)}
.f4-shot{position:relative;margin:0}
.f4-shot-img{border-radius:var(--r);overflow:hidden;height:100%}
.f4-shot-img img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s ease}
.f4-shot:hover .f4-shot-img img{transform:scale(1.04)}
.f4-gal--3,.f4-gal--4{grid-template-rows:repeat(2,clamp(220px,21vw,320px));grid-auto-rows:clamp(220px,21vw,320px)}
.f4-gal--3 .f4-shot-img img,.f4-gal--4 .f4-shot-img img{aspect-ratio:auto;height:100%}
.f4-gal--4 .f4-shot:first-child,.f4-gal--3 .f4-shot:first-child{grid-column:span 2;grid-row:span 2}
.f4-gal--3 .f4-shot:nth-child(2),.f4-gal--3 .f4-shot:nth-child(3),.f4-gal--4 .f4-shot:nth-child(4){grid-column:span 2}
.f4-gal--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.f4-gal--1{grid-template-columns:minmax(0,1fr)}
.f4-gal--1 .f4-shot-img img{aspect-ratio:16/9}
.f4-shot figcaption{position:absolute;left:14px;bottom:14px;max-width:calc(100% - 28px);padding:6px 14px;border-radius:999px;background:var(--bg);color:var(--fg);font-weight:800;font-size:14px;line-height:1.4;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--fg) 50%,transparent)}

/* testimonials */
.f4-quotes{background:var(--soft)}
.f4-quote-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px}
.f4-quote-list figure{background:var(--bg);border-radius:var(--r);padding:28px}
.f4-quote-list blockquote{font-size:17px}
.f4-quote-list figcaption{margin-top:12px;font-weight:800;color:var(--accent)}

/* faq */
.f4-main>.f4-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,6vw,100px);align-items:start}
.f4-faq-list{display:grid;gap:12px}
.f4-faq-list details{border-radius:18px;background:var(--soft);padding:0 22px}
.f4-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:800;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.5;padding:18px 0;min-height:44px}
.f4-faq-list summary::after{flex:none;float:none;margin:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:20px;line-height:1}
.f4-faq-list details p{color:var(--muted);margin:0 0 20px}

/* contact */
.f4-main>.f4-contact{padding-top:0}
.f4-contact-card{position:relative;background:var(--accent);color:var(--on-accent);border-radius:calc(var(--r) + 10px);padding:clamp(56px,7vw,104px) clamp(20px,6vw,96px);text-align:center;overflow:hidden}
.f4-contact-card::before{content:"";position:absolute;inset:12px;border:1.5px dashed color-mix(in srgb,var(--on-accent) 45%,transparent);border-radius:calc(var(--r) + 2px);pointer-events:none}
.f4-stamp--sm{position:relative;left:auto;bottom:auto;margin:0 auto 24px;width:84px;font-size:20px;background:var(--on-accent);color:var(--accent);box-shadow:inset 0 0 0 4px var(--on-accent),inset 0 0 0 6px var(--accent)}
.f4-contact h2{font-size:clamp(34px,4.6vw,62px);margin-bottom:16px}
.f4-contact-intro{max-width:30em;margin:0 auto 32px;opacity:.9}
.f4-contact-intro p:last-child{margin:0}
.f4-btn--inv{background:var(--on-accent);color:var(--accent);box-shadow:0 6px 0 color-mix(in srgb,var(--on-accent) 55%,var(--fg))}
.f4-btn--inv:hover{box-shadow:0 4px 0 color-mix(in srgb,var(--on-accent) 55%,var(--fg))}
.f4-contact-list{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:4px 24px;max-width:960px;margin:40px auto 0;padding-top:24px;border-top:1.5px dashed color-mix(in srgb,var(--on-accent) 45%,transparent)}
.f4-contact-list li{padding:8px 0}
.f4-contact-list a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:700}
.f4-social{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin-top:12px}
.f4-social a{min-height:44px;display:inline-flex;align-items:center;font-weight:800}
.f4-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:28px var(--pad-x) 36px;font-size:14px;color:var(--muted)}
.f4-foot-brand{font-family:var(--serif);font-weight:600;color:var(--fg)}

@media (max-width:900px){
  .f4-main>.f4-hero,.f4-main>.f4-about,.f4-main>.f4-faq{grid-template-columns:minmax(0,1fr)}
  .f4-hero-media{margin:0 4px}
  .f4-menu{grid-template-columns:minmax(0,1fr)}
  .f4-gal,.f4-gal--3,.f4-gal--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f4-gal--3,.f4-gal--4{grid-template-rows:none}
  .f4-gal--3 .f4-shot:nth-child(n),.f4-gal--4 .f4-shot:nth-child(n){grid-column:auto;grid-row:auto}
  .f4-gal--3 .f4-shot-img img,.f4-gal--4 .f4-shot-img img{aspect-ratio:4/5;height:auto}
  .f4-gal--4 .f4-shot:first-child,.f4-gal--3 .f4-shot:first-child,.f4-gal--4 .f4-shot:nth-child(4){grid-column:1/-1}
  .f4-gal--4 .f4-shot:first-child .f4-shot-img img,.f4-gal--3 .f4-shot:first-child .f4-shot-img img,.f4-gal--4 .f4-shot:nth-child(4) .f4-shot-img img{aspect-ratio:3/2}
}
@media (max-width:640px){
  .f4-head{gap:0 12px;padding-block:8px}
  .f4-nav{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:0 18px}
  .f4-nav a{white-space:nowrap}
  .f4-head-cta{min-height:44px;padding:8px 16px;font-size:14px}
  .f4-hero h1{font-size:clamp(38px,11vw,52px)}
  .f4-hero-img img{aspect-ratio:4/3.6}
  .f4-hero-media .f4-stamp{left:auto;right:12px;bottom:-30px;width:88px;font-size:20px}
  .f4-actions>*{flex:1 1 100%}
  .f4-board{box-shadow:0 0 0 2px var(--accent)}
  .f4-dish{grid-template-columns:auto minmax(0,1fr);gap:2px 14px}
  .f4-no{width:44px;height:44px;font-size:16px}
  .f4-shot figcaption{left:8px;bottom:8px;max-width:calc(100% - 16px);font-size:12.5px;padding:4px 10px}
  .f4-contact-card::before{inset:8px}
}