@import url("fonts/fonts.css");

/* =========================================================================
   Antica Bottega al Duomo — Orvieto

   色板：每个值都取自这家店自己的照片（门框的栗木、拼盘照里的陶壶、店外木牌上的
   白漆与灰泥墙、Orvieto 的凝灰岩、桌布的深蓝）。没有一个是从模板里带来的。

   三款字体，角色定死后不串用：
     Fraunces      标题与菜名（暖调、转角柔，呼应门楣上那行手写花体，但不模仿手写——
                   模仿手写会跟照片里真正的手写字打架）
     EB Garamond   正文；它的斜体只做一件事：引语（店家的话和客人的话都算）
     JetBrains Mono 标签、时间、电话、图注——等宽的形状来自柜台上那张收银小票

   版面的两条骨规则（整页的密度都由它们决定）：
     ① 所有的上下间距只能取 :root 里那五个档位之一，不许现写一个数。
        页面上每一块空白因此都有来历，读起来是节奏而不是漏排。
     ② 每一节的开头是一个两栏报头：左边标题，右边导语／副信息，
        下面一条细线收口。整页因此没有"右半边永远空着"的那种版心。
   ========================================================================= */

:root {
  /* --- 取自实拍的六个色 --- */
  --calce:        #D3CFC5;   /* 店外木牌的白漆与灰泥墙亮部 */
  --inchiostro:   #30291F;   /* 门楣深木与黑板暗部 */
  --castagno:     #664E3F;   /* 门框的栗木立柱 */
  --terracotta:   #A16445;   /* 拼盘照里的陶壶（与陶土杯、赤陶花盆同族） */
  --tufo:         #9A806A;   /* Orvieto 的凝灰岩墙 */
  --blu-tovaglia: #262630;   /* 拼盘照里蓝桌布的暗部 */

  /* --- 上面六个色的派生档，只为满足正文对比度而存在，不是新颜色 ---
     纯色直接用会不达标：赤陶色在灰泥底上只有 3.05:1，够大字不够正文；
     凝灰岩当底色时正文只有 3.88:1。所以正文一律用墨色或下面这几档。 */
  --carta:        #DEDACF;   /* 灰泥底提亮，区块交替用 */
  --cotto-scuro:  #7A4529;   /* 赤陶加深：链接与小字用（灰泥底上 4.98:1） */
  --calce-tenue:  #C7BFB1;   /* 灰泥压暗：深色区块里的次级文字（8.2:1） */
  --cotto-chiaro: #C08A63;   /* 赤陶提亮：深色区块里的强调（5.0:1） */

  /* --- 线条：同一条线在浅底与深底上的两个版本 --- */
  --filo:        rgba(102, 78, 63, 0.30);
  --filo-scuro:  rgba(211, 207, 197, 0.26);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- 间距刻度：全站只有这五档，没有第六个数 ---
     一个页面显得"不规则"，多半不是某处间距错了，而是每处都各写各的。
     档位之间差得够开（约 1.6 倍），所以层级一眼分得出。 */
  --rhythm: clamp(3rem, 4.6vw, 4.5rem);      /* ① 节与节 */
  --gap-lg: clamp(2rem, 3.8vw, 3rem);        /* ② 节内的组与组、两栏之间的槽 */
  --gap-md: clamp(1.35rem, 2.4vw, 1.9rem);   /* ③ 图与图、卡与卡 */
  --gap-sm: 1.1rem;                          /* ④ 段与段 */
  --gap-xs: 0.55rem;                         /* ⑤ 标签与它的值、图与图注 */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* 顶栏是吸顶的（63px）：锚点跳转的落点必须让开它的高度，否则每一节的第一行
   眉标都会停在栏底下面——手机上那行等于没显示。76px = 栏高 + 一点呼吸。 */
section[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  background: var(--calce);
  color: var(--inchiostro);
  font-family: var(--body);
  font-size: 1.125rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

/* 浏览器默认给 figure 左右各 40px 外边距。不清掉的话，栏里的图会缩进去，
   图的边和栏的边对不上——那条缝没有边界，读起来不是留白是没对齐。
   本页所有图文间距都由各自的区块规则给，不靠默认值。 */
figure { margin: 0; }

a { color: inherit; }

/* ---- 双语：body 上的 lang-it / lang-en 决定显示哪一半 ---- */
.i18n { display: none; }
body.lang-it .i18n.it,
body.lang-en .i18n.en { display: inline; }
body.lang-it p.i18n.it,  body.lang-en p.i18n.en,
body.lang-it div.i18n.it, body.lang-en div.i18n.en { display: block; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--inchiostro); color: var(--calce);
  padding: 0.75rem 1rem; z-index: 100; font-family: var(--mono); font-size: 0.8rem;
}
.skip:focus { left: 0; }

/* =========================== 排版基调 =========================== */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;                    /* Fraunces 的默认字重是 900，必须显式给 */
  font-variation-settings: "opsz" 72, "SOFT" 40, "WONK" 1;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.012em;
}

