/* ============================================================================
   Ristorante La Briciola — Montepulciano
   Impianto visivo: "dall'osteria di Via delle Cantine — il vino e la brace
   accesi nel buio, e una famiglia che tiene il conto in chiaro."

   本文件的设计决定来自 design-brief v3：
   - 调色板每个 hex 取自本店实拍照片（见 :root 注释逐条出处）
   - 字体配对 Cormorant Garamond（display）+ EB Garamond（正文）+ Inter（功能字）
     全部自托管 woff2，零外部请求（QA P7；自托管 @font-face 属"本地"）
   - 暗调 chiaroscuro：酒墙/酒窖/藻井/木盒陈列的实拍都是暗底暖光，页面跟着素材走
   - 移动优先：所有布局从 375px 起写，媒体查询只向上加列
   ========================================================================== */

/* ---- 自托管字体：只声明 demo/fonts/ 里实际存在的 8 个字重 ----------------
   （库里其它字重/字族没有拷进来，声明了也是 404——见 templates/site/fonts/fonts.css 用法说明）*/
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-500.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/cormorant-garamond-600.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-500italic.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/eb-garamond-400.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/eb-garamond-500.woff2") format("woff2");}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/eb-garamond-400italic.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.woff2") format("woff2");}

:root{
  /* --- 调色板：每个 hex 都取自本店实拍照片（brief §3） --- */
  --ink:      #241C15;   /* 深栗木 — ta-cellar-stairs 地下酒窖木格酒架暗部 */
  --ochre:    #B77E3A;   /* 赭金   — ta-503289483 门头赭黄外墙受光面 */
  --vino:     #5E1A20;   /* 酒红   — ta-wine-luteraia 酒标底色+杯中酒液（签名色） */
  --olive:    #6B6A3C;   /* 橄榄   — ta-interior-mural 手绘壁画的橄榄枝 */
  --linen:    #EAE0CC;   /* 亚麻米 — gm-AHRPTWm03IR0GW4U 词云餐垫松木本色 */

  /* --- 由上面五色派生，只为满足对比度 4.5:1（QA V5）--- */
  --linen-2:  #F3EDDF;   /* 卡片底：亚麻米提亮 */
  --body:     #4A3D30;   /* 浅底正文：8.0:1 */
  --olive-dp: #55542F;   /* 浅底可用的橄榄：5.5:1（原 #6B6A3C 只有 4.3:1，只作装饰） */
  --ochre-lt: #D9A45E;   /* 赭金提亮版，只用于 hero 压在门头墙上的 kicker——见 .kicker 注释 */
  --cream:    #E8DDC7;   /* 深底正文 */
  --cream-dim:#C9B79A;   /* 深底次要文字：8.7:1 */
  --line:     rgba(36,28,21,.16);
  --line-d:   rgba(232,221,199,.20);

  --display:"Cormorant Garamond","Playfair Display",Georgia,serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,sans-serif;

  --hdr: 62px;                     /* sticky header 高度，锚点滚动要减掉它 */
  --pad: clamp(1.25rem,5vw,3rem);  /* 全站左右安全边距 */
}

*,*::before,*::after{box-sizing:border-box;}
html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + 12px); /* 词云里的锚点跳转不要被吸顶导航吃掉标题 */
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--linen);color:var(--ink);
  font-family:var(--serif);font-size:1.0625rem;line-height:1.75;
  overflow-x:hidden;                 /* 兜底：任何一处 1px 溢出都不该让整页横滚（QA R1） */
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0 0 .5em;}
h1{font-size:clamp(3.4rem,16vw,8.5rem);letter-spacing:-.01em;}
h2{font-size:clamp(1.9rem,5.4vw,3.4rem);letter-spacing:-.005em;}
h3{font-size:clamp(1.35rem,3.4vw,2rem);}
p{margin:0 0 1.1em;}
em{font-style:italic;}
strong{font-weight:500;}

/* ---- 双语切换：body.lang-it 显示 .i18n.it，body.lang-en 显示 .i18n.en ----
   display:revert 让元素回到它自己的默认显示方式（span→inline，p/blockquote→block，
   caption→table-caption），比给每种标签写一条规则可靠。 */
.i18n{display:none;}
body.lang-it .i18n.it,
body.lang-en .i18n.en{display:revert;}
body.lang-en .dsc{display:block;}      /* 菜品英文说明要独占一行 */

/* .tr = 意语原文的英译。原文（老板的话、targa、宣言、评价）永远原样显示，
   英译只在 EN 版出现——不改写引文，也不让英语访客读不懂（QA C5 出处标注）。 */
.tr{display:none;}
body.lang-en .tr{display:block;font-family:var(--serif);font-style:italic;font-size:.95em;opacity:.82;margin-top:.4em;}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad);}
.section{padding-block:clamp(3.75rem,9vw,7.5rem);}

