/* Expressions of Flourishing – inherits fonts and colours from the theme. */
.eof-form, .eof-gallery-wrap, .eof-detail {
	--eof-line: color-mix(in srgb, currentColor 18%, transparent);
	--eof-soft: color-mix(in srgb, currentColor 5%, transparent);
	--eof-muted: color-mix(in srgb, currentColor 65%, transparent);
	--eof-accent: var(--wp--preset--color--primary, #1e6b5c);
	--eof-error: #b3261e;
	--eof-radius: 6px;
}

/* ---------- Form ---------- */
.eof-form { max-width: 760px; }
.eof-form fieldset { border: 1px solid var(--eof-line); border-radius: var(--eof-radius); padding: 1.25rem 1.25rem .5rem; margin: 0 0 1.5rem; }
.eof-form legend { font-weight: 700; font-size: 1.1em; padding: 0 .4rem; }
.eof-field { margin: 0 0 1.1rem; }
.eof-field > label, .eof-label { display: block; font-weight: 600; margin-bottom: .3rem; }
.eof-sub-label { display: block; margin: .6rem 0 .3rem; font-size: .95em; }
.eof-help { margin: 0 0 .4rem; font-size: .9em; color: var(--eof-muted); }
.eof-req { color: var(--eof-error); }
.eof-form input[type=text], .eof-form input[type=email], .eof-form input[type=url], .eof-form input[type=search], .eof-form select, .eof-form textarea {
	width: 100%; box-sizing: border-box; padding: .55rem .7rem; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); font: inherit; background: transparent; color: inherit;
}
.eof-form select option { color: #1a1a1a; }
.eof-form textarea { resize: vertical; }
.eof-form input[type=file] { max-width: 100%; font: inherit; }
.eof-form [aria-invalid=true] { border-color: var(--eof-error) !important; }
.eof-group { padding: .9rem; border-radius: var(--eof-radius); background: var(--eof-soft); }
.eof-group .eof-field { margin-bottom: .6rem; }
.eof-group .eof-field > label { font-weight: 500; }

.eof-choices { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.eof-choice { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); cursor: pointer; font-weight: 400; }
.eof-choice:has(input:checked) { border-color: var(--eof-accent); box-shadow: inset 0 0 0 1px var(--eof-accent); }
.eof-choice input { margin-top: .25rem; }
.eof-choice small { display: block; color: var(--eof-muted); margin-top: .2rem; line-height: 1.4; }
.eof-check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400 !important; }
.eof-check input { margin-top: .3rem; }

