/* ============================================================
   Sree Design — Base Stylesheet
   Unit convention: 1rem = 16px (browser default)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Roboto+Mono:wght@400&family=Roboto+Condensed:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');


/* ── Reset & root ──────────────────────────────────────── */

html {
	font-size: 16px; /* rem base */
	box-sizing: border-box;
}

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

body {
	margin: 0;
	padding: 0;
	font-family: "Roboto", sans-serif;
	font-size: 1.125rem;       /* 18px */
	font-weight: 400;
	line-height: 1.4;
	color: #212121;
	background-color: #f8f8f8;
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
}

p {
	margin: 0;
}

strong {
	font-weight: 700;
}

a {
	color: #000080;
	text-decoration: none;
	font-weight: 700;
}

hr.divider {
	border: 0.0625rem solid #f5f5f5;
	margin: 1em 0;
}

hr.spacer {
	border: none;
	margin: 1em 0;
}


/* ── Color splashes ────────────────────────────────────── */

.limeade       { background-color: #a9d26a; }
.sunnySide     { background-color: #f8d156; }
.postivelyPink { background-color: #f5bed3; }
.guava         { background-color: #f0919a; }
.vitalOrange   { background-color: #f4b36d; }
.irisInfusion  { background-color: #bc9dd5; }
.luckyGreen    { background-color: #7ec58f; }
.acidLime      { background-color: #e6ee72; }


/* ── Layout ────────────────────────────────────────────── */

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1rem 1rem 0; /* 16px */
	width: 100%;
	overflow-x: hidden;
}

section {
	width: 100%;
	max-width: 80rem; /* 1280px */
	padding: 1.5rem;  /* 24px */
}

.first {
	margin-top: 1rem; /* 16px */
	padding-bottom: 0;
}

.top-rounded {
	border-top-left-radius: 1rem; /* 16px */
	border-top-right-radius: 1rem;
	border-bottom: none;
}

.bottom-rounded {
	border-bottom-left-radius: 1rem;
	border-bottom-right-radius: 1rem;
	overflow: hidden;
}

.highlight {
	margin: 0 -1.5rem;
	padding: 1.5rem 1.5rem 0.75rem;
	border-radius: 1rem 1rem 0 0;
}

.spillover {
	margin-top: -1rem;
}


/* ── Grid (mobile-first: single column) ───────────────── */

[class*="grid"] {
	column-count: 1;
	column-fill: balance;
	width: 100%;
}

[class*="grid"] div,
[class*="grid"] img,
[class*="grid"] video {
	width: 100%;
	height: 100%;
	break-inside: avoid;
}

[class*="grid"] img,
[class*="grid"] video {
	border-radius: 0.25rem; /* 4px */
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.24);
}

.grid2x2 div {
	height: calc(50% - 1rem);
	margin-bottom: 1rem;
}


/* ── Lists ─────────────────────────────────────────────── */

ul {
	padding: 0;
}

ul ul {
	margin-top: 0.375rem; /* 6px */
	list-style: none;
}

li {
	margin: 0.375rem 0;
}

li.bullet {
	list-style: disc;
}

li.nodot {
	list-style: none;
}

li.date,
li span.date {
	font-family: "Oswald", sans-serif;
	font-size: 0.8em;
	font-weight: 400;
	color: #848484;
	letter-spacing: -0.016rem;
	line-height: 1;
	list-style: none;
	text-transform: uppercase;
}


/* ── Typography ────────────────────────────────────────── */

.title {
	font-family: "Kaushan Script", cursive;
	font-size: 2.25rem;     /* 36px */
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.016rem;
	color: #212121;
	text-indent: -0.1em;
	text-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.24);
	list-style: none;
	margin: 0 0 0.5rem;
	padding: 0;
}

.subtitle {
	font-family: "Oswald", sans-serif;
	font-size: 1.125rem;    /* 18px */
	font-weight: 400;
	line-height: 1;
	color: #313131;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.hero {
	font-family: "Oswald", sans-serif;
	font-size: 2.2rem;     /* 28px */
	font-weight: 500;
	line-height: 1.15;
	color: #313131;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.sectiontitle {
	font-family: "Oswald", sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.016rem;
	list-style: none;
	padding: 0 0 0.5em;
}

.sectionsubtitle {
	font-family: "Oswald", sans-serif;
	font-size: 1.25em;
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.016rem;
	color: #848484;
	list-style: none;
	padding: 1em 0 0.25em;
}

.sectionsubtitle a {
	font-family: "Oswald", sans-serif;
	font-size: 1em;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.016rem;
	color: #000080;
	padding: 1em 0 0.25em;
}

.caption {
	font-family: "Roboto Mono", monospace;
	font-size: 0.8125rem;   /* 13px */
	font-weight: 400;
	margin: 0;
	padding: 0 0 0.8125rem;
}

.timeline {
	font-size: 0.8em;
	font-weight: 400;
	letter-spacing: -0.016rem;
	line-height: 1;
	list-style: none;
	text-transform: uppercase;
}

.cursive {
	font-family: "Kalam", cursive;
	font-size: 1.5rem;      /* 24px */
	font-weight: 500;
	letter-spacing: -0.016rem;
	line-height: 1;
}

.cursive strong {
	font-family: "Kalam", cursive;
	font-size: inherit;
	font-weight: 700;
	text-decoration: underline;
}


/* ── Timeline (portfolio sidebar) ─────────────────────── */

ul#timeline li {
	margin: 0;
	padding: 0.25em;
}

ul#timeline a {
	font-family: "Roboto Condensed", sans-serif;
	font-size: 1.125rem;    /* 18px */
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.016rem;
	color: #313131;
	margin: 0 0 0.75rem;
	padding: 0;
	border-bottom: 0.0625rem dashed #83d2f4;
}


/* ── Logo ──────────────────────────────────────────────── */

#logo {
	width: 3.75rem; /* 60px */
}

#logo path {
	fill: #212121;
}


/* ── Rotated highlight cards ───────────────────────────── */

.two-p { transform: rotate(-2deg); }
.two-n { transform: rotate(2deg); }


/* ── Footer ────────────────────────────────────────────── */

.footer {
	display: flex;
	justify-content: space-between;
	column-gap: 0.75rem;  /* 12px */
	padding: 1.5rem;      /* 24px */
	width: 100%;
	border: none;
	background: none;
}

.footer li {
	float: left;
	padding: 0.75rem;
}

.footer a {
	text-decoration: none;
	border-bottom: none;
}

.footer .social {
	display: flex;
	flex-direction: row;
}

.footer .social img {
	width: 1.5rem;   /* 24px */
	height: 1.5rem;
	padding: 0 0.125rem;
	box-shadow: none;
}


/* ── 48rem (768px) breakpoint ──────────────────────────── */

@media (min-width: 48rem) {

	#logo {
		width: 5rem; /* 80px */
	}

	section {
		min-width: 48rem; /* 768px */
		padding: 4rem;    /* 64px */
	}

	.first {
		margin-top: 2rem;       /* 32px */
		padding-bottom: 4rem;
	}

	.top-rounded {
		border-top-left-radius: 2rem; /* 32px */
		border-top-right-radius: 2rem;
	}

	.bottom-rounded {
		border-bottom-left-radius: 2rem;
		border-bottom-right-radius: 2rem;
	}

	.highlight {
		border-radius: 0.25rem;
		box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.24);
	}

	.spillover {
		margin-top: -4.5rem; /* -72px */
	}

	[class*="grid"] {
		column-gap: 4rem; /* 64px */
	}

	.grid1x1   { column-count: 1; }
	.grid2x1   { column-count: 2; }
	.grid3x1   { column-count: 3; }
	.grid3x1img{ column-count: 3; }
	.grid2x2   { column-count: 2; }

	.breakcol {
		break-after: column;
	}

	.hero {
		font-size: 3rem; /* 48px */
		line-height: 1;
	}

	.title {
		font-size: 3rem;
	}

	.subtitle {
		font-size: 1.3125rem; /* 21px */
	}

	.sectiontitle {
		font-size: 2em;
	}

}