h1 {
  font-size: clamp(2.75rem, 8vw, 4.75rem);   /* 与正文的字阶落差 ≈ 4:1 */
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}

h2 {
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  max-width: 20ch;                     /* 标题是主张不是段落，短行更像一句话 */
}

h3 {
  font-size: 1.35rem;
  font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 0;
  letter-spacing: 0.01em;
}

p { margin: 0 0 var(--gap-sm); }

/* 导语比正文重半档：一节的第一段该比后面的段落先被读到 */
.lede { max-width: 62ch; font-size: 1.2rem; font-weight: 500; }

/* eyebrow / 图注 / 标签：等宽小字，全站同一种形状 */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--castagno);
  margin: 0 0 var(--gap-sm);
}
.eyebrow .num { color: var(--cotto-scuro); margin-right: 0.4em; }

.figcap {
  font-family: var(--mono);
  font-size: 0.72rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--castagno);
  margin: var(--gap-xs) 0 0;
}

.attrib {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--castagno);
  margin: var(--gap-xs) 0 0;
}

/* =========================== 顶栏 =========================== */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(211, 207, 197, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(102, 78, 63, 0.28);
}

.nav {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0.55rem var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 1;
  font-size: 1.02rem; line-height: 1.05; text-decoration: none;
  display: flex; flex-direction: column;
  min-height: 44px; justify-content: center;
}
.brand-line--sub { color: var(--castagno); }

.nav-links {
  list-style: none; display: flex; align-items: center; gap: 1.35rem;
  margin: 0; padding: 0;
}
.nav-links a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.11em;
  text-transform: uppercase; text-decoration: none; color: var(--inchiostro);
  display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.nav-links a:hover { color: var(--cotto-scuro); border-bottom-color: var(--terracotta); }

.lang-switch {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  background: none; color: var(--inchiostro);
  border: 1px solid var(--castagno); border-radius: 2px;
  padding: 0 0.7rem; min-height: 44px; min-width: 66px; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.lang-switch:hover { background: var(--inchiostro); color: var(--calce); }

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--castagno); border-radius: 2px;
  color: var(--inchiostro); font-size: 1.1rem;
  min-width: 44px; min-height: 44px; cursor: pointer;
}

/* =========================== 1 · Hero =========================== */

.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: var(--gap-lg) var(--gutter) var(--rhythm);
  display: grid; gap: var(--gap-lg);
  grid-template-columns: 1fr;
}

.hero-figure img { border: 1px solid rgba(102, 78, 63, 0.35); }

.hero-text { align-self: center; }

.claim {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  line-height: 1.32;
  color: var(--castagno);
  margin: var(--gap-md) 0;
  padding-left: 1rem;
  border-left: 3px solid var(--terracotta);
}
.claim em { font-style: normal; color: var(--inchiostro); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--gap-md); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.5rem;
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.09em;
  text-transform: uppercase; text-decoration: none; border-radius: 2px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* 主按钮用墨色而不是赤陶色：赤陶底上的白字只有 3:1，达不到正文对比度门槛 */