.eof-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.eof-remove { border: 1px solid var(--eof-line); background: transparent; color: inherit; border-radius: var(--eof-radius); width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.eof-rows .eof-row:only-child .eof-remove { visibility: hidden; }
.eof-add { border: 1px dashed var(--eof-line); background: transparent; color: inherit; border-radius: var(--eof-radius); padding: .45rem .8rem; cursor: pointer; font: inherit; font-size: .95em; }
.eof-add[hidden] { display: none; }
@media (max-width: 600px) { .eof-row { grid-template-columns: 1fr auto; } .eof-row input[type=file] { grid-column: 1 / -1; } }

.eof-error { color: var(--eof-error); font-size: .9em; margin: .3rem 0 0; }
.eof-error-summary { border: 2px solid var(--eof-error); border-radius: var(--eof-radius); padding: .75rem 1rem; margin-bottom: 1.5rem; }
.eof-error-summary ul { margin: .3rem 0 .3rem 1.2rem; }
.eof-success { border-left: 4px solid var(--eof-accent); background: var(--eof-soft); padding: 1rem 1.25rem; border-radius: var(--eof-radius); }
.eof-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.eof-show-if[hidden] { display: none; }
.eof-counter { font-size: .85em; color: var(--eof-muted); margin-top: .25rem; }
.eof-counter.over { color: var(--eof-error); }

/* ---------- Gallery ---------- */
.eof-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.eof-filter a { padding: .35rem .9rem; border: 1px solid var(--eof-line); border-radius: 999px; text-decoration: none; color: inherit; font-size: .95em; }
.eof-filter a[aria-current] { background: var(--eof-accent); border-color: var(--eof-accent); color: #fff; }
.eof-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(var(--eof-cols, 3), minmax(0, 1fr)); }
@media (max-width: 900px) { .eof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .eof-grid { grid-template-columns: 1fr; } }
.eof-card { margin: 0; }
.eof-card a { display: block; text-decoration: none; color: inherit; border-radius: var(--eof-radius); overflow: hidden; border: 1px solid var(--eof-line); height: 100%; transition: transform .15s ease, box-shadow .15s ease; }
.eof-card a:hover, .eof-card a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.eof-card-img { display: block; aspect-ratio: 4 / 3; background: var(--eof-soft); overflow: hidden; }
.eof-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.eof-card-body { display: block; padding: .8rem 1rem 1rem; }
.eof-card-title { display: block; font-weight: 700; line-height: 1.3; margin-top: .4rem; }
.eof-card-artist { display: block; color: var(--eof-muted); font-size: .92em; margin-top: .2rem; }
.eof-badge { display: inline-block; font-size: .75em; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; border: 1px solid currentColor; opacity: .85; }
.eof-pages { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; }
.eof-pages a { padding: .3rem .7rem; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); text-decoration: none; color: inherit; }
.eof-pages a[aria-current] { background: var(--eof-accent); color: #fff; border-color: var(--eof-accent); }

/* ---------- Detail page ---------- */
.eof-facts { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin: 0 0 2rem; padding: 1rem 1.25rem; background: var(--eof-soft); border-radius: var(--eof-radius); }
.eof-facts dt { font-size: .78em; text-transform: uppercase; letter-spacing: .05em; color: var(--eof-muted); margin: 0; }
.eof-facts dd { margin: .15rem 0 0; font-weight: 600; }
.eof-section { margin: 0 0 2.5rem; }
.eof-section h2 { margin-bottom: .75rem; }
.eof-section h3 { font-size: 1.05em; margin: 1.5rem 0 .5rem; }
.eof-images { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.eof-images figure, .eof-written figure { margin: 0; }
.eof-images img, .eof-written img { width: 100%; height: auto; display: block; border-radius: var(--eof-radius); }
.eof-detail figcaption { font-size: .9em; color: var(--eof-muted); margin-top: .4rem; }
.eof-media { margin: 0 0 1.5rem; }
.eof-embed iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.eof-written ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.eof-file { display: inline-flex; gap: .6rem; align-items: center; padding: .6rem .9rem; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); text-decoration: none; color: inherit; }
.eof-file-type { font-size: .72em; font-weight: 700; padding: .15rem .4rem; border-radius: 4px; background: var(--eof-accent); color: #fff; }
.eof-artist-inner { display: flex; gap: 1.5rem; align-items: flex-start; }
.eof-artist-inner h3 { margin-top: 0; }
.eof-avatar { width: 140px; height: 140px; object-fit: cover; border-radius: 50%; flex: none; }
@media (max-width: 560px) { .eof-artist-inner { flex-direction: column; } }
.eof-credits ul { margin: 0 0 1rem 1.2rem; }
.eof-back { margin-top: 2rem; }
.eof-private { display: inline-block; font-size: .72em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; padding: .05rem .45rem; border-radius: 999px; border: 1px solid currentColor; opacity: .7; margin-left: .35rem; vertical-align: .1em; }

/* Name questions side by side */
.eof-name-row { display: flex; flex-wrap: wrap; gap: 0 .75rem; }
.eof-name-row > .eof-field { flex: 1 1 160px; min-width: 0; }
.eof-name-row > .eof-name-prefix { flex: 0 1 110px; }
.eof-total-indicator { font-size: .9em; color: var(--eof-muted); margin: 0 0 .4rem; } .eof-total-indicator.over { color: var(--eof-error); font-weight: 600; }
.eof-name-row.all-private .eof-private { display: none; }
.eof-name-heading { margin: 0 0 .2rem; }
.eof-name-row > .eof-field > label { font-weight: 500; font-size: .95em; }
.eof-file-note { font-size: .88em; margin: .35rem 0 0; color: var(--eof-muted); }
.eof-file-note.is-error { color: var(--eof-error); font-weight: 600; }
.eof-row .eof-file-note { grid-column: 1 / -1; margin-top: 0; }

/* ---------- Image viewer (lightbox) ---------- */
.eof-lb-link { position: relative; display: block; cursor: zoom-in; border-radius: var(--eof-radius); overflow: hidden; }
.eof-lb-link img { transition: transform .35s ease, filter .35s ease; }
.eof-lb-link:hover img, .eof-lb-link:focus-visible img { transform: scale(1.03); filter: brightness(.92); }
.eof-lb-zoom { position: absolute; right: .55rem; bottom: .55rem; width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E") center / 16px no-repeat; opacity: 0; transition: opacity .2s; }
.eof-lb-link:hover .eof-lb-zoom, .eof-lb-link:focus-visible .eof-lb-zoom { opacity: 1; }
@media (hover: none) { .eof-lb-zoom { opacity: .85; } }

.eof-lb { position: fixed; inset: 0; z-index: 999999; display: grid; grid-template-rows: auto 1fr auto; background: rgba(12,12,14,.97); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; opacity: 0; transition: opacity .2s ease; -webkit-tap-highlight-color: transparent; }
.eof-lb[hidden] { display: none; }
.eof-lb.is-open { opacity: 1; }
.eof-lb button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; box-shadow: none; }
.eof-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.eof-lb svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.eof-lb-top { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; }
.eof-lb-count { font-size: .9rem; letter-spacing: .04em; opacity: .8; }
.eof-lb .eof-lb-close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); transition: background .2s; }
.eof-lb .eof-lb-close:hover { background: rgba(255,255,255,.22); }

