@charset "UTF-8";
/* ==========================================================================
   Quanto Basta Cortona — styles.css  (v2, 2026-08-08 整站重做)
   为 Quanto Basta 单独设计，非模板套用。

   v2 与 v1 的三处根本差别（v1 只是把内容陈列出来，没有叙事）：
   1. **主装置 il filo**：一条 1px 橙线穿过九拍——hero 落下 → 每个 h2 下折成下划线 →
      菜单里分叉成 22 条价格引导点 → 全宽图上消失、图后原位接上 → 结尾收成实心点。
      页面不是九个盒子并排，是一条线上的九站。线的 x 坐标 = `.wrap` 左边界（全站同一条），
      内容统一右移 --filo-inset，于是"线在左、内容在右"这个关系本身成为版式骨架。
   2. **橙色纪律**：Neon Orange #E8632A **只属于这条线**。按钮用 Ink，强调用 Petrol/Ochre。
      唯一例外是店家自己的 logo 位图（qb-mark/qb-lockup）——那是他们的标识实物，
      不是我们施加的强调色；而且线从标下方落下，标是橙的反而让装置的出处更清楚。
   3. **字体换血**：v1 的 Oswald 是压缩体全大写无衬线 = 路牌与标签的形状，九个标题竖排
      下来天生读作九个抽屉标签——排版本身在制造陈列感。v2 三款：
      Fraunces（display+正文，可变 opsz 让同一款字在 96px 与 15px 各是对的形状）、
      Newsreader Italic（只给店方原话与意语引语，编辑体斜体 = 报刊引语的声音）、
      JetBrains Mono（q.b. 系统 / 价格 / eyebrow，对应他们字标的打字机形态）。
      家族数 = 3——克制到每一款都说得出它的职务。

   对比度：所有前景/背景组合按 WCAG 实算过。品牌橙在两种底色上都不到 4.5:1，
   因此**全站没有一个橙色文字**——橙只出现在 1px 线与那个终点圆点上（纯图形，不受文本判据约束）。
   ========================================================================== */

/* ---------- 字体：只带选中的 3 个文件，声明数必须 == fonts/ 目录实有文件数（多一条声明就是一次拉不到的请求） ---------- */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;              /* 可变轴范围，按文件 fvar 实测声明；窄了会把轴钳死 */
  font-display: swap;
  src: url("fonts/fraunces-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;                /* 文件本身就是 Italic 面，用它必须写 font-style:italic */
  font-weight: 200 800;
  font-display: swap;
  src: url("fonts/newsreader-italic-var.woff2") format("woff2-variations");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var.woff2") format("woff2-variations");
}

:root {
  /* --- 调色板（逐个注明取自哪张实拍的什么元素） --- */
  --petrol:    #1F5559;   /* 主厅墨绿软包椅椅背 */
  --ochre:     #D9992B;   /* 同图芥末黄软包椅椅面 */
  --orange:    #E8632A;   /* You are Winederful 霓虹管 / 门头 q·b 橙字 —— 只给 il filo */
  --ink:       #2B3138;   /* 门头招牌深蓝黑底板（偏蓝，不是纯黑） */
  --limestone: #C4B49A;   /* 主厅粗石墙受光面 */
  --terracotta:#C2653C;   /* 赤陶地砖中间调 —— 只做大面积底，绝不当 accent */
  --bone:      #F2EDE4;   /* 夏季菜单封面底色 */

  /* 派生值：只由上面 7 个混出来，不引入第八种颜色 */
  --tint:      #E7DED0;   /* bone × limestone ≈35%，客人区底色 */
  --sand:      #EDE3D7;   /* bone × terracotta ≈8%，收束区底色 */
  --muted:     #56504A;   /* 浅底上的次级文字，实测 6.8:1 */
  --muted-d:   #C4B49A;   /* 深底上的次级文字 = limestone，实测 6.8:1 */
  --hair:      rgba(43,49,56,.15);
  --hair-d:    rgba(196,180,154,.22);

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --quote:   "Newsreader", Georgia, "Times New Roman", serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --header-h: 60px;
  --gutter: 1.15rem;
  /* il filo 的内容缩进：线在 x=0，内容从这里开始。全站唯一的横向骨架尺寸 */
  --filo-inset: clamp(1.1rem, 3vw, 3.1rem);
  /* 每一拍的上下呼吸。线靠它把相邻两拍接上（见 .filo::before 的 top/bottom 负值） */
  --beat-pad: clamp(3.4rem, 7vw, 6.2rem);
  --mark-h: 36px;
}

@media (min-width: 720px) { :root { --gutter: 1.6rem; --mark-h: 56px; } }

/* ---------- 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "opsz" 14;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.68;
  overflow-x: hidden;          /* 保险丝：全宽段落用 100vw 时不该出横向滚动 */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }

h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.06; }
h1 {
  font-size: clamp(2.45rem, 7vw, 4.4rem);
  font-weight: 600; font-variation-settings: "opsz" 120;
  letter-spacing: -.014em;
}
h2 {
  font-size: clamp(1.85rem, 4.4vw, 2.95rem);
  font-weight: 500; font-variation-settings: "opsz" 72;
  letter-spacing: -.011em; line-height: 1.08;
}
h3 {
  font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  font-weight: 600; font-variation-settings: "opsz" 24;
  letter-spacing: .006em;
}

em, i { font-family: var(--quote); font-style: italic; font-weight: 400;
        font-variation-settings: "opsz" 20; font-size: 1.06em; }

