/* Chaptered app styles, shared by the editor (/new/) and the film page (/f/).
   Idea: the one real thing every wedding film already has is its scrubber. Chaptered puts
   marks on it, and each guest sees their own marks light up.
   Palette "Wax seal" (Tenzin's pick, 2026-10-26, from the wax seal on a wedding invitation): light grey
   ground #ebe9e8, ink #231416 for text and the main button, claret #8b1d2c for small text, chips and
   a guest's own marks.
   Fonts: Instrument Serif (headings) and Hanken Grotesk (everything else), same as the brand. */
:root {
  --ground: #ebe9e8;
  --panel: #dfdcdb;
  --raised: #d3cfce;
  --line: #aea6a5;
  --text: #231416;
  --muted: #584749;
  --accent: #8b1d2c;
  --accent-press: #584749;
  --on-accent: #ebe9e8;
  --sage: #8b1d2c;
  --on-sage: #ebe9e8;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", sans-serif;
  --field: #584749;
  --radius: 6px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: 24px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--text); }
p a { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--raised); color: var(--text);
  font: 600 1rem/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color 120ms ease-out, transform 100ms ease-out;
}
.btn:hover { background: var(--line); }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn.main { background: var(--text); border-color: var(--text); color: var(--on-accent); }
.btn.main:hover { background: var(--accent-press); }
.btn.quiet { background: transparent; }
.btn.quiet:hover { background: var(--raised); }

.player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.player iframe, .player > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player .empty {
  display: grid; place-items: center; padding: 24px; text-align: center; color: #c9c1b6;
}

/* The scrubber with marks. */
.track { position: relative; height: 44px; margin-top: 12px; cursor: pointer; touch-action: none; }
.track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 4px;
  background: var(--line); border-radius: 2px;
}
.track .played { position: absolute; left: 0; top: 20px; height: 4px; background: var(--muted); border-radius: 2px; width: 0; }
.track .mark {
  position: absolute; top: 8px; width: 12px; height: 28px; margin-left: -6px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
}
.track .mark::after {
  content: ""; position: absolute; left: 4px; top: 4px; width: 4px; height: 20px;
  border-radius: 2px; background: var(--muted);
}
.track .mark.chapter::after { left: 2px; width: 8px; background: var(--text); }
.track .mark.dim::after { opacity: 0.3; }
.track .mark.mine::after { background: var(--accent); height: 24px; top: 2px; }

.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px;
  border-radius: var(--radius); background: var(--sage); color: var(--on-sage);
  font: 600 0.875rem/1.2 var(--sans); text-decoration: none;
}
button.chip { min-height: 44px; border: 0; cursor: pointer; transition: background-color 120ms ease-out; }
button.chip:hover { background: color-mix(in srgb, var(--sage) 80%, var(--text)); }
button.chip:active { background: color-mix(in srgb, var(--sage) 65%, var(--text)); }

.time { font-variant-numeric: tabular-nums; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Logo: ring 2 "Halfway through" next to the name. */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand svg { width: 22px; height: 28px; flex: none; }

/* Footer on every app page (A5, FR-PRIV-2): Privacy, Terms, contact, and Report or remove me (G7). */
.site-foot {
  max-width: 1080px; margin: 0 auto; padding: 24px 24px 40px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9375rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
}
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-foot a { color: var(--muted); text-underline-offset: 3px; }
.site-foot a:hover { color: var(--text); }
@media (max-width: 560px) { .site-foot { padding-left: 16px; padding-right: 16px; } }

/* Plain reading pages: /privacy/, /terms/, /report/. */
.top-bar { padding: 16px 24px; }
.top-bar .brand { font: 400 1.125rem/1 var(--serif); text-decoration: none; color: var(--muted); }
.doc { max-width: 680px; margin: 0 auto; padding: 24px 24px 64px; }
.doc h1 { font-size: clamp(2.25rem, 6vw, 3.25rem); margin-bottom: 8px; }
.doc h2 { font-size: 1.5rem; margin: 36px 0 8px; }
.doc .when { color: var(--muted); margin: 0 0 24px; }
.doc p, .doc li { max-width: 65ch; }
.doc ul { padding-left: 1.25em; }
.doc li { margin: 6px 0; }
@media (max-width: 560px) { .top-bar, .doc { padding-left: 16px; padding-right: 16px; } }

/* Brand bar on every couple-facing page: the homepage's claret envelope liner, white ring and name
   (Tenzin, Oct 26: "keep that red design so it keeps brand identity"). Guest pages (/f/) don't use it;
   they stay a light touch so each film can carry its own look later (C25). */
.app-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 12px 24px; color: #fff; background-color: #8b1d2c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%237a1826' stroke-width='1.6'%3E%3Ccircle cx='14' cy='16' r='7'/%3E%3Cpath d='M11 6h6l2 2.5-5 4.5-5-4.5z'/%3E%3Ccircle cx='42' cy='44' r='7'/%3E%3Cpath d='M39 34h6l2 2.5-5 4.5-5-4.5z'/%3E%3C/g%3E%3C/svg%3E");
}
.app-bar a.brand { color: #fff; font: 400 1.625rem/1 var(--serif); text-decoration: none; gap: 10px; padding: 8px 0; }
.app-bar .brand svg { width: 24px; height: 30px; }
.app-bar nav, .app-bar .right { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.app-bar nav a:not(.btn), .app-bar .link { color: #fff; font: 500 0.9375rem var(--sans); text-decoration: none; padding: 12px 0; min-height: 44px; display: inline-flex; align-items: center; }
.app-bar nav a:not(.btn):hover, .app-bar .link:hover { text-decoration: underline; text-underline-offset: 4px; }
.app-bar .who { color: #f1d9dc; font-size: 0.9375rem; overflow-wrap: anywhere; }
.app-bar .btn { min-height: 40px; padding: 8px 16px; font-size: 0.9375rem; background: #fff; border-color: #fff; color: #8b1d2c; }
.app-bar .btn:hover { background: #f1d9dc; }
.app-bar .btn.quiet { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.app-bar .btn.quiet:hover { background: #6a1420; }
.app-bar :focus-visible { outline-color: #fff; }
@media (max-width: 560px) { .app-bar { padding: 8px 16px; } .app-bar .hide-s, .app-bar nav a.hide-s:not(.btn) { display: none; } }

/* On couple-facing pages the main button is the wax seal, same as the homepage. */
body.app .btn.main { background: #8b1d2c; border-color: #8b1d2c; color: #fff; }
body.app .btn.main:hover { background: #6a1420; border-color: #6a1420; }
.app-bar .btn.main { background: #fff; border-color: #fff; color: #8b1d2c; }
.app-bar .btn.main:hover { background: #f1d9dc; border-color: #f1d9dc; }

/* The homepage's claret envelope liner with the ring pattern, behind the bar and the page heading. */
.liner {
  color: #fff; background-color: #8b1d2c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%237a1826' stroke-width='1.6'%3E%3Ccircle cx='14' cy='16' r='7'/%3E%3Cpath d='M11 6h6l2 2.5-5 4.5-5-4.5z'/%3E%3Ccircle cx='42' cy='44' r='7'/%3E%3Cpath d='M39 34h6l2 2.5-5 4.5-5-4.5z'/%3E%3C/g%3E%3C/svg%3E");
}
.liner .app-bar { background: none; }
.liner :focus-visible { outline-color: #fff; }
.liner .doc.band { padding-top: clamp(16px, 4vw, 40px); padding-bottom: 40px; }
.liner .band h1 { color: #fff; }
.liner .band .when { color: #f1d9dc; margin: 0; }
.liner + main.doc { padding-top: 32px; }