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

html,
body {
	margin: 0;
	padding: 0;
	font-family:
		BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
		"Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: #dac1b1;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body.is-dragging {
	user-select: none;
	cursor: pointer;
}

html {
	scroll-behavior: smooth;
}
/* Code block styles */
code {
	font-family:
		source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.header {
	background-color: #3d0a05;
}

.mobile-scroll-cards {
	display: none;
}
/* Navigation Bar Styles */

.navigation-container {
	color: #e2d2bf;
	gap: 615px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 0 60px 0;
}

.logo img {
	width: 100%;
	max-width: 144px;
	height: auto;
	transition:
		transform 0.3s ease,
		opacity 0.3s ease;
}

.logo img:hover {
	transform: scale(1.05);
	opacity: 0.85;
}
.navbar {
	border: 2px solid #e2d2bf;
	border-radius: 80px;
	width: 624px;
	height: auto;
}
.navbar ul {
	list-style: none;
	margin: 0;
	padding: 18px 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 54px;
	font-family: "Playfair Display", serif;
}

a {
	text-decoration: none;
	color: inherit;
}

/* Navbar Animation Styles */
/* NAVIGATION LINK ANIMATION */

.navbar a {
	position: relative; /* anchor for underline */
	color: #e2d2bf;
	padding-bottom: 6px;
	transition:
		color 0.3s ease,
		opacity 0.2s ease;
}

/* underline */
.navbar a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: #e2d2bf;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

/* hover */
.navbar a:hover::after {
	transform: scaleX(1);
}

/* click / active */
.navbar a:active {
	opacity: 0.7;
}

/* current page (optional but recommended) */
.navbar a.active {
	color: #7f1f0e;
}

.navbar a.active::after {
	transform: scaleX(1);
	background-color: #7f1f0e;
}

/* Main Visual Styles */

.main {
	display: flex;
	align-items: center;
	margin-bottom: 180px;

	/* padding: 0 80px;  */
}

.main img {
	width: 100%;
	max-width: 454px;
	height: auto;
	display: block;
	padding-top: 60px;
}

.main-content {
	margin-left: auto;
	text-align: right;
}

.main-content h1 {
	font-family: "Cormorant Garamond", serif;
	color: #e2d2bf;
	font-size: 128px;
	letter-spacing: 0.08em;
}

.firstName {
	margin-bottom: -40px;
	padding-right: 30px;
}

.lastName {
	padding-right: 30px;
	margin: 0;
}

.main-content h1 span {
	color: transparent;
	-webkit-text-stroke: 1.5px #e2d2bf;
	opacity: 0.9;
}
.main-content h3 {
	font-family: "Playfair Display", serif;
	color: #f2b9a1;
	font-size: 40px;
	font-weight: bolder;
	margin-bottom: -100px;
	padding-top: 100px;
	padding-right: 50px;
}

.web-coder {
	margin-top: 0;
}
/* WOrks */
.section-title {
	padding: 40px 0 25px;
	text-align: center;
	font-family: "Playfair Display", serif;
	font-size: 64px;
	font-style: italic;
	font-weight: 700;
	color: #3d0a05;
	letter-spacing: 1px;
	position: relative;
	margin: 0 0 60px 0;
	/* margin: 140px 0 60px 0; */
	line-height: 1.2;
	z-index: 1;
}

/* horizontal line that overlaps the text */
.section-title::before {
	content: "";
	position: absolute;
	left: 5%;
	right: 5%;
	height: 1px;
	background-color: #3d0a05;

	top: 60%;
	opacity: 0.7;
	z-index: -1;
}

/* Work-Card */

.work-card {
	background-color: #e2d2bf;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 12px;
	width: 100%;
	max-width: 543px;
	height: 520px;
	font-family: "Playfair Display", serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;
}

.work-card-container {
	display: grid;
	grid-template-columns: repeat(2, 543px);
	justify-content: center;
	align-items: center;
	row-gap: 70px;
	column-gap: 43px;
}

/* work-card image styles */
.work-card-image {
	width: 508px;
	height: 237px;
	overflow: hidden;
	flex-shrink: 0;
	margin: 0 auto;
}

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

Work Card Animation Styles .work-card {
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
	cursor: pointer;
}

.work-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.work-card-image img {
	transition: transform 0.5s ease;
}
.work-card:hover .work-card-image img {
	transform: scale(1.04);
}
/* work card content styles */
.work-content {
	font-family: "Playfair Display", serif;
	color: #3d0a05;
	padding: 10px 20px;
}

.category {
	font-size: 14px;
	margin-bottom: 4px;
	line-height: 150%;
}

.title {
	margin-top: 0;
	font-size: 24px;
	letter-spacing: 0.08em;
	line-height: 0.9;
	font-weight: 600;
	margin-bottom: 14px;
}

.description {
	font-size: 16px;
	letter-spacing: 0.08em;
	line-height: 140%;
	margin: 0 0 30px 0;
	height: 100px;
}

.tags {
	display: flex;
	align-items: center;
	gap: 22px;
	font-style: italic;
	font-weight: 500;
}

.tag-list {
	display: flex;
	gap: 10px;
	font-style: normal;
}

/* WORK CARD TITLE UNDERLINE */

.work-card .title {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
}

.work-card .title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.work-card:hover .title::after {
	transform: scaleX(1);
}

/* work card tag styles */

.work-tag {
	display: inline-flex;
	align-items: center;
	text-align: center;
	line-height: 1;
	background-color: #7f1f0e;
	color: #e2d2bf;
	padding: 7px;
	border-radius: 20px;
	font-size: 14px;

	transition:
		background-color 0.25s ease,
		color 0.25s ease,
		transform 0.15s ease;
}

.work-tag:hover {
	background-color: #dac1b1;
	color: #7f1f0e;
}

.work-tag:active {
	transform: translateY(1px);
	color: #3d0a05;
}
.work-tag i {
	margin-left: 4px;
	transform: rotate(13.63deg);
	display: flex;
	align-items: center;
}

.tags span {
	border: 1px solid #3d0a05;
	padding: 8px;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	width: 110px;
	box-sizing: border-box;
}

/* About Me Section */

.about-me {
	background-color: #7f1f0e;
	margin: 174px 0;
	padding: 34px 0 84px 0;
}

.about-title,
.other-works-title {
	padding: 40px 0 25px;
	text-align: center;
	font-family: "Playfair Display", serif;
	font-size: 64px;
	font-style: italic;
	font-weight: 700;
	color: #e2d2bf;
	letter-spacing: 1px;
	position: relative;
	margin: 0 0 60px 0;
	/* margin: 140px 0 60px 0; */
	line-height: 1.2;
}

.about-title::before,
.other-works-title::before {
	content: "";
	position: absolute;
	left: 5%;
	right: 5%;
	height: 1px;
	background-color: #e2d2bf;
	top: 60%;
	transform: translateY(-50%);
}

.about-me-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 42px;
}
/* About Me Picture Style */

