/* ==========================================================================
   咖啡☕️猫 · 一杯咖啡的六次醒来
   滚动驱动的冲煮叙事页 —— 视觉层是六段实拍视频（scrub.js 逐帧擦洗），这里只管排版与外壳
   ========================================================================== */

:root{
  --cream:#F7EEE3;
  --cream-deep:#EFE0CE;
  --paper:#FFFBF5;
  --ink:#2A1A11;
  --ink-soft:#6D5545;
  --ink-faint:#9B8371;
  --accent:#A9633A;
  --line:rgba(90,58,35,.16);

  --font-display:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",Georgia,"Times New Roman",serif;
  --font-body:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --pad-x:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{margin:0;padding:0;overflow-x:hidden;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;}
button{font:inherit;}
::selection{background:#E9C6A8;color:#2A1A11;}

/* ---------- 顶部栏 ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:clamp(14px,2.2vw,24px) var(--pad-x);
  pointer-events:none;
}
.topbar > *{pointer-events:auto;}

.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand__avatar{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;
  background:var(--paper);
  box-shadow:0 0 0 1px rgba(120,80,50,.14), 0 6px 16px rgba(96,58,32,.18);
  display:grid;place-items:center;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.brand:hover .brand__avatar{transform:rotate(-4deg) scale(1.04);}
.brand__avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.brand__text{display:flex;flex-direction:column;gap:3px;line-height:1;}
.brand__name{
  font-family:var(--font-display);
  font-size:1.24rem;font-weight:700;letter-spacing:.02em;
}
.brand__emoji{font-size:.94em;vertical-align:-.04em;}
.brand__sub{
  font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;
}

/* 章节胶囊导航 */
.nav{
  display:flex;gap:2px;padding:5px;
  background:rgba(255,250,243,.62);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(120,80,50,.12);
  border-radius:999px;
  box-shadow:0 4px 18px rgba(96,58,32,.06);
}
.nav__item{
  border:0;background:transparent;cursor:pointer;
  font-size:.82rem;color:var(--ink-soft);
  padding:8px 15px;border-radius:999px;letter-spacing:.02em;
  transition:color .3s,background .3s;
}
.nav__item:hover{color:var(--ink);}
.nav__item.is-active{color:#FFF8F0;background:var(--accent);box-shadow:0 4px 12px rgba(169,99,58,.28);}

.topcta{
  text-decoration:none;font-size:.88rem;font-weight:600;letter-spacing:.02em;
  color:#FFF8F0;background:var(--ink);
  padding:12px 22px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 22px rgba(42,26,17,.18);
  transition:transform .25s,box-shadow .25s;
}
.topcta:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(42,26,17,.24);}

/* ---------- 进度条 ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:70;
  background:rgba(120,80,50,.10);
}
.progress span{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#C98A55,var(--accent));
}

/* ---------- 舞台 ---------- */
.stage{position:fixed;inset:0;z-index:1;pointer-events:none;background:#140D07;}

/* 六段实拍镜头叠放，靠 opacity 交叉淡化 */
.films{position:absolute;inset:0;overflow:hidden;background:#140D07;}
.film{
  position:absolute;inset:0;opacity:0;
  will-change:opacity;
  backface-visibility:hidden;
}
.film video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--op,50%) center;
  display:block;
  transform:scale(var(--sc,1.06));
  transform-origin:50% 50%;
  background:#140D07;
}
/* 场景色调：随章节缓慢偏移，让六段素材看起来像同一卷胶片 */
.tint{
  position:absolute;inset:0;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.7;
  background:#B0754A;
  transition:background-color .8s linear;
}

/* 胶片颗粒 */
.grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='.22'/></svg>");
  background-size:180px 180px;
}
/* 暗角 */
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 62% 42%, rgba(255,255,255,0) 40%, rgba(126,80,44,.06) 74%, rgba(96,58,30,.14) 100%),
    linear-gradient(0deg, rgba(120,74,40,.10), rgba(120,74,40,0) 26%);
}
/* 文案区柔光衬底 */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,
     rgba(250,241,230,.94) 0%,
     rgba(250,241,230,.86) 22%,
     rgba(250,241,230,.42) 42%,
     rgba(250,241,230,0) 58%);
}

