/*
  Shared block styles for the culture review pages. Every colour, font and size comes from tokens
  that each theme sets on `.inv.t-<theme>`; blocks never branch on the theme (CLAUDE.md §7.2).
  Layout variants (.a-left / .a-center, couple-*, events-*, gal-*) change structure, not colour.
*/
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page, #222); color: var(--page-ink, #eee); font-family: system-ui, sans-serif; font-size: 16px; line-height: 1.6; transition: background-color .3s linear; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--page, #222); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Review page chrome ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 8; background: var(--page); color: var(--page-ink); padding-block: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; border-bottom: 1px solid var(--page-line, rgba(255,255,255,.15)); }
.top h1 { margin: 0; font: 600 17px/1.3 var(--page-font, system-ui, sans-serif); }
.top [role="tablist"] { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.top [role="tab"] { background: none; border: 0; padding: 4px 0; cursor: pointer; opacity: .7; border-bottom: 2px solid transparent; font: 400 15px/1.3 var(--page-font, system-ui, sans-serif); }
.top [role="tab"][aria-selected="true"] { opacity: 1; border-bottom-color: currentColor; }

.stage { display: flex; justify-content: center; align-items: flex-start; gap: 56px; }
@media (min-width: 1000px) { .stage { padding-block: 32px 40px; } }
@media (max-width: 999px) { .stage { flex-direction: column; align-items: center; gap: 0; } }

/* ---------- Invitation shell ---------- */
.inv { width: 100%; max-width: 430px; position: relative; overflow: clip; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: var(--body-size, 17px); line-height: 1.65; color-scheme: var(--scheme, light); }
.inv a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.inv a.btn { color: var(--btn-ink); text-decoration: none; }
.in { padding-left: max(var(--pad, 28px), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad, 28px), env(safe-area-inset-right, 0px)); position: relative; }
/* Covers are drawn for 760 to 820 px. On a shorter screen the cover runs past the fold, so its
   art and text never overlap; the page scrolls to the button. */
.cover { position: relative; height: clamp(760px, 100svh, 820px); overflow: hidden; }

.b { position: relative; padding-block: var(--sec-pad, 60px); }
.b-alt { background: var(--bg-2); --ink: var(--ink-2); --dim: var(--dim-2); --accent: var(--accent-2); --line: var(--line-2); --btn-bg: var(--btn-bg-2); --btn-ink: var(--btn-ink-2); --strong: var(--strong-2); color: var(--ink); color-scheme: var(--scheme-2, light); }
.b-alt + .b-alt { padding-top: 0; }
.a-center .b .in { text-align: center; }
.a-center .lede, .a-center .b p { margin-left: auto; margin-right: auto; }
.mark { display: block; width: var(--mark-size, 30px); height: var(--mark-size, 30px); margin: 0 0 20px; color: var(--accent); fill: currentColor; stroke: currentColor; }
.a-center .mark { margin-left: auto; margin-right: auto; }
.h { margin: 0 0 18px; font: var(--h-weight, 400) var(--h-size, 28px)/1.15 var(--f-head); letter-spacing: var(--h-track, 0); text-transform: var(--h-case, none); color: var(--head, var(--ink)); text-wrap: balance; }
.lede { margin: 0; max-width: 34ch; }
.dim { color: var(--dim); }
.b p { margin-top: 0; }

/* Greeting */
.salam { font-style: italic; color: var(--dim); margin: 0 0 22px; }
.ayat { margin: 0; font: 400 24px/2 "Amiri", "Traditional Arabic", serif; direction: rtl; text-align: right; }
.a-center .ayat { text-align: center; }
.verse { margin: 14px 0 0; font: var(--verse-style, italic) 400 var(--verse-size, 17px)/1.6 var(--f-verse, var(--f-body)); }
.src { margin: 8px 0 30px; font-size: 14px; color: var(--accent); letter-spacing: .03em; }