.designer-picture {
	min-width: 438px;
	height: 513px;
}

/* About Me Bio Styles */
.about-me-content {
	font-family: "Playfair Display", serif;
	width: 659px;
}

.name {
	font-size: 64px;
	color: #f2b9a1;
	font-weight: 700;
	font-style: italic;
	font-family: "Cormorant Garamond", serif;
	margin-bottom: 0;
}

.jp-name {
	font-size: 36px;
	margin-top: -20px;
}

.bio {
	font-size: 16px;
	text-align: left;
}

.name,
.jp-name {
	text-align: center;
}

.name,
.jp-name,
.bio {
	line-height: 150%;
	letter-spacing: 0.08em;
}

.jp-name,
.bio {
	color: #e2d2bf;
	font-weight: 500;
}

/* Design Skills and Tools Section */
.skills-and-tools {
	font-family: "Playfair Display", serif;
}

/* Skills Title */
.skills-tools-container {
	display: grid;
	place-items: center;
}
.skills-title {
	background-color: #7f1f0e;
	width: 740px;
	height: 80px;
	text-align: center;
	border-radius: 80px;
	padding: 10px;
	margin: 40px 0 87px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.skills-tools-container h3 {
	font-size: 40px;
	font-weight: bold;
	color: #e2d2bf;
}

/* Skills Card Styles */

.skills-cards-container {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	margin-bottom: 100px;
}

.skills-card {
	border: 1px solid #7f1f0e;
	border-radius: 60px;
	padding: 40px 22px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.skills-card-image {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 auto;
}

.skills-image-bg {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 169px;
	height: 166px;
}
.skills-image-bg img {
	width: 130px;
	height: 134px;
	object-fit: contain;
	display: block;
}

.tool-title {
	position: absolute;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	width: 119px;
	height: 30px;
	background-color: #7f1f0e;
	color: #e2d2bf;
	font-size: 18px;
	padding: 6px 18px;
	border-radius: 80px;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
}

/* Skill Card Animation Styles */
/* Skills Cards – reveal animation (same as Points) */

.skills-cards-container {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}

.skills-cards-container.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Web design Card Description Styles */

.skills-card-info {
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 274px;
	height: 188px;
	text-align: center;
	letter-spacing: 4px;
	line-height: 150%;
	font-size: 16px;
	color: #3d0a05;
}

/* Footer Styles */

.footer-container {
	font-family: "Playfair Display", serif;
}

.footer-navbar ul {
	list-style: none;
	margin: 0;
	padding: 14px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 54px;
	font-style: normal;
	background-color: #e2d2bf;
	color: #3d0a05;
	font-weight: 500;
	font-size: 16px;
}

.footer-text {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
	background-color: #3d0a05;
	color: #e2d2bf;
	padding: 8px;
	height: 45px;
	margin: 0 auto;
}

/* Footer Animation Style */

.footer-navbar a {
	position: relative;
	color: #3d0a05;
	padding-bottom: 6px;
	transition: opacity 0.2s ease;
}

.footer-navbar a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: #3d0a05;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}

.footer-navbar a:hover::after {
	transform: scaleX(1);
}

.footer-navbar a:active {
	opacity: 0.6;
}

.footer-navbar a.active::after {
	transform: scaleX(1);
}

/* Website #1 */
.website-main {
	display: flex;
	justify-content: center;
	align-items: center;
	animation: logo-float 4s ease-in-out infinite;
}

@keyframes logo-float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-12px);
	}
	100% {
		transform: translateY(0);
	}
}
.website-main img {
	width: auto;
	max-width: 100%;
	height: 298px;
	display: block;
	margin-bottom: 40px;
}

/* Breadcrumbs Styles  */

.breadcrumb-container {
	font-family: "Playfair Display", serif;
}

.breadcrumb {
	/* font-family: "Playfair Display", serif; */
	color: #3d0a05;
	padding: 10px 20px;
	margin-bottom: 81px;
	font-weight: 500;
	font-size: 14px;
}

.breadcrumb ol {
	list-style: none;
	display: flex;
	gap: 8px;
	padding: 0;
	margin: 0;
}

.breadcrumb li {
	display: flex;
	align-items: center;
}

.breadcrumb li:not(:last-child)::after {
	content: ">";
	margin-left: 8px;
	color: #3d0a05;
	font-size: 22px;
	font-weight: 800;
}

/* Breadcrumb Animation style */

.breadcrumb a {
	position: relative;
	color: inherit; /* inherits from breadcrumb style */
	padding-bottom: 2px;
}

/* underline */
.breadcrumb a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

/* hover */
.breadcrumb a:hover::after {
	transform: scaleX(1);
}

/* Project Info Styles */

.project-info {
	margin: 0 auto;
	padding: 40px;
	max-width: 1200px;
	margin-bottom: 233px;
}

.info-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.info-item {
	display: grid;
	grid-template-columns: 180px 1fr;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid #7f1f0e;
}

dt {
	background-color: #7f1f0e;
	color: #e2d2bf;
	padding: 8px 16px;
	border-radius: 20px;
	font-weight: 700;
	text-align: center;
	font-size: 14px;
}

dd {
	margin: 0;
	padding-left: 20px;
	color: #3d0a05;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 600;
}