.eof-lb-stage { min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 4.5rem; }
.eof-lb-figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.eof-lb-frame { position: relative; min-height: 0; display: flex; justify-content: center; }
.eof-lb-img { display: block; max-width: 100%; max-height: calc(100vh - 13rem); max-height: calc(100dvh - 13rem); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); opacity: 0; transition: opacity .25s ease, transform .3s ease; }
.eof-lb-img.from-right { transform: translateX(40px); }
.eof-lb-img.from-left { transform: translateX(-40px); }
.eof-lb-img.is-in { opacity: 1; transform: none; }
.eof-lb-single .eof-lb-img { max-height: calc(100vh - 9rem); max-height: calc(100dvh - 9rem); }
.eof-lb-caption { margin-top: .8rem; max-width: 70ch; text-align: center; font-size: .95rem; line-height: 1.5; color: rgba(255,255,255,.88); }
.eof-lb-caption[hidden] { display: none; }

.eof-lb-spin { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; opacity: 0; transition: opacity .2s; animation: eof-spin .8s linear infinite; pointer-events: none; }
.eof-lb.is-loading .eof-lb-spin { opacity: 1; transition-delay: .15s; }
@keyframes eof-spin { to { transform: rotate(360deg); } }

.eof-lb .eof-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); transition: background .2s; }
.eof-lb .eof-lb-nav:hover { background: rgba(255,255,255,.25); }
.eof-lb-prev { left: 1rem; }
.eof-lb-next { right: 1rem; }