.btn-solid { background: var(--inchiostro); color: var(--calce); }
.btn-solid:hover { background: var(--cotto-scuro); }
.btn-line { border: 1px solid var(--castagno); color: var(--inchiostro); }
.btn-line:hover { border-color: var(--inchiostro); background: rgba(48, 41, 31, 0.06); }

/* =========================== 区块骨架 =========================== */

.band { padding: var(--rhythm) 0; }
.band--paper { background: var(--carta); }
.band--dark { background: var(--blu-tovaglia); color: var(--calce); }
.band--dark .eyebrow,
.band--dark .figcap,
.band--dark .attrib { color: var(--calce-tenue); }
.band--dark .eyebrow .num { color: var(--cotto-chiaro); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 节头：两栏报头 ----------
   一节的开头有两件事要说：这一节主张什么（标题），和一句把人领进去的话（导语）。
   把它们上下叠起来，右半边就永远是空的——十节下来整页只剩一条左对齐的窄柱。
   所以并排放，底下压一条细线：线之上是报头，线之下是内容，
   两栏各自多出来的余量都被这条线收住，不会变成没边界的空。 */
.head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  padding-bottom: var(--gap-md);
  border-bottom: 1px solid var(--filo);
}
.band--dark .head { border-bottom-color: var(--filo-scuro); }
.head-main > *:last-child,
.head-side > *:last-child { margin-bottom: 0; }
.head-side > * + * { margin-top: var(--gap-sm); }

/* 变体一 · 标题本身是别人说的一句话（客人的评价、他们自己写的简介）：
   引文该比我们的主张再大一档，署名紧跟在它下面，右栏留给导语。 */
.head--quote .h2--quoted,
.head--quote h2 { font-size: clamp(1.95rem, 4.6vw, 3.3rem); max-width: 22ch; }

/* 变体二 · 全站那句骨架话（"别挑，交给 Pippo"）只出现在它自己那一节，
   所以那一节的标题放到最大，导语靠一条赤陶竖线吊在标题脚下。 */
.head--claim h2 { font-size: clamp(2.1rem, 5.4vw, 3.9rem); max-width: 15ch; }

@media (min-width: 900px) {
  .head { grid-template-columns: 1.06fr 0.94fr; gap: var(--gap-lg); align-items: start; }
  /* 等宽小字的行高比标题小，首行基线天生偏高；补一档最小间距对齐光学基线 */
  .head-side { padding-top: var(--gap-xs); }
  .head--quote { grid-template-columns: 1.24fr 0.76fr; }
  .head--claim { grid-template-columns: 1.42fr 0.58fr; align-items: end; }
  .head--claim .head-side {
    padding-top: 0;
    border-left: 2px solid var(--terracotta);
    padding-left: var(--gap-md);
  }
}

/* 两栏：图与文。默认顶对齐——居中对齐会把标题→正文的阅读流拆开，
   在栏头留出一块不属于任何东西的空白。正文栏短于图栏时，空只许落在栏尾
   （读作自然收尾）。确实该居中的（图 × 单条引语，没有阅读流可拆）显式标 --center。 */
.split {
  display: grid; gap: var(--gap-lg);
  align-items: start;
  margin-top: var(--gap-lg);
}
.split--center { align-items: center; }
.split-text > *:last-child { margin-bottom: 0; }
.split-figure img { border: 1px solid var(--filo); }
.band--dark .split-figure img { border-color: var(--filo-scuro); }

/* 收在文字栏里的图：它是这段话的证物，不是这一节的主角，所以跟着栏宽走。 */
.figure-inline { margin-top: var(--gap-md); }
.figure-inline img { width: 100%; border: 1px solid var(--filo); }