/* Key Design Points */

.points {
	font-family: "playfair display", serif;
	color: #3d0a05;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 20px;
}

.points-title {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 40px;
}

.points-title h2 {
	margin: 0;
	font-size: 64px;
	/* color: #3d0a05; */
}

.title-line {
	display: block;
	height: 2px;
	background-color: #7f1f0e;
	width: 600px;
	margin-top: 12px;
}

/* Project-Info Website Url Animation Style */
.animated-link {
	color: #3d0a05; /* normal text color */
	font-weight: 600;
	text-decoration: underline; /* remove underline */
	transition: color 0.3s ease; /* smooth color change */
	cursor: pointer; /* changes cursor on hover */
}

.animated-link:hover {
	color: #7f1f0e; /* change color on hover */
}

/* Rows Layout */

.point-row {
	display: flex;
	gap: 40px;
	align-items: center;
	margin-bottom: 60px;
}

/* Image Style */

.point-image {
	width: 557px;
	height: 359px;
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.point-image img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Text Area Style */
.point-text {
	max-width: 520px;
}

.point-row-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 28px;
}
.point-row-container h3 {
	font-size: 48px;
	margin-bottom: 14px;
	padding-bottom: 20px;
	border-bottom: 2px solid #7f1f0e;
	text-align: center;
	width: 650px;
}

.point-text p {
	line-height: 150%;
	letter-spacing: 0.08em;
	font-size: 24px;
}

/* Point Section Animation Styles */

.point-row-container {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.7s ease,
		transform 0.7s ease;
}

/* revealed */
.point-row-container.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Other Works Section */
.other-works {
	background-color: #7f1f0e;
	font-family: "playfair display", serif;
	margin: 0 auto;
	padding: 20px 0;
}

/* Site-Scroll Section */

.site-scroll {
	background-color: #e3cdbd;
	padding: 80px 40px;
	font-family: "Playfair Display", serif;
	overflow: hidden;
}
.site-scroll-container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.site-scroll-header {
	display: flex;
	align-items: center;
	gap: 143px;
	margin-bottom: 60px;
}

.site-scroll-header h2 {
	color: #3d0a05;
	font-size: 64px;
	margin: 0;
}

.header-line {
	flex: none;
	height: 2px;
	background-color: #7f1f0e;
	width: 600px;
	margin-top: 12px;
}

/* Columns */
.scroll-columns {
	display: flex;
	justify-content: center;
	gap: 100px;
}

/* Item */
.scroll-item {
	position: relative;
	text-align: center;
}

.scroll-label {
	font-size: 14px;
	color: #3d0a05;
	margin-bottom: 12px;
	letter-spacing: 0.1em;
}

/* Scroll frame (⭐ 핵심 ⭐) */
.scroll-frame {
	background-color: transparent;
	border-radius: 6px;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	box-shadow: none;
	padding-right: 10px;
}

/* PC size */
.scroll-frame.pc {
	width: 420px;
	height: 600px;
}

/* SP size */
.scroll-frame.sp {
	width: 220px;
	height: 600px;
}

/* Image */
.scroll-frame img {
	width: 100%;
	height: auto; /* keep quality */
	display: block;
}

/* Scrollbar style */

/* Hide scrollbar for Chrome, Safari, and Opera */
.scroll-frame::-webkit-scrollbar {
	display: none;
}

