/* HalftoneStudio Magazine — HTML5 flipbook viewer
   Replaces the old Flash (book.swf) reader with a native, dependency-free viewer.
   No animation: pages swap instantly, and the stage is sized to the image
   itself so it always fills exactly (no artificial aspect-ratio box to
   mismatch against). */

.pk-flip {
	--paper: #fbfaf8;
	--ink: #4a4a4a;
	--ink-soft: #7f7f7f;
	--line: #dcdcdc;
	--accent: #2b2b2b;
	box-sizing:border-box;
	width:100%;
	max-width:1040px;
	margin:0 auto;
	padding:14px 14px 22px;
	text-align:center;
}
.pk-flip *, .pk-flip *:before, .pk-flip *:after { box-sizing:border-box; }

.pk-flip-bar {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:0 2px 12px;
	font:normal normal normal 10pt sans-serif;
	color:var(--ink-soft);
}
.pk-flip-bar h1 {
	font-size:12pt;
	margin:0;
	color:var(--ink);
	font-weight:600;
	text-align:left;
	line-height:1.3;
}
.pk-flip-bar .pk-back {
	white-space:nowrap;
	color:var(--ink-soft);
	text-decoration:none;
	border:1px solid var(--line);
	border-radius:3px;
	padding:6px 12px;
	background:#fff;
}
.pk-flip-bar .pk-back:hover { background:var(--accent); color:#fff; border-color:var(--accent); }

.pk-flip-stage-wrap {
	position:relative;
	margin:0 auto;
	background:
		repeating-linear-gradient(90deg, rgba(0,0,0,0.025) 0 1px, transparent 1px 100%),
		var(--paper);
	border:1px solid var(--line);
	border-radius:4px;
	box-shadow:0 18px 40px -20px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.06);
	padding:22px;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:220px;
}

.pk-flip-stage {
	position:relative;
	display:block;
	/*width:100%;*/
	line-height:0;
}

.pk-flip-stage img {
	display:block;
	width:100%;
	height:auto;
	background:#fff;
	box-shadow:0 0 0 1px rgba(0,0,0,0.06);
	pointer-events:none;
	user-select:none;
}

.pk-flip-zone {
	position:absolute;
	top:0; bottom:0;
	width:36%;
	z-index:8;
	cursor:pointer;
	background:transparent;
}
.pk-flip-zone.prev { left:0; }
.pk-flip-zone.next { right:0; }
.pk-flip-zone:hover { background:rgba(0,0,0,0.02); }

.pk-flip-spinner {
	position:absolute;
	inset:0;
	display:none;
	align-items:center;
	justify-content:center;
	background:rgba(251,250,248,0.9);
	z-index:20;
	font:normal normal normal 9pt sans-serif;
	color:var(--ink-soft);
}
.pk-flip-spinner.show { display:flex; }

.pk-flip-controls {
	display:flex;
	align-items:center;
	justify-content:center;
	gap:14px;
	margin-top:16px;
	flex-wrap:wrap;
}
.pk-flip-controls button {
	font:normal normal normal 10pt sans-serif;
	color:var(--ink);
	background:#fff;
	border:1px solid var(--line);
	border-radius:3px;
	padding:7px 14px;
	cursor:pointer;
}
.pk-flip-controls button:hover:not(:disabled) { background:var(--accent); color:#fff; border-color:var(--accent); }
.pk-flip-controls button:disabled { opacity:0.35; cursor:default; }
.pk-flip-count {
	font:normal normal normal 10pt sans-serif;
	color:var(--ink-soft);
	min-width:64px;
}
.pk-flip-count button {
	border:none;
	background:none;
	color:var(--ink-soft);
	text-decoration:underline;
	cursor:pointer;
	padding:0;
	font:inherit;
}

.pk-flip-thumbs {
	display:none;
	margin-top:16px;
	padding-top:16px;
	border-top:1px solid var(--line);
	max-height:260px;
	overflow-y:auto;
	grid-template-columns:repeat(auto-fill, minmax(64px, 1fr));
	gap:8px;
	text-align:left;
}
.pk-flip-thumbs.open { display:grid; }
.pk-flip-thumbs button {
	border:1px solid var(--line);
	background:#fff;
	padding:0;
	cursor:pointer;
	aspect-ratio:466/700;
	overflow:hidden;
	position:relative;
	border-radius:2px;
}
.pk-flip-thumbs button.is-current { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.pk-flip-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.pk-flip-thumbs span {
	position:absolute;
	left:2px; bottom:2px;
	font:normal normal normal 7pt sans-serif;
	background:rgba(255,255,255,0.85);
	color:var(--ink-soft);
	padding:1px 3px;
	border-radius:2px;
}

.pk-flip-hint {
	margin-top:10px;
	font:italic normal normal 8.5pt sans-serif;
	color:#a6a6a6;
}

.pk-flip-noscript {
	font:normal normal normal 10pt sans-serif;
	color:var(--ink-soft);
	padding:40px 10px;
}

/* Responsive */
@media (max-width:720px) {
	.pk-flip { padding:10px 8px 18px; }
	.pk-flip-stage-wrap { padding:10px; }
	.pk-flip-bar { flex-direction:column; align-items:flex-start; gap:8px; }
	.pk-flip-bar h1 { font-size:11pt; }
	.pk-flip-zone { width:30%; }
	.pk-flip-controls button { padding:8px 12px; font-size:9.5pt; }
	.pk-flip-thumbs { grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); }
}
@media (max-width:420px) {
	.pk-flip-controls { gap:8px; }
	.pk-flip-count { min-width:auto; }
}