/* 一节里唯一的主角图：不铺满版心，两侧留等宽的余量收住它。
   等宽 = 有边界；铺满版心的巨图连着来十张，尺寸就没有对比可言了。
   收窄只在宽屏做——手机上屏幕本来就窄，再留两条边这张拼盘就看不清是什么了。 */
.figure-plate { margin: var(--gap-lg) auto 0; }
.figure-plate img { width: 100%; border: 1px solid var(--filo); }
.figure-plate .figcap { text-align: center; }

/* 整幅横断：全页只用一次，留给"店和主教座堂在同一张照片里"那张。
   它是这一页唯一的尺寸高点，用第二次就不是高点了。 */
.bleed { margin: var(--gap-lg) calc(50% - 50vw) 0; }
.bleed img {
  width: 100vw; max-width: none;
  max-height: 480px; object-fit: cover; object-position: center 45%;
}
.bleed .figcap {
  max-width: var(--wrap); margin-left: auto; margin-right: auto;
  padding: 0 var(--gutter);
}

/* =========================== 引语 =========================== */

.quote { margin: var(--gap-md) 0 0; }
.quote blockquote {
  margin: 0;
  font-family: var(--body); font-style: italic;
  font-size: 1.16rem; line-height: 1.55;
}
.quote figcaption {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--castagno); margin-top: var(--gap-xs);
}
/* 客人的话署名，店家的话不署名——网站本来就是店家的嘴，给自己的话标出处
   等于在自己的门面上贴脚注。所以两种引语的版式也不同：客人的靠一条竖线，
   店家的直接放大成一句话。 */
.quote--guest { border-left: 2px solid var(--tufo); padding-left: 1.1rem; }
/* 意语的客评与老板的回信只在英文版下多一行直译：原话留在上面不动，
   译文用等宽小字排在下面，一眼分得清哪句是原话、哪句是我们给的意思。 */
.gloss {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.6;
  color: var(--castagno); margin: var(--gap-xs) 0 0;
}
.band--dark .gloss { color: var(--calce-tenue); }
.quote--house blockquote {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  font-size: 1.35rem; color: var(--castagno);
}
.head-side .quote { margin-top: 0; }
.head-side .quote--house blockquote { font-size: clamp(1.25rem, 2.3vw, 1.55rem); }
.quote--big { margin: var(--gap-lg) 0 0; text-align: center; }
.quote--big blockquote { font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1.3; }
/* 居中的那两条客评不要左侧竖线：线在最左、字在中间，两者对不上任何一条边。
   居中版本改用上方一道短横线收口。 */
.quote--center {
  text-align: center; margin-top: var(--gap-lg);
  border-left: none; padding-left: 0;
  border-top: 1px solid var(--tufo);
  max-width: 52ch; margin-left: auto; margin-right: auto; padding-top: var(--gap-md);
}
.quote--center blockquote { max-width: 46ch; margin: 0 auto; }
.band--dark .quote figcaption { color: var(--calce-tenue); }

/* =========================== 3 · 三件证物 =========================== */

/* 同一句话的三次真实出现，摆成陈列。两句引文叠在左栏、黑板照单占右栏：
   引文卡有多少字就多高，不去为了对齐把一行字撑成一个空盒子——
   空盒子比不齐更难看。两栏的总高本来就差不多，不必强求。 */
.proofs {
  display: grid; gap: var(--gap-md);
  grid-template-columns: 1fr;
  align-items: start;
  margin-top: var(--gap-lg);
}
.proof-stack { display: grid; gap: var(--gap-md); align-content: start; }
.proof {
  border: 1px solid rgba(102, 78, 63, 0.4);
  background: rgba(222, 218, 207, 0.55);
  padding: var(--gap-md);
}
.proof-label {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cotto-scuro);
  margin: 0 0 var(--gap-sm); padding-bottom: var(--gap-xs);
  border-bottom: 1px solid rgba(102, 78, 63, 0.28);
}
.proof-quote {
  margin: 0; font-style: italic; font-size: 1.32rem; line-height: 1.4;
}
/* 黑板照裁成横条并把取景推到上半幅：那块牌子本来只占原片的上三分之一，
   裁掉底下的红布和蒜辫之后，"Ci Pensa... Pippo" 这几个字才是画面的主体。
   只裁不改——牌子上的字一个像素都没动过。 */
.proof--img img {
  width: 100%; aspect-ratio: 1.97 / 1;
  object-fit: cover; object-position: center 20%;
}
.proof-dish {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 0;
  font-size: 1.15rem; margin: var(--gap-sm) 0 0.2rem;
}
.proof-desc { font-size: 0.98rem; color: var(--castagno); margin: 0; }

/* =========================== 4 · 一只 porchetta 的三种去处 =========================== */

.routes { list-style: none; margin: 0 0 var(--gap-md); padding: 0; }
.routes li {
  display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.9rem;
  padding: 0.7rem 0; border-top: 1px solid rgba(102, 78, 63, 0.28);
  align-items: baseline;
}
.routes li:last-child { border-bottom: 1px solid rgba(102, 78, 63, 0.28); }
.route-label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--cotto-scuro);
}
.route-dish { font-size: 1.02rem; }

/* =========================== 5 · 菜单 =========================== */

/* 价格说明放在读者第一次遇到菜名之前——读到第三道菜才去找解释是没用的。
   它排在报头右栏导语的下面，所以先读到它，再往下才是菜名。 */
.note-inline {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--cotto-scuro);
  border: 1px solid rgba(161, 100, 69, 0.5);
  display: inline-block; padding: 0.5rem 0.85rem; margin-bottom: 0;
}

.menu-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-lg);
  margin-top: var(--gap-lg);
}
.menu-block h3 {
  padding-bottom: var(--gap-xs); margin-bottom: var(--gap-sm);
  border-bottom: 1px solid var(--castagno);
}
.menu-block ul { list-style: none; margin: 0; padding: 0; }
.menu-block li { margin-bottom: var(--gap-sm); }
.menu-block li:last-child { margin-bottom: 0; }

/* 方言俏皮话是菜单上真正的声音，所以它排在菜名之上、用引语的斜体 */
.quip {
  font-style: italic; font-size: 1.02rem; line-height: 1.45;
  color: var(--cotto-scuro); margin: 0 0 0.15rem;
}
.dish {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 24, "SOFT" 40, "WONK" 0;
  font-size: 1.16rem; line-height: 1.3; margin: 0;
}
.desc { font-size: 0.98rem; color: var(--castagno); margin: 0.2rem 0 0; }

.trio {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-md);
  margin-top: var(--gap-lg);
}
.trio figure { margin: 0; }
/* 三张菜品照统一竖幅同高：比例一致，底边才会落在同一条线上，
   图注也才排得齐——不齐的底边会在右下角留一块没边界的空。 */
.trio img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border: 1px solid var(--filo); }

.km0 {
  margin-top: var(--gap-lg);
  border-top: 1px solid var(--castagno);
  padding-top: var(--gap-md);
  display: grid; grid-template-columns: 1fr; gap: var(--gap-md);
}
.km0-claim {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0 0 var(--gap-xs);
}
.km0-list {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--castagno); margin: 0;
}
.km0-mission { max-width: 60ch; font-style: italic; color: var(--castagno); margin: 0; }

/* =========================== 6 · 两块酒祷木牌 =========================== */

/* 两块牌子是两件不同的实物，一块竖长一块横宽。不统一比例是有意的：
   统一就要裁字，而这两块牌子的全部价值就在那几行字。左右互换构成"双联"。 */
