/* Layout · Chapters (round 33): the invitation as a short book. Every section opens on a full-width plate, a colour
   field (or the couple's photo for that section) with "Chapter I, II…" and the title large over it, then the content
   on plain paper below. A slim bar with the names and a Menu (layouts.js) lets guests jump to any chapter. Plates
   alternate between the design's accent and its ink, so every design gets its own book. Loaded after the design's CSS. */
html.l-chapters { --ch-a: var(--accent); --ch-a-ink: var(--accent-ink); --ch-b: var(--ink); --ch-b-ink: var(--bg); }
html.l-chapters .inv { counter-reset: lch; }
html.l-chapters .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing) { counter-increment: lch; position: relative; padding-top: 0; padding-bottom: 64px; }
html.l-chapters .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing)::before { display: none; }

/* the plate */
html.l-chapters .inv > .s:not(.s-hero):not(.s-photo):not(.s-closing) > .sh {
  --plate: var(--ch-a); --plate-ink: var(--ch-a-ink);
  position: relative; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 0; box-sizing: border-box;
  width: 100vw; max-width: none; min-height: 56svh; margin: 0 calc(50% - 50vw) 44px; padding: 80px 26px 64px; text-align: center;
  background: var(--plate); color: var(--plate-ink); border: 0; border-radius: 0; box-shadow: none; overflow: hidden;
}
html.l-chapters .inv > .s:nth-of-type(even):not(.s-hero):not(.s-photo):not(.s-closing) > .sh.sh { --plate: var(--ch-b); --plate-ink: var(--ch-b-ink); }
html.l-chapters .inv > .s > .sh > :not(.sh-k):not(.sh-t) { display: none; }
html.l-chapters .inv > .s.s > .sh.sh::before { content: "Chapter " counter(lch, upper-roman); position: static; display: block; order: -1; width: auto; height: auto; margin: 0 0 18px; padding: 0; border: 0; background: none; transform: none; opacity: .78;
  font-family: var(--text); font-size: .72rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; color: inherit; }
html.l-chapters .inv > .s.s > .sh.sh::after { content: ""; position: static; display: block; width: 44px; height: 1px; margin: 26px auto 0; padding: 0; border: 0; background: currentColor; opacity: .6; transform: none; }
html.l-chapters .inv > .s.s > .sh.sh .sh-k { margin: 0 0 8px; color: inherit; opacity: .85; text-align: center; }
html.l-chapters .inv > .s.s > .sh.sh .sh-t { max-width: 14ch; color: inherit; -webkit-text-fill-color: currentColor; background: none; text-shadow: 0 1px 14px rgba(0, 0, 0, .18); text-align: center;
  font-size: clamp(2.3rem, 10.5vw, 4.4rem); line-height: .98; overflow-wrap: anywhere; letter-spacing: -.01em; }
html.l-chapters .inv > .s.s > .sh.sh .sh-t::before, html.l-chapters .inv > .s.s > .sh.sh .sh-t::after { content: none; display: none; }

/* a section photo becomes the plate */
html.l-chapters .inv > .s.has-sp > .sp { position: absolute; z-index: 0; left: 50%; top: 0; width: 100vw; height: 56svh; min-height: 0; max-width: none; margin: 0 0 0 -50vw; padding: 0; border: 0; border-radius: 0; transform: none; opacity: 1; }
html.l-chapters .inv > .s.has-sp > .sp img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; filter: none; }
html.l-chapters .inv > .s.has-sp > .sh { background: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55)); color: #fff; }
html.l-chapters .inv > .s.has-sp > .sp-tag { z-index: 2; }

/* countdown: digits divided by hairlines */
html.l-chapters .inv .cd { gap: 0; }
html.l-chapters .inv .cd-u { padding: 4px 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
html.l-chapters .inv .cd-u:first-child { border-left: 0; }
html.l-chapters .inv .cd-u b { font-size: clamp(2.4rem, 12vw, 3.6rem); }

/* programme: a thread with beads */
html.l-chapters .inv:not([class*="dz-s-"]) .tl { position: relative; margin-left: 6px; padding: 4px 0 0 0; border: 0; border-left: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); background: none; }
html.l-chapters .inv:not([class*="dz-s-"]) .tl::before, html.l-chapters .inv:not([class*="dz-s-"]) .tl::after { display: none; }
html.l-chapters .inv:not([class*="dz-s-"]) .tl-i { position: relative; display: block; padding: 0 0 26px 26px; margin: 0; border: 0; background: none; box-shadow: none; text-align: left; }
html.l-chapters .inv:not([class*="dz-s-"]) .tl-i:last-child { padding-bottom: 4px; }
html.l-chapters .inv:not([class*="dz-s-"]) .tl-i::before { content: ""; position: absolute; left: -6px; top: 5px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg); }
html.l-chapters .inv:not([class*="dz-s-"]) .tl-i::after, html.l-chapters .inv:not([class*="dz-s-"]) .tl-i .dz-dot { display: none; }
html.l-chapters .inv:not([class*="dz-s-"]) .tl-time { display: block; padding: 0; margin-bottom: 2px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; text-align: left; }
html.l-chapters .inv:not([class*="dz-s-"]) .tl-title { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; }