.qb { font-family: var(--mono); font-weight: 600; font-size: .92em; letter-spacing: -.02em; }

.wrap { width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* i18n：默认全隐，由 body.lang-xx 打开对应一侧（模板机制，成对出现） */
.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; }
/* 菜单英文副行在 EN 模式下必须换行成块，否则会挤在意语菜名后面读不出来 */
body.lang-en .i18n.en.de { display: block; }

/* ==========================================================================
   IL FILO —— 全站唯一的连接装置
   ========================================================================== */

/* 每一拍：线从上一拍接进来、贯穿本拍、交给下一拍。
   top/bottom 取 --beat-pad 的负值 = 恰好铺满 section 的上下内边距，两拍在边界处严丝合缝。 */
.filo { position: relative; padding-left: var(--filo-inset); }
.filo::before {
  content: ""; position: absolute; left: 0; width: 1px;
  top: calc(-1 * var(--beat-pad));
  bottom: calc(-1 * var(--beat-pad));
  background: var(--orange);
}
/* 收束拍：线止于 .wrap 下缘，紧接着是那个实心点 */
.filo--stop::before { bottom: 0; }

/* h2 处折 90°：线抵达 → 折成标题的下划线（长度 = 标题宽）→ 竖线继续下行 */
.beat h2 {
  position: relative;
  width: fit-content; max-width: 22ch;
  padding-bottom: .34em; margin-bottom: .7rem;
}
.beat h2::after {
  content: ""; position: absolute;
  left: calc(-1 * var(--filo-inset)); right: 0; bottom: 0;
  height: 1px; background: var(--orange);
}

/* 结尾：线收成一个实心圆点，落在 «Serve solo quanto basta.» 前面 */
.filo-dot {
  position: absolute; left: 0; top: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--orange);
  transform: translate(calc(-50% + .5px), -1px);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(242,237,228,.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--hair);
}
.nav {
  width: min(100% - 2 * var(--gutter), 1180px); margin-inline: auto;
  min-height: var(--header-h);
  display: flex; align-items: center; gap: 1rem;
}
.brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; margin-right: auto; }
.brand-mark { width: 30px; height: auto; }
.brand-name {
  font-family: var(--mono); font-weight: 600; font-size: .78rem;
  letter-spacing: .04em; line-height: 1.15; display: flex; flex-direction: column;
}
.brand-city { font-weight: 400; font-size: .66rem; letter-spacing: .3em; color: var(--muted); }

.nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.15rem; }
.nav-links a {
  text-decoration: none; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .02em; color: var(--muted); padding: .35rem 0;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--petrol); }