/* Position and style the custom scroll indicator container */
.scroll-hint {
	position: absolute;

	right: -98px;
	top: 0;
	/* top: 50%; */
	/* z-index: 10; */

	cursor: pointer;
	text-align: center;
	/* Use your image here instead of text and line */
	background-image: url("./pictures/ScrollBar.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	height: 80px;
	width: 136px;
	pointer-events: auto;

	cursor: pointer;
}

.scroll-frame img {
	max-width: 495px;
	width: 100%;
	height: auto;
	display: block;
}

/* Other Works Card Style */

.other-works-cards {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 55px;
	padding-bottom: 50px;
}

.other-work-card {
	width: 390px;
	height: 300px;
	background-color: #dac1b1;
	border-radius: 12px;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(61, 10, 5, 0.15);
}

.other-work-card img {
	width: 350px;
	height: 204px;
	border-radius: 12px;
	display: block;
}

/* Text Style */

.other-work-card a {
	width: 100%;
	display: block;
}
.other-work-card h3 {
	color: #3d0a05;
	font-size: 22px;
	font-family: "Playfair Display", serif;
	letter-spacing: 0.08em;
	font-weight: 600;
	font-style: italic;
	margin-bottom: 0;
	align-self: flex-start;
	text-align: left;
}

.other-works-title {
	font-style: normal;
}

/* Other Card Animations Styles */
.other-work-card {
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease;
	cursor: pointer;
}

.other-work-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.other-work-card img {
	transition: transform 0.5s ease;
}

.other-work-card:hover img {
	transform: scale(1.04);
}

.other-work-card h3 {
	position: relative;
	display: inline-block;
	padding-bottom: 4px;
}

.other-work-card h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1.5px;
	background-color: #3d0a05;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.other-work-card:hover h3::after {
	transform: scaleX(1);
}

/* Typewriter effect for about me and main visual's main page */

.typewriter {
	white-space: nowrap;
	overflow: hidden;
}

.typewriter::after {
	content: "|";
	margin-left: 4px;
	animation: blink 1s infinite;
}

.typewriter.is-done::after {
	display: none;
}

@keyframes blink {
	0%,
	50%,
	100% {
		opacity: 1;
	}
	25%,
	75% {
		opacity: 0;
	}
}

.sp-only {
	display: none;
}

/* Mobile Styles */

/* Mobile Navigation Style */
.hamburger {
	display: none;
}