.eyebrow{
  font-family:var(--sans);font-size:.72rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--olive-dp);margin:0 0 1rem;
}
.src{
  display:block;font-family:var(--sans);font-size:.76rem;letter-spacing:.06em;
  color:var(--body);opacity:.85;margin-top:.7em;line-height:1.5;
}

/* 跳转链接：键盘用户第一个 Tab 就能跳过导航 */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--linen);padding:.8rem 1.2rem;font-family:var(--sans);}
.skip:focus{left:0;}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(28,21,16,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line-d);
}
.nav{
  max-width:1180px;margin-inline:auto;padding:.5rem var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  min-height:var(--hdr);flex-wrap:wrap;
}
/* 文字标，不放图。
   原先这里挂的是锻铁招牌照片缩到 74–92px。行不通：那块招牌是**深色铁字拍在浅色墙上**，
   放进深色导航条只能是一个奶油色小方块，里面的字在这个尺寸下完全读不出——
   看着像贴歪的贴纸，而不是标识。试过 brightness(1.75) 提亮，只是把方块洗得更白。
   而那块招牌已经是 hero 主图（满屏、字清清楚楚），在导航里再放一个读不清的缩略图
   不增加信息，只增加噪点。衬线文字标干净，也和 §3 的字体方向一致。 */
.brand{
  display:flex;flex-direction:column;justify-content:center;gap:.1rem;
  min-height:44px;text-decoration:none;color:var(--linen);
}
.brand-name{font-family:var(--display);font-size:1.35rem;line-height:1.05;letter-spacing:.02em;}
.brand-sub{
  font-family:var(--sans);font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ochre);line-height:1;
}
.nav-toggle{
  width:46px;height:46px;display:grid;place-content:center;gap:5px;
  background:none;border:1px solid var(--line-d);border-radius:3px;cursor:pointer;padding:0 11px;
}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--linen);}
.nav-links{
  display:none;list-style:none;margin:0;padding:0 0 .6rem;width:100%;
  flex-direction:column;gap:.1rem;
}
.nav-links.open{display:flex;}
.nav-links a{
  display:flex;align-items:center;justify-content:flex-start;
  min-height:44px;min-width:44px;text-decoration:none;   /* 短标签（"I vini"）也要够手指点 */
  font-family:var(--sans);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cream);border-bottom:1px solid var(--line-d);
}
.nav-links a:hover{color:var(--ochre);}
.nav-cta{color:var(--ochre)!important;}
.lang-switch{
  min-width:46px;min-height:44px;margin-top:.5rem;
  background:none;border:1px solid var(--line-d);border-radius:3px;color:var(--cream);
  font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;cursor:pointer;
}
.lang-switch:hover{border-color:var(--ochre);color:var(--ochre);}

/* ============================ HERO ============================ */
.hero{position:relative;min-height:min(94svh,860px);display:flex;align-items:flex-end;background:var(--ink);}
.hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 34%;   /* 375px 竖裁时把锻铁招牌留在画面上半（brief hero 判据③） */
}
/* 门头那面墙是受光的赭黄，白字压上去会糊——所以下半幅要压得比常规 hero 更狠。
   ⚠️ 实测修正（2026-08-03 自评）：原渐变在 24% 处只有 .28，而 kicker 那行恰好落在
   这一段的墙面高光上，375px 下实测对比只有 **3.0:1**（硬门 4.5）。
   根因不是颜色选错，是**渐变按百分比铺、文字块却是底对齐的**——视口一变两者就错位；
   而且 kicker 用的赭金与受光赭黄墙是同色系，换浅色只会更糟（那片高光比字还亮）。
   所以把 24–52% 这一段整体压深，让文字块无论落在哪都踩在暗底上。
   压深后实测 375=3.5 / 1280=4.4，仍不达标——但**瓶颈已经翻转**：背景压暗后
   变成"字不够亮"，再压图只会把照片压死。所以第二步改为提亮字（见 .kicker）。 */
.hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(20,14,10,.55) 0%, rgba(20,14,10,.30) 16%,
    rgba(18,12,8,.66) 34%, rgba(18,12,8,.84) 56%,
    rgba(18,12,8,.92) 76%, rgba(18,12,8,.97) 100%);
}
.hero-body{position:relative;padding:0 var(--pad) clamp(2.5rem,7vw,4.5rem);width:100%;max-width:1180px;margin-inline:auto;color:var(--linen);}
/* kicker 在浅底区块上用 --ochre 没问题；但 hero 里它压的是门头照片，
   实测走过两轮：先压深渐变（3.0→3.5），背景压暗后瓶颈就从"背景太亮"翻转成
   "字不够亮"——再压图只会把照片压死，所以改为提亮字。用 --ochre-lt 保住赭金的暖调，
   而不是退成白字。改完三档实测：375=5.4 / 768=7.9 / 1280=6.8，全过 4.5。
   （这条走了两轮才对：第一轮凭眼睛盯错了元素——以为是 "Alfredo e Andrea" 压在
   Welcome 牌上有问题，实测那行有 9.6:1，真正不合格的是它上面这行小字。**别用眼睛判对比度**。）*/
.kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ochre);margin-bottom:.8rem;}
.hero .kicker{color:var(--ochre-lt);}
.hero h1{margin:0 0 .1em;color:var(--linen);text-shadow:0 2px 30px rgba(0,0,0,.45);}
.hero-sub{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,3.6vw,1.75rem);color:var(--cream);margin:0 0 .2em;}
.hero-sign{font-family:var(--sans);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin:0 0 1.6rem;}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.2rem;}
.hero-hours{font-family:var(--sans);font-size:.8rem;letter-spacing:.04em;color:var(--cream-dim);margin:0;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.75rem 1.5rem;border-radius:2px;
  font-family:var(--sans);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s;
}
.btn-primary{background:var(--vino);color:var(--linen);border-color:var(--vino);}
.btn-primary:hover{background:#7A2229;border-color:#7A2229;}
.btn-ghost{border-color:rgba(234,224,204,.5);color:var(--linen);}
.btn-ghost:hover{border-color:var(--ochre);color:var(--ochre);}
.btn-dark{background:var(--ink);color:var(--linen);border-color:var(--ink);}
.btn-dark:hover{background:var(--vino);border-color:var(--vino);}

/* ================= 2. LA FORMULA — 设计时刻：用两张照片做等式 ================= */
.formula{background:var(--linen-2);padding-block:clamp(3.5rem,8vw,6.5rem);border-bottom:1px solid var(--line);}
.equation{display:grid;gap:.9rem;align-items:center;margin-bottom:2.2rem;}
.eq-item{margin:0;}
.eq-item img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;}
.eq-item figcaption{
  font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive-dp);margin-top:.6rem;text-align:center;
}
/* + 与 = 用 flex 居中而不是 line-height 硬调：两个字符的字身高不同，
   靠 line-height 对齐会一个偏高一个偏低（截图自评时看出来的） */
.eq-op{
  font-family:var(--display);font-size:clamp(2.2rem,7vw,3.2rem);color:var(--ochre);
  display:flex;align-items:center;justify-content:center;line-height:1;
  padding-bottom:1.6rem;   /* 抵消图片下方 figcaption 的高度，让运算符对齐图片中线 */
}
.eq-result{text-align:center;}
.eq-name{display:block;font-family:var(--display);font-size:clamp(2.4rem,9vw,3.6rem);color:var(--vino);line-height:1;}
.eq-note{display:block;font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin-top:.7rem;}
.formula-text{max-width:44ch;font-size:1.15rem;}

/* ================= 3. I VINI — 设计时刻：酒谚牌墙 ================= */
.wine{background:var(--ink);color:var(--cream);}
.proverb{position:relative;display:flex;align-items:center;min-height:min(72svh,620px);overflow:hidden;}
.proverb-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* 底图本身是一墙手写酒谚牌（字压字最难读）：左侧压重、右侧留亮，
   让排版的引文和照片里的手写牌各自读得清，不打架 */
.proverb::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(16,11,7,.90) 0%,rgba(16,11,7,.78) 42%,rgba(16,11,7,.42) 100%),
    linear-gradient(180deg,rgba(16,11,7,.55) 0%,rgba(16,11,7,.30) 40%,rgba(16,11,7,.75) 100%);
}
.proverb-body{position:relative;z-index:1;width:100%;max-width:1180px;margin-inline:auto;padding:clamp(3rem,9vw,5rem) var(--pad);}
.proverb-quote{
  margin:0;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:clamp(1.85rem,6.4vw,4rem);line-height:1.12;color:var(--linen);max-width:20ch;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.proverb .tr{color:var(--cream-dim);margin-top:1rem;max-width:34ch;}
.proverb .src{color:var(--cream-dim);opacity:1;margin-top:1.4rem;}
.wine-body{display:grid;gap:2.5rem;padding-block:clamp(3rem,8vw,5.5rem);}
.wine-intro h2{color:var(--linen);}
.wine-intro p{color:var(--cream);}
.wine-intro em{color:var(--ochre);font-style:italic;}
.wine-shots{display:grid;gap:1.1rem;}
.wine-shots figure{margin:0;}
.wine-shots img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;}
.wine-shots figcaption,
.sala figcaption,
.carne-more figcaption,
.labels figcaption{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.06em;line-height:1.5;margin-top:.55rem;
}
.wine-shots figcaption{color:var(--cream-dim);}

