/*
* LittleLink - Cream & Floral Theme
*/

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

:root {
	font-size: 16px;
	--scale-0: 1rem;
	--scale-1: 1.25rem;
	--scale-2: 1.563rem;
	--scale-3: 1.953rem;
	--scale-4: 2.441rem;
	--scale-5: 3.052rem;
	--spacing-xs: 0.5rem;
	--spacing-s:  1rem;
	--spacing-m:  1.5rem;
	--spacing-l:  2rem;
	--spacing-xl: 3rem;
	--spacing-xxl:4rem;
	--bg:           #f0e8db;
	--bg-card:      #fdf8f2;
	--text-primary: #2c2416;
	--text-muted:   #8a7560;
	--accent:       #b5845a;
	--accent-dark:  #8c6140;
	--border:       #e0d3c0;
	--shadow:       rgba(90, 60, 20, 0.09);
	--button-background: transparent;
	--button-text: #2c2416;
}

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

body {
	margin: 0;
	padding: 0;
	color: var(--text-primary);
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: var(--scale-1);
	font-weight: 400;
	line-height: 1.6;
	min-height: 100vh;
	background-color: var(--bg);
	background-image:
		linear-gradient(rgba(240, 232, 219, 0.18), rgba(240, 232, 219, 0.18)),
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20520%20520'%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%3E%0A%20%20%20%20%20%20.petal-shadow%7Bfill:%23d2ba90;opacity:.38%7D%0A%20%20%20%20%20%20.petal%7Bfill:%23f7edda;stroke:%23c5ad89;stroke-width:2;stroke-linejoin:round;stroke-linecap:round%7D%0A%20%20%20%20%20%20.stem%7Bstroke:%23b8946d;stroke-width:1.4;stroke-linecap:round;fill:none;opacity:.9%7D%0A%20%20%20%20%20%20.dot%7Bfill:%23b8946d;opacity:.95%7D%0A%20%20%20%20%20%20.core%7Bfill:%23ead5b7;stroke:%23b8946d;stroke-width:1.4%7D%0A%20%20%20%20%3C/style%3E%0A%20%20%20%20%3Cg%20id='petals'%3E%0A%20%20%20%20%20%20%3Cpath%20d='M0,-10%20C-20,-42%20-11,-66%2010,-66%20C30,-66%2036,-40%2012,-11%20C8,-7%203,-7%200,-10Z'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M0,-10%20C-20,-42%20-11,-66%2010,-66%20C30,-66%2036,-40%2012,-11%20C8,-7%203,-7%200,-10Z'%20transform='rotate(72)'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M0,-10%20C-20,-42%20-11,-66%2010,-66%20C30,-66%2036,-40%2012,-11%20C8,-7%203,-7%200,-10Z'%20transform='rotate(144)'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M0,-10%20C-20,-42%20-11,-66%2010,-66%20C30,-66%2036,-40%2012,-11%20C8,-7%203,-7%200,-10Z'%20transform='rotate(216)'/%3E%0A%20%20%20%20%20%20%3Cpath%20d='M0,-10%20C-20,-42%20-11,-66%2010,-66%20C30,-66%2036,-40%2012,-11%20C8,-7%203,-7%200,-10Z'%20transform='rotate(288)'/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20id='stamens'%3E%0A%20%20%20%20%20%20%3Cline%20class='stem'%20x1='0'%20y1='0'%20x2='0'%20y2='-30'/%3E%3Ccircle%20class='dot'%20cx='0'%20cy='-33'%20r='3'/%3E%0A%20%20%20%20%20%20%3Cline%20class='stem'%20x1='0'%20y1='0'%20x2='21'%20y2='-23'/%3E%3Ccircle%20class='dot'%20cx='24'%20cy='-26'%20r='3'/%3E%0A%20%20%20%20%20%20%3Cline%20class='stem'%20x1='0'%20y1='0'%20x2='30'%20y2='-3'/%3E%3Ccircle%20class='dot'%20cx='34'%20cy='-3'%20r='3'/%3E%0A%20%20%20%20%20%20%3Cline%20class='stem'%20x1='0'%20y1='0'%20x2='18'%20y2='22'/%3E%3Ccircle%20class='dot'%20cx='21'%20cy='25'%20r='3'/%3E%0A%20%20%20%20%20%20%3Cline%20class='stem'%20x1='0'%20y1='0'%20x2='-18'%20y2='22'/%3E%3Ccircle%20class='dot'%20cx='-21'%20cy='25'%20r='3'/%3E%0A%20%20%20%20%20%20%3Cline%20class='stem'%20x1='0'%20y1='0'%20x2='-30'%20y2='-3'/%3E%3Ccircle%20class='dot'%20cx='-34'%20cy='-3'%20r='3'/%3E%0A%20%20%20%20%20%20%3Cline%20class='stem'%20x1='0'%20y1='0'%20x2='-21'%20y2='-23'/%3E%3Ccircle%20class='dot'%20cx='-24'%20cy='-26'%20r='3'/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%20%20%3Cg%20id='flower'%3E%0A%20%20%20%20%20%20%3Cuse%20href='%23petals'%20class='petal-shadow'%20transform='translate(7%208)'/%3E%0A%20%20%20%20%20%20%3Cuse%20href='%23petals'%20class='petal'/%3E%0A%20%20%20%20%20%20%3Ccircle%20class='core'%20cx='0'%20cy='0'%20r='13'/%3E%0A%20%20%20%20%20%20%3Cuse%20href='%23stamens'/%3E%0A%20%20%20%20%3C/g%3E%0A%20%20%3C/defs%3E%0A%20%20%3Crect%20width='520'%20height='520'%20fill='%23f0e8db'/%3E%0A%20%20%3Cg%20opacity='.76'%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(54%2064)%20rotate(-18)%20scale(1.02)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(196%2034)%20rotate(21)%20scale(.72)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(375%2069)%20rotate(-8)%20scale(1.06)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(505%2025)%20rotate(18)%20scale(.83)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(95%20228)%20rotate(13)%20scale(.86)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(270%20210)%20rotate(-24)%20scale(1.12)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(465%20253)%20rotate(15)%20scale(.78)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(23%20403)%20rotate(24)%20scale(.78)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(175%20440)%20rotate(-12)%20scale(1.05)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(372%20402)%20rotate(10)%20scale(.9)'/%3E%0A%20%20%20%20%3Cuse%20href='%23flower'%20transform='translate(532%20450)%20rotate(-20)%20scale(1.03)'/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
	background-size: auto, clamp(22rem, 38vw, 33rem) clamp(22rem, 38vw, 33rem);
	background-repeat: repeat;
	background-position: center top;
	background-attachment: fixed;
}