/* Couple */
.first { display: block; font: 400 var(--name-size, 48px)/1 var(--f-names); color: var(--strong, var(--ink)); }
.full { margin: 6px 0 0; font-weight: 600; font-size: 16.5px; }
.of { margin: 2px 0 0; color: var(--dim); font-size: 15px; }
.amp { font: 400 calc(var(--name-size, 48px) * 1.5)/1 var(--f-names); color: var(--accent); margin: 8px 0; }
.ph { background: var(--ph, rgba(127,127,127,.18)); color: var(--dim); display: grid; place-items: center; text-align: center; padding: 12px; font-size: 12px; font-style: italic; line-height: 1.35; }
.person { margin-top: 26px; }
.couple-offset .person { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: end; }
.couple-offset .person:nth-of-type(2) { grid-template-columns: minmax(0, 1fr) 132px; text-align: right; }
.couple-offset .person:nth-of-type(2) .ph { order: 2; }
.couple-offset .person .ph { aspect-ratio: 3 / 4; border-radius: var(--photo-radius, 0); }
.couple-offset .amp { margin-left: 44%; }
.couple-side .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.couple-side .person { margin-top: 0; }
.couple-side .person .ph { aspect-ratio: 1; margin-bottom: 10px; border-radius: var(--photo-radius, 0); }
.couple-side .first { font-size: calc(var(--name-size, 48px) * .8); }
.couple-side .amp { display: none; }
.couple-stack .person .ph { aspect-ratio: 4 / 3; margin-bottom: 14px; border-radius: var(--photo-radius, 0); }
.parents { display: grid; gap: 18px; margin-bottom: 30px; }
.parents .side { margin: 0; font-size: 14.5px; color: var(--accent); font-style: italic; }
.parents .pn { margin: 0; font: 400 21px/1.35 var(--f-head); }
.celebrant { display: grid; gap: 6px; }
.celebrant .age { font: var(--h-weight, 400) 140px/.85 var(--f-head); color: var(--accent); }
.celebrant .ph { aspect-ratio: 1; max-width: 220px; border-radius: var(--photo-radius, 0); }
.a-center .celebrant .ph { margin: 0 auto; }

/* Events */
.date-line { margin: 0 0 16px; font-size: 20px; }
.session { margin-bottom: 26px; }
.session h3 { margin: 0; font: var(--h-weight, 400) 21px/1.25 var(--f-head); color: var(--head, var(--ink)); }
.session .t { margin: 2px 0 6px; font-variant-numeric: lining-nums tabular-nums; color: var(--accent); font-size: 18px; font-weight: 500; }
.session .place { margin: 0; font-weight: 500; }
.session .addr { margin: 0; color: var(--dim); font-size: 15px; }
.session .day { margin: 0 0 4px; font-size: 15px; color: var(--dim); }
.acts { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: 16px; }
.a-center .acts { justify-content: center; }
.events-rule .session { border-left: 1px solid var(--accent); padding-left: 18px; }
.events-timetable .session { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 0 16px; padding: 16px 0; margin: 0; border-top: 1px solid var(--line); }
.events-timetable .session:last-of-type { border-bottom: 1px solid var(--line); }
.events-timetable .session .t { grid-row: span 6; font: var(--h-weight, 400) 34px/1 var(--f-head); margin: 2px 0 0; }
.events-program .session { padding: 18px 0; margin: 0; border-top: 1px solid var(--line); }
.a-center.events-rule .session { border-left: 0; padding-left: 0; }
.tips { list-style: none; margin: 18px 0 0; padding: 0; text-align: left; }
.tips li { padding: 8px 0; border-top: 1px solid var(--line); }
.dress { margin: 16px 0 0; font-style: italic; color: var(--dim); }
.count { margin: 24px 0 0; font: 400 21px/1.35 var(--f-head); }
.count b { color: var(--accent); font-weight: inherit; }

/* Gallery */
.gal { display: grid; gap: 8px; }
.gal-mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gal-mosaic .ph:nth-child(1) { grid-column: 1 / 5; aspect-ratio: 4 / 5; }
.gal-mosaic .ph:nth-child(2) { grid-column: 5 / 7; aspect-ratio: 2 / 3; align-self: end; }
.gal-mosaic .ph:nth-child(3) { grid-column: 2 / 7; aspect-ratio: 16 / 10; }
.gal-mosaic .ph:nth-child(4) { grid-column: 1 / 4; aspect-ratio: 1; }
.gal-mosaic .ph:nth-child(5) { grid-column: 4 / 7; aspect-ratio: 1; margin-top: 24px; }
.gal-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; }
.gal-row .ph { flex: none; width: 70%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
.gal-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Numbered: a staggered column, each photo with its number (01, 02, …) over the top corner. */
.gal-numbered { counter-reset: gal; gap: 18px; }
.gal-numbered .ph { position: relative; width: 78%; aspect-ratio: 4 / 5; counter-increment: gal; border-radius: var(--photo-radius, 0); }
.gal-numbered .ph:nth-child(even) { margin-left: auto; }
.gal-numbered .ph::before { content: counter(gal, decimal-leading-zero); position: absolute; z-index: 1; top: 10px; left: 12px; font: 400 40px/1 var(--f-head); color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.45); font-style: normal; }
.gal-pair .ph { aspect-ratio: 3 / 4; }
.gal-pair .ph:nth-child(3n) { grid-column: span 2; aspect-ratio: 16 / 9; }
.gal .ph { border-radius: var(--photo-radius, 0); }