.cellar-list{border-top:1px solid var(--line-d);padding-top:clamp(2rem,5vw,3rem);}
.cellar-list h3{color:var(--linen);}
.cellar-note{color:var(--cream-dim);max-width:60ch;}
.cellar-cols{display:grid;gap:2rem;}
.doc{
  font-family:var(--sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ochre);border-bottom:1px solid var(--line-d);padding-bottom:.5rem;margin-bottom:.8rem;
}
.doc span{color:var(--cream-dim);}
.doc-2{margin-top:2rem;}
.cellar-cols ul{list-style:none;margin:0;padding:0;}
.cellar-cols li{
  font-family:var(--display);font-size:1.3rem;line-height:1.5;color:var(--linen);
  padding:.25rem 0;border-bottom:1px dotted rgba(232,221,199,.14);
}
.cellar-cols li em{font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--cream-dim);}

/* 手机上 2 列。原先沿用桌面的 3 列，375px 下每张只有约 106px——
   而这几张照片的**全部用处就是让人读出酒标上的名字**，读不出就等于没放。 */
.labels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:clamp(2rem,5vw,3rem);}
.labels figure{margin:0;}
.labels img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;}
.labels figcaption{color:var(--cream-dim);font-size:.68rem;}

.wine-motto{
  margin:clamp(2.5rem,6vw,4rem) 0 0;padding-bottom:clamp(3rem,8vw,5rem);text-align:center;
  font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,4.6vw,2.6rem);color:var(--ochre);line-height:1.3;
}
.wine-motto .quote-mark{opacity:.5;}
.wine-motto .src{color:var(--cream-dim);opacity:1;max-width:46ch;margin-inline:auto;}

/* ================= 4. LA CARNE ================= */
.carne{background:var(--linen);}
.carne-grid{display:grid;gap:2rem;align-items:center;}
.carne-hero{margin:0;}
.carne-hero img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;}
.carne-text p{max-width:46ch;}
.carne-text strong{color:var(--vino);font-weight:500;}
.menu-joke{
  margin-top:1.6rem;padding-left:1.1rem;border-left:2px solid var(--ochre);
  font-family:var(--display);font-style:italic;font-size:1.4rem;line-height:1.35;color:var(--ink);
}
.carne-more{display:grid;gap:1.4rem;margin-top:clamp(2rem,5vw,3.5rem);}
.carne-more figure{margin:0;}
.carne-more img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:2px;}
.carne-more figcaption{color:var(--body);}
.carne-more figcaption strong{display:block;font-family:var(--display);font-size:1.25rem;font-weight:600;color:var(--ink);letter-spacing:0;text-transform:none;margin-bottom:.15rem;}

/* ================= 5. LE PASTE ================= */
.paste{background:var(--linen-2);}
.paste-head{margin-bottom:clamp(1.5rem,4vw,2.5rem);}
.paste-grid{display:grid;gap:1.8rem;}
.paste-grid figure{margin:0;}
.p-main img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;}
.p-duo img{width:100%;aspect-ratio:2/1;object-fit:cover;border-radius:2px;}
.p-duo figcaption{font-family:var(--sans);font-size:.74rem;color:var(--body);margin-top:.55rem;}
.paste-text p{max-width:44ch;}
.poem{
  margin:1.8rem 0 0;padding:1.2rem 0 0;border-top:1px solid var(--line);
  font-family:var(--display);font-style:italic;font-size:1.45rem;line-height:1.35;color:var(--vino);
}
.poem .tr{color:var(--body);font-size:1rem;}
.cocciaccio{display:grid;gap:1.8rem;margin-top:clamp(2.5rem,6vw,4rem);align-items:center;}
.cocciaccio figure{margin:0;}
.cocciaccio img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;}
.owner-long{margin:0 0 1.5rem;font-family:var(--serif);font-style:italic;font-size:1.15rem;line-height:1.6;color:var(--ink);}
.owner-long .tr{font-size:.98rem;}
.press{font-family:var(--serif);font-style:italic;color:var(--body);border-left:2px solid var(--olive);padding-left:1rem;}

/* ================= 6. LA SALA ================= */
.sala{background:var(--ink);color:var(--cream);padding-bottom:clamp(3rem,8vw,5rem);}
.sala-bleed{position:relative;margin:0;}
.sala-bleed img{width:100%;height:clamp(230px,46vw,520px);object-fit:cover;}
.sala-bleed figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem var(--pad) 1.2rem;
  background:linear-gradient(180deg,rgba(20,14,10,0),rgba(20,14,10,.85));
  color:var(--linen);font-family:var(--sans);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
}
.sala-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-top:clamp(1.5rem,4vw,2.5rem);}
.sala-grid figure{margin:0;}
.sala-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;}
.sala-grid figcaption{color:var(--cream-dim);}

/* ========== 7. LE PAROLE — 签名时刻：词云餐垫做成 HTML 活排版 ========== */
.words{background:var(--linen);padding-block:clamp(3.5rem,9vw,7rem);}
.words-title{margin-bottom:.6rem;}
.words-lead{max-width:52ch;color:var(--body);}
.placemat{
  position:relative;margin-top:clamp(1.8rem,4vw,2.8rem);
  padding:clamp(1.6rem,5vw,3.5rem) clamp(1rem,4vw,3rem);
  background:var(--linen-2);border:1px solid rgba(90,62,32,.35);border-radius:4px;
  box-shadow:0 18px 40px -28px rgba(36,28,21,.7);
  overflow:hidden;
}
/* 真实餐垫的木纹压在下面：同一张图页脚也在用，浏览器缓存命中，零额外重量 */
.placemat::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url("images/placemat.webp") center/cover no-repeat;
  opacity:.13;mix-blend-mode:multiply;
}
.cloud{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.35em .7em;}
.w{
  font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  line-height:1;color:#553A21;text-decoration:none;    /* 烙印棕：木头上烧出来的字 */
  border-bottom:1px solid transparent;
  /* 可点的词要留出手指余量。这里不做到 44px：那样会把词云撑成按钮阵列，
     签名时刻就没了——主导航在页顶，词云是加分交互不是唯一入口。 */
  padding-block:.3em;
}
a.w:hover,a.w:focus{color:var(--vino);border-bottom-color:currentColor;}
.s2{font-size:clamp(.95rem,3vw,1.25rem);}
.s3{font-size:clamp(1.2rem,4vw,1.75rem);}
.s4{font-size:clamp(1.5rem,5.4vw,2.4rem);color:var(--olive-dp);}
.s5{font-size:clamp(1.9rem,7vw,3.2rem);color:var(--vino);}
.placemat-mark{
  position:relative;text-align:center;margin-top:clamp(1.5rem,4vw,2.5rem);
  padding-top:clamp(1.2rem,3vw,2rem);border-top:1px solid rgba(90,62,32,.28);
}
.pm-name{font-family:var(--display);font-style:italic;font-size:clamp(2rem,7vw,3.2rem);color:#553A21;margin:0;line-height:1;}
.pm-sub{font-family:var(--sans);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--olive-dp);margin:.7rem 0 0;}
.pm-addr{font-family:var(--sans);font-size:.68rem;letter-spacing:.12em;color:var(--body);margin:.5rem 0 0;}

.words-proof{display:grid;gap:1.6rem;margin-top:clamp(2rem,5vw,3rem);align-items:start;}
.words-proof>figure{margin:0;}
.words-proof>figure img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;}
.words-proof p{max-width:46ch;}
.basket{margin:1.2rem 0 0;}
.basket img{width:100%;max-width:320px;aspect-ratio:4/3;object-fit:cover;border-radius:2px;}
.basket figcaption{font-family:var(--sans);font-size:.74rem;color:var(--body);margin-top:.5rem;}

/* 词云右栏的小词表：填的是右下那块空白，但内容是有用的——
   词云上那几个词外国客人读不懂，解释完那面词墙才从装饰变成信息。 */
.glossario{margin-top:1.8rem;border-top:1px solid var(--line);padding-top:1.2rem;}
.gloss-lead{font-family:var(--sans);font-size:.78rem;letter-spacing:.06em;color:var(--body);
  opacity:.9;margin:0 0 .9rem;}
/* dt 与 dd 要成对读。原先 dl 用统一 gap，词条与释义的间距等于两组之间的间距，
   四条就读成了四段并列。改成靠 dt 的上边距分组，组内贴紧。 */
.glossario dl{margin:0;}
.glossario dt{font-family:var(--display);font-size:1.15rem;color:var(--vino);line-height:1.1;margin-top:1.15rem;}
.glossario dt:first-of-type{margin-top:0;}
.glossario dd{margin:.2rem 0 0;font-size:.95rem;line-height:1.55;color:var(--body);}

/* ================= 8. IL MENÙ ================= */
.menu{background:var(--linen-2);}
.menu-head{display:grid;gap:2rem;align-items:start;margin-bottom:clamp(2rem,5vw,3.5rem);}
.menu-head strong{color:var(--vino);font-weight:500;}
.menu-quote,.kitchen-joke{
  font-family:var(--display);font-style:italic;font-size:1.35rem;line-height:1.35;color:var(--ink);
  border-left:2px solid var(--ochre);padding-left:1.1rem;margin-top:1.6rem;
}
.menu-gf{font-family:var(--sans);font-size:.86rem;line-height:1.6;color:var(--body);margin-top:1.4rem;}
.menu-cover{margin:0;}
.menu-cover img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;}
.menu-cover figcaption{font-family:var(--sans);font-size:.74rem;color:var(--body);margin-top:.5rem;}