@media (max-width: 768px) {
	.navigation-container {
		justify-content: space-between;
		padding: 30px 20px;
		gap: 0;
	}

	/* HAMBURGER BUTTON */
	.hamburger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		width: 50px;
		height: 50px;
		border: 2px solid #e2d2bf;
		padding: 12px;
		cursor: pointer;
		z-index: 1001;
		position: relative;
	}

	.hamburger span {
		height: 2px;
		width: 100%;
		background-color: #e2d2bf;
		display: block;
		transition: all 0.4s ease;
	}

	/* ✨ Animate into X */
	.hamburger.active span:nth-child(1) {
		transform: rotate(45deg) translate(6px, 6px);
	}

	.hamburger.active span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.active span:nth-child(3) {
		transform: rotate(-45deg) translate(6px, -6px);
	}

	/* FULLSCREEN MENU */
	.navbar {
		position: fixed;
		top: 0;
		right: -100%;
		width: 100%;
		height: 100vh;
		background-color: #3d0a05;
		display: flex;
		justify-content: center;
		align-items: center;
		border: none;
		transition: right 0.4s ease;
		z-index: 1000;
	}

	.navbar ul {
		flex-direction: column;
		gap: 50px;
		padding: 0;
	}

	.navbar a {
		font-size: 20px;
		font-family: "Playfair Display", serif;
		color: #e2d2bf;
	}

	/* ACTIVE STATE */
	.navbar.active {
		right: 0;
	}

	/* MAIN VISUAL STYLE */
	/* =========================
   MOBILE MAIN VISUAL FIX
========================= */

	.main {
		flex-direction: column;
		align-items: center;
		padding-bottom: 20px;
		margin-bottom: 10px;
	}

	.main img {
		max-width: 321px;
		width: 100%;
		padding-top: 20px;
	}

	.main-content {
		/* margin-left: 0; */
		margin-top: -100px;
		margin-right: 40px;
	}

	/* Subtitles */
	.main-content h3 {
		font-size: 20px;
		margin: 8px 0;
		padding: 0;
		text-align: right;
		margin-bottom: -4px; /* reset desktop negative margin */
		padding-top: 0;
		font-weight: 800;
		font-style: italic;
		letter-spacing: 3px;
	}

	/* Big Name */
	.main-content h1 {
		font-size: clamp(48px, 14vw, 64px);
		/* letter-spacing: 0.06em; */

		padding: 0;
		font-weight: 700;
	}

	/* Tighten spacing between first & last name */
	.lastName {
		margin-top: 30px;
	}

	.firstName {
		margin-top: 4px;
	}
	/* Remove ALL desktop spacing tricks */
	.firstName,
	.lastName {
		padding: 0;
	}

	/* Design Works */

	.work-card {
		max-width: 543px;
		height: 560px;
		width: 100%;
	}

	.work-card-container {
		grid-template-columns: repeat(1, 353px);
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	/* work-card image styles */
	.work-card-image {
		width: 308px;
		height: 151px;
	}

	/* work card content styles */
	.work-content {
		padding: 10px 20px;
		width: 338px;
	}
	.title {
		font-size: 20px;
		font-weight: 700;
	}

	.description {
		height: 200px;
	}

	.tags {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin-top: -30px;
	}

	.tag-list {
		gap: 4px;
	}

	/* work card tag styles */

	.tags span {
		padding: 0;
		font-size: 12px;
		height: 26px;
	}

	.section-title {
		font-size: 24px;
	}

	.work-tag {
		width: 100%;
		max-width: 260px;
		justify-content: center;

		padding: 14px 0;
		font-size: 16px;
		font-weight: 600;

		border-radius: 30px;
	}

	/* About Me Section */
	/* About Me Section */

	.about-me {
		margin: 104px 0;
		padding: 34px 0 84px 0;
	}

	.about-title,
	.other-works-title {
		text-align: center;
		font-size: 24px;

		line-height: 1;
	}

	.about-me-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 14px;
	}
	/* About Me Picture Style */

	.designer-picture {
		min-width: 219px;
		height: 222px;
	}

	/* About Me Bio Styles */
	.about-me-content {
		width: 320px;
	}

	.name {
		font-size: 24px;
		margin-bottom: 0;
	}

	.jp-name {
		font-size: 18px;
		margin-top: -5px;
	}

	.bio {
		font-size: 14px;
	}

	/* Design Skills and Tools Style */

	/* Design Skills and Tools Section */

	/* Skills Title */
	.skills-tools-container {
		display: grid;
		place-items: center;
		margin: -30px 0;
	}
	.skills-title {
		width: 304px;
		height: 50px;

		border-radius: 80px;
		padding: 10px;
		margin: 40px 0 40px;
	}
	.skills-tools-container h3 {
		font-size: 18px;
		font-weight: bold;
	}

	/* Skills Card Styles */

	.skills-cards-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
		margin-bottom: 0;
		width: 100%;
		max-width: 320px;
		margin: 0 auto 60px;
	}

	.skills-card {
		border-radius: 30px;
		padding: 20px 0;
		display: flex;
	}

	.skills-image-bg {
		width: 100px;
		height: 100px;
	}
	.skills-image-bg img {
		width: 78px;
		height: 69px;
	}

	.tool-title {
		left: 50%;
		top: 68%;
		transform: translateX(-50%);
		width: 90px;
		height: 22px;
		font-size: 14px;
	}

	/* Web design Card Description Styles */

	.skills-card-info {
		display: none;
	}

	/* Footer Styles */

	.footer-container {
		font-family: "Playfair Display", serif;
	}

	.footer-navbar ul {
		gap: 20px;
		font-size: 14px;
	}

	.footer-text {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		background-color: #3d0a05;
		color: #e2d2bf;
		padding: 4px;
		margin: 0 auto;
		height: 45px;
	}

	/* Website Works Style */

	/* Main Visual Style */
	.website-main img {
		height: 135px;
	}

	.breadcrumb-container {
		margin-bottom: -100px;
	}

	/* Project Info Styles */

	.project-info {
		margin: 0 auto;
		padding: 30px;
		max-width: 406px;
		margin-bottom: 33px;
	}

	.info-list {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 14px;
		padding-bottom: 20px;
	}

	dt {
		padding: 8px 16px;
		border-radius: 20px;
		font-weight: 500;
		text-align: left;
		font-size: 16px;
	}

	dd {
		margin: 0;
		padding-left: 4px;
		color: #3d0a05;
		font-size: 16px;
		text-align: center;
	}

	.info-item dt {
		width: 100%;
		max-width: 240px;

		text-align: center;
		display: inline-block;
	}

	/* Points Style */
	.points {
		max-width: 1300px;
		margin: 0 auto;
		padding: 0 20px 50px;
	}

	.points-title h2 {
		margin: 0;
		font-size: 18px;
		white-space: nowrap;
	}

	.title-line {
		height: 2px;
		width: 180px;
		margin-top: 12px;
	}

	/* Rows Layout */

	.point-row {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 40px;
		align-items: center;
		margin-bottom: 10px;
	}

	/* Image Style */

	.point-image {
		width: 300px;
		height: 181px;
		overflow: hidden;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	}

	.point-image img {
		width: 100%;
		height: 100%;
		display: block;
	}

	/* Text Area Style */
	.point-text {
		max-width: 300px;
		margin-top: -40px;
	}

	.point-row-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
	}
	.point-row-container h3 {
		font-size: 16px;
		margin-bottom: 14px;
		padding-bottom: 20px;
		width: 340px;
	}

	.point-text p {
		font-size: 16px;
	}

	/* Site Scroll Section  */
	.scroll-columns {
		display: none !important;
	}

	/* Mobile Scroll Cards */
	.mobile-scroll-cards {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 50px;
		padding: 0 20px;
	}

	.mobile-scroll-card {
		background-color: #e2d2bf;
		width: 260px;
		height: 340px;
		padding: 30px 20px 40px;

		text-align: center;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.1);
		gap: 38px;
	}

	.mobile-image-sp-container {
		margin-bottom: 40px;
	}
	.mobile-image-sp-container,
	.mobile-image-pc-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	/* Title Styles */
	.mobile-scroll-header {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 60px;
	}
	.mobile-scroll-header h2 {
		color: #3d0a05;
		font-size: 18px;
		margin: 0;
		white-space: nowrap;
	}

	.header-line-mobile {
		flex: none;
		background-color: #7f1f0e;
		height: 2px;
		width: 180px;
		margin-top: 12px;
	}
	/* Label pill */
	.mobile-label {
		border: 2px solid #7f1f0e;
		border-radius: 40px;
		padding: 10px 0;
		font-weight: 700;
		margin-bottom: 20px;
		color: #3d0a05;
		font-size: 16px;
	}

	/* Image */
	.mobile-image-pc img {
		width: 225px;
		height: 148px;
		object-fit: contain;
		display: block;
		border-radius: 10px;
		margin: 4px 0 24px;
	}

	.mobile-image-sp img {
		width: 122px;
		height: 148px;
		object-fit: contain;
		display: block;
		border-radius: 12px;
		margin: 4px 0 24px;
	}

	.view-more-btn {
		display: inline-block;
		transition: transform 0.2s ease;
	}
	.view-more-btn img {
		max-width: 91px;
		height: auto;
		display: block;
		transition: transform 0.25s ease;
	}

	/* Button Animation Effect Code */

	.view-more-btn:hover img {
		transform: translateY(-4px) scale(1.05);
		filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
	}

	.view-more-btn:active img {
		transform: translateY(2px) scale(0.97);
	}

	.view-more-btn:focus img {
		filter: drop-shadow(0 0 8px rgba(127, 31, 14, 0.6));
	}

	/* TEXT */

	.site-scroll {
		display: none;
	}
	/* Other Works Section */
	/* Other Works Card Style */
	.other-works {
		margin-top: 110px;
	}

	.other-works-cards {
		flex-direction: column;
		gap: 36px;
	}

	.other-work-card {
		width: 263px;
		height: 203px;
	}

	.other-work-card img {
		width: 215px;
		height: 130px;
	}

	/* Text Style */

	.other-work-card a {
		width: 100%;
		display: block;
	}
	.other-work-card h3 {
		font-size: 16px;
		margin-bottom: 0;
	}

	.footer-navbar {
		text-align: center;
	}
	.sp-only {
		display: inline;
	}
}