body::before {
	content: '';
	display: block;
	height: 3px;
	background: linear-gradient(90deg, var(--accent-dark), var(--accent), #d4a97a, var(--accent), var(--accent-dark));
}

.container {
	position: relative;
	width: 100%;
	max-width: 36rem;
	text-align: center;
	margin: 0 auto;
	padding: var(--spacing-xl) var(--spacing-m) var(--spacing-xxl);
	box-sizing: border-box;
}

.container-left {
	position: relative;
	width: 100%;
	max-width: 37.5rem;
	text-align: left;
	margin: 0 auto;
	padding: 0 1.25rem;
	box-sizing: border-box;
}

.container-left p { margin-bottom: 1rem; }

@media (min-width: 25rem) {
	.container { width: 85%; padding-left: 0; padding-right: 0; }
}
@media (min-width: 34.375rem) {
	.container { width: 80%; }
}

.avatar {
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	object-fit: cover;
	background-position: center;
	margin: 0 auto var(--spacing-m);
	display: block;
	border: 3px solid var(--border);
	box-shadow: 0 0 0 5px var(--bg), 0 0 0 6.5px var(--border), 0 8px 28px var(--shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.avatar:hover {
	transform: scale(1.04);
	box-shadow: 0 0 0 5px var(--bg), 0 0 0 6.5px var(--accent), 0 12px 36px rgba(90, 60, 20, 0.15);
}

.avatar--rounded { border-radius: 50%; }
.avatar--soft    { border-radius: 0.5rem; }
.avatar--none    { border-radius: 0; }

h1 {
	margin: 0 0 var(--spacing-xs) 0;
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(2.4rem, 6vw, 3.4rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--text-primary);
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.container p, .subtext {
/*	margin: 1.3rem 0 var(--spacing-xl) 0; */
	margin: 1.3rem 0 1.2rem 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0.04em;
	line-height: 1.3;
}

.container h1 + p::before,
.container h1 + .subtext::before {
	content: '';
	display: block;
	width: 2.5rem;
	height: 1px;
	background: var(--accent);
	margin: 0.5rem auto 0.75rem;
	opacity: 0.55;
}

a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent-dark); }

.button, button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20rem;
	min-height: 3rem;
	padding: 0.7rem 1.25rem;
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: normal;
	background-color: var(--button-background, var(--bg-card));
	color: var(--button-text, var(--text-primary));
	border: var(--button-border, 1.5px solid var(--border));
	border-radius: 0.625rem;
	cursor: pointer;
	box-sizing: border-box;
	margin-bottom: 0.75rem;
	text-align: center;
	line-height: 1.3;
	position: relative;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
	box-shadow: 0 2px 10px var(--shadow);
}

.button::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.07);
	opacity: 0;
	transition: opacity 0.18s ease;
	border-radius: inherit;
}

.button:hover { transform: translateY(-2px); box-shadow: 0 6px 22px var(--shadow); filter: brightness(1.05); }
.button:hover::after { opacity: 1; }
.button:active { transform: translateY(0); box-shadow: 0 2px 10px var(--shadow); }

.button-default {
	--button-background: var(--bg-card);
	--button-text: var(--text-primary);
	--button-border: 1.5px solid var(--border);
}

.icon { width: 1.15rem; height: 1.15rem; margin-right: 0.55rem; flex-shrink: 0; opacity: 0.92; }

footer { margin: var(--spacing-xxl) 0 var(--spacing-l); font-size: 0.8rem; color: var(--text-muted); opacity: 0.5; }

@media (max-width: 34.375rem) {
	h1 { font-size: var(--scale-4); }
	body { font-size: var(--scale-0); }
	.container p { font-size: var(--scale-0); }
	.avatar { margin-bottom: var(--spacing-m); }
	footer { margin: var(--spacing-xl) 0; }
	.button, button { width: 100%; max-width: 20rem; }
}

@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-700.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 800;
	src: url('../fonts/open-sans-v34-vietnamese_latin-ext_latin_hebrew_greek-ext_greek_cyrillic-ext_cyrillic-800.woff2') format('woff2');
}