/* Forms */
.fr { display: grid; gap: 2px; margin-bottom: 18px; text-align: left; }
.fr label, .legend { font-size: 14.5px; color: var(--dim); font-style: var(--label-style, italic); }
.inv input[type="text"], .inv textarea, .inv select { width: 100%; background: var(--field-bg, transparent); color: var(--ink); border: 0; border-bottom: 1px solid var(--field-line, var(--dim)); padding: 8px var(--field-pad, 0px); font: 400 18px/1.4 var(--f-body); border-radius: 0; }
.inv select { appearance: none; }
.inv select option { color: #111; background: #fff; }
.inv textarea { min-height: 84px; resize: vertical; }
.inv input:focus, .inv textarea:focus, .inv select:focus { outline: none; border-bottom: 2px solid var(--accent); }
.inv fieldset { border: 0; margin: 0 0 18px; padding: 0; min-width: 0; text-align: left; }
.opts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 6px; }
.opt { position: relative; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 17px; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--dim); stroke-width: 1.5; }
.opt input:checked + svg { fill: var(--accent); stroke: var(--accent); }
.opt input:focus-visible + svg { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: var(--radius, 0); background: var(--btn-bg); color: var(--btn-ink); padding: 12px 22px; font: 500 16px/1.2 var(--f-btn, var(--f-body)); letter-spacing: var(--btn-track, 0); cursor: pointer; }
.btn:hover { filter: brightness(1.1); }
.note { margin: 12px 0 0; font-size: 13.5px; color: var(--dim); max-width: 38ch; }
.a-center .note { margin-left: auto; margin-right: auto; }
.wishes { margin-top: 28px; text-align: left; }
.wish { padding: 14px 0; border-top: 1px solid var(--line); }
.wish p { margin: 0; }
.wish .who { font-weight: 600; }
.wish .when { font-size: 13px; color: var(--dim); margin-top: 2px; }
.check { display: flex; gap: 9px; align-items: center; margin: -6px 0 18px; font-size: 14.5px; color: var(--dim); cursor: pointer; text-align: left; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.count { display: block; margin-top: 4px; text-align: right; font-size: 12.5px; color: var(--dim); }
.err { margin: 0 0 14px; font-size: 14.5px; font-weight: 600; color: var(--accent); text-align: left; }
.btn-line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.wish .del { margin-top: 4px; padding: 0; border: 0; background: none; color: var(--dim); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.b .wish-total { margin: 28px 0 0; font-size: 14px; text-align: left; }
.b [data-wish-held] { margin-top: 18px; font-weight: 600; }
.b .wish-total + .wishes { margin-top: 8px; }
.inv [data-wish-more] { margin-top: 18px; }
.inv input:disabled { opacity: .55; }
.inv input[readonly] { border-bottom-style: dashed; }
.ts:not(:empty) { margin: 0 0 14px; }
.acct { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0 14px; padding: 14px 0; border-top: 1px solid var(--line); text-align: left; }
.acct p { margin: 0; }
.acct .bank { font-size: 14px; color: var(--accent); font-weight: 600; letter-spacing: .04em; }
.acct .num { font-size: 23px; letter-spacing: .04em; font-variant-numeric: lining-nums tabular-nums; }
.acct .holder { font-size: 14.5px; color: var(--dim); }
.copy { background: none; border: 0; padding: 6px 0; font-size: 16px; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; cursor: pointer; }
.qris { width: 180px; max-width: 100%; aspect-ratio: 1; background: #fff; color: #555; display: grid; place-items: center; text-align: center; padding: 18px; font-size: 12.5px; font-style: italic; margin-top: 16px; }
.a-center .qris { margin-left: auto; margin-right: auto; }
/* Copy confirmation: floats above the music button. Button colours are a readable pair in plain and alternate sections alike. */
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 20; width: max-content; max-width: calc(100% - 32px); margin: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 8px 24px rgba(0, 0, 0, .3); text-align: center; background: var(--btn-bg); color: var(--btn-ink); padding: 10px 16px; border-radius: 4px; font-size: 14.5px; }

/* Closing and footer */
.b-closing .names { font: 400 calc(var(--name-size, 48px) * 1.15)/1.05 var(--f-names); color: var(--strong, var(--ink)); margin: 20px 0; }
.b-closing .fam { margin: 0; color: var(--dim); font-style: italic; }
/* Sections without a design of their own (wireframe 6): built only from each theme's tokens. */
.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--photo-radius, 0); background: var(--ph, rgba(127,127,127,.18)); }
.video img, .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.video button { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; background: rgba(0,0,0,.18); cursor: pointer; }
.video .play { width: 64px; height: 64px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-ink); display: grid; place-items: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.video .play svg { width: 28px; height: 28px; fill: currentColor; margin-left: 3px; }
.video-ph { aspect-ratio: 16 / 9; }
.story { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; text-align: left; }
.story li { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.story li:last-child { border-bottom: 1px solid var(--line); }
.story b { font: var(--h-weight, 600) 17px/1.3 var(--f-head); color: var(--accent); }
.swatches { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 18px; }
.a-center .swatches { justify-content: center; }
.swatch { display: grid; justify-items: center; gap: 6px; max-width: 72px; font-size: 13px; text-align: center; }
.swatch i { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line), 0 0 0 1px var(--line); }
.live-line { margin: 0 0 14px; }
.live-now { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink); font-size: 12.5px; font-weight: 600; }
.foot { background: var(--foot-bg, var(--bg)); color: var(--foot-ink, var(--dim)); padding-block: 24px calc(30px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
.foot .in { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* Music button */
.dock { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); height: 0; display: flex; justify-content: flex-end; padding-right: max(16px, env(safe-area-inset-right, 0px)); z-index: 6; }
.music { transform: translateY(-100%); width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--accent); background: var(--music-bg, var(--bg)); color: var(--accent); display: grid; place-items: center; cursor: pointer; padding: 0; }
.music svg { width: 28px; height: 28px; fill: currentColor; stroke: currentColor; }
.music[aria-pressed="false"] { opacity: .55; }

/* ---------- Notes ---------- */
.notes { width: 100%; max-width: 430px; background: var(--notes-bg, #F2F2EF); color: var(--notes-ink, #1D1F24); color-scheme: light; padding-block: 36px 56px; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); font: 400 15px/1.55 var(--page-font, system-ui, sans-serif); }
@media (min-width: 1000px) { .notes { position: sticky; top: calc(84px + env(safe-area-inset-top, 0px)); max-width: 380px; max-height: calc(100vh - 110px); overflow-y: auto; } }
.notes h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.notes h3 { margin: 22px 0 6px; font-size: 14.5px; }
.notes p { margin: 0 0 10px; }
.notes .sub { opacity: .75; }
.notes ul { margin: 0; padding-left: 18px; }
.notes li { margin-bottom: 5px; }
.ctrl { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 14px; padding: 12px 0; border-block: 1px solid rgba(0,0,0,.15); }
.ctrl label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.ctrl button { border: 1px solid currentColor; background: none; padding: 6px 12px; cursor: pointer; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.chip { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; line-height: 1.3; }
.chip i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.chip small { display: block; opacity: .7; font-size: 12px; }
.events-timetable .session > :not(.t) { grid-column: 2; }