.menu-cols{display:grid;gap:clamp(2rem,5vw,3rem);align-items:start;}
.mcat h3{margin-bottom:.4rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);}
.mcat-star h3{color:var(--vino);}
.mcat ul{list-style:none;margin:0;padding:0;}
.mcat li{padding:.6rem 0;border-bottom:1px dotted var(--line);}
.mcat .d{display:block;font-family:var(--display);font-size:1.22rem;line-height:1.3;color:var(--ink);}
.mcat .d em{font-family:var(--serif);font-size:.8rem;font-style:italic;color:var(--body);}
.mcat .dsc{font-family:var(--serif);font-style:italic;font-size:.94rem;line-height:1.45;color:var(--body);}
.mcat-note{font-family:var(--sans);font-size:.82rem;color:var(--body);margin-top:1rem;}
/* 用 flex 而不是 grid：这里的诉求是「**有几张就分几栏，永远填满一行**」。
   踩过两版都错：
   ① 写死 repeat(3,1fr) —— 只有 2 张图的分类右边留一个空格子；
   ② 改 auto-fit minmax(120px,1fr) —— **更糟**，auto-fit 按可用宽度算列数，
      518px 的容器算出 4 列，3 张图反而留洞；手机上算出 2 列，3 张图又留洞。
   grid 的列数是由容器决定的，而这里需要的是由**元素个数**决定——那本来就该用 flex。 */
.mcat-shots{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem;}
.mcat-shots figure{flex:1 1 120px;min-width:0;}
.mcat-shots figure{margin:0;}
.mcat-shots img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;}
.kitchen-joke{margin-top:clamp(2rem,5vw,3rem);}

/* ================= 9. QUESTA FAMIGLIA ================= */
.family{background:var(--linen);padding-block:clamp(3.5rem,9vw,7rem);}
.manifesto-grid{display:grid;gap:2rem;align-items:center;}
.manifesto{
  margin:0;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,5vw,2.6rem);
  line-height:1.22;color:var(--ink);
}
.manifesto .red{color:var(--vino);}   /* 原件上 «casa» 与 turisti 就是红字，照搬 */
.manifesto-grid figure{margin:0;}
.manifesto-grid img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;}

.family-body{display:grid;gap:2rem;margin-top:clamp(2.5rem,6vw,4rem);align-items:start;}
.family-text p{max-width:48ch;}
.voice{
  margin:1.6rem 0 0;padding-left:1.1rem;border-left:2px solid var(--olive);
  font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--body);
}
.voice p{margin-bottom:.4em;}
.voice-fun{border-left-color:var(--ochre);}
.family-door{margin:0;}
.family-door img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;}
.family-door figcaption{font-family:var(--sans);font-size:.74rem;color:var(--body);margin-top:.5rem;}

/* 机锋引用块：老板的回评本来就是"回复"，所以做成回复气泡 */
.replies{
  margin-top:clamp(2.5rem,6vw,4rem);padding:clamp(1.8rem,5vw,3rem) clamp(1.2rem,4vw,3rem);
  background:var(--ink);border-radius:4px;color:var(--cream);
}
.replies h3{color:var(--linen);}
.replies-lead{color:var(--cream-dim);max-width:56ch;}
.bubbles{display:grid;gap:1rem;margin-top:1.6rem;}
.bubble{
  background:#2F2419;border:1px solid var(--line-d);
  border-radius:16px 16px 16px 3px;padding:1.1rem 1.3rem;
}
.bubble p{margin-bottom:.3em;font-family:var(--display);font-style:italic;font-size:1.2rem;line-height:1.4;color:var(--linen);}
.bubble .tr{font-family:var(--serif);font-size:.95rem;color:var(--cream-dim);opacity:1;}
.bubble .src{color:var(--cream-dim);opacity:.9;}
.bubble-warm{border-color:rgba(183,126,58,.55);}
/* 手机上单列：这几块牌子的价值是那几行手写字，两列一挤就读不出来了 */
.signs{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.8rem;}
.signs figure{margin:0;}
.signs img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;}
.signs figcaption{margin-top:.6rem;font-family:var(--display);font-style:italic;font-size:1rem;line-height:1.35;color:var(--cream);}
.signs .tr{font-family:var(--serif);font-size:.85rem;color:var(--cream-dim);opacity:1;}

/* ================= 10. DICONO DI NOI ================= */
.reviews{background:var(--linen-2);}
.ratings{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-bottom:2rem;}
.award{
  display:inline-block;padding:.45rem .9rem;border:1px solid var(--olive-dp);border-radius:2px;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-dp);
}
.stars{font-family:var(--sans);font-size:.85rem;letter-spacing:.06em;color:var(--body);}
.rev-grid{display:grid;gap:1.1rem;}
.rev{
  margin:0;padding:1.3rem 1.4rem;background:var(--linen);
  border:1px solid var(--line);border-left:3px solid var(--vino);border-radius:2px;
}
.rev p{font-family:var(--serif);font-size:1.02rem;line-height:1.6;color:var(--ink);margin-bottom:.6em;}
.rev-tag{
  font-family:var(--sans)!important;font-size:.68rem!important;letter-spacing:.2em;text-transform:uppercase;
  color:var(--vino)!important;margin-bottom:.7em!important;
}
.rev footer{font-family:var(--sans);font-size:.72rem;letter-spacing:.06em;color:var(--body);}
.rev-note{font-family:var(--sans);font-size:.78rem;color:var(--body);margin-top:1.4rem;max-width:60ch;}