/* ---------- 文案 ---------- */
.copylayer{position:fixed;inset:0;z-index:20;pointer-events:none;}
.copy{
  position:absolute;left:var(--pad-x);top:50%;
  width:min(42vw,470px);
  transform:translateY(-50%);
  opacity:0;will-change:opacity,transform;
}
.copy__num{
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--ink-faint);
}
.copy__eyebrow{
  display:block;margin-top:16px;
  font-size:.76rem;font-weight:700;letter-spacing:.18em;color:var(--copy-accent,var(--accent));
  text-transform:uppercase;
}
.copy__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.95rem,3.5vw,3.2rem);
  line-height:1.16;letter-spacing:.005em;
  margin:14px 0 0;
  text-shadow:0 2px 24px rgba(250,241,230,.9);
}
.copy__body{
  margin:18px 0 0;max-width:34ch;
  font-size:clamp(.95rem,1.1vw,1.06rem);line-height:1.85;color:#4E3A2C;
  text-shadow:0 1px 14px rgba(250,241,230,.95);
}
.copy__tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;}
.copy__tags li{
  font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:var(--copy-accent,var(--accent));
  padding:6px 13px;border-radius:999px;
  background:rgba(255,252,246,.72);
  border:1px solid color-mix(in srgb, var(--copy-accent,var(--accent)) 26%, transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.copy__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;pointer-events:auto;}

.btn{
  text-decoration:none;font-size:.9rem;font-weight:600;letter-spacing:.02em;
  padding:13px 24px;border-radius:999px;border:0;cursor:pointer;
  transition:transform .22s,box-shadow .22s,background .22s;
  display:inline-block;
}
.btn--primary{color:#FFF8F0;background:var(--ink);box-shadow:0 8px 20px rgba(42,26,17,.18);}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(42,26,17,.24);}
.btn--ghost{
  color:var(--ink);background:rgba(255,252,246,.5);
  border:1.4px solid rgba(90,58,35,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.btn--ghost:hover{transform:translateY(-2px);background:rgba(255,252,246,.85);}

/* ---------- 右侧章节点 ---------- */
.route{
  position:fixed;right:clamp(12px,2.2vw,26px);top:50%;z-index:40;
  transform:translateY(-50%);
  display:flex;flex-direction:column;gap:20px;padding:16px 8px;
}
.route::before{
  content:"";position:absolute;left:50%;top:24px;bottom:24px;width:1.5px;
  transform:translateX(-50%);background:rgba(120,80,50,.22);
}
.route__dot{
  position:relative;width:16px;height:16px;padding:0;border:0;background:transparent;
  cursor:pointer;display:grid;place-items:center;
}
.route__dot i{
  width:8px;height:8px;border-radius:50%;background:rgba(120,80,50,.32);
  transition:transform .3s,background .3s,box-shadow .3s;
}
.route__dot:hover i{transform:scale(1.2);background:var(--accent);}
.route__dot.is-active i{
  background:var(--accent);transform:scale(1.35);
  box-shadow:0 0 0 5px rgba(169,99,58,.16);
}
.route__label{
  position:absolute;right:22px;top:50%;
  transform:translateY(-50%) translateX(6px);
  white-space:nowrap;font-size:.74rem;font-weight:600;color:var(--ink);
  background:rgba(255,250,243,.9);
  padding:5px 11px;border-radius:999px;border:1px solid rgba(120,80,50,.12);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
.route__dot:hover .route__label,.route__dot.is-active .route__label{opacity:1;transform:translateY(-50%) translateX(0);}

/* ---------- 滚动提示 ---------- */
.hint{
  position:fixed;left:50%;bottom:26px;z-index:30;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.2em;color:var(--ink-faint);
  transition:opacity .5s,transform .5s;
}
.hint i{
  width:20px;height:32px;border-radius:11px;border:1.6px solid rgba(90,58,35,.28);
  position:relative;
}
.hint i::after{
  content:"";position:absolute;left:50%;top:6px;width:3.5px;height:6px;border-radius:2px;
  background:var(--accent);transform:translateX(-50%);
  animation:wheel 1.8s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes wheel{0%{opacity:0;top:5px}35%{opacity:1}100%{opacity:0;top:16px}}
.hint.is-gone{opacity:0;transform:translate(-50%,10px);pointer-events:none;}

/* ---------- 滚动高度 ---------- */
.track{position:relative;z-index:0;width:100%;pointer-events:none;}

/* ---------- 预约区 ---------- */
.booking{
  position:relative;z-index:50;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(80px,10vh,140px) var(--pad-x);
  background:
    radial-gradient(90% 70% at 78% 8%, #F3E3CE 0%, rgba(243,227,206,0) 62%),
    linear-gradient(180deg,#F7EEE3 0%,#F3E7D8 100%);
  border-top:1px solid rgba(120,80,50,.10);
  overflow:hidden;
}
.booking__inner{position:relative;width:min(1040px,100%);}
.booking__eyebrow{
  font-size:.76rem;font-weight:700;letter-spacing:.2em;color:var(--accent);
  text-transform:uppercase;
}
.booking__title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.1;margin:14px 0 0;
}
.booking__lead{
  margin:20px 0 0;max-width:52ch;font-size:1rem;line-height:1.9;color:#59422F;
}
.booking__form{
  margin-top:36px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px 16px;
  padding:26px;border-radius:22px;
  background:rgba(255,251,244,.72);
  border:1px solid rgba(120,80,50,.12);
  box-shadow:0 20px 50px rgba(96,58,32,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.field{display:flex;flex-direction:column;gap:8px;grid-column:span 2;min-width:0;}
.field--full{grid-column:1/-1;}
.field--half{grid-column:span 3;}
.field span{font-size:.76rem;font-weight:700;letter-spacing:.12em;color:var(--ink-soft);}
.field input,.field select{
  font:inherit;font-size:.95rem;color:var(--ink);
  padding:12px 14px;border-radius:12px;
  background:#FFFDF9;border:1px solid rgba(120,80,50,.18);
  outline:none;transition:border-color .25s,box-shadow .25s;
  -webkit-appearance:none;appearance:none;
  width:100%;min-width:0;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%238a6a52' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;
}
/* 日期 / 时间控件：保留原生选取器，但把字号和内边距对齐其它输入框 */
.field input[type="date"],
.field input[type="time"]{
  min-height:46px;line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.55;transition:opacity .2s;
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator,
.field input[type="time"]:hover::-webkit-calendar-picker-indicator{opacity:.9;}
.field input:focus,.field select:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px rgba(169,99,58,.12);
}
.booking__actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;}
.booking__status{
  grid-column:1/-1;margin:2px 0 0;min-height:1.2em;
  font-size:.86rem;color:var(--accent);
}
.booking__status.is-err{color:#9C3B21;}
.booking__meta{
  margin-top:34px;display:flex;flex-wrap:wrap;gap:10px 26px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--ink-faint);text-transform:uppercase;
}
.booking__seal{
  position:absolute;right:clamp(24px,7vw,110px);top:clamp(60px,12vh,120px);
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:1.05rem;line-height:1.15;
  color:#8B4A25;letter-spacing:.06em;text-align:center;
  background:rgba(196,131,86,.14);
  border:1.4px solid rgba(150,86,46,.45);
  transform:rotate(-8deg);
}
.booking__seal::after{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px dashed rgba(150,86,46,.32);
}

/* ---------- 豆单弹层 ---------- */
.modal{position:fixed;inset:0;z-index:120;display:none;}
.modal.is-open{display:block;}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(52,32,20,.34);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:fade .3s ease both;
}
.modal__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(920px,calc(100vw - 36px));max-height:86vh;overflow:auto;
  padding:clamp(26px,4vw,44px);
  background:linear-gradient(160deg,#FFFCF7,#F7EBDC);
  border-radius:26px;border:1px solid rgba(120,80,50,.16);
  box-shadow:0 40px 100px rgba(48,28,16,.32);
  animation:pop .42s cubic-bezier(.2,.8,.25,1) both;
}
.modal__close{
  position:absolute;right:16px;top:14px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(120,80,50,.18);background:rgba(255,255,255,.6);
  font-size:1.2rem;line-height:1;color:var(--ink-soft);cursor:pointer;
}
.modal__close:hover{background:#fff;color:var(--ink);}
.modal__eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;}
.modal__title{font-family:var(--font-display);font-size:clamp(1.6rem,3vw,2.3rem);margin:10px 0 0;}
.beans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px;}
.bean-card{
  padding:20px;border-radius:18px;background:rgba(255,255,255,.66);
  border:1px solid rgba(120,80,50,.14);
}
.bean-card__idx{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-faint);letter-spacing:.12em;}
.bean-card h4{font-family:var(--font-display);font-size:1.12rem;margin:8px 0 0;}
.bean-card__notes{margin:8px 0 0;font-size:.8rem;font-weight:600;color:var(--accent);letter-spacing:.04em;}
.bean-card__body{margin:10px 0 0;font-size:.84rem;line-height:1.75;color:#5B4534;}
.bean-card__price{display:block;margin-top:14px;font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);}
.modal__foot{margin:24px 0 0;font-size:.86rem;color:var(--ink-soft);}
.modal__foot a{color:var(--accent);font-weight:600;}

/* ---------- 全部预约（输密码后展开） ---------- */
.orders{
  display:none;margin-top:18px;
  border-radius:22px;
  background:rgba(255,251,244,.84);
  border:1px solid rgba(120,80,50,.14);
  box-shadow:0 20px 50px rgba(96,58,32,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  overflow:hidden;
}
.orders.is-open{display:block;animation:fade .3s ease both;}
.orders__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  padding:20px 22px 14px;
  border-bottom:1px solid rgba(120,80,50,.12);
}
.orders__title{margin:0;font-family:var(--font-display);font-size:1.26rem;letter-spacing:.02em;}
.orders__meta{margin:6px 0 0;font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em;}
.orders__tools{display:flex;gap:8px;flex:none;}
.orders__btn{
  font:inherit;font-size:.78rem;letter-spacing:.06em;cursor:pointer;
  padding:7px 15px;border-radius:999px;
  color:var(--ink-soft);background:rgba(255,253,249,.9);
  border:1px solid rgba(120,80,50,.2);
  transition:background .2s,border-color .2s,color .2s;
}
.orders__btn:hover{background:#FFFDF9;border-color:var(--accent);color:var(--accent);}
.orders__body{padding:2px 22px 20px;}
.orders__filters{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px 0;}
.orders__pill{
  font:inherit;font-size:.76rem;letter-spacing:.04em;cursor:pointer;
  padding:6px 15px;border-radius:999px;
  color:var(--ink-soft);background:transparent;
  border:1px solid rgba(120,80,50,.18);
  transition:background .2s,color .2s,border-color .2s;
}
.orders__pill:hover{border-color:var(--accent);color:var(--accent);}
.orders__pill.is-on{background:var(--ink);border-color:var(--ink);color:#FFF8F0;}
.orders__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.orders__table{width:100%;border-collapse:collapse;font-size:.86rem;}
.orders__table th{
  padding:12px 10px;text-align:left;white-space:nowrap;
  font-size:.71rem;font-weight:700;letter-spacing:.1em;color:var(--ink-faint);
  border-bottom:1px solid rgba(120,80,50,.14);
}
.orders__table td{
  padding:12px 10px;vertical-align:top;
  border-bottom:1px dashed rgba(120,80,50,.12);
}
.orders__table tbody tr:hover td{background:rgba(169,99,58,.05);}
.orders__table tbody tr.is-own td{background:rgba(169,99,58,.06);}
.orders__idx{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-faint);}
.orders__slot{font-weight:700;white-space:nowrap;}
.orders__name{white-space:nowrap;font-weight:600;}
.orders__drink{min-width:130px;}
.orders__mono{font-family:var(--font-mono);font-size:.8rem;white-space:nowrap;}
.orders__addr{min-width:210px;color:#4E3A2C;}
.orders__tag{
  display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  font-size:.66rem;font-style:normal;font-weight:700;letter-spacing:.06em;
  color:var(--accent);background:rgba(169,99,58,.13);
}
.orders__tag--past{color:#87664E;background:rgba(120,80,50,.11);}
.orders__empty{margin:30px 0 26px;text-align:center;font-size:.9rem;color:var(--ink-faint);}

/* ---------- 查看订单的密码门 ---------- */
.gate{position:fixed;inset:0;z-index:140;display:none;}
.gate.is-open{display:block;}
.gate__backdrop{
  position:absolute;inset:0;background:rgba(52,32,20,.38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:fade .25s ease both;
}
.gate__panel{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(392px,calc(100vw - 36px));
  padding:30px 28px 24px;border-radius:20px;
  background:linear-gradient(180deg,#FFFCF7 0%,#F8EFE3 100%);
  border:1px solid rgba(120,80,50,.16);
  box-shadow:0 30px 70px rgba(70,42,24,.3);
  animation:pop .26s cubic-bezier(.2,.9,.3,1) both;
}
.gate__close{
  position:absolute;top:10px;right:12px;
  width:32px;height:32px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1.2rem;line-height:1;
  color:var(--ink-soft);background:rgba(120,80,50,.07);border:0;
  transition:background .2s,color .2s;
}
.gate__close:hover{background:rgba(120,80,50,.14);color:var(--ink);}
.gate__eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin:0;}
.gate__title{font-family:var(--font-display);font-size:1.5rem;margin:10px 0 0;}
.gate__lead{margin:10px 0 0;font-size:.84rem;line-height:1.75;color:#5B4534;}
.gate__form{display:flex;gap:10px;margin-top:20px;}
.gate__input{
  flex:1;min-width:0;font:inherit;font-size:1rem;letter-spacing:.34em;
  padding:12px 14px;border-radius:12px;text-align:center;
  background:#FFFDF9;border:1px solid rgba(120,80,50,.2);color:var(--ink);
  outline:none;transition:border-color .25s,box-shadow .25s;
}
.gate__input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(169,99,58,.12);}
.gate__err{margin:12px 0 0;min-height:1.2em;font-size:.82rem;color:#9C3B21;}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-46%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}

.noscript{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--cream);font-size:1rem;color:var(--ink-soft);padding:24px;text-align:center;
}

/* ---------- 响应式 ---------- */
@media (max-width:1180px){
  .nav{display:none;}
}
@media (max-width:860px){
  .brand__avatar{width:40px;height:40px;}
  .brand__name{font-size:1.08rem;}
  .brand__sub{display:none;}
  .topcta{padding:10px 18px;font-size:.82rem;}
  .scrim{
    background:linear-gradient(0deg,
      rgba(250,241,230,.985) 0%,
      rgba(250,241,230,.97) 30%,
      rgba(250,241,230,.86) 42%,
      rgba(250,241,230,.45) 54%,
      rgba(250,241,230,0) 68%);
  }
  /* 竖屏只截到画面中间一条，按场景放大+上移，把主体让到文案上方 */
  .film video{
    transform:translateY(var(--my,0%)) scale(calc(var(--sc,1.06) * var(--mz,1)));
  }
  .copy{
    left:var(--pad-x);right:var(--pad-x);top:auto;
    bottom:calc(56px + env(safe-area-inset-bottom));
    width:auto;transform:none;
  }
  .copy__title{font-size:clamp(1.7rem,7.2vw,2.4rem);line-height:1.2;}
  .copy__body{font-size:.95rem;line-height:1.75;max-width:none;}
  .copy__tags{margin-top:16px;}
  .copy__cta{margin-top:20px;}
  .route{gap:16px;right:4px;padding:12px 4px;}
  .route__label{display:none;}
  .hint{left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));transform:none;}
  .hint span{display:none;}
  .hint.is-gone{transform:translateY(8px);}
  .booking__form{grid-template-columns:1fr;padding:20px;}
  .field,.field--full,.field--half{grid-column:1/-1;}
  .booking__seal{display:none;}
  .beans{grid-template-columns:1fr;}

  /* 订单表在竖屏改成卡片 */
  .orders__head{align-items:center;padding:16px 16px 12px;}
  .orders__filters{padding:12px 16px 0;}
  .orders__body{padding:0 16px 16px;}
  .orders__table{border-collapse:separate;border-spacing:0;}
  .orders__table thead{display:none;}
  .orders__table tbody tr{
    display:block;padding:14px 0;
    border-bottom:1px dashed rgba(120,80,50,.16);
  }
  .orders__table tbody tr:last-child{border-bottom:0;}
  .orders__table td{
    display:flex;gap:14px;justify-content:space-between;align-items:baseline;
    padding:3px 0;border:0;background:none !important;
  }
  .orders__table td::before{
    content:attr(data-label);flex:none;
    font-family:var(--font-body);font-size:.72rem;font-weight:700;
    letter-spacing:.08em;color:var(--ink-faint);
  }
  .orders__addr{min-width:0;text-align:right;}
  .orders__mono{white-space:normal;}
  /* 长字段改成标签独占一行，避免右对齐后参差不齐 */
  .orders__table td.orders__addr,
  .orders__table td.orders__drink{
    display:block;text-align:left;padding:4px 0;
  }
  .orders__table td.orders__addr::before,
  .orders__table td.orders__drink::before{
    display:block;margin-bottom:2px;
  }
}
@media (prefers-reduced-motion:reduce){
  .hint i::after{animation:none;}
  .grain{opacity:.28;}
}