/* venues: numbered stops */
html.l-chapters .inv .vn { counter-reset: stop; gap: 14px; }
html.l-chapters .inv .vn-c { counter-increment: stop; position: relative; padding: 26px 22px 24px 70px; text-align: left; border-radius: 0; border: 0; border-top: 3px solid var(--accent); box-shadow: 0 16px 34px -28px rgba(0, 0, 0, .5); transform: none; }
html.l-chapters .inv .vn-c::before { content: counter(stop); position: absolute; left: 20px; top: 20px; width: auto; height: auto; margin: 0; border: 0; background: none; transform: none; opacity: 1;
  font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--accent); }
html.l-chapters .inv .vn-c::after, html.l-chapters .inv .vn-c > svg { display: none; }
html.l-chapters .inv .vn-l, html.l-chapters .inv .vn-n { text-align: left; }

/* people: names in a single centred column with a rule between groups */
html.l-chapters .inv .pp { gap: 0; }
html.l-chapters .inv .pp-g { padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
html.l-chapters .inv .pp-g:last-child { border-bottom: 0; }

/* gallery: full-bleed first frame, then pairs */
html.l-chapters .inv .gal { grid-template-columns: 1fr 1fr; gap: 6px; }
html.l-chapters .inv .gal-i:first-child { grid-column: 1 / -1; }
html.l-chapters .inv .gal-i:first-child .gal-f, html.l-chapters .inv .gal-i:first-child img { aspect-ratio: 16 / 10; }
html.l-chapters .inv .gal-i img, html.l-chapters .inv .gal-f, html.l-chapters .inv .gal-ph { border-radius: 0; }

/* the bar and the menu (built by layouts.js) */
.lay-bar { position: fixed; z-index: 40; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px); padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--ink); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  transform: translateY(-110%); transition: transform .35s ease; }
.lay-bar.is-on { transform: none; }
.lay-bar b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--display); font-weight: 400; font-size: 1.15rem; }
.lay-bar button { flex: none; min-height: 40px; padding: 6px 16px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.lay-menu { position: fixed; z-index: 45; inset: 0; display: flex; flex-direction: column; padding: 70px 26px 40px; overflow-y: auto; background: var(--ch-b, var(--ink)); color: var(--ch-b-ink, var(--bg)); }
.lay-menu[hidden] { display: none; }
.lay-menu ol { counter-reset: m; margin: auto 0; padding: 0; list-style: none; }
.lay-menu li { counter-increment: m; }
.lay-menu a { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; color: inherit; text-decoration: none; font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2.4rem); line-height: 1.15; }
.lay-menu a::before { content: counter(m, upper-roman); min-width: 2.4em; font-family: var(--text); font-size: .72rem; letter-spacing: .2em; opacity: .7; }
.lay-menu .lay-x { position: absolute; right: 16px; top: max(14px, env(safe-area-inset-top)); width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; background: none; color: inherit; font-size: 1.5rem; cursor: pointer; }
html.lay-menu-on, html.lay-menu-on body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .lay-bar { transition: none; } }

html.l-chapters .inv:not([class*="dz-s-"]) .tl-i > .tl-time { order: 0; grid-column: auto; }
html.l-chapters .inv:not([class*="dz-s-"]) .tl-i > .tl-body { order: 1; grid-column: auto; }

html.l-chapters .inv .vn-c .dz-pin, html.l-chapters .inv .vn-c .dz-tab { display: none; }

/* the design may colour its countdown digits for its own boxes; the layout's countdown has none */
html.l-chapters .inv .cd-u b { color: var(--ink); -webkit-text-fill-color: currentColor; background: none; text-shadow: none; }
html.l-chapters .inv .cd-u span { color: var(--muted); }
html.l-chapters .inv .cd { background: none; border: 0; box-shadow: none; }
html.l-chapters.t-loft { --ch-a-ink: var(--bg); }   /* Loft's amber accent reads better with its dark page colour */