.nav-cta {
  color: var(--bone) !important; background: var(--ink);
  padding: .62rem .9rem !important; letter-spacing: .08em; font-weight: 600;
  border-bottom: 0 !important;
  /* 实测 115×34，高度不足触控下限 */
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav-cta:hover { background: var(--petrol); }
.lang-switch {
  font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  background: none; border: 1px solid var(--hair); color: var(--muted);
  padding: .42rem .55rem; cursor: pointer;
  /* 44 是 WCAG 触控下限，原为 32 */
  min-width: 44px; min-height: 44px;
}
.lang-switch:hover { color: var(--ink); border-color: var(--ink); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer;
  /* 原 padding .6rem 实测 41×42，差一点点——直接写死 44×44 不靠 padding 凑 */
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center; flex-direction: column;
}
.nav-toggle .bar { display: block; width: 22px; height: 1.5px; background: var(--ink); margin: 4.5px 0; }

@media (max-width: 899px) {
  .nav { flex-wrap: wrap; }
  /* 没有 JS 时导航必须是展开的（无 JS 时页面也要能用），所以「折叠」由 .js 类开关，不写死在这里 */
  .js .nav-links { display: none; width: 100%; }
  .js .nav-links.open { display: flex; }
  .nav-links { flex-wrap: wrap; gap: .55rem 1.1rem; padding-bottom: .9rem; }
  /* 移动端展开后每一项都是触控目标，34px 高不够。padding 提到 .68rem 使行高 ≥44px */
  .nav-links a { font-size: .82rem; padding: .68rem 0; min-height: 44px; display: flex; align-items: center; }
  .nav-links .nav-cta { justify-content: center; padding: .68rem .8rem !important; }
  .nav-toggle { display: flex; margin-left: auto; }
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: min(93vh, 800px);
  display: flex; align-items: flex-end;
  padding-block: calc(var(--header-h) + 2rem) clamp(2.4rem, 6vw, 4rem);
  background: var(--ink);
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-veil {
  position: absolute; inset: 0;
  /* 两道幕布分工：横向那道压住左侧文字栏，纵向那道压住下半屏（h1 与 CTA 都在那儿），
     右上角两道都最弱 —— 石拱、酒架、铜盘因此仍然读得出来，而这张图上站的全部理由就是它们。
     数值不是拍脑袋：按 h1 包围盒里**最不利的那个像素**采样实测——
     先前一版 .74/.46 在 1280px 只拿到 1.68:1，而文字对比度下限是 3.0。 */
  background:
    linear-gradient(to right, rgba(23,27,32,.90) 0%, rgba(23,27,32,.82) 42%, rgba(23,27,32,.54) 72%, rgba(23,27,32,.22) 100%),
    linear-gradient(to top, rgba(23,27,32,.74) 0%, rgba(23,27,32,.36) 42%, rgba(23,27,32,0) 72%);
}
.hero-body { position: relative; padding-left: var(--filo-inset); color: var(--bone); }

.hero-mark {
  position: absolute; left: 0; top: 0;
  width: var(--mark-h); height: auto;
  transform: translateX(-50%);
}
/* 设计时刻一的起点：线从 q·b 标下方落下，穿出首屏下缘（暗示"下面还有"） */
.filo-drop {
  position: absolute; left: 0;
  top: calc(var(--mark-h) * .92 + .55rem);
  bottom: -320px; width: 1px; background: var(--orange);
  transform-origin: top;
  animation: filo-fall 1.15s cubic-bezier(.32,.06,.24,1) 1.25s both;
}
@keyframes filo-fall { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* q.b. 打字机：对应他们字标的打字机形态，不是借来的效果。只在首次载入播一次。
   完整文本始终在 DOM 里（无 JS 与爬虫都读得到），动效只改 width。 */
.type { margin: 0 0 .35rem; padding-top: calc(var(--mark-h) * .18); }
.type-txt {
  display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(.82rem, 2.3vw, 1rem); letter-spacing: .04em;
  color: var(--bone);
  /* "q.b. = quanto basta" 恰 19 字符（等宽）——但 letter-spacing 每字加 .04em，
     只写 19ch 会把最后一个 a 切掉（实测踩过），所以补上 19×.04em ≈ .8em */
  width: calc(19ch + .8em);
  border-right: 2px solid rgba(242,237,228,.85);
  animation: type .95s steps(19, end) .3s both, caret .7s step-end 6 .3s, caret-off .01s 4.5s both;
}
@keyframes type { from { width: 0; } to { width: calc(19ch + .8em); } }
@keyframes caret { 50% { border-right-color: transparent; } }
@keyframes caret-off { to { border-right-color: transparent; } }

.type-gloss {
  font-family: var(--mono); font-size: .74rem; line-height: 1.6;
  letter-spacing: .01em; color: var(--limestone);
  max-width: 34ch; margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
}

.hero h1 { color: var(--bone); text-wrap: balance; }
.hero-sub {
  font-family: var(--quote); font-style: italic; font-weight: 300;
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.15rem, 2.7vw, 1.62rem); line-height: 1.42;
  color: var(--bone); margin: .9rem 0 1.4rem; max-width: 30ch;
}
.hero-facts {
  font-family: var(--mono); font-size: .73rem; letter-spacing: .085em; line-height: 1.85;
  text-transform: uppercase; color: var(--limestone); margin: 0 0 1.5rem; max-width: 38ch;
}
.hero-facts .sep { opacity: .55; padding: 0 .2rem; }

.hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 600; letter-spacing: .09em;
  padding: .92rem 1.5rem; text-decoration: none; min-height: 46px;
  border: 1px solid transparent; transition: background .18s, color .18s, border-color .18s;
}
.btn-solid { background: var(--ink); color: var(--bone); }
.btn-solid:hover { background: var(--petrol); }
.btn-ghost { border-color: rgba(242,237,228,.55); color: var(--bone); font-weight: 400; }
.btn-ghost b { font-weight: 600; }
.btn-ghost:hover { border-color: var(--bone); background: rgba(242,237,228,.1); }

/* ==========================================================================
   拍（beat）通用
   ========================================================================== */
.beat { padding-block: var(--beat-pad); scroll-margin-top: calc(var(--header-h) + 8px); }
.beat-dark { background: var(--ink); color: var(--bone); }
.beat-tint { background: var(--tint); }
.beat-final { background: var(--sand); }

.eyebrow {
  font-family: var(--mono); font-size: .72rem; font-weight: 400;
  letter-spacing: .075em; color: var(--muted);
  margin: 0 0 clamp(.9rem, 2.2vw, 1.3rem);
}
.eyebrow b { font-weight: 700; color: var(--ink); letter-spacing: .02em; }
.beat-dark .eyebrow { color: var(--muted-d); }
.beat-dark .eyebrow b { color: var(--bone); }

/* h2 下面那行：意语版是原话的续句，英语版是译文。两者都是 .i18n 成对 */
.h2-en {
  font-family: var(--quote); font-style: italic; font-weight: 300;
  font-variation-settings: "opsz" 30;
  font-size: clamp(1.02rem, 2.1vw, 1.24rem); line-height: 1.5;
  color: var(--muted); max-width: 46ch; margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem);
}
.beat-dark .h2-en { color: var(--muted-d); }

/* 每一拍的开场：标题在左（线在这里折成下划线），它的续句/译文与本拍的引子在右。
   两栏是为了让开场有一条**右边界**——否则标题独占左半、右半空着，读到的不是留白是没对齐
   （留白与空白的判别式）。两列默认 stretch，底边天然齐平。 */
.beat-head {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(.9rem, 2.2vw, 1.5rem);
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
@media (min-width: 900px) {
  .beat-head { grid-template-columns: 1.02fr .98fr; gap: clamp(1.8rem, 4vw, 3.4rem); }
  /* 必须 start：grid 默认 stretch 会把 h2 的盒子拉到整行高，
     而下划线是 h2::after 的 bottom:0——盒子一拉高，线就掉到标题下面老远（实测踩过）。
     两列高度不等留下的空隙由标题那条橙线收边，是有边界的留白。 */
  .beat-head > * { align-self: start; }
  .beat-head h2 { margin-bottom: 0; }
}
.beat-head .h2-en { margin-bottom: .85rem; }
.beat-head-side > :last-child { margin-bottom: 0; }
.beat-head-side .lede p:last-child { margin-bottom: 0; }
/* 标题与它的续句同在左栏时（ospiti），h2 的下边距要留回来 */
.beat-head-title h2 { margin-bottom: .7rem; }

/* 菜单开场的事实条：直接回答"这份菜单里有什么"，也是这一页和那三份要下载的 PDF 的差别 */
.factstrip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .45rem; }
.factstrip li {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .03em;
  border: 1px solid var(--hair); padding: .3rem .6rem; color: var(--muted);
}

