/* 三版共用。一屏看完、固定淺色、只有金與墨黑兩色、直角 */
:root {
  color-scheme: light;
  --paper: #faf8f3;
  --ink: #1f1f1d;
  --ink-soft: #5a5852;
  --gold: #b8913e;
  --serif: 'Noto Serif TC', 'Songti TC', serif;
  --latin: 'Cormorant Garamond', 'Noto Serif TC', serif;
  --ease-in: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-wipe: cubic-bezier(0.65, 0, 0.35, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; background: #f1eee7; overflow-x: clip; }
body {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  background: #f1eee7;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip { position: absolute; left: -9999px; top: 24px; background: var(--ink); color: var(--paper); padding: 8px 16px; z-index: 10; }
.skip:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* 一屏卡片：手機滿版，桌機置中成 9:16 */
.card {
  position: relative; margin: 0 auto; background: var(--paper);
  width: 100%; min-height: 100vh; min-height: 100dvh;
}
@media (min-width: 600px) {
  body { display: grid; place-items: center; min-height: 100vh; padding: 24px 0; }
  .card { width: min(480px, calc((100vh - 48px) * 9 / 16)); min-height: 0; aspect-ratio: 9 / 16; }
}

.name { display: block; white-space: nowrap; line-height: 1.12; }
.name .ch { display: inline-block; }
.num { font-family: var(--latin); font-weight: 500; font-variant-numeric: lining-nums; }

/* 行事曆、導航：細線小按鈕，44px 高 */
.acts { display: flex; justify-content: center; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border: 1px solid rgba(31,31,29,.45);
  font-family: var(--serif); font-size: 15px; letter-spacing: 0; text-decoration: none; white-space: nowrap; color: var(--ink);
  transition: background-color .2s, color .2s, transform .15s;
}
.btn:active { transform: scale(0.98); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) { .btn:hover { background: var(--ink); color: var(--paper); } .btn.solid:hover { background: #33332f; } }

/* 開場：logo 淡入、金線展開、名字逐字浮上、其他最後淡入（一次，慢） */
.js [data-fade] { opacity: 0; }
.js.opened [data-fade] { opacity: 1; transition: opacity .5s var(--ease-in) calc(.45s + var(--d, 0s) * .5); }
.js .mark { opacity: 0; transform: translateY(6px); }
.js.opened .mark { opacity: 1; transform: none; transition: opacity .6s var(--ease-in), transform .7s var(--ease-in); }
.js .name .ch { opacity: 0; transform: translateY(0.18em); }
.js.opened .name .ch { opacity: 1; transform: none; transition: opacity .55s var(--ease-in), transform .7s var(--ease-in); transition-delay: calc(.12s + var(--i) * .06s); }
.js .hair { clip-path: inset(0 50% 0 50%); }
.js.opened .hair { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-wipe) .3s; }
.js .hair-v { clip-path: inset(50% 0 50% 0); }
.js.opened .hair-v { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-wipe) .3s; }
@media (prefers-reduced-motion: reduce) {
  .js [data-fade], .js .mark, .js .name .ch { opacity: 1; transform: none; filter: none; }
  .js .hair, .js .hair-v { clip-path: none; }
}