@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   PONCA SIX STORIES — cover-art cards with song / audio-reading
   players and flipbook links. Class prefix: ponca-ss
   ============================================================ */

.ponca-ss {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: visible;
	background: var(--ss-section-bg, #FFFFFF);
}
.ponca-ss *, .ponca-ss *::before, .ponca-ss *::after { box-sizing: border-box; }

.ponca-ss__container.container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 60px;
	width: 100%;
}

/* ---- Header ---- */
.ponca-ss__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	max-width: 757px;
	width: 100%;
}
.ponca-ss__header-top { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
.ponca-ss__eyebrow {
	margin: 0;
	color: var(--ss-eyebrow-color, #DEB209);
	font-family: var(--ss-eyebrow-ff, 'DM Sans', sans-serif);
	font-size: var(--ss-eyebrow-fs, 13px);
	line-height: var(--ss-eyebrow-lh, 22px);
	font-weight: var(--ss-eyebrow-fw, 600);
	letter-spacing: var(--ss-eyebrow-ls, 3px);
	text-transform: uppercase;
}
.ponca-ss__heading {
	margin: 0;
	color: var(--ss-heading-color, #0D0F0E);
	font-family: var(--ss-heading-ff, 'Cormorant Garamond', serif);
	font-size: var(--ss-heading-fs, 56px);
	line-height: var(--ss-heading-lh, 62px);
	font-weight: var(--ss-heading-fw, 300);
	letter-spacing: var(--ss-heading-ls, -0.56px);
}
.ponca-ss__description {
	margin: 0;
	width: 100%;
	color: var(--ss-desc-color, #474747);
	font-family: var(--ss-desc-ff, 'DM Sans', sans-serif);
	font-size: var(--ss-desc-fs, 18px);
	line-height: var(--ss-desc-lh, 30px);
	font-weight: var(--ss-desc-fw, 400);
}

/* ---- Story card ---- */
.ponca-ss__card {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 24px;
	gap: 30px;
	background: var(--ss-card-bg, #FFFDF6);
	border: 1px solid var(--ss-card-border, #F5E7B3);
	border-radius: 20px;
}

.ponca-ss__media {
	flex: none;
	width: 500px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
}
.ponca-ss__media img { width: 100%; height: 100%; display: block; object-fit: cover; }

.ponca-ss__content {
	flex: 1 1 0%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.ponca-ss__card-top { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; width: 100%; }
.ponca-ss__number {
	color: var(--ss-number-color, #474747);
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 25px;
	font-weight: 600;
}
.ponca-ss__card-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; }
.ponca-ss__title {
	margin: 0;
	width: 100%;
	color: var(--ss-title-color, #0D0F0E);
	font-family: var(--ss-title-ff, 'Cormorant Garamond', serif);
	font-size: clamp(28px, 2.66vw, 40px);
	line-height: var(--ss-title-lh, 112%);
	font-weight: var(--ss-title-fw, 500);
	letter-spacing: var(--ss-title-ls, 0.576px);
}
.ponca-ss__text {
	margin: 0;
	width: 100%;
	color: var(--ss-text-color, #474747);
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 25px;
	font-weight: 400;
}

.ponca-ss__divider { width: 100%; height: 1px; background: var(--ss-card-border, #F5E7B3); flex: none; }

/* ---- Rows ---- */
.ponca-ss__rows { display: flex; flex-direction: column; align-items: stretch; width: 100%; gap: 20px; }
.ponca-ss__row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	width: 100%;
	text-decoration: none;
	background: transparent;
	border: 0;
	padding: 0;
}
.ponca-ss__row--audio + .ponca-ss__row,
.ponca-ss__row--flipbook + .ponca-ss__row {
	border-top: 1px solid var(--ss-card-border, #F5E7B3);
	padding-top: 20px;
}
.ponca-ss__row--flipbook { justify-content: flex-start; cursor: pointer; }
.ponca-ss__row--flipbook:focus-visible { outline: 2px solid var(--ss-icon-bg, #DEB209); outline-offset: 4px; border-radius: 4px; }

.ponca-ss__row-label { display: flex; flex-direction: row; align-items: center; gap: 16px; min-width: 0; }
.ponca-ss__row-icon {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 100px;
	background: var(--ss-icon-bg, #F5E7B3);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ponca-ss__row-icon svg { display: block; width: 24px; height: 24px; }
.ponca-ss__row-text {
	color: var(--ss-row-label-color, #474747);
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 25px;
	font-weight: 600;
	text-align: left;
}

/* ---- Chrome-style player pill (shared: inline row + modal) ---- */
.ponca-ss__player {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: none;
	width: 440px;
	max-width: 100%;
	height: 52px;
	padding: 15px 14px;
	gap: 12px;
	border-radius: 200px;
	background: var(--ss-player-bg, #FFFFFF);
}
.ponca-ss__player--modal { background: var(--ss-player-bg-modal, #F1F3F4); width: 100%; }
.ponca-ss__player--modal.is-empty { display: none; }
.ponca-ss__player-play,
.ponca-ss__player-volume,
.ponca-ss__player-more {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: inherit;
}
.ponca-ss__player-time {
	flex: none;
	color: #000000;
	font-family: 'Roboto', 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 16px;
	white-space: nowrap;
}
.ponca-ss__player-timeline {
	position: relative;
	flex: 1 1 auto;
	min-width: 60px;
	height: 4px;
	border-radius: 200px;
	cursor: pointer;
}
.ponca-ss__player-track {
	position: absolute;
	inset: 0;
	background: var(--ss-progress-track, #D9D9D9);
	border-radius: 200px;
}
.ponca-ss__player-progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 4px;
	width: 0%;
	background: var(--ss-progress-fill, #595959);
	border-radius: 200px;
}
/* ---- 3-dot "more" menu: Download + Playback speed ---- */
.ponca-ss__more { position: relative; flex: none; display: flex; }
.ponca-ss__player-more { border-radius: 50%; }
.ponca-ss__player-more:hover,
.ponca-ss__player-more[aria-expanded="true"] { background: rgba(0, 0, 0, 0.08); }
.ponca-ss__more-menu {
	position: absolute;
	right: -6px;
	bottom: calc(100% + 10px);
	z-index: 50;
	min-width: 180px;
	padding: 6px 0;
	background: #FFFFFF;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	font-family: 'Roboto', 'DM Sans', sans-serif;
	font-size: 14px;
	line-height: 20px;
	text-align: left;
}
.ponca-ss__more-menu[hidden],
.ponca-ss__more-item[hidden] { display: none; }
.ponca-ss__more-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 16px;
	border: 0;
	background: transparent;
	color: #202124;
	font: inherit;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.ponca-ss__more-item:hover,
.ponca-ss__more-item:focus-visible { background: #F1F3F4; color: #202124; outline: none; }
.ponca-ss__more-label {
	margin-top: 4px;
	padding: 8px 16px 4px;
	border-top: 1px solid #E8EAED;
	color: #5F6368;
	font-size: 12px;
	font-weight: 500;
}
.ponca-ss__more-speed { padding-left: 42px; position: relative; }
.ponca-ss__more-speed.is-active::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 10px;
	height: 5px;
	border-left: 2px solid #202124;
	border-bottom: 2px solid #202124;
	transform: translateY(-70%) rotate(-45deg);
}

/* Play / pause + volume / mute icon toggles — works for the inline row player
   (.ponca-ss__row--audio.is-playing) and the flipbook popup (.ponca-ss__modal-box.is-playing) */
.ponca-ss__player-play .ponca-ss__icon-pause,
.ponca-ss__player-volume .ponca-ss__icon-mute { display: none; }
.is-playing .ponca-ss__player-play .ponca-ss__icon-play { display: none; }
.is-playing .ponca-ss__player-play .ponca-ss__icon-pause { display: inline-block; }
.is-muted .ponca-ss__player-volume .ponca-ss__icon-volume { display: none; }
.is-muted .ponca-ss__player-volume .ponca-ss__icon-mute { display: inline-flex; }

/* ---- Audio popup modal ---- */
.ponca-ss__modal[hidden] { display: none !important; }
.ponca-ss__modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.ponca-ss__modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(13, 15, 14, 0.75);
}
.ponca-ss__modal-box {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(1102px, 92vw);
	max-height: 90vh;
	overflow: auto;
	padding: 40px;
	gap: 30px;
	background: #FFFFFF;
	border-radius: 20px;
}
.ponca-ss__modal-close {
	position: absolute;
	top: 14px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	color: #474747;
	font: 300 30px/36px Arial, sans-serif;
	cursor: pointer;
}
.ponca-ss__modal-spread {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	width: 100%;
	max-width: 1022px;
	aspect-ratio: 1022 / 347;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	/* overflow: hidden; */
}
.ponca-ss__modal-image {
	position: relative;
	flex: 1 1 50%;
	min-width: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #0B0503;
}
.ponca-ss__modal-page-num {
	position: absolute;
	left: 16px;
	bottom: 12px;
	color: rgba(255, 255, 255, 0.55);
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
	line-height: 1;
}
.ponca-ss__modal-page-num[hidden] { display: none; }
.ponca-ss__modal-nav {
	flex: 0 0 44px;
	align-self: center;
	width: 44px;
	height: 44px;
	margin: 0 8px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 50%;
	background: #FFFFFF;
	color: #0D0F0E;
	font: 400 22px/1 Arial, sans-serif;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.ponca-ss__modal-nav:disabled {
	opacity: 0.3;
	cursor: default;
}
.ponca-ss__modal-nav[hidden] { display: none; }
.ponca-ss__modal-page-count {
	margin: -8px 0 0;
	color: var(--ss-modal-lang-label, #ADA597);
	font-family: 'DM Sans', sans-serif;
	font-size: 13px;
}
.ponca-ss__modal-page-count[hidden] { display: none; }
.ponca-ss__modal-text {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
	padding: 36px 40px;
	background: #FDFCFA;
	overflow: auto;
}
.ponca-ss__modal-lang[hidden] { display: none; }
.ponca-ss__modal-lang-label {
	margin: 0 0 4px;
	color: var(--ss-modal-lang-label, #ADA597);
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-style: italic;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.2;
}
.ponca-ss__modal-lang-text {
	margin: 0;
	color: var(--ss-modal-text, #3A362F);
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 26px;
}
.ponca-ss__modal-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	width: 440px;
	max-width: 100%;
}
.ponca-ss__modal-title {
	margin: 0;
	width: 100%;
	color: var(--ss-row-label-color, #474747);
	font-family: 'DM Sans', sans-serif;
	font-size: 16px;
	line-height: 25px;
	font-weight: 600;
}

/* ---- Footer ornament ---- */
.ponca-ss__pattern {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 82px;
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: left bottom;
	pointer-events: none;
}

body.ponca-ss-modal-open { overflow: hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1399px) {
	.ponca-ss__row { 
		display: flex;
		flex-direction: column; 
		align-items: flex-start; 
		gap: 14px; 	
	}
	.ponca-ss__content{
		gap:20px
	}
	.ponca-ss__card-top{
		gap:12px
	}

}
@media (max-width: 1200px) {
	.ponca-ss__player { width: 340px; }
}

@media (max-width: 900px) {
	.ponca-ss__card { flex-direction: column; align-items: stretch; }
	.ponca-ss__media { width: 100%; }
	.ponca-ss__heading { font-size: 44px; line-height: 1.1; }
	.ponca-ss__row { flex-direction: column; align-items: flex-start; gap: 14px; }
	.ponca-ss__row--flipbook { flex-direction: row; align-items: center; }
	.ponca-ss__player { width: 100%; }
	.ponca-ss__modal-spread { flex-direction: column; aspect-ratio: 1 /1; position: relative; }
	.ponca-ss__modal-image { aspect-ratio: 1/1; background-position: center;}
	.ponca-ss__modal-text { padding: clamp(16px, 1.6vw, 24px); 
		max-height: 200px; 
		display: flex; 
		justify-content:start;
		gap:10px
	}
	/* Column layout: float the nav buttons over the image (the image is the
	   first, fixed-aspect-ratio element, so a top-of-spread offset lands on
	   it) instead of flanking the whole spread, so they stay reachable on
	   narrow screens. */
	.ponca-ss__modal-nav {
		position: absolute;
		top: 50%;
		margin: 0;
		transform: translateY(-50%);
		z-index: 1;
	}
	.ponca-ss__modal-nav--prev { left: 12px; }
	.ponca-ss__modal-nav--next { right: 12px; }
	.ponca-ss__modal-close {
		position: absolute;
    	z-index: 1000;
    	top: 21px;
    	right: 21px;
		border-radius: 7px;
    	background: #ffff;
	}
	.ponca-ss__modal-box { padding: 20px; gap: 20px; }
}

@media (max-width: 600px) {
	.ponca-ss__heading { font-size: 36px; line-height: 1.15; }
	.ponca-ss__card { padding: 16px; border-radius: 16px; }
	
	.ponca-ss__pattern { background-size: auto 56px; }
	.ponca-ss__modal-nav--next{
		right:6px
	}
	.ponca-ss__modal-nav--prev {
		left: 6px
	}
	.ponca-ss__modal-nav{
		flex: 0 0 34px;
		width: 34px;
      	height: 34px;
	}
	.ponca-ss__modal-close {
		width: 36px;
    	height: 36px;
		font: 300 28px / 26px Arial, sans-serif;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ponca-ss__row, .ponca-ss__player-progress { transition: none !important; }
}