.prose p { max-width: 62ch; }
.lede p { max-width: 58ch; font-size: 1.09rem; }

/* 引语：报刊斜体，不是博物馆展签。出处只留读者需要的署名行。 */
.say { margin: 0; }
.say blockquote { margin: 0; }
.say blockquote p {
  font-family: var(--quote); font-style: italic; font-weight: 300;
  font-variation-settings: "opsz" 44;
  font-size: clamp(1.12rem, 2.3vw, 1.45rem); line-height: 1.44;
  color: var(--petrol); margin: 0 0 .6rem; max-width: 34ch;
  border-left: 0;
}
.say figcaption {
  font-family: var(--mono); font-size: .705rem; line-height: 1.65;
  letter-spacing: .02em; color: var(--muted); max-width: 44ch;
}
.say-sm blockquote p { font-size: clamp(1rem, 1.9vw, 1.14rem); }
.say-dark blockquote p { color: var(--bone); }
.say-dark figcaption { color: var(--muted-d); }
.say-wide blockquote p { max-width: 44ch; }

figure { margin: 0; }
figcaption {
  font-family: var(--mono); font-size: .7rem; line-height: 1.6;
  letter-spacing: .015em; color: var(--muted); margin-top: .6rem;
}
.beat-dark figcaption { color: var(--muted-d); }
.fc-en { display: block; }

/* ==========================================================================
   2 · DUE ANIME —— 设计时刻二（局部装置，只在这一块）
   ========================================================================== */
.anime {
  position: relative; z-index: 1;                 /* 盖住 .filo::before：线在面板处消失 */
  margin: clamp(2rem, 4.5vw, 3.2rem) 0;
  margin-left: calc(-1 * var(--filo-inset));      /* 向左盖过 spine */
  background: var(--limestone);
  display: grid; grid-template-columns: 1fr 1fr;
}
.anime-half { padding: clamp(1.5rem, 3vw, 2.3rem) clamp(1.25rem, 2.6vw, 2rem); }
.anime-tosca { background: var(--limestone); color: var(--ink); }
.anime-cala  { background: var(--ink); color: var(--bone); }

.anime-k {
  font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 48;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem); line-height: 1; margin: 0 0 .3rem;
  letter-spacing: -.012em;
}
.anime-s {
  font-family: var(--mono); font-size: .705rem; letter-spacing: .05em;
  margin: 0 0 1.15rem; color: var(--muted);
}
.anime-cala .anime-s { color: var(--muted-d); }
.anime-list { list-style: none; margin: 0; padding: 0; }
.anime-list li {
  font-family: var(--quote); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 22;
  font-size: 1.06rem; line-height: 1.45; padding: .3rem 0;
  border-top: 1px solid rgba(43,49,56,.14);
}
.anime-cala .anime-list li { border-top-color: rgba(242,237,228,.18); }
.anime-list li:first-child { border-top: 0; }

/* 线进面板 → 沿顶边走到中缝 → 下行 → 底边折回左侧 → 交给下面的 spine */
.anime-in, .anime-out { position: absolute; left: 0; width: 50%; height: 1px; background: var(--orange); }
.anime-in { top: 0; }
.anime-out { bottom: 0; }
.anime-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--orange); }
.anime-mark {
  position: absolute; left: 50%; top: 50%;
  width: 62px; height: auto; transform: translate(-50%, -50%);
  background: var(--limestone); padding: 8px 6px; border-radius: 50%;
}

@media (max-width: 719px) {
  .anime { grid-template-columns: 1fr; }
  .anime-seam { display: none; }
  .anime-cala { border-top: 1px solid var(--orange); }
  .anime-mark {
    position: static; transform: none; justify-self: center;
    margin: -34px 0 -20px; z-index: 2; width: 54px;
  }
  .anime-in, .anime-out { width: 100%; }
}

.storia-tail {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: clamp(2rem, 4.5vw, 3rem);
}
@media (min-width: 900px) { .storia-tail { grid-template-columns: .82fr 1.18fr; align-items: center; } }

/* 一拍的收尾句：落在一句独立宣言上（他们写文案就是这个习惯） */
.beat-close {
  font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 64;
  font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.24; letter-spacing: -.01em;
  max-width: 24ch; margin: 0 0 .55rem;
}
.beat-close em { font-size: 1.02em; }
.beat-close-src { font-family: var(--mono); font-size: .705rem; color: var(--muted); margin: 0; max-width: 52ch; }

/* 全宽呼吸段：线在图上消失，图后原位接上 */
/* storia 收尾行：他们那句「比菜更先留下印记的是故事」+ 开餐前的空场照。
   图不再独占一段、也不再放宽——它是这句话的插图，所以尺寸服从文字（~520px 显示位，
   源图 1080px 在这里是 2× 密度，锐利而安静）。文字在左、图在右，两者共用一条基线。 */
/* 纵向居中，不是底对齐：底对齐会把短的那栏拽到最下、中间空出一大块（实测 ~350px 无边界空洞）。
   居中之后余量上下对称、有边界——这就是「留白」与「空白」的差别。 */