/* ================= 11. BUONO A SAPERSI ================= */
.info{background:var(--linen);}
.info-grid{display:grid;gap:1rem;margin-top:1.5rem;}
.info-card{
  padding:1.4rem 1.5rem;background:var(--linen-2);border:1px solid var(--line);border-radius:3px;
}
.info-card h3{font-size:1.3rem;margin-bottom:.35em;}
.info-card p{font-size:1rem;margin-bottom:.6em;color:var(--body);}
.info-card p:last-child{margin-bottom:0;}
.info-gf{border-left:3px solid var(--olive);}
.info-gf blockquote{
  margin:1rem 0 0;padding-left:1rem;border-left:2px solid var(--ochre);
  font-family:var(--display);font-style:italic;font-size:1.25rem;line-height:1.35;color:var(--ink);
}
.info-gf blockquote p{font-family:inherit;font-size:inherit;color:inherit;margin-bottom:.3em;}
.info-gf footer{font-family:var(--sans);font-size:.72rem;color:var(--body);}
.info-kids .kid-quote{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--vino);}

/* ================= 12. COME TROVARCI ================= */
.find{background:var(--ink);color:var(--cream);padding-block:clamp(3.5rem,9vw,7rem);}
.find .eyebrow{color:var(--ochre);}
.find h2{color:var(--linen);}
.find p{color:var(--cream);max-width:48ch;}
.find strong{color:var(--ochre);font-weight:500;}
.find-grid{display:grid;gap:2rem;align-items:center;}
.find-grid figure{margin:0;}
.find-grid img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px;}
.find address{
  font-style:normal;font-family:var(--sans);font-size:.92rem;line-height:1.9;
  color:var(--cream);margin:1.5rem 0;padding-top:1.2rem;border-top:1px solid var(--line-d);
}
/* 电话是游客场景的第一转化动作：所有 tel: 链接都撑到 44px 手指目标（QA R5） */
.find address a,.foot-line a{
  color:var(--ochre);display:inline-flex;align-items:center;min-height:44px;
}
.foot-line a{color:var(--cream);}
.find .btn-dark{background:var(--ochre);border-color:var(--ochre);color:#22190F;}
.find .btn-dark:hover{background:var(--linen);border-color:var(--linen);color:var(--ink);}

/* ================= 13. PRENOTA ================= */
.booking{background:var(--linen);}
.booking-grid{display:grid;gap:2.5rem;align-items:start;}
.tel-big{margin:1.2rem 0 1.8rem;}
.tel-big a{
  display:inline-flex;align-items:center;min-height:48px;
  font-family:var(--display);font-size:clamp(2.1rem,7vw,3.2rem);color:var(--vino);
  text-decoration:none;letter-spacing:.01em;
}
.tel-big a:hover{text-decoration:underline;}
.hours{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.88rem;}
.hours caption{
  text-align:left;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--olive-dp);padding-bottom:.7rem;
}
.hours th{text-align:left;font-weight:400;color:var(--body);padding:.5rem 0;border-bottom:1px solid var(--line);}
.hours td{text-align:right;padding:.5rem 0;border-bottom:1px solid var(--line);color:var(--ink);}
.hours .closed th,.hours .closed td{color:var(--vino);}

.booking-form-wrap{background:var(--linen-2);border:1px solid var(--line);border-radius:3px;padding:clamp(1.4rem,4vw,2.2rem);}
.form-lead{font-size:1rem;color:var(--body);}
.booking-form label{display:block;margin-bottom:.9rem;font-family:var(--sans);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--body);}
.booking-form input,.booking-form textarea{
  display:block;width:100%;min-height:46px;margin-top:.35rem;padding:.6rem .75rem;
  font-family:var(--serif);font-size:1rem;color:var(--ink);
  background:#FFFDF7;border:1px solid rgba(36,28,21,.28);border-radius:2px;
}
.booking-form textarea{min-height:70px;resize:vertical;}
.booking-form input:focus,.booking-form textarea:focus{outline:2px solid var(--ochre);outline-offset:1px;}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;}
/* 落单的最后一个字段占满整行——三个字段（日期/时间/人数）挤两列会在右下留洞，
   而人数那格铺满反而更好按。规则见 design-principles §10「写死列数须填满整行」。
   ⚠️ **只在两列时成立**：≥600px 断点是三列，那时三个字段正好一行，
   这条若跟着生效反而会让第 3 个独占一行、前两个留洞——比原来更糟。故在下面断点里显式复位。 */