.eof-lb-strip { display: flex; gap: .5rem; justify-content: safe center; overflow-x: auto; padding: .75rem 1rem 1rem; scrollbar-width: thin; }
.eof-lb .eof-lb-thumb { flex: 0 0 auto; width: 64px; height: 48px; border-radius: 4px; overflow: hidden; opacity: .5; outline: 2px solid transparent; outline-offset: 0; transition: opacity .2s, outline-color .2s; }
.eof-lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eof-lb .eof-lb-thumb:hover { opacity: .85; }
.eof-lb .eof-lb-thumb.is-current { opacity: 1; outline-color: #fff; }

@media (max-width: 640px) {
	.eof-lb-stage { padding: 0 .5rem; }
	.eof-lb .eof-lb-nav { top: auto; bottom: 5.2rem; transform: none; width: 44px; height: 44px; background: rgba(0,0,0,.45); }
	.eof-lb-prev { left: .5rem; }
	.eof-lb-next { right: .5rem; }
	.eof-lb-img { max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); }
	.eof-lb-thumb { width: 52px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.eof-lb, .eof-lb-img, .eof-lb-link img { transition: none; }
	.eof-lb-img.from-right, .eof-lb-img.from-left { transform: none; }
}

/* ---------- Checkboxes and radio buttons ----------
   Many themes hide the browser's own boxes (appearance:none, opacity:0, display:none,
   position:absolute off-screen…) and draw their own only for their own form markup.
   The form draws its own boxes so they show and work whatever the theme does. */
.eof-form input[type=checkbox], .eof-form input[type=radio] {
	-webkit-appearance: none !important; appearance: none !important;
	display: inline-block !important; position: relative !important; inset: auto !important;
	opacity: 1 !important; visibility: visible !important; clip: auto !important; clip-path: none !important;
	transform: none !important; pointer-events: auto !important; float: none !important;
	flex: 0 0 auto !important; box-sizing: border-box !important;
	width: 1.2em !important; height: 1.2em !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important;
	margin: .2em 0 0 !important; padding: 0 !important; font-size: inherit !important;
	border: 2px solid color-mix(in srgb, currentColor 55%, transparent) !important;
	border-radius: 4px !important; background: transparent none !important; box-shadow: none !important;
	cursor: pointer !important; vertical-align: top !important;
	transition: background-color .15s, border-color .15s !important;
}
.eof-form input[type=radio] { border-radius: 50% !important; }
.eof-form input[type=checkbox]::before, .eof-form input[type=checkbox]::after,
.eof-form input[type=radio]::before, .eof-form input[type=radio]::after { content: none !important; display: none !important; }
.eof-form input[type=checkbox]:checked {
	border-color: var(--eof-accent) !important;
	background: var(--eof-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 85% no-repeat !important;
}
.eof-form input[type=radio]:checked {
	border-color: var(--eof-accent) !important;
	background: radial-gradient(circle, var(--eof-accent) 0 42%, transparent 46%) !important;
}
.eof-form input[type=checkbox]:focus-visible, .eof-form input[type=radio]:focus-visible { outline: 2px solid var(--eof-accent) !important; outline-offset: 2px !important; }
.eof-form input[aria-invalid=true][type=checkbox], .eof-form input[aria-invalid=true][type=radio] { border-color: var(--eof-error) !important; }
/* Themes that draw their own box on labels would show a second one next to ours. */
.eof-form .eof-check::before, .eof-form .eof-check::after,
.eof-form .eof-choice::before, .eof-form .eof-choice::after { content: none !important; display: none !important; }
.eof-form .eof-choice { padding: .75rem !important; }
.eof-form .eof-check { padding-left: 0 !important; position: static !important; }
@media (forced-colors: active) {
	.eof-form input[type=checkbox], .eof-form input[type=radio] { -webkit-appearance: auto !important; appearance: auto !important; }
}
.eof-form .eof-field > .eof-check, .eof-form .eof-check { display: flex !important; gap: .65rem !important; align-items: flex-start !important; margin: 0 !important; }
.eof-form .eof-choice { display: flex !important; gap: .6rem !important; align-items: flex-start !important; }

/* ---------- Required questions: live status ---------- */
.eof-form { --eof-ok: #1a7f45; }
.eof-name-row > .eof-q { flex: 1 1 160px; min-width: 0; }
.eof-name-row > .eof-q > .eof-field { margin-bottom: 0; }
.eof-req { font-weight: 700; cursor: help; }
/* Answered required question: the red * becomes a green ✓. */
.eof-q.is-done .eof-req { font-size: 0; color: var(--eof-ok); }
.eof-q.is-done .eof-req::after { content: "✓"; font-size: 1rem; line-height: 1; }
.eof-q.is-problem > .eof-field > label, .eof-q.is-problem > .eof-field > .eof-label, .eof-q.is-problem .eof-check > span { color: var(--eof-error); }
.eof-q.is-problem .eof-private { color: #6b6b6b; }
.eof-live-msg { color: var(--eof-error); font-size: .9em; font-weight: 600; margin: -.6rem 0 1rem; }
.eof-name-row .eof-live-msg { margin: .3rem 0 0; }
.eof-live-msg[hidden] { display: none; }

.eof-form legend .eof-sec-status { display: inline-block; margin-left: .6rem; padding: .1rem .55rem; border-radius: 999px; font-size: .72em; font-weight: 600; vertical-align: middle; background: color-mix(in srgb, var(--eof-error) 12%, transparent); color: var(--eof-error); }
.eof-form legend .eof-sec-status.is-done { background: color-mix(in srgb, var(--eof-ok) 14%, transparent); color: var(--eof-ok); }

.eof-ready { border: 1px solid var(--eof-line); border-radius: var(--eof-radius); padding: 1rem 1.1rem .6rem; margin: 0 0 1rem; background: var(--eof-soft); }
.eof-ready.is-ready { border-color: var(--eof-ok); background: color-mix(in srgb, var(--eof-ok) 8%, transparent); }
.eof-ready-bar { height: 6px; border-radius: 3px; background: var(--eof-line); overflow: hidden; margin-bottom: .7rem; }
.eof-ready-bar span { display: block; height: 100%; width: 0; background: var(--eof-accent); transition: width .3s ease; }
.eof-ready.is-ready .eof-ready-bar span { background: var(--eof-ok); }
.eof-ready-title { font-weight: 700; margin: 0 0 .4rem; }
.eof-ready.is-ready .eof-ready-title { color: var(--eof-ok); }
.eof-ready.is-ready .eof-ready-title::before { content: "✓ "; }
.eof-ready-lead { margin: 0 0 .2rem; font-size: .92em; }
.eof-ready-lead[hidden] { display: none; }
.eof-ready-list { margin: 0 0 .5rem 1.1rem; padding: 0; font-size: .92em; }
.eof-ready-list li { margin: .15rem 0; color: var(--eof-muted); }
.eof-form .eof-ready-item { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; color: var(--eof-accent) !important; text-decoration: underline; text-underline-offset: 2px; font: inherit; font-weight: 600; cursor: pointer; box-shadow: none !important; text-align: start; display: inline !important; vertical-align: baseline; line-height: inherit; }
.eof-form .eof-ready-item:hover { text-decoration-thickness: 2px; }

.eof-form .eof-submit.is-disabled { opacity: .45 !important; cursor: not-allowed !important; filter: grayscale(.6); }

/* ---------- Category cards with descriptions ---------- */
.eof-choices.has-desc { grid-template-columns: 1fr; }
.eof-choice-text { line-height: 1.5; }
.eof-choice-desc { font-weight: 400; color: var(--eof-muted); }

/* ---------- Word counters ---------- */
.eof-counter { font-size: .85em; color: var(--eof-muted); margin: .25rem 0 0; text-align: right; }
.eof-counter.near { color: #8a5a00; font-weight: 600; }

/* ---------- Multiple-choice dropdown (Country, Religion) ---------- */
.eof-multi-options { display: grid; gap: .25rem .9rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.eof-multi-opt { display: flex !important; gap: .5rem; align-items: flex-start; font-weight: 400 !important; margin: 0 !important; padding: .3rem .4rem; border-radius: 4px; cursor: pointer; line-height: 1.35; }
.eof-multi-opt:hover { background: var(--eof-soft); }
.eof-multi-opt:has(input:checked) { font-weight: 600 !important; }
.eof-multi-opt.is-filtered { display: none !important; }
.eof-multi.is-enhanced .eof-multi-panel { display: none; }
.eof-multi.is-enhanced.is-open .eof-multi-panel { display: block; }
.eof-multi-control { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-height: 2.9rem; padding: .35rem .5rem; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); background: transparent; cursor: pointer; }
.eof-multi.is-open .eof-multi-control { border-color: var(--eof-accent); box-shadow: 0 0 0 1px var(--eof-accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.eof-multi-chips { display: contents; }
.eof-chip { display: inline-flex; align-items: center; gap: .15rem; padding: .2rem .25rem .2rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--eof-accent) 12%, transparent); color: inherit; font-size: .92em; line-height: 1.3; }
.eof-form .eof-chip-x { all: unset; display: inline-grid !important; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; cursor: pointer; font-size: 1.05em; line-height: 1; }
.eof-form .eof-chip-x:hover { background: color-mix(in srgb, var(--eof-accent) 25%, transparent); }
.eof-form .eof-chip-x:focus-visible { outline: 2px solid var(--eof-accent); }
.eof-form .eof-multi-toggle { all: unset; flex: 1 1 8rem; min-width: 8rem; padding: .3rem .3rem; color: var(--eof-muted); cursor: pointer; box-sizing: border-box;
	background: no-repeat right .2rem center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23777' stroke-width='1.8'/%3E%3C/svg%3E"); padding-right: 1.6rem; }
.eof-form .eof-multi-toggle:focus-visible { outline: 2px solid var(--eof-accent); outline-offset: 2px; border-radius: 3px; }
.eof-multi-panel { border: 1px solid var(--eof-accent); border-top: 0; border-radius: 0 0 var(--eof-radius) var(--eof-radius); padding: .6rem; background: var(--wp--preset--color--base, #fff); }
.eof-form .eof-multi-search { width: 100%; box-sizing: border-box; margin: 0 0 .5rem; padding: .5rem .7rem; font: inherit; -webkit-appearance: none; appearance: none; }
.eof-multi-panel .eof-multi-options { max-height: 260px; overflow-y: auto; padding-right: .25rem; }
.eof-multi-none { margin: .4rem; color: var(--eof-muted); font-size: .92em; }
.eof-multi-none[hidden] { display: none; }
.eof-form .eof-multi-done { margin: .6rem 0 0; padding: .35rem .9rem; font: inherit; font-size: .9em; cursor: pointer; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); background: transparent; color: inherit; }
.eof-q.is-problem .eof-multi-control { border-color: var(--eof-error); }

/* =====================================================================
   Storyboard v1: mosaic gallery, three movements, layered contributions
   ===================================================================== */
.eof-gallery-wrap, .eof-detail, .eof-more {
	--eof-wounds: #9b3b2f; --eof-roots: #7a5a2b; --eof-flourishing: #2f7a4f;
}
.eof-badge-wounds { color: var(--eof-wounds); } .eof-badge-roots { color: var(--eof-roots); } .eof-badge-flourishing { color: var(--eof-flourishing); }

/* ---------- The three movements ---------- */
.eof-movements ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.eof-movement { --c: var(--eof-accent); position: relative; display: flex; flex-direction: column; gap: .35rem; height: 100%; box-sizing: border-box; padding: 1.1rem 1.2rem 1rem; border-radius: var(--eof-radius); border: 1px solid var(--eof-line); border-top: 4px solid var(--c); color: inherit; text-decoration: none !important; transition: background .2s, box-shadow .2s, transform .2s; }
.eof-movement-wounds { --c: var(--eof-wounds); } .eof-movement-roots { --c: var(--eof-roots); } .eof-movement-flourishing { --c: var(--eof-flourishing); }
.eof-movement:hover, .eof-movement:focus-visible { background: color-mix(in srgb, var(--c) 6%, transparent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.eof-movement[aria-current] { background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 2px var(--c); }
.eof-movement-num { font-size: .8em; letter-spacing: .12em; color: var(--c); font-weight: 700; }
.eof-movement-name { font-size: 1.35em; font-weight: 700; line-height: 1.2; }
.eof-movement-desc { font-size: .92em; color: var(--eof-muted); line-height: 1.45; }
.eof-movement-count { margin-top: auto; padding-top: .4rem; font-size: .82em; color: var(--c); font-weight: 600; }

/* ---------- Filters ---------- */
.eof-filters { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; margin: 0 0 1rem; padding: .9rem 1rem; border-radius: var(--eof-radius); background: var(--eof-soft); }
.eof-filter-field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 180px; min-width: 0; font-size: .9em; font-weight: 600; margin: 0; }
.eof-filter-field select { width: 100%; padding: .5rem .6rem; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); font: inherit; font-weight: 400; background: var(--wp--preset--color--base, #fff); color: inherit; }
.eof-filters.is-live .eof-filter-apply { display: none; }
.eof-filter-clear { font-size: .9em; padding-bottom: .55rem; }
.eof-result-count { font-size: .9em; color: var(--eof-muted); margin: 0 0 .75rem; }

/* ---------- Mosaic ---------- */
.eof-mosaic { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; }
.eof-tile { position: relative; margin: 0; overflow: hidden; background: var(--eof-soft); }
.eof-tile.is-wide { grid-column: span 2; }
.eof-tile.is-tall { grid-row: span 2; }
.eof-tile.is-big { grid-column: span 2; grid-row: span 2; }
.eof-tile a { display: block; height: 100%; color: #fff; text-decoration: none !important; }
.eof-tile img, .eof-tile-blank { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; transition: transform .6s ease, filter .4s ease; }
.eof-tile-blank { background: linear-gradient(135deg, var(--eof-line), var(--eof-soft)); }
.eof-tile a:hover img, .eof-tile a:focus-visible img { transform: scale(1.05); filter: brightness(.8); }
.eof-tile a:focus-visible { outline: 3px solid var(--eof-accent); outline-offset: -3px; }
.eof-tile-info { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .15rem; padding: 2.2rem .8rem .7rem; background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.35) 60%, transparent); opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease; }
.eof-tile a:hover .eof-tile-info, .eof-tile a:focus-visible .eof-tile-info { opacity: 1; transform: none; }
@media (hover: none) { .eof-tile-info { opacity: 1; transform: none; } }
.eof-tile-movement { font-size: .7em; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .9; }
.eof-tile-movement::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .4em; background: #fff; vertical-align: .05em; }
.eof-tile-wounds .eof-tile-movement::before { background: #e07a68; } .eof-tile-roots .eof-tile-movement::before { background: #d9b26a; } .eof-tile-flourishing .eof-tile-movement::before { background: #7fd19f; }
.eof-tile-title { font-weight: 700; line-height: 1.25; font-size: 1em; }
.eof-tile.is-big .eof-tile-title { font-size: 1.25em; }
.eof-tile-artist { font-size: .85em; opacity: .9; }
@media (max-width: 600px) {
	.eof-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 4px; }
	.eof-tile.is-big, .eof-tile.is-wide { grid-column: span 2; }
	.eof-tile-info { padding: 1.6rem .55rem .45rem; background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.25) 65%, transparent); }
	.eof-tile:not(.is-big):not(.is-wide) .eof-tile-title { font-size: .85em; }
	.eof-tile:not(.is-big):not(.is-wide) .eof-tile-artist, .eof-tile:not(.is-big):not(.is-wide) .eof-tile-movement { font-size: .68em; }
	.eof-movements ul { gap: .6rem; }
	.eof-movement { padding: .8rem 1rem; }
	.eof-movement-name { font-size: 1.15em; }
}
@media (prefers-reduced-motion: reduce) { .eof-tile img, .eof-tile-info, .eof-movement { transition: none; } }

/* ---------- Layered contribution ---------- */
/* The Cover carries the title and the main image, so hide the theme's own copies on these pages. */
.single-eof_entry .entry-header .entry-title, .single-eof_entry h1.entry-title, .single-eof_entry .wp-block-post-title,
.single-eof_entry .entry-header .post-thumbnail, .single-eof_entry .post-thumbnail, .single-eof_entry .wp-block-post-featured-image { display: none !important; }
.eof-book { position: relative; }
.eof-book-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--eof-line); }
.eof-book-back { font-weight: 600; text-decoration: none; margin-right: auto; }
.eof-book-tabs { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; }
.eof-book-tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .75rem; border-radius: 999px; color: inherit; text-decoration: none !important; font-size: .92em; border: 1px solid transparent; }
.eof-book-tabs a:hover { background: var(--eof-soft); }
.eof-book-tabs a[aria-current] { border-color: var(--eof-accent); color: var(--eof-accent); font-weight: 700; }
.eof-book-num { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; font-size: .8em; border: 1px solid currentColor; }
.eof-book-tabs a[aria-current] .eof-book-num { background: var(--eof-accent); border-color: var(--eof-accent); color: #fff; }

.eof-layer { margin: 0 0 3rem; }
.eof-layer:focus { outline: none; }
.eof-layer > h2 { margin-top: 0; }
.eof-book.is-paged .eof-layer { margin: 0; min-height: 50vh; }
.eof-book.is-paged .eof-layer[hidden] { display: none; }
.eof-layer.from-right { animation: eof-turn-r .45s cubic-bezier(.2,.7,.2,1); }
.eof-layer.from-left { animation: eof-turn-l .45s cubic-bezier(.2,.7,.2,1); }
@keyframes eof-turn-r { from { opacity: 0; transform: perspective(1400px) translateX(40px) rotateY(-6deg); transform-origin: left center; } to { opacity: 1; transform: none; } }
@keyframes eof-turn-l { from { opacity: 0; transform: perspective(1400px) translateX(-40px) rotateY(6deg); transform-origin: right center; } to { opacity: 1; transform: none; } }

.eof-cover { display: grid; gap: 2rem; align-items: center; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.eof-cover-art img { width: 100%; height: auto; max-height: 72vh; object-fit: contain; display: block; border-radius: var(--eof-radius); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.eof-cover-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.12; margin: .6rem 0 .4rem; }
.eof-cover-by { font-size: 1.15em; color: var(--eof-muted); margin: 0 0 1.25rem; }
.eof-cover .eof-facts { margin-bottom: 1.25rem; }
.eof-cover-start { margin: 0; }
.eof-book .eof-cover-go { white-space: nowrap; font-weight: 600; padding: .8rem 1.4rem; border-radius: var(--eof-radius); background: var(--eof-accent); color: #fff; border: 0; cursor: pointer; font-size: 1em; }
.eof-book .eof-cover-go:hover { filter: brightness(1.1); }
.eof-book-pager[hidden] { display: none; }
@media (max-width: 800px) { .eof-cover { grid-template-columns: 1fr; gap: 1.25rem; } }

.eof-story-text, .eof-layer-story > p, .eof-layer-story > h3 { max-width: 70ch; }
.eof-layer-story h3 { margin-top: 2rem; }
.eof-images.is-single { grid-template-columns: 1fr; }
.eof-images.is-single img { max-height: 75vh; object-fit: contain; width: auto; max-width: 100%; margin: 0 auto; }

.eof-book-pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--eof-line); }
.eof-book-pager button { font: inherit; font-weight: 600; padding: .6rem 1rem; border-radius: var(--eof-radius); border: 1px solid var(--eof-line); background: transparent; color: inherit; cursor: pointer; }
.eof-book-pager button:hover { border-color: var(--eof-accent); color: var(--eof-accent); }
.eof-book-pager .eof-book-next { margin-left: auto; border-color: var(--eof-accent); background: var(--eof-accent); color: #fff; }
.eof-book-pager .eof-book-next:hover { color: #fff; filter: brightness(1.1); }
.eof-book-pager button[hidden] { display: none; }
.eof-book-count { font-size: .9em; color: var(--eof-muted); }
@media (max-width: 600px) {
	.eof-book-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
	.eof-book-tabs a { white-space: nowrap; }
	.eof-book-count { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eof-layer.from-right, .eof-layer.from-left { animation: none; } }

/* ---------- Explore more ---------- */
.eof-more { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--eof-line); }
.eof-mosaic-small { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); grid-auto-rows: 170px; }
.eof-more-back { margin-top: 1.5rem; text-align: center; }

/* ---------- Invitation code page ---------- */
.eof-gate { max-width: 560px; padding: 1.5rem 1.6rem; border: 1px solid var(--eof-line); border-radius: var(--eof-radius); }
.eof-gate h2 { margin-top: 0; }
.eof-gate-form label { display: block; font-weight: 600; margin: 1rem 0 .35rem; }
.eof-gate-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.eof-gate-row input { flex: 1 1 200px; text-transform: uppercase; letter-spacing: .08em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.eof-cover-link { display: block; cursor: pointer; }
.eof-cover-link img { transition: transform .4s ease; }
.eof-cover-link:hover img { transform: scale(1.01); }


/* ---------- Language switch, welcome / thank-you messages ---------- */
.eof-lang { display: flex; gap: .25rem; justify-content: flex-end; margin: 0 0 1rem; }
.eof-lang a { padding: .3rem .85rem; border: 1px solid var(--eof-line, rgba(0,0,0,.15)); border-radius: 999px; text-decoration: none !important; color: inherit; font-size: .92em; line-height: 1.5; }
.eof-lang a[aria-current] { background: var(--eof-accent, #1e6b5c); border-color: var(--eof-accent, #1e6b5c); color: #fff; font-weight: 600; cursor: default; }
.eof-lang a[lang=ar] { font-size: 1em; }
.eof-rich-title { font-size: 1.3em; font-weight: 700; line-height: 1.3; margin: 0 0 .6rem; }
.eof-intro { margin: 0 0 1.25rem; }
.eof-intro p, .eof-success p { margin: 0 0 .75rem; }
.eof-success .eof-rich-title { font-size: 1.45em; }

/* ---------- Arabic form: right to left ---------- */
.eof-lang-wrap[dir=rtl] { text-align: right; }
.eof-lang-wrap[lang=ar] .eof-form, .eof-lang-wrap[lang=ar] .eof-success, .eof-lang-wrap[lang=ar] .eof-gate { line-height: 1.75; }
.eof-lang-wrap[dir=rtl] .eof-lang { justify-content: flex-start; }
.eof-lang-wrap[dir=rtl] .eof-success { border-left: 0; border-right: 4px solid var(--eof-accent); }
.eof-lang-wrap[dir=rtl] .eof-private { margin-left: 0; margin-right: .35rem; letter-spacing: 0; }
.eof-lang-wrap[dir=rtl] legend .eof-sec-status { margin-left: 0; margin-right: .6rem; }
.eof-lang-wrap[dir=rtl] .eof-counter { text-align: left; }
.eof-lang-wrap[dir=rtl] .eof-form .eof-multi-toggle { background-position: left .2rem center; padding-right: .3rem; padding-left: 1.6rem; }
.eof-lang-wrap[dir=rtl] .eof-multi-panel .eof-multi-options { padding-right: 0; padding-left: .25rem; }
.eof-lang-wrap[dir=rtl] .eof-chip { padding: .2rem .65rem .2rem .25rem; }
.eof-lang-wrap[dir=rtl] .eof-ready-list, .eof-lang-wrap[dir=rtl] .eof-error-summary ul { margin-left: 0; margin-right: 1.1rem; }
.eof-lang-wrap[dir=rtl] .eof-badge, .eof-lang-wrap[dir=rtl] .eof-private { text-transform: none; }
/* Web addresses and email addresses stay left to right inside Arabic text. */
.eof-lang-wrap[dir=rtl] input[type=email], .eof-lang-wrap[dir=rtl] input[type=url] { direction: ltr; text-align: right; }
.eof-lang-wrap[dir=rtl] input[type=email]::placeholder, .eof-lang-wrap[dir=rtl] input[type=url]::placeholder { text-align: right; }

/* ---------- Contributors' own words: shown in their own direction (Arabic right to left) ---------- */
.eof-story-text p, .eof-layer-story > p, .eof-artist-inner p, .eof-artist-inner h3, .eof-credits li,
.eof-detail figcaption, .eof-cover-title, .eof-cover-by, .eof-facts dd, .eof-tile-title, .eof-tile-artist { unicode-bidi: plaintext; text-align: start; }
.eof-multi.is-long .eof-multi-options { grid-template-columns: 1fr; }