.prayer {
  display: grid; gap: var(--gap-lg);
  align-items: start;
  margin-top: var(--gap-lg);
}
.prayer-figure { margin: 0; }
.prayer-figure img {
  width: 100%; border: 1px solid rgba(102, 78, 63, 0.35);
}
.prayer-title {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 40, "WONK" 1;
  font-size: 1.5rem; letter-spacing: 0.02em; margin: 0 0 var(--gap-xs);
}
/* 转录是这一节的排印作品，不是照片的备注：字号接近导语档、行距收紧，
   文字块才有和照片对话的分量——小字匀速吊在宽栏里读起来像备注。
   斜体仍是 EB Garamond：这是店家的话，引语字体不换角色。
   段与段之间用 --gap-sm，段的划分按祷文自身的呼吸，不是均分。 */
.prayer-body {
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.3rem);
  line-height: 1.52;
  color: var(--castagno); margin: 0 0 var(--gap-sm);
}
.prayer-pull {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  font-size: clamp(1.25rem, 2.8vw, 1.7rem); line-height: 1.35;
  color: var(--inchiostro);
  border-top: 1px solid var(--terracotta);
  border-bottom: 1px solid var(--terracotta);
  padding: var(--gap-xs) 0; margin: 0 0 var(--gap-xs);
}
.prayer-gloss, .prayer-note {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.6;
  letter-spacing: 0.02em; color: var(--castagno); margin: 0 0 var(--gap-xs);
}
.prayer-text > *:last-child { margin-bottom: 0; }

/* 祷文对照双栏（原文 × 直译）：每段原文与它的直译同一 grid 行、顶对齐——
   两栏各自流会让段起始线越往下越漂。直译用全站「直译小注」的同一门语言
   （mono 小字），是给英语读者的真功能，不是装饰。 */
.prayer-duet {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: var(--gap-lg); align-items: start;
}
.prayer-en {
  font-family: var(--mono); font-size: 0.78rem; line-height: 2.06;
  letter-spacing: 0.01em; color: var(--castagno);
  margin: 0 0 var(--gap-sm);
}
@media (max-width: 760px) {
  .prayer-duet { grid-template-columns: 1fr; }
  .prayer-en { display: none; }  /* 手机上只留原文，小屏双栏会挤碎 */
}

/* =========================== 7 · 墙 =========================== */

/* 不拆成等尺寸网格：那面墙的价值就在密集和不齐。左栏一整条，右栏两张方的，
   两栏底边落在同一条线上。左边那张原片底部是一台取暖器，裁掉之后
   照片墙本身占满整幅，两栏的高度也正好配平。 */
.walls {
  display: grid; grid-template-columns: 1fr; gap: var(--gap-md);
  margin-top: var(--gap-lg);
}
.walls figure { margin: 0; }
.walls img { width: 100%; border: 1px solid var(--filo); }
.wall-pair { display: grid; gap: var(--gap-md); }

.self-desc {
  font-family: var(--body); font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.45;
  max-width: 44ch; margin: var(--gap-sm) 0 0;
}

/* =========================== 8 · 晚上 =========================== */

.reels {
  margin-top: var(--gap-md);
  border-left: 2px solid var(--cotto-chiaro);
  padding-left: 1.3rem;
}
.reel-quote {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.35;
  margin: 0 0 var(--gap-xs);
}
.reel-note {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--calce-tenue); margin: var(--gap-xs) 0 0;
}
/* 两栏的宽度是按各自照片的比例算出来的：竖幅的窄一点、横幅的宽一点，
   两张的下沿因此落在同一条线上。右栏的照片下面接着放晚上的两句话，
   把这一栏补到和左栏一样高——不然图短的那一侧下面会空掉一大块。 */
.split--sera { grid-template-columns: 1fr; }
.sera-side > *:last-child { margin-bottom: 0; }

/* =========================== 9 · 往复对话 =========================== */

/* 版心收窄到读一段对话该有的宽度：满幅排的话，左右两条气泡各占一半、
   中间永远空着一条，读起来像两列各说各的，而不是一来一往。 */