.beat-close-row { display: grid; gap: clamp(1.4rem, 3vw, 3rem); align-items: center; margin-top: clamp(1.8rem, 4vw, 2.8rem); }
@media (min-width: 860px) { .beat-close-row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.sala-fig { margin: 0; }
.sala-fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center 45%; }
.sala-fig figcaption {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .05em; color: var(--muted);
  padding-top: .55rem;
}

/* ==========================================================================
   3 · LA CARTA
   ========================================================================== */
/* 设计时刻三：读法钥匙。刻意不对称——真相就是不对称（卡拉布里亚在菜单上只有一道菜）。 */
/* ---------- 过敏原图例（放在数字第一次出现处，不在页脚） ----------
   刻意做成"实用信息"的分量：等宽小字、无底色、只有一条上边线把它与菜单分开。
   它不该抢菜单的视线，但必须在读到第一个 (1,5,7) 之前就被看见。 */
.allerg {
  margin: clamp(1.6rem, 3.4vw, 2.4rem) 0 clamp(1.4rem, 3vw, 2rem);
  padding-top: 1rem; border-top: 1px solid var(--hair);
}
.allerg-head {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .06em;
  color: var(--muted); margin: 0 0 .6rem;
}
.allerg-list {
  list-style: none; margin: 0 0 .7rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
}
.allerg-list li {
  font-family: var(--mono); font-size: .715rem; letter-spacing: .01em; color: var(--muted);
  white-space: nowrap;
}
.allerg-list b { color: var(--petrol); font-weight: 700; margin-right: .18em; }
.allerg-note {
  font-family: var(--quote); font-style: italic; font-size: .95rem;
  color: var(--muted); margin: 0; max-width: 62ch;
}

.chiave {
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: clamp(1.3rem, 3vw, 1.9rem) 0;
  margin-bottom: clamp(2.2rem, 5vw, 3.4rem);
}
.chiave-head { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--muted); margin: 0 0 1.1rem; }
.chiave-cols { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 760px) { .chiave-cols { grid-template-columns: 1fr 1fr; gap: clamp(1.8rem, 4vw, 3.2rem); } }
.chiave-col h3 {
  font-variation-settings: "opsz" 30; font-size: clamp(1.1rem, 2.2vw, 1.32rem);
  margin-bottom: .45rem; color: var(--petrol);
}
.chiave-col-b h3 { color: var(--petrol); }
.chiave-col p { margin: 0; max-width: 46ch; }

.menu { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3.4rem); }
@media (min-width: 900px) { .menu { grid-template-columns: 1fr 1fr; } }

.course { margin-bottom: clamp(1.8rem, 3.6vw, 2.6rem); }
.course h3 {
  position: relative;
  font-family: var(--mono); font-weight: 600; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .7rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hair);
}
.course-en { font-weight: 400; letter-spacing: .08em; text-transform: none; color: var(--muted); }