.form-row > :last-child:nth-child(odd){grid-column:1 / -1;}
.form-note{font-family:var(--sans);font-size:.74rem;color:var(--body);margin:.9rem 0 0;}

/* ================= FOOTER ================= */
.site-footer{background:var(--ink);color:var(--cream);}
.foot-band{width:100%;height:clamp(90px,16vw,170px);object-fit:cover;object-position:center 42%;opacity:.9;}
.foot-body{padding-block:clamp(2.2rem,6vw,3.5rem);text-align:center;}
.foot-name{font-family:var(--display);font-size:clamp(1.8rem,6vw,2.6rem);color:var(--linen);margin:0 0 .2em;}
.foot-legal{font-family:var(--sans);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre);margin:0 0 1.2em;}
.foot-line{font-family:var(--sans);font-size:.86rem;color:var(--cream-dim);margin:0 0 .4em;}
.foot-line a{color:var(--cream);}

/* ============================================================================
   ≥600px — 双列开始出现
   ========================================================================== */
@media (min-width:600px){
  .wine-shots{grid-template-columns:repeat(3,minmax(0,1fr));}
  .carne-more{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rev-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-row{grid-template-columns:repeat(3,minmax(0,1fr));}
  .form-row > :last-child:nth-child(odd){grid-column:auto;}   /* 三列已满行，复位上面那条 */
  .cellar-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bubbles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .bubble-warm{grid-column:span 2;}
  .sala-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .equation{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.1fr);
    gap:clamp(.8rem,2.5vw,2rem);
  }
  .words-proof{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2rem;}
}

/* ============================================================================
   ≥900px — 桌面：非对称错落，导航展开
   ========================================================================== */
@media (min-width:900px){
  .nav{flex-wrap:nowrap;padding-block:.4rem;}
  .nav-toggle{display:none;}
  .nav-links{display:flex;flex-direction:row;align-items:center;gap:1.4rem;width:auto;padding:0;}
  .nav-links a{border-bottom:none;font-size:.78rem;letter-spacing:.14em;}
  .lang-switch{margin-top:0;}
  .brand-name{font-size:1.5rem;}

  .hero-body{padding-bottom:clamp(3.5rem,6vw,6rem);}

  .wine-body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2.5rem,5vw,4.5rem);align-items:center;}
  .wine-shots{gap:1rem;}

  /* 肉：图片占左侧较大一栏，文字右侧留白——非对称，不是等分两栏 */
  .carne-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);}
  .carne-more{gap:2rem;}

  /* 面：主图跨两行，文字在右，双拼图整幅收尾 */
  .paste-grid{
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-template-areas:"main text" "duo duo";
    gap:clamp(2rem,4vw,3.5rem);
  }
  .p-main{grid-area:main;}
  .paste-text{grid-area:text;align-self:center;}
  .p-duo{grid-area:duo;margin-top:1rem;}
  .cocciaccio{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2.5rem,5vw,4rem);}

  .menu-head{grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,4rem);}
  .menu-cols{grid-template-columns:repeat(2,minmax(0,1fr));}
  .manifesto-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:clamp(2.5rem,5vw,4rem);}
  .family-body{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2.5rem,5vw,4rem);}
  .find-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2.5rem,5vw,4.5rem);}
  .booking-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem);}
  .rev-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .info-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .info-gf{grid-column:span 2;}
  .bubbles{grid-template-columns:repeat(3,minmax(0,1fr));}
  .bubble-warm{grid-column:auto;}
  /* ⚠️ 这里原先是 .signs{max-width:70%} / .labels{max-width:75%}。
     本意大概是"别让照片在宽屏上撑太大"，但代价是这两块比上下文的满宽内容窄一截，
     右边空出 270–325px，读起来就是**没对齐**——用户第一眼指出的正是这个。
     真正的问题不是"太大"而是"数量不够填满"：3 张酒标 / 2 块牌子撑不满 4 列的宽度。
     解法是补内容而不是缩容器——酒标补第 4 张（Capanna，站上酒单已列）、
     幽默牌补第 3 块（Il Conventino 酒谚牌），然后让网格正常撑满。 */
  .labels{grid-template-columns:repeat(4,minmax(0,1fr));}
  .signs{grid-template-columns:repeat(3,minmax(0,1fr));}
}

@media (min-width:1200px){
  /* 大屏上让首屏标题真正大起来——店名是这一单最贵的资产 */
  .hero{min-height:min(96svh,940px);}
}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;}
}

/* 打印：老板大概率会把菜单打出来看一眼 */
@media print{
  .site-header,.hero-actions,.booking-form-wrap,.nav-toggle{display:none;}
  body{background:#fff;color:#000;}
}