.exchanges { margin-top: var(--gap-lg); max-width: 900px; margin-inline: auto; }
.exchange {
  padding-bottom: var(--gap-lg); margin-bottom: var(--gap-lg);
  border-bottom: 1px solid rgba(211, 207, 197, 0.22);
}
.exchange:last-child { border-bottom: none; margin-bottom: 0; }
.msg--house {
  margin-left: auto; text-align: right; margin-top: var(--gap-sm);
  border-right: 2px solid var(--cotto-chiaro); padding-right: 1.1rem;
}
.msg--guest { border-left: 2px solid rgba(211, 207, 197, 0.4); padding-left: 1.1rem; }
.msg-who {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--calce-tenue); margin: 0 0 var(--gap-xs);
}
.msg--house .msg-who { color: var(--cotto-chiaro); }
.msg-text { font-style: italic; font-size: 1.08rem; line-height: 1.55; margin: 0; }

.slogan {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
  font-size: clamp(1.9rem, 5vw, 3.25rem); line-height: 1.15;
  text-align: center; margin: var(--gap-lg) 0 0;
}
.slogan-gloss {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-align: center; color: var(--calce-tenue); margin: var(--gap-xs) 0 0;
}

/* =========================== 10 · 位置与信息 =========================== */

/* 照片下面分两栏：左边是客人写的那句"逛完主教座堂顺路来吃"和一行寄货说明，
   右边是地址电话邮箱。两件事一件是理由、一件是办法，并排放高度也才配平。 */
.dove-foot {
  margin-top: var(--gap-lg);
  border-top: 1px solid var(--castagno);
  padding-top: var(--gap-md);
  display: grid; grid-template-columns: 1fr; gap: var(--gap-lg);
}
.dove-say > *:last-child { margin-bottom: 0; }
.dove-say .quote { margin-top: 0; }

.info { display: grid; grid-template-columns: 1fr; gap: var(--gap-md); }
.info-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cotto-scuro); margin: 0 0 var(--gap-xs);
}
/* 地址与时间是数据不是引语，所以用正文的正体——斜体在这一页只归引语 */
.info-value { font-size: 1.1rem; line-height: 1.5; margin: 0; }
.info-value a, .info-extra a, .foot-line a {
  color: var(--cotto-scuro); text-decoration: none;
  border-bottom: 1px solid rgba(161, 100, 69, 0.5);
  display: inline-block; min-height: 44px; line-height: 44px;
  transition: border-color 0.18s ease, color 0.18s ease;
}
.info-value a:hover, .info-extra a:hover, .foot-line a:hover {
  color: var(--inchiostro); border-bottom-color: var(--inchiostro);
}
.info-extra { font-size: 0.95rem; color: var(--castagno); margin: 0.35rem 0 0; }

.shipping {
  margin: var(--gap-md) 0 0;
  font-family: var(--display); font-weight: 500;
  font-variation-settings: "opsz" 48, "SOFT" 60, "WONK" 1;
  font-size: clamp(1.2rem, 2.6vw, 1.55rem);
}
.shipping-info {
  display: block; font-family: var(--mono); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.08em; color: var(--castagno);
  margin-top: var(--gap-xs);
}

/* =========================== 页脚 =========================== */

.foot {
  background: var(--inchiostro); color: var(--calce);
  padding: var(--gap-lg) 0;
}
.foot-name {
  font-family: var(--display); font-weight: 600;
  font-variation-settings: "opsz" 36, "SOFT" 40, "WONK" 1;
  font-size: 1.4rem; margin: 0 0 var(--gap-xs);
}
.foot-line, .foot-credit {
  font-family: var(--mono); font-size: 0.74rem; line-height: 1.7;
  letter-spacing: 0.03em; color: var(--calce-tenue); margin: 0;
}
.foot-line a { color: var(--calce); border-bottom-color: rgba(211, 207, 197, 0.4); }
.foot-line a:hover { color: var(--cotto-chiaro); border-bottom-color: var(--cotto-chiaro); }
.foot-credit { margin-top: var(--gap-sm); }

