/* Dear Ever customer site: the premiere house. One dark auditorium, projected-light ivory type, brass for the one action. */
@font-face { font-family: Manrope; src: url(/fonts/Manrope-wght.ttf) format('truetype'); font-weight: 200 800; font-display: swap; } /* same file the film renders with */
:root {
  --house: #110d19; --house-2: #1b1526; --house-3: #271f35;
  --ink: #f4eee6; --ink-2: #c7bdd3; --ink-3: #9d92ac;
  --brass: #c9a466; --brass-hi: #dcbd88;
  --rule: rgba(244, 238, 230, .12); --rule-2: rgba(244, 238, 230, .2);
  --glow: 214, 160, 150;
  --display-zh: "Songti TC", "STSong", "Noto Serif TC", serif;
  --display-en: Didot, "Bodoni 72", "Hoefler Text", serif;
  --ui: -apple-system, "PingFang TC", "Noto Sans TC", system-ui, sans-serif;
  --film: Manrope, "PingFang TC", "Noto Sans TC", sans-serif; /* the film's own title face (Chinese: the system face; the film bundles Noto Sans TC) */
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { background: var(--house); color-scheme: dark; scrollbar-color: var(--house-3) var(--house); }
body { margin: 0; min-height: 100vh; color: var(--ink); font: 16px/1.6 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: rgba(201, 164, 102, .35); color: #fff; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; }
img, video { display: block; max-width: 100%; }
.wrap { width: min(1240px, 100% - 64px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }

/* top bar */
.bar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px) saturate(1.2); background: rgba(17, 13, 25, .78); border-bottom: 1px solid var(--rule); }
.bar .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.mark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.mark img { height: 32px; width: auto; } /* Dear Ever lockup (outlined SVG in /web/brand) */
.bar nav { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; color: var(--ink-2); }
.bar nav a { text-decoration: none; white-space: nowrap; }
@media (max-width: 420px) { .bar .wrap { gap: 16px; } .bar nav { gap: 16px; } }
.bar nav a:hover, .bar nav a[aria-current="page"] { color: var(--ink); }
.lang { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--rule); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; color: var(--ink-2); background: none; cursor: pointer; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; font: 500 15px/1 var(--ui); cursor: pointer; text-decoration: none; padding: 13px 22px; transition: background .3s var(--ease), color .3s var(--ease), opacity .2s; white-space: nowrap; }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn-brass { background: var(--brass); color: #1a1208; }
.btn-brass:hover:not(:disabled) { background: var(--brass-hi); }
.btn-brass:disabled { background: rgba(244, 238, 230, .06); color: var(--ink-3); cursor: not-allowed; }
.btn-ghost { background: none; color: var(--ink-2); }
.btn-ghost:hover { color: var(--ink); background: rgba(244, 238, 230, .05); }
.btn-line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule-2); }
.btn-line:hover { background: rgba(244, 238, 230, .05); }
.btn-sm { padding: 10px 16px; font-size: 14px; }

/* headings */
h1, h2, h3 { text-wrap: balance; }
.h1 { font: 500 clamp(28px, 2.9vw, 40px)/1.2 var(--display-zh); letter-spacing: .04em; margin: 0; }
.h1 .en { font: italic .95em/1 var(--display-en); letter-spacing: 0; }
.sub { margin: 10px 0 0; color: var(--ink-3); font-size: 15px; max-width: 38em; }
.hint { font-size: 13px; color: var(--ink-3); margin: 0; }

/* the film's title card: painted plate, dark tint, English title in the film's face, brown rule */
.titlecard { position: relative; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #000 url(/media/tree.jpg) center / cover; box-shadow: 0 30px 70px -45px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .04); }
.titlecard::before { content: ""; position: absolute; inset: 0; background: rgba(27, 26, 25, .52); }
.titlecard .t { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--film); color: #f4efe7; }
.titlecard .row { display: flex; align-items: baseline; gap: .5em; white-space: nowrap; }
.titlecard .lead-w { font-size: clamp(16px, 1.7vw, 24px); font-weight: 400; letter-spacing: .22em; opacity: .9; }
.titlecard .name { font-size: clamp(30px, 3.9vw, 54px); font-weight: 600; letter-spacing: .22em; padding-left: .22em; transition: opacity .3s; }
.titlecard .name.empty { opacity: .35; }
.titlecard .rule { width: 40px; height: 2px; background: #a8835a; border-radius: 2px; margin-top: 10px; }

/* the couple's photo as a print */
.print { position: relative; background: #ece3d1; padding: 6px 6px 18px; border-radius: 2px; box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .8); }
.print img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); white-space: nowrap; }
.pill.ok { background: var(--brass); color: #1a1208; box-shadow: none; }
.pill.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brass-hi); }
.toast-act { margin-left: 16px; padding: 0; border: 0; background: none; color: var(--brass-hi); font: 500 14px/1 var(--ui); cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50; background: var(--house-3); color: var(--ink); padding: 12px 18px; border-radius: 12px; box-shadow: 0 20px 40px -20px #000, inset 0 0 0 1px var(--rule); font-size: 14px; max-width: min(560px, 90vw); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
/* customer app pages in English (web/i18n.js sets lang): headings use the English display face */
html:lang(en) body.app { --display-zh: var(--display-en); }

/* Optional, first-source preference. The film flow works with either choice. */
.source-choice { position: fixed; z-index: 1000; inset: auto 16px 16px; max-width: 560px; margin-left: auto; padding: 20px; background: var(--bg, #181612); color: var(--ink); border: 1px solid var(--rule); border-radius: 12px; }
.source-choice p { font: 400 14px/1.65 var(--ui); margin: 0 0 14px; }
.source-choice button { margin: 0 10px 8px 0; white-space: normal; }
.source-choice a { display: inline-block; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.source-settings { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }