/**
 * FlipWise viewer.
 * Everything is scoped under .flipwise so themes cannot leak in.
 */

.flipwise {
	--fw-bg: radial-gradient(120% 90% at 50% -10%, #232732 0%, #14161b 55%, #0d0f13 100%);
	--fw-fg: #f4f1ea;
	--fw-muted: #9aa1ac;
	--fw-rule: rgba(255, 255, 255, .10);
	--fw-panel: rgba(22, 25, 31, .72);
	--fw-panel-solid: rgba(26, 29, 36, .97);
	--fw-paper: #fbf8f2;
	--fw-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	position: relative;
	display: flex;
	flex-direction: column;
	height: var(--flipwise-height, calc(100vh - 140px));
	/* Never taller than the window: the theme header sits above this, so a
	   full-height box plus a header pushes the toolbar off screen and squeezes
	   the book into whatever is left. */
	max-height: calc(100vh - 40px);
	min-height: 520px;
	margin: 0 0 1.6em;
	border-radius: 14px;
	overflow: hidden;
	/* --fw-bg may be a flat colour or a gradient, so it is applied as a
	   shorthand background rather than background-color. */
	background: var(--fw-bg);
	color: var(--fw-fg);
	font-family: var(--fw-ui);
	-webkit-tap-highlight-color: transparent;
}

.flipwise--full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

/* Theme presets. An inline custom palette on the element beats these, because
   inline styles win over a class selector of any specificity. */
.flipwise--light {
	--fw-bg: linear-gradient(180deg, #f2efe9 0%, #e6e1d7 100%);
	--fw-fg: #1e222a;
	--fw-muted: #6c7480;
	--fw-rule: rgba(0, 0, 0, .10);
	--fw-panel: rgba(255, 255, 255, .78);
	--fw-panel-solid: rgba(255, 255, 255, .98);
}

.flipwise:fullscreen,
.flipwise:-webkit-full-screen {
	height: 100%;
	border-radius: 0;
	margin: 0;
}

.flipwise *,
.flipwise *::before,
.flipwise *::after {
	box-sizing: border-box;
}

.flipwise button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	margin: 0;
	cursor: pointer;
}

.flipwise :focus-visible {
	outline: 2px solid var(--flipwise-accent, #c7a15a);
	outline-offset: 3px;
	border-radius: 8px;
}

/* top bar ----------------------------------------------------- */
.flipwise__top {
	position: relative;
	z-index: 50;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
}

.flipwise__title {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 42vw;
	display: block;
}

.flipwise__spacer {
	flex: 1;
}

.flipwise__ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 999px;
	color: var(--fw-muted);
	transition: background .2s, color .2s;
}

.flipwise__ghost:hover {
	background: var(--fw-rule);
	color: var(--fw-fg);
}

.flipwise__ghost svg,
.flipwise__icon svg {
	width: 18px;
	height: 18px;
}

.flipwise__download {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--flipwise-accent, #c7a15a);
	color: #1a1508;
	font-weight: 600;
	font-size: 13.5px;
	line-height: 1;
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .6);
	transition: transform .18s cubic-bezier(.2, .8, .2, 1), filter .18s;
}

.flipwise__download svg {
	width: 16px;
	height: 16px;
}

.flipwise__download:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.flipwise__download:active {
	transform: translateY(0);
}

/* share ------------------------------------------------------- */
.flipwise__sharewrap {
	position: relative;
}

.flipwise__share {
	position: absolute;
	right: 0;
	top: 44px;
	width: 232px;
	padding: 8px;
	border-radius: 14px;
	background: var(--fw-panel-solid);
	border: 1px solid var(--fw-rule);
	box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
	z-index: 70;
}

.flipwise__share[hidden] {
	display: none;
}

.flipwise__share-hint {
	margin: 0;
	padding: 6px 10px 4px;
	font-size: 11px;
	color: var(--fw-muted);
}

.flipwise__share button {
	display: block;
	width: 100%;
	text-align: left;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 13.5px;
	transition: background .16s;
}

.flipwise__share button:hover {
	background: var(--fw-rule);
}

/* stage ------------------------------------------------------- */
.flipwise__stage {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* the flip engine claims horizontal gestures; vertical scroll stays with the page */
	touch-action: pan-y;
	min-height: 0;
}

.flipwise__zoomer {
	/* Definite size matters: the flip engine stretches to its parent, and a
	   shrink-to-fit flex child would measure zero and render nothing. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transition: transform .35s cubic-bezier(.2, .8, .2, 1);
	will-change: transform;
}

.flipwise__book {
	position: relative;
	margin: 0 auto;
	will-change: transform;
}

/* StPageFlip draws the fold, the shadow and the page geometry itself. These
   rules only dress the paper it hands us. */
.flipwise__page {
	background: var(--fw-paper);
	overflow: hidden;
	/* The engine draws its own fold and gutter shadows. A second static shadow
	   layered on top does not move with the page and reads as artificial. */
	backface-visibility: hidden;
	transform: translateZ(0);
}

/* One soft shadow under the closed book, not under each moving sheet. */
.flipwise__book::after {
	content: "";
	position: absolute;
	left: 4%;
	right: 4%;
	bottom: -14px;
	height: 26px;
	pointer-events: none;
	background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
	opacity: .8;
}

.flipwise__page img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: var(--fw-paper);
	user-select: none;
	-webkit-user-drag: none;
	/* Keeps the page on its own compositing layer so the turn does not
	   repaint the document on every frame. */
	backface-visibility: hidden;
	transform: translateZ(0);
}

.flipwise__page[data-density="hard"] {
	background: var(--fw-paper);
}

.stf__parent {
	margin: 0 auto;
	touch-action: pan-y;
}

.stf__block {
	overflow: visible;
}

/* Panning shield: inert until the book is zoomed, so it never intercepts a
   page turn. */
.flipwise__shield {
	position: absolute;
	inset: 0;
	z-index: 25;
	display: none;
	cursor: grab;
	touch-action: none;
}

.flipwise.is-zoomed .flipwise__shield {
	display: block;
}

.flipwise.is-zoomed .flipwise__zoomer.is-grabbing {
	cursor: grabbing;
}

/* loading + hint ---------------------------------------------- */
.flipwise__loading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-size: 13.5px;
	color: var(--fw-muted);
	background: inherit;
	z-index: 20;
	transition: opacity .35s;
}

.flipwise__loading[hidden] {
	display: none;
}

.flipwise__book {
	opacity: 0;
	transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}

.flipwise.is-ready .flipwise__book {
	opacity: 1;
}

.flipwise.is-zoomed .flipwise__stage {
	cursor: grab;
}

.flipwise__spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid var(--fw-rule);
	border-top-color: var(--flipwise-accent, #c7a15a);
	animation: flipwise-spin .8s linear infinite;
}

@keyframes flipwise-spin {
	to {
		transform: rotate(360deg);
	}
}

.flipwise__hint {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 11.5px;
	letter-spacing: .04em;
	color: var(--fw-muted);
	opacity: .75;
	transition: opacity .4s;
	z-index: 30;
	pointer-events: none;
}

.flipwise__hint.is-hidden {
	opacity: 0;
}

/* dock -------------------------------------------------------- */
.flipwise__dock {
	position: relative;
	z-index: 50;
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	padding: 0 12px 12px;
}

.flipwise__bar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px;
	border-radius: 999px;
	background: var(--fw-panel);
	border: 1px solid var(--fw-rule);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 20px 50px -22px rgba(0, 0, 0, .9);
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

.flipwise__bar::-webkit-scrollbar {
	display: none;
}

.flipwise__sep {
	width: 1px;
	height: 22px;
	background: var(--fw-rule);
	margin: 0 6px;
	flex: none;
}

.flipwise__icon {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fw-muted);
	transition: background .18s, color .18s;
}

.flipwise__icon:hover {
	background: var(--fw-rule);
	color: var(--fw-fg);
}

.flipwise__icon[aria-pressed="true"] {
	color: var(--flipwise-accent, #c7a15a);
	background: var(--fw-rule);
}

.flipwise__icon:disabled {
	opacity: .3;
	cursor: default;
}

.flipwise__pager {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	font-size: 13px;
	color: var(--fw-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.flipwise__pager input {
	width: 42px;
	height: 28px;
	text-align: center;
	font: inherit;
	color: var(--fw-fg);
	background: var(--fw-rule);
	border: 1px solid var(--fw-rule);
	border-radius: 7px;
	padding: 0;
}

.flipwise__pager input::-webkit-outer-spin-button,
.flipwise__pager input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* filmstrip --------------------------------------------------- */
.flipwise__film {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 45;
	padding: 16px 16px 92px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	background: linear-gradient(to top, rgba(10, 12, 15, .96), rgba(10, 12, 15, .72) 70%, transparent);
	transform: translateY(102%);
	transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.flipwise--light .flipwise__film {
	background: linear-gradient(to top, rgba(240, 237, 230, .98), rgba(240, 237, 230, .75) 70%, transparent);
}

.flipwise__film[hidden] {
	display: block;
	visibility: hidden;
}

.flipwise__film.is-open {
	transform: translateY(0);
	visibility: visible;
}

.flipwise__thumb {
	display: inline-block;
	position: relative;
	margin-right: 10px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--fw-paper);
	border: 1px solid transparent;
	transition: border-color .2s, transform .2s;
	vertical-align: top;
}

.flipwise__thumb:hover {
	transform: translateY(-3px);
}

.flipwise__thumb.is-current {
	border-color: var(--flipwise-accent, #c7a15a);
}

.flipwise__thumb canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.flipwise__thumb span {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font-size: 10px;
	padding: 2px 0;
	background: rgba(12, 14, 18, .72);
	color: #d7dbe2;
}

/* gate -------------------------------------------------------- */
.flipwise__gate {
	position: absolute;
	inset: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(8, 10, 13, .72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: flipwise-fade .25s ease;
}

.flipwise__gate[hidden] {
	display: none;
}

@keyframes flipwise-fade {
	from {
		opacity: 0;
	}
}

.flipwise__gate-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	max-height: 100%;
	overflow-y: auto;
	padding: 26px 24px 22px;
	border-radius: 16px;
	background: var(--fw-panel-solid);
	border: 1px solid var(--fw-rule);
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
	animation: flipwise-rise .3s cubic-bezier(.2, .8, .2, 1);
}

@keyframes flipwise-rise {
	from {
		transform: translateY(12px);
		opacity: 0;
	}
}

.flipwise__gate-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--fw-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.flipwise__gate-close svg {
	width: 16px;
	height: 16px;
}

.flipwise__gate-close:hover {
	background: var(--fw-rule);
	color: var(--fw-fg);
}

.flipwise__gate-eyebrow {
	margin: 0 0 6px;
	font-size: 10.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--flipwise-accent, #c7a15a);
}

.flipwise__gate-card h3 {
	margin: 0 0 6px;
	font-size: 21px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--fw-fg);
}

.flipwise__gate-body {
	margin: 0 0 18px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fw-muted);
}

.flipwise__field {
	margin-bottom: 12px;
}

.flipwise__field label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	color: var(--fw-muted);
}

.flipwise__field input {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	font: inherit;
	font-size: 14px;
	color: var(--fw-fg);
	background: var(--fw-rule);
	border: 1px solid var(--fw-rule);
	border-radius: 10px;
	transition: border-color .18s;
}

.flipwise__field input:focus {
	border-color: var(--flipwise-accent, #c7a15a);
}

.flipwise__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.flipwise__gate-error {
	margin: 0 0 10px;
	font-size: 13px;
	color: #ff8f8f;
}

.flipwise__gate-error[hidden] {
	display: none;
}

.flipwise__gate-submit {
	width: 100%;
	height: 44px;
	justify-content: center;
	margin-top: 4px;
}

.flipwise__gate-submit[disabled] {
	opacity: .6;
	cursor: default;
}

.flipwise__gate-note {
	margin: 14px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: var(--fw-muted);
}

/* toast ------------------------------------------------------- */
.flipwise__toast {
	position: absolute;
	left: 50%;
	bottom: 84px;
	z-index: 95;
	padding: 10px 16px;
	border-radius: 999px;
	font-size: 13px;
	background: var(--fw-panel-solid);
	border: 1px solid var(--fw-rule);
	color: var(--fw-fg);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity .25s, transform .25s;
}

.flipwise__toast.is-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

.flipwise__noscript,
.flipwise-notice {
	padding: 14px 18px;
	font-size: 14px;
	color: var(--fw-muted);
}

.flipwise .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* mobile ------------------------------------------------------ */
@media (max-width: 820px) {
	.flipwise__title {
		max-width: 38vw;
		font-size: 13.5px;
	}

	.flipwise__top {
		padding: 10px 12px;
	}

	.flipwise__download {
		padding: 0 12px;
	}

	.flipwise__download span {
		display: none;
	}

	.flipwise__hint {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.flipwise *,
	.flipwise *::before,
	.flipwise *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ================================================================
   Flat transition styles
   These do not fold paper. One page, or a pair, sits in the mount and
   the outgoing and incoming pages animate past each other.
   ================================================================ */

.flipwise--flat .flipwise__book--flat {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	perspective: 1600px;
}

.flipwise--flat .flipwise__page {
	position: absolute;
	top: 0;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition:
		transform var(--fw-speed, 900ms) cubic-bezier(.33, .01, .2, 1),
		opacity var(--fw-speed, 900ms) cubic-bezier(.33, .01, .2, 1);
	will-change: transform, opacity;
}

.flipwise--flat .flipwise__page.is-showing {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	z-index: 2;
}

/* --- slide ---------------------------------------------------- */
.flipwise--flat[data-style="slide"] .flipwise__page.is-entering-fwd {
	transform: translateX(110%);
}

.flipwise--flat[data-style="slide"] .flipwise__page.is-entering-back {
	transform: translateX(-110%);
}

.flipwise--flat[data-style="slide"] .flipwise__page.is-leaving-back {
	opacity: 0;
	transform: translateX(-110%);
}

.flipwise--flat[data-style="slide"] .flipwise__page.is-leaving-fwd {
	opacity: 0;
	transform: translateX(110%);
}

/* --- fade ----------------------------------------------------- */
.flipwise--flat[data-style="fade"] .flipwise__page.is-entering-fwd,
.flipwise--flat[data-style="fade"] .flipwise__page.is-entering-back {
	transform: none;
	opacity: 0;
}

.flipwise--flat[data-style="fade"] .flipwise__page.is-leaving-back,
.flipwise--flat[data-style="fade"] .flipwise__page.is-leaving-fwd {
	opacity: 0;
	transform: none;
}

/* --- zoom ----------------------------------------------------- */
.flipwise--flat[data-style="zoom"] .flipwise__page.is-entering-fwd {
	transform: scale(.82);
	opacity: 0;
}

.flipwise--flat[data-style="zoom"] .flipwise__page.is-entering-back {
	transform: scale(1.18);
	opacity: 0;
}

.flipwise--flat[data-style="zoom"] .flipwise__page.is-leaving-back {
	opacity: 0;
	transform: scale(1.18);
}

.flipwise--flat[data-style="zoom"] .flipwise__page.is-leaving-fwd {
	opacity: 0;
	transform: scale(.82);
}

/* --- cube ----------------------------------------------------- */
.flipwise--flat[data-style="cube"] .flipwise__page {
	backface-visibility: hidden;
}

.flipwise--flat[data-style="cube"] .flipwise__page.is-entering-fwd {
	transform: translateX(60%) rotateY(55deg);
	opacity: 0;
}

.flipwise--flat[data-style="cube"] .flipwise__page.is-entering-back {
	transform: translateX(-60%) rotateY(-55deg);
	opacity: 0;
}

.flipwise--flat[data-style="cube"] .flipwise__page.is-leaving-back {
	opacity: 0;
	transform: translateX(-60%) rotateY(-55deg);
}

.flipwise--flat[data-style="cube"] .flipwise__page.is-leaving-fwd {
	opacity: 0;
	transform: translateX(60%) rotateY(55deg);
}

/* --- card: a flat 180 degree turn, no fold -------------------- */
.flipwise--flat[data-style="card"] .flipwise__page {
	transform-origin: left center;
	backface-visibility: hidden;
}

.flipwise--flat[data-style="card"] .flipwise__page.is-entering-fwd {
	transform: rotateY(88deg);
	opacity: 0;
}

.flipwise--flat[data-style="card"] .flipwise__page.is-entering-back {
	transform: rotateY(-88deg);
	opacity: 0;
}

.flipwise--flat[data-style="card"] .flipwise__page.is-leaving-back {
	opacity: 0;
	transform: rotateY(-88deg);
}

.flipwise--flat[data-style="card"] .flipwise__page.is-leaving-fwd {
	opacity: 0;
	transform: rotateY(88deg);
}

/* --- stack: pages lift off a pile ----------------------------- */
.flipwise--flat[data-style="stack"] .flipwise__page.is-entering-fwd {
	transform: translate(6%, 6%) scale(.94) rotate(1.5deg);
	opacity: 0;
}

.flipwise--flat[data-style="stack"] .flipwise__page.is-entering-back {
	transform: translate(-6%, -4%) scale(1.06) rotate(-1.5deg);
	opacity: 0;
}

.flipwise--flat[data-style="stack"] .flipwise__page.is-leaving-back {
	opacity: 0;
	transform: translate(-8%, -5%) scale(1.08) rotate(-2deg);
}

.flipwise--flat[data-style="stack"] .flipwise__page.is-leaving-fwd {
	opacity: 0;
	transform: translate(8%, 6%) scale(.92) rotate(2deg);
}

/* --- single: one page at every width -------------------------- */
.flipwise--flat[data-style="single"] .flipwise__page.is-entering-fwd {
	transform: translateX(110%);
}

.flipwise--flat[data-style="single"] .flipwise__page.is-entering-back {
	transform: translateX(-110%);
}

.flipwise--flat[data-style="single"] .flipwise__page.is-leaving-back {
	opacity: 0;
	transform: translateX(-110%);
}

.flipwise--flat[data-style="single"] .flipwise__page.is-leaving-fwd {
	opacity: 0;
	transform: translateX(110%);
}

/* A failure the reader can actually act on, rather than a stuck spinner. */
.flipwise__loading--error {
	flex-direction: column;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
	line-height: 1.55;
}

.flipwise__loading--error p {
	margin: 0;
}

.flipwise__loading--error a {
	color: var(--flipwise-accent, #c7a15a);
	text-decoration: underline;
}

/* Browser-native display, used when the viewer script cannot run at all. */
.flipwise__object {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--fw-paper);
}

.flipwise[data-fallback="1"] .flipwise__hint,
.flipwise[data-fallback="1"] .flipwise__dock {
	display: none;
}

/* Placeholder shown on a sheet whose image has not arrived yet. */
.flipwise__pending {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	letter-spacing: .18em;
	color: #b9b0a0;
	background: var(--fw-paper);
	pointer-events: none;
	transition: opacity .25s ease;
}

.flipwise__page.is-drawn .flipwise__pending {
	opacity: 0;
}

/* The flip engine measures the block it creates inside our container. Give it
   the container's size so its own measurements agree with ours. */
.flipwise__book .stf__parent,
.flipwise__book .stf__block {
	width: 100%;
	height: 100%;
}

/* Controls a flipbook has chosen to hide on the current screen size. */
.flipwise.hide-thumbs [data-fw="thumbs"],
.flipwise.hide-share .flipwise__sharewrap {
	display: none;
}