/* ============================================================
   Ringchan Origin Story – style.css  v2.0.0
   All values driven by CSS custom properties set from admin.
   ============================================================ */

:root {
	--ros-green            : #096f30;
	--ros-gold             : #ffbe0f;
	--ros-blue             : #2c97de;
	--ros-dark             : #1a2740;
	--ros-text             : #4a4a4a;
	--ros-light            : #f8f7f4;
	--ros-font             : 'Cormorant Garamond', Georgia, serif;
	--ros-color-bg         : #ffffff;
	--ros-color-heading-b  : #1a2740;
	--ros-color-heading-g  : #ffbe0f;
	--ros-color-label      : #1a2740;
	--ros-color-founder-n  : #1a2740;
	--ros-color-founder-m  : #888888;
	--ros-section-pv       : 80px;
	--ros-section-ph       : 24px;
	--ros-max-width        : 1160px;
	--ros-gap              : 64px;
	--ros-img-radius       : 4px;
	--ros-founder-radius   : 4px;
	--ros-fz-body          : 17px;
	--ros-fz-heading       : 54px;
	--ros-fz-label         : 11px;
	--ros-fw-heading       : 700;
	--ros-lh-body          : 1.85;
	--ros-ls-label         : 0.2em;
	--ros-direction        : ltr;
}

.ros-section {
	background   : var(--ros-color-bg);
	padding      : var(--ros-section-pv) var(--ros-section-ph);
	font-family  : var(--ros-font);
	color        : var(--ros-text);
	direction    : var(--ros-direction);
}

.ros-inner {
	display     : flex;
	align-items : center;
	gap         : var(--ros-gap);
	max-width   : var(--ros-max-width);
	margin      : 0 auto;
}

/* Images */
.ros-images {
	position : relative;
	flex     : 0 0 420px;
	height   : 480px;
}

.ros-img {
	position      : absolute;
	border-radius : var(--ros-img-radius);
	overflow      : hidden;
	box-shadow    : 0 12px 40px rgba(0,0,0,.18);
}

.ros-img img {
	display    : block;
	width      : 100%;
	height     : 100%;
	object-fit : cover;
}

.ros-img--back {
	top    : 0;
	left   : 0;
	width  : 240px;
	height : 300px;
}

.ros-img--front {
	bottom : 0;
	right  : 0;
	width  : 260px;
	height : 320px;
	border : 6px solid var(--ros-color-bg);
}

/* Content */
.ros-content {
	flex      : 1 1 0;
	min-width : 0;
}

.ros-label {
	display        : flex;
	align-items    : center;
	gap            : 14px;
	font-size      : var(--ros-fz-label);
	font-weight    : 600;
	letter-spacing : var(--ros-ls-label);
	text-transform : uppercase;
	color          : var(--ros-color-label);
	margin         : 0 0 24px;
}

.ros-label__line {
	display     : inline-block;
	width       : 40px;
	height      : 2px;
	background  : var(--ros-gold);
	flex-shrink : 0;
}

.ros-heading {
	margin      : 0 0 20px;
	line-height : 1.05;
}

.ros-heading__black {
	display        : block;
	font-size      : clamp(36px, 4.5vw, var(--ros-fz-heading));
	font-weight    : var(--ros-fw-heading);
	color          : var(--ros-color-heading-b);
	letter-spacing : -.01em;
}

.ros-heading__gold {
	display    : block;
	font-size  : clamp(40px, 5vw, calc(var(--ros-fz-heading) + 6px));
	font-weight: var(--ros-fw-heading);
	font-style : italic;
	color      : var(--ros-color-heading-g);
}

.ros-heading__rule {
	display       : block;
	width         : 48px;
	height        : 3px;
	background    : var(--ros-gold);
	margin-top    : 16px;
	border-radius : 2px;
}

.ros-body {
	margin-bottom : 36px;
}

.ros-body p {
	font-size   : var(--ros-fz-body);
	line-height : var(--ros-lh-body);
	color       : var(--ros-text);
	margin      : 0 0 18px;
}

.ros-body p:last-child { margin-bottom: 0; }

.ros-body em {
	font-style : italic;
	color      : var(--ros-dark);
}

/* Founder card */
.ros-founder {
	display       : flex;
	align-items   : center;
	gap           : 20px;
	background    : var(--ros-light);
	padding       : 20px 24px;
	border-radius : var(--ros-founder-radius);
}

.ros-founder__bar {
	display       : block;
	width         : 4px;
	align-self    : stretch;
	background    : var(--ros-green);
	border-radius : 2px;
	flex-shrink   : 0;
}

.ros-founder__avatar {
	width         : 64px;
	height        : 64px;
	border-radius : 50%;
	overflow      : hidden;
	flex-shrink   : 0;
	border        : 2px solid var(--ros-gold);
}

.ros-founder__avatar img {
	display    : block;
	width      : 100%;
	height     : 100%;
	object-fit : cover;
}

.ros-founder__info {
	display        : flex;
	flex-direction : column;
	gap            : 4px;
}

.ros-founder__name {
	font-size   : 20px;
	font-weight : 700;
	color       : var(--ros-color-founder-n);
	display     : block;
}

.ros-founder__name-link { text-decoration: none; }
.ros-founder__name-link:hover .ros-founder__name { color: var(--ros-gold); }

.ros-founder__meta {
	font-size      : var(--ros-fz-label);
	letter-spacing : .14em;
	text-transform : uppercase;
	color          : var(--ros-color-founder-m);
	display        : block;
}

/* Responsive */
@media (max-width: 900px) {
	.ros-inner {
		flex-direction : column;
		gap            : 48px;
	}
	.ros-images {
		flex      : none;
		width     : 100%;
		height    : 320px;
		max-width : 460px;
		margin    : 0 auto;
	}
	.ros-img--back  { width: 55%; height: 62%; }
	.ros-img--front { width: 58%; height: 68%; }
}

@media (max-width: 480px) {
	.ros-section { padding: 56px 16px; }
	.ros-images  { height: 260px; }
	.ros-founder { flex-wrap: wrap; }
}