.dishes { list-style: none; margin: 0; padding: 0; }
/* 线在这里分叉：22 道菜 = 22 条从菜名走到价格的橙色引导点 */
.dish {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .5rem 0; border-bottom: 1px solid rgba(43,49,56,.07);
}
.dish:last-child { border-bottom: 0; }
.dn { flex: 0 1 auto; min-width: 0; }
.alg { font-family: var(--mono); font-size: .66rem; color: var(--muted); white-space: nowrap; }
.de {
  font-family: var(--mono); font-size: .69rem; line-height: 1.55;
  color: var(--muted); margin-top: .18rem;
}
.lead {
  flex: 1 1 1.2rem; min-width: .9rem; align-self: baseline;
  border-bottom: 1px dotted var(--orange); transform: translateY(-.3em);
}
.dp {
  flex: 0 0 auto; font-family: var(--mono); font-weight: 600; font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.dp::before { content: "€ "; font-weight: 400; color: var(--muted); }

/* struncatura 旁注：他们自己写这道菜时说的话 */
.dish-note {
  border-left: 2px solid var(--petrol);
  padding: .1rem 0 .1rem 1rem; margin: .9rem 0 1.3rem;
}
.dish-note p[lang="it"] {
  font-family: var(--quote); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 26;
  font-size: 1.02rem; line-height: 1.5; margin: 0 0 .45rem; max-width: 42ch;
}
.dish-note-src { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin: 0; max-width: 46ch; }

.dishshot { margin-bottom: clamp(1.6rem, 3.2vw, 2.2rem); }
.dishshot img { width: 100%; aspect-ratio: 1100 / 759; object-fit: cover; }
.dishshot figcaption { font-family: var(--mono); }

/* 品尝菜单 */
.deg {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  border-top: 1px solid var(--hair); padding-top: clamp(1.8rem, 4vw, 2.6rem);
  margin-top: clamp(1rem, 2.5vw, 1.8rem);
}
@media (min-width: 820px) { .deg { grid-template-columns: 1.45fr .55fr; } }
.deg-text h3 { margin-bottom: .55rem; font-variation-settings: "opsz" 30; font-size: clamp(1.15rem, 2.3vw, 1.4rem); }
.deg-text > p { max-width: 52ch; }
.deg-list { list-style: none; margin: 1.2rem 0 .7rem; padding: 0; }
.deg-list li { display: flex; align-items: baseline; gap: .55rem; padding: .45rem 0; border-bottom: 1px solid rgba(43,49,56,.07); }
.deg-n { font-family: var(--quote); font-style: italic; font-weight: 500; font-size: 1.18rem; }
.deg-p { font-family: var(--mono); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.deg-note { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin: 0; }
.deg-shot img { width: 100%; aspect-ratio: 700 / 875; object-fit: cover; }

/* 甜品：菜单里没有 Dolci 章节 → 不编条目 */
.dolci {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: center;
  border-top: 1px solid var(--hair); padding-top: clamp(1.8rem, 4vw, 2.6rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (min-width: 820px) { .dolci { grid-template-columns: .52fr 1.48fr; } }
.dolci-shot img { width: 100%; aspect-ratio: 700 / 858; object-fit: cover; }
.dolci-text h3 { margin-bottom: .5rem; font-variation-settings: "opsz" 30; font-size: clamp(1.15rem, 2.3vw, 1.4rem); }
.dolci-text > p { max-width: 44ch; }
.dolci-text .say { margin-top: 1.2rem; }

.drinks { border-top: 1px solid var(--hair); padding-top: clamp(1.8rem, 4vw, 2.6rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.drinks h3 { font-family: var(--mono); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
.drink-list {
  list-style: none; margin: 0 0 .9rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: .1rem 2rem;
}
.drink-list li {
  display: flex; justify-content: space-between; gap: .8rem;
  padding: .4rem 0; border-bottom: 1px solid rgba(43,49,56,.07);
  font-family: var(--quote); font-style: italic; font-size: 1.02rem;
}
.drink-list b { font-family: var(--mono); font-style: normal; font-weight: 600; font-size: .84rem; }
.drink-list b::before { content: "€ "; font-weight: 400; color: var(--muted); }
.drinks-note, .fineprint {
  font-family: var(--mono); font-size: .68rem; line-height: 1.7; color: var(--muted); margin: 0;
}
.fineprint { margin-top: clamp(1.6rem, 3.5vw, 2.2rem); max-width: 92ch; }

/* ==========================================================================
   4 · I VINI
   ========================================================================== */
.vini { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .vini { grid-template-columns: 1.32fr .68fr; } }
.vlist { margin-bottom: 1.7rem; }
.vlist:last-child { margin-bottom: 0; }
.vlist-k {
  font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 36;
  font-size: clamp(1.18rem, 2.4vw, 1.5rem); margin: 0 0 .18rem; letter-spacing: -.008em;
}
.vlist-s { font-family: var(--mono); font-size: .7rem; letter-spacing: .045em; color: var(--muted-d); margin: 0 0 .75rem; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem .5rem; }
.tags li {
  font-family: var(--quote); font-style: italic; font-size: 1.04rem;
  border: 1px solid var(--hair-d); padding: .28rem .7rem;
}
.tags-sm li { font-size: .92rem; padding: .22rem .6rem; }
.vini-shot img { width: 100%; aspect-ratio: 820 / 1231; object-fit: cover; }

.vini-foot {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3.6vw, 3rem);
  align-items: center;
  border-top: 1px solid var(--hair-d); padding-top: clamp(2rem, 4.5vw, 3rem);
  margin-top: clamp(2rem, 4.5vw, 3rem);
}
@media (min-width: 900px) { .vini-foot { grid-template-columns: .62fr 1.38fr; } }
.vini-bottle img { width: 100%; aspect-ratio: 860 / 1147; object-fit: cover; }
.vini-foot-text .say { margin-top: 1.5rem; }

/* ==========================================================================
   5 · I FRATELLI
   ========================================================================== */
.duo {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(.8rem, 2.5vw, 2rem);
  border-block: 1px solid var(--hair);
  padding: clamp(1.4rem, 3vw, 2.1rem) 0; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}
.duo-card:last-of-type { text-align: right; }
.duo-name {
  font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 60;
  font-size: clamp(1.7rem, 4.6vw, 2.9rem); line-height: 1; margin: 0 0 .15rem; letter-spacing: -.015em;
}
.duo-role { font-family: var(--quote); font-style: italic; font-weight: 400; font-size: clamp(.98rem, 2vw, 1.16rem); margin: 0; color: var(--petrol); }
.duo-role-en { font-family: var(--mono); font-size: .68rem; color: var(--muted); margin: .2rem 0 0; }
.duo-mid .qb { font-size: clamp(.85rem, 2vw, 1.05rem); color: var(--muted); }

.frat { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 3.2vw, 2.6rem); align-items: center; margin-bottom: clamp(1.5rem, 3.2vw, 2.4rem); }
@media (min-width: 860px) { .frat { grid-template-columns: 1.38fr .62fr; } }
.frat2 { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 2.6vw, 2rem); }
@media (min-width: 700px) { .frat2 { grid-template-columns: 1fr 1fr; } }
.frat-shot img { width: 100%; object-fit: cover; }
.frat .frat-shot img { aspect-ratio: 740 / 839;   /* 裁切后的实际比例，2026-08-08 同步 */ }
.frat2 .frat-shot img { aspect-ratio: 740 / 925; }

/* ==========================================================================
   6 · TERRAZZA & LOUNGE
   ========================================================================== */
.sera { display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.4rem); }
@media (min-width: 780px) { .sera { grid-template-columns: 1.1fr .9fr; } }
.sera figure img { width: 100%; object-fit: cover; }
.neon img { aspect-ratio: 1000 / 1250; }
.sera-shot img { aspect-ratio: 880 / 1173; }

/* 设计时刻四：墙上真的挂着一块霓虹，静态反而失真。只有这一处呼吸动效。 */
.neon-line {
  font-family: var(--quote); font-style: italic; font-weight: 500;
  font-variation-settings: "opsz" 40;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); margin: .7rem 0 .3rem; color: var(--bone);
}
.neon.is-live .neon-line { animation: neon-breathe 3.2s ease-in-out infinite; }
@keyframes neon-breathe {
  0%, 100% { text-shadow: 0 0 10px rgba(232,99,42,.30), 0 0 26px rgba(232,99,42,.12); }
  50%      { text-shadow: 0 0 16px rgba(232,99,42,.55), 0 0 42px rgba(232,99,42,.26); }
}
.neon-sub { font-family: var(--mono); font-size: .7rem; line-height: 1.6; color: var(--muted-d); margin: 0; max-width: 40ch; }

/* 右栏 = 露台照 + 那位客人说露台的话（图与证词相邻才有意义），同时把右栏拉到与
   霓虹那张等高——否则矮列下方就是一块无边界死区。 */
.sera-side { display: flex; flex-direction: column; gap: clamp(1.3rem, 2.8vw, 2rem); }

/* 楼梯彩蛋：那五句话刻在入口楼梯的踢面上。图不上站，字上站。
   居中窄容器 = 有边界的留白，不贴左缘也不拉通全宽。 */
.scala { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.scala-intro { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; color: var(--muted-d); margin: 0 auto .9rem; max-width: 640px; }
.steps { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; counter-reset: s; }
.steps li { border-bottom: 1px solid var(--hair-d); padding: .55rem 0; }
.steps li span {
  display: inline-block;
  font-family: var(--mono); font-weight: 600; font-size: clamp(.78rem, 1.9vw, .95rem);
  letter-spacing: .12em; color: var(--bone);
}
.steps li:nth-child(1) span { margin-left: 0; }
.steps li:nth-child(2) span { margin-left: 8%; }
.steps li:nth-child(3) span { margin-left: 16%; }
.steps li:nth-child(4) span { margin-left: 24%; }
.steps li:nth-child(5) span { margin-left: 32%; }

/* ==========================================================================
   7 · GLI OSPITI
   ========================================================================== */
.rev-big { margin: 0; border-top: 1px solid var(--hair); padding-top: 1.1rem; }
.rev-big p {
  font-family: var(--quote); font-style: italic; font-weight: 300;
  font-variation-settings: "opsz" 48;
  font-size: clamp(1.15rem, 2.5vw, 1.55rem); line-height: 1.38;
  color: var(--ink); margin: 0 0 .7rem; max-width: 34ch;
}
.rev-big footer, .rev footer {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .045em; color: var(--muted);
}

.revs { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 2.6vw, 2rem); }
@media (min-width: 700px) { .revs { grid-template-columns: 1fr 1fr; } }
.rev { margin: 0; border-top: 1px solid var(--hair); padding-top: 1rem; }
.rev p {
  font-family: var(--quote); font-style: italic; font-weight: 400;
  font-variation-settings: "opsz" 24;
  font-size: 1.05rem; line-height: 1.5; margin: 0 0 .7rem;
}

.libro {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.4rem, 3vw, 2.4rem);
  align-items: center; margin-top: clamp(2rem, 4.5vw, 3rem);
}
@media (min-width: 820px) { .libro { grid-template-columns: 1.05fr .95fr; } }
.libro-shot img { width: 100%; aspect-ratio: 1000 / 628; object-fit: cover; }
.libro .rev { border-top: 0; padding-top: 0; }

/* ==========================================================================
   8 · DOVE SIAMO
   ========================================================================== */
.info { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3.5vw, 3rem); }
@media (min-width: 800px) { .info { grid-template-columns: 1fr 1fr; } }
.info h3 {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hair);
}
.hours { width: 100%; border-collapse: collapse; }
.hours th, .hours td { text-align: left; padding: .42rem 0; border-bottom: 1px solid rgba(43,49,56,.07); font-weight: 400; }
.hours th { font-family: var(--quote); font-style: italic; font-size: 1.04rem; }
.hours td { font-family: var(--mono); font-size: clamp(.72rem, 2.3vw, .8rem); text-align: right; width: 33%;
  /* 午市列右对齐、晚市列紧随其后，两格之间没有任何水平间距——375px 上两个时间段
     会直接粘成「12:00–15:0019:00–22:30」一串乱码——只在窄屏出现，桌面视角看不出来。
     左内边距给出分隔，nowrap 防止窄屏把时间从中间折断。 */
  white-space: nowrap; }