/* =========================== 断点 =========================== */

/* 手机优先：以上全部是窄屏的样子，下面才往上加宽 */

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--calce); border-bottom: 1px solid var(--castagno);
    padding: 0.5rem var(--gutter) 1rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { min-height: 48px; }
  .lang-switch { margin-top: 0.6rem; width: 100%; }
  .nav { position: relative; flex-wrap: wrap; }
}

@media (min-width: 720px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .info { grid-template-columns: repeat(2, 1fr); gap: var(--gap-md) var(--gap-lg); }
  .proofs { grid-template-columns: 1fr 1fr; }
  .km0 { grid-template-columns: 1fr 1fr; gap: var(--gap-lg); }
  /* 一来一往的两条气泡各占版心的三分之二，中间叠着的那一段就是"对话"的样子 */
  .msg { max-width: 68%; }
}

/* 平板这一段还是单栏，但栏宽已经接近整屏：照片如果跟着栏宽走，
   每一张都变成一整屏的插页，翻起来比手机还长。所以在这一段里
   给照片一个上限并居中——两边余量等宽，是它的边界。首屏那张不收，
   它本来就该占满。 */
@media (min-width: 720px) and (max-width: 899px) {
  .split-figure, .figure-inline, .prayer-figure,
  .wall-tall, .wall-pair figure, .figure-plate {
    max-width: 78%; margin-inline: auto;
  }
}

@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr 1.08fr; align-items: center; }
  .hero-figure { order: 2; }
  .hero-text { order: 1; }

  .split--text-left { grid-template-columns: 1.15fr 0.85fr; }
  .split--fig-left  { grid-template-columns: 0.85fr 1.15fr; }
  .split--fig-left .split-figure { order: 1; }
  .split--fig-left .split-text   { order: 2; }
  /* porchetta：左边一张竖幅整只，右边是它的三种去处，末尾接切片上板那张，
     两栏因此差不多高——短的那一栏不会在下面留出一块黑洞。 */
  .split--porchetta { grid-template-columns: 1fr 1fr; }
  /* 陶土杯那张是佐证小图，占三分之一就够；旁边只有一条引语，
     上下空隙对称，是这一页唯一用居中对齐的地方。 */
  .split--cup { grid-template-columns: 0.52fr 1.48fr; }

  /* 宽屏才把这张主角图两边收进来：留出的余量左右等宽，是它的边界 */
  .figure-plate { max-width: 68%; }

  /* 左栏一整条竖幅，右栏两张方的：55/45 这两个数不是拍的，
     是让左栏的高度正好等于右栏两张方图加中间的缝。 */
  .walls { grid-template-columns: 55fr 45fr; }
  .wall-tall img { aspect-ratio: 515 / 890; object-fit: cover; object-position: center top; }

  .prayer--fig-left  { grid-template-columns: 0.62fr 1.38fr; }
  .prayer--fig-right { grid-template-columns: 1.1fr 0.9fr; }
  .prayer--fig-right .prayer-text   { order: 1; }
  .prayer--fig-right .prayer-figure { order: 2; }

  /* 竖幅 787/590 与横幅 475/634 两张照片，按各自比例分栏宽就能同高收尾 */
  .split--sera { grid-template-columns: 0.87fr 1.13fr; }

  .info { grid-template-columns: repeat(2, 1fr); }
  .dove-foot { grid-template-columns: 0.88fr 1.12fr; }
  .msg--guest { margin-right: auto; }
}

@media (min-width: 1100px) {
  .menu-grid { column-gap: 4rem; }
}

/* 页面上没有任何自动播放的动效——这家店的手工感由照片里的实物承担，
   模拟出来的运动只会跟实物抢戏。这里只关掉 hover 的过渡与平滑滚动，
   给把动效设为"减少"的访客一个完全静止的页面，内容一字不少。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}