/* 分隔要加在**午市列的右侧**：两列都是右对齐，给晚市列加 padding-left 推不动它的文字
   （右对齐时左内边距只在文字溢出时才起作用），午市列的文字仍会贴死分界线。
   用 clamp 而非定值：定值 1.1rem 配 nowrap 在 320px 上会把表撑出 4px 横滚（实测），
   即拿 320px 的横滚换 375px 的间距。字号同理随宽度收，320px 上两条都成立。 */
.hours td.lunch { padding-right: clamp(.5rem, 3vw, 1.1rem); }
.hours td.lunch { color: var(--muted); }
.hours-note { font-family: var(--mono); font-size: .69rem; line-height: 1.7; color: var(--muted); margin-top: .8rem; }

/* 地址 = 数据，用正文脸；Newsreader Italic 只归店方原话（字体分工） */
.addr { font-family: var(--display); font-size: 1.06rem; line-height: 1.55; margin: 0 0 1.15rem; }

/* 联系方式做成与 .hours 同一种行：标签 + 值 + 横线，行高对齐（padding .42rem，同 .hours） */
.crows { margin: 0 0 1.7rem; }
.crow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .42rem 0; border-bottom: 1px solid rgba(43,49,56,.07);
}
.crow dt {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin: 0; flex: none;
}
.crow dd { margin: 0; text-align: right; }

.biglink { font-family: var(--mono); font-size: .82rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid var(--hair); padding-bottom: 2px; }
.biglink:hover { border-bottom-color: var(--petrol); }

/* 「Buono a sapersi」把设施标签从联系方式里分出来——否则右栏是一条没有段落的长溜 */
.services-h {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .7rem;
}
.services { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .45rem; }
.services li { font-family: var(--mono); font-size: .68rem; letter-spacing: .02em; border: 1px solid var(--hair); padding: .3rem .6rem; color: var(--muted); }

.dove-shots { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 2.6vw, 2rem); margin-top: clamp(1.8rem, 4vw, 2.8rem); }
@media (min-width: 700px) { .dove-shots { grid-template-columns: 1fr 1fr; } }
/* 两张图统一 4:5——原先各用各的原生比例（933 vs 821），底边差 ~90px，
   图注因此不在一条线上，右下留一块无边界的空。两张母版都是 3024×4032 竖幅，
   裁到 4:5 各损失很小；对齐带来的收益远大于那点裁切。 */
.dove-shot img { width: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.dove-shots .dove-shot:first-child img { object-position: center 55%; }   /* 门洞在下半部 */
.dove-shots .dove-shot:last-child img { object-position: center 60%; }    /* 露台在下半部，天空可让 */

/* ==========================================================================
   9 · PRENOTA + 收束
   ========================================================================== */
.filo--stop { padding-bottom: clamp(3rem, 7vw, 5.4rem); }
.pren-h {
  font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .17em;
  margin-bottom: 1.2rem;
}
.pren { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3.5vw, 3rem); }
@media (min-width: 820px) { .pren { grid-template-columns: 1fr 1fr; } }
.pren-text p { max-width: 46ch; }
.pren-text a { text-decoration: none; border-bottom: 1px solid var(--hair); }
.pren-note { font-family: var(--mono); font-size: .7rem; line-height: 1.7; color: var(--muted); }
/* 他们每条帖子的固定尾块，原样搬上站 */
.pren-sign { border-top: 1px solid var(--hair); padding-top: 1.1rem; margin-top: 1.5rem; }
.pren-sign-a {
  font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 36;
  font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.22; margin: 0 0 .5rem;
}
.pren-sign-t { margin: 0; }
.pren-sign-t a {
  font-family: var(--mono); font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  letter-spacing: .02em; text-decoration: none; border-bottom: 2px solid var(--ink); padding-bottom: 3px;
}

.pren-form { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; align-content: start; }
.pren-form label { display: flex; flex-direction: column; gap: .3rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.pren-form .full { grid-column: 1 / -1; }
.pren-form input {
  font-family: var(--display); font-size: 1rem; font-variation-settings: "opsz" 14;
  color: var(--ink); background: rgba(255,255,255,.62);
  border: 1px solid var(--hair); padding: .68rem .7rem; min-height: 44px; width: 100%;
}
.pren-form input:focus { outline: 2px solid var(--petrol); outline-offset: 1px; }
.pren-form button { justify-content: center; }
.pren-fine { grid-column: 1 / -1; font-family: var(--mono); font-size: .67rem; line-height: 1.7; color: var(--muted); margin: 0; }

.closing { position: relative; padding-left: var(--filo-inset); padding-bottom: .5rem; }
/* 收束拍的标题不折成下划线——线在这里收成一个点，那才是它的终止式 */
.closing h2::after { content: none; }
.closing h2 {
  font-weight: 500; font-variation-settings: "opsz" 90;
  font-size: clamp(1.75rem, 4.6vw, 3.1rem); line-height: 1.14;
  max-width: 20ch; margin: 0 0 .7rem; padding-top: .1rem;
}
.closing h2 em { font-size: 1.03em; }
.closing-src { font-family: var(--mono); font-size: .7rem; color: var(--muted); margin: 0; max-width: 56ch; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--ink); color: var(--bone); padding-block: clamp(2.6rem, 5.5vw, 4rem) 1.6rem; }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3.5vw, 3rem); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: .8fr 1fr 1.2fr; } }
.foot-brand img { width: 120px; height: auto; }
.foot-tag { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--muted-d); margin-top: .7rem; }
.foot-h { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--bone); margin-bottom: .7rem; }
.foot-col p { font-family: var(--mono); font-size: .74rem; line-height: 1.75; color: var(--muted-d); margin: 0 0 .35rem; }
.foot-col a { text-decoration: none; border-bottom: 1px solid var(--hair-d); }
.foot-col a:hover { border-bottom-color: var(--ochre); }
.foot-social { display: flex; gap: 1rem; margin-top: .6rem; }
.foot-award { max-width: 50ch; }
.foot-src { font-size: .67rem !important; opacity: .8; }
.foot-legal {
  display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; justify-content: space-between;
  border-top: 1px solid var(--hair-d); margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.1rem;
}
.foot-legal p { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; color: var(--muted-d); margin: 0; }

/* ==========================================================================
   可及性下限：关掉动效时两处设计时刻全部静止，内容一个字不少（硬约束）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .type-txt { animation: none; width: calc(19ch + .8em); border-right-color: transparent; }
  .filo-drop { animation: none; transform: scaleY(1); }
  .neon.is-live .neon-line { animation: none; text-shadow: 0 0 12px rgba(232,99,42,.35); }
  * { transition: none !important; }
}