/* ==========================================================
   Nao Koiwa Works  ―  和モダン Custom Stylesheet
   v2: Hero layout fixed
   ========================================================== */

/* --- Fonts ---------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Noto+Serif+JP:wght@300;400;500;600;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Cinzel:wght@400;500;600;700&display=swap');

/* --- Color tokens --------------------------------------- */
:root {
	--sumi:        #0a0908;
	--sumi-soft:   #161412;
	--sumi-mid:    #1f1c1a;
	--washi:       #f4ede0;
	--washi-soft:  #ebe1cf;
	--shu:         #c8252c;
	--shu-deep:    #8b1a1f;
	--kin:         #c9a961;
	--kin-bright:  #e6c884;
	--kin-deep:    #8a7140;
	--ink-line:        rgba(201, 169, 97, 0.18);
	--ink-line-strong: rgba(201, 169, 97, 0.45);

	--default-font: 'Noto Serif JP', 'Shippori Mincho', serif;
	--heading-font: 'Shippori Mincho', 'Noto Serif JP', serif;
	--nav-font: 'Cormorant Garamond', 'Shippori Mincho', serif;

	--background-color: var(--sumi);
	--default-color: #d8d2c4;
	--heading-color: var(--washi);
	--accent-color: var(--shu);
	--surface-color: var(--sumi-soft);
	--contrast-color: var(--washi);

	--nav-color: rgba(244, 237, 224, 0.55);
	--nav-hover-color: var(--kin-bright);
	--nav-mobile-background-color: var(--sumi);
	--nav-dropdown-background-color: var(--sumi-soft);
	--nav-dropdown-color: rgba(244, 237, 224, 0.65);
	--nav-dropdown-hover-color: var(--kin-bright);
}

.light-background {
	--background-color: #110f0d;
	--surface-color: #1a1714;
	--default-color: #d8d2c4;
	--heading-color: var(--washi);
}
.dark-background {
	--background-color: var(--sumi);
	--surface-color: var(--sumi-soft);
	--default-color: #d8d2c4;
	--heading-color: var(--washi);
	--contrast-color: var(--washi);
}

/* --- Global ---------------------------------------------- */
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; background: var(--sumi); }

body {
	font-family: var(--default-font);
	background: var(--sumi);
	color: var(--default-color);
	font-weight: 300;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font);
	font-weight: 500;
	color: var(--heading-color);
	letter-spacing: 0.04em;
}

a { color: var(--kin-bright); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--shu); }
::selection { background: var(--shu); color: var(--washi); }

/* === HEADER / SIDEBAR ==================================== */
/* Inherit position:fixed/top/left/bottom from main.css — only style the look */
.header {
	background: linear-gradient(180deg, #0d0b09 0%, #050403 100%) !important;
	border-right: 1px solid var(--ink-line);
	box-shadow: 4px 0 40px rgba(0,0,0,0.6);
}

.header::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--kin), var(--shu), var(--kin), transparent);
	z-index: 1;
}

.header .profile-img { position: relative; margin-top: 10px; }
.header .profile-img img {
	width: 110px !important;
	height: 110px !important;
	border: 2px solid var(--kin) !important;
	padding: 4px;
	background: var(--sumi);
	box-shadow: 0 0 0 1px rgba(201,169,97,.2), 0 8px 30px rgba(0,0,0,.6);
	margin: 15px auto !important;
}
.header .profile-img::after {
	content: '工';
	position: absolute;
	top: 6px; left: 50%;
	transform: translateX(60px);
	font-family: var(--heading-font);
	color: var(--shu);
	font-size: 14px;
	background: var(--sumi);
	padding: 2px 6px;
	border: 1px solid var(--kin);
}

.header .logo h1.sitename {
	font-family: var(--heading-font);
	font-size: 24px;
	font-weight: 600;
	color: var(--washi);
	letter-spacing: 0.15em;
	margin-top: 14px;
	position: relative;
	display: inline-block;
}
.header .logo h1.sitename::after {
	content: 'NAO KOIWA WORKS';
	display: block;
	font-family: 'Cinzel', serif;
	font-size: 9px;
	letter-spacing: 0.45em;
	color: var(--kin);
	margin-top: 4px;
	font-weight: 400;
}

.header .social-links {
	margin-top: 18px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ink-line);
}
.header .social-links a {
	display: inline-flex;
	width: 36px; height: 36px;
	align-items: center; justify-content: center;
	background: transparent !important;
	color: var(--kin) !important;
	border: 1px solid var(--ink-line-strong);
	border-radius: 50%;
	margin: 0 4px;
	font-size: 14px;
}
.header .social-links a:hover {
	background: var(--shu) !important;
	color: var(--washi) !important;
	border-color: var(--shu);
}

.navmenu { margin-top: 24px; width: 100%; padding: 0 10px; }
.navmenu ul { list-style: none; padding: 0; margin: 0; }
.navmenu ul li { margin: 4px 0; }
.navmenu a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 12px 18px !important;
	font-family: 'Cinzel', serif !important;
	font-size: 12px !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase;
	color: rgba(244,237,224,.55) !important;
	background: transparent !important;
	border-left: 2px solid transparent;
	transition: all .35s ease;
	font-weight: 400;
}
.navmenu a .navicon { font-size: 14px; color: var(--kin); }
.navmenu a:hover, .navmenu a.active {
	color: var(--washi) !important;
	border-left-color: var(--shu);
	background: linear-gradient(90deg, rgba(200,37,44,.15), transparent) !important;
	padding-left: 24px !important;
}
.navmenu a:hover .navicon, .navmenu a.active .navicon { color: var(--shu); }

.header-toggle {
	background: var(--shu) !important;
	color: var(--washi) !important;
	border-radius: 0 !important;
}

/* === SECTION COMMON ====================================== */
section, .section {
	background-color: var(--background-color);
	padding: 90px 0;
	position: relative;
}

.section-title {
	text-align: center;
	margin-bottom: 50px;
	padding-bottom: 0 !important;
}
.section-title h2 {
	font-family: var(--heading-font);
	font-size: 56px;
	font-weight: 600;
	color: var(--washi);
	letter-spacing: 0.05em;
	display: inline-block;
	position: relative;
	padding: 0 30px 12px !important;
	margin-bottom: 8px;
}
.section-title h2::before {
	content: attr(data-en);
	display: block;
	font-family: 'Cinzel', serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.6em;
	color: var(--kin);
	margin-bottom: 18px;
	text-transform: uppercase;
}
.section-title h2::after { display: none !important; }
.section-title::before {
	content: '';
	display: block;
	width: 1px;
	height: 50px;
	background: linear-gradient(180deg, transparent, var(--kin));
	margin: 0 auto 24px;
}
.section-title p {
	color: rgba(216,210,196,.7);
	max-width: 700px;
	margin: 16px auto 0;
	font-size: 15px;
	line-height: 1.9;
}

/* === HERO ================================================ */
/* Keep main.css's flex centering, only override colors/typography */
#hero {
	background: var(--sumi) !important;
	padding: 80px 0 !important;  /* keep original padding so image fills with section */
	min-height: 100vh;
}
#hero > img {
	filter: grayscale(0.3) contrast(1.05) brightness(0.55);
}
#hero::before {
	background: linear-gradient(180deg, rgba(10,9,8,.5) 0%, rgba(10,9,8,.85) 100%) !important;
}

/* red sun accent (separate element using ::after) */
#hero::after {
	content: '';
	position: absolute;
	top: 18%;
	right: 10%;
	width: 280px; height: 280px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--shu) 0%, var(--shu-deep) 60%, transparent 100%);
	opacity: 0.55;
	filter: blur(2px);
	z-index: 2;
	animation: sun-pulse 8s ease-in-out infinite;
	pointer-events: none;
}
@keyframes sun-pulse {
	0%,100% { opacity: 0.5; transform: scale(1); }
	50%     { opacity: 0.7; transform: scale(1.04); }
}

#hero .container {
	text-align: left !important;
	padding-left: 60px;
	z-index: 3;
}
#hero h2 {
	font-family: var(--heading-font) !important;
	font-size: 72px !important;
	font-weight: 600 !important;
	color: var(--washi) !important;
	letter-spacing: 0.04em;
	margin-bottom: 24px !important;
	line-height: 1;
	position: relative;
	display: inline-block;
}
#hero h2::before {
	content: '工';
	display: block;
	font-size: 18px;
	color: var(--shu);
	letter-spacing: 0.5em;
	margin-bottom: 18px;
	font-weight: 500;
}
#hero h2::after {
	content: '';
	display: block;
	width: 80px;
	height: 2px;
	background: var(--kin);
	margin-top: 24px;
}
#hero p {
	font-size: 22px !important;
	color: rgba(244,237,224,.85) !important;
	margin-top: 28px !important;
	font-weight: 300;
	letter-spacing: 0.05em;
}
#hero .typed {
	color: var(--kin-bright);
	font-style: italic;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 500;
}
#hero .typed-cursor { color: var(--shu); }

/* vertical Japanese text on right edge */
#hero .vertical-text {
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	font-family: var(--heading-font);
	color: rgba(244,237,224,.25);
	letter-spacing: 0.6em;
	font-size: 14px;
	z-index: 3;
	border-right: 1px solid var(--ink-line);
	padding-right: 18px;
}

#hero .scroll-cue {
	position: absolute;
	bottom: 40px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	font-family: 'Cinzel', serif;
	font-size: 10px;
	letter-spacing: 0.5em;
	color: var(--kin);
}

/* === ABOUT =============================================== */
.about { background: var(--sumi-soft); border-top: 1px solid var(--ink-line); }
.about .col-lg-4 img {
	border: 1px solid var(--kin);
	padding: 6px;
	background: var(--sumi);
	box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.about .content h2 {
	font-size: 28px;
	color: var(--washi);
	margin-bottom: 18px;
	line-height: 1.5;
	font-weight: 500;
}
.about .content h2::before {
	content: '―';
	color: var(--shu);
	margin-right: 12px;
}
.about .content .fst-italic {
	color: rgba(216,210,196,.85) !important;
	font-style: normal !important;
	border-left: 2px solid var(--shu);
	padding-left: 20px !important;
	font-size: 15px;
	line-height: 2;
}
.about .content ul { list-style: none; padding: 0; }
.about .content ul li {
	padding: 10px 0;
	border-bottom: 1px solid var(--ink-line);
	color: var(--default-color);
	font-size: 14px;
}
.about .content ul li i.bi-chevron-right { color: var(--shu); margin-right: 8px; }
.about .content ul li strong {
	color: var(--kin-bright);
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin-right: 10px;
	font-weight: 500;
}

/* === STATS =============================================== */
.stats {
	background: var(--sumi);
	padding: 80px 0;
	border-top: 1px solid var(--ink-line);
	border-bottom: 1px solid var(--ink-line);
}
.stats-item {
	text-align: center;
	padding: 30px 20px;
}
.stats-item i {
	font-size: 32px;
	color: var(--shu);
	margin-bottom: 14px;
	display: block;
}
.stats-item .purecounter {
	font-family: 'Cormorant Garamond', serif;
	font-size: 64px;
	font-weight: 500;
	color: var(--kin-bright);
	line-height: 1;
	display: block;
	margin-bottom: 14px;
	letter-spacing: -0.02em;
}
.stats-item p strong {
	display: block;
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 0.4em;
	color: var(--washi);
	text-transform: uppercase;
	margin-bottom: 4px;
	font-weight: 500;
}
.stats-item p span {
	color: rgba(216,210,196,.6);
	font-size: 13px;
	letter-spacing: 0.05em;
}

/* === SKILLS =========================== */
.skills { background: var(--sumi-soft); }

.skill-categories {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.skill-category {
	background: linear-gradient(180deg, rgba(20,18,16,.95), rgba(15,13,11,.95));
	border: 1px solid var(--ink-line);
	padding: 40px 32px;
	position: relative;
	transition: all .4s ease;
}
.skill-category::before {
	content: '';
	position: absolute;
	top: -1px; left: -1px;
	width: 40px; height: 40px;
	border-top: 2px solid var(--kin);
	border-left: 2px solid var(--kin);
	transition: all .4s ease;
}
.skill-category::after {
	content: '';
	position: absolute;
	bottom: -1px; right: -1px;
	width: 40px; height: 40px;
	border-bottom: 2px solid var(--kin);
	border-right: 2px solid var(--kin);
	transition: all .4s ease;
}
.skill-category:hover {
	transform: translateY(-6px);
	border-color: var(--ink-line-strong);
	box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.skill-category:hover::before, .skill-category:hover::after {
	width: 60px; height: 60px;
	border-color: var(--shu);
}

.skill-category .cat-kanji {
	font-family: var(--heading-font);
	font-size: 56px;
	color: var(--shu);
	line-height: 1;
	font-weight: 600;
}
.skill-category .cat-en {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 0.5em;
	color: var(--kin);
	margin-top: 8px;
	text-transform: uppercase;
	font-weight: 500;
}
.skill-category h3 {
	font-family: var(--heading-font);
	font-size: 22px;
	color: var(--washi);
	margin: 18px 0 24px;
	letter-spacing: 0.06em;
	border-bottom: 1px solid var(--ink-line);
	padding-bottom: 18px;
	font-weight: 500;
}
.skill-category ul { list-style: none; padding: 0; margin: 0; }
.skill-category ul li {
	padding: 11px 0;
	border-bottom: 1px dashed rgba(201,169,97,.12);
	color: var(--default-color);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: all .3s ease;
	letter-spacing: 0.04em;
}
.skill-category ul li::before {
	content: '◆';
	color: var(--shu);
	font-size: 8px;
	flex-shrink: 0;
}
.skill-category ul li:hover { color: var(--washi); padding-left: 6px; }
.skill-category ul li:hover::before { color: var(--kin); }
.skill-category ul li small {
	color: var(--kin);
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	font-style: italic;
	margin-left: auto;
}
.skill-category ul li:last-child { border-bottom: none; }

/* === PORTFOLIO =========================================== */
.portfolio { background: var(--sumi); }
.portfolio-filters {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
	text-align: center;
}
.portfolio-filters li {
	display: inline-block;
	margin: 0 6px 8px;
	padding: 9px 22px;
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(244,237,224,.55);
	border: 1px solid var(--ink-line);
	cursor: pointer;
	transition: all .3s ease;
	font-weight: 500;
}
.portfolio-filters li:hover {
	color: var(--washi);
	border-color: var(--kin);
}
.portfolio-filters li.filter-active {
	background: var(--shu);
	border-color: var(--shu);
	color: var(--washi);
}

.portfolio-item .portfolio-content {
	position: relative;
	overflow: hidden;
	background: var(--sumi-soft);
	border: 1px solid var(--ink-line);
}
.portfolio-item .portfolio-content img {
	width: 100%;
	transition: transform 1s cubic-bezier(.2,.6,.2,1);
	filter: grayscale(0.15) contrast(1.05);
}
.portfolio-item .portfolio-content:hover img {
	transform: scale(1.08);
	filter: grayscale(0) contrast(1.1);
}
.portfolio-item .portfolio-info {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(10,9,8,.92));
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	opacity: 0;
	transition: opacity .4s ease;
}
.portfolio-item .portfolio-content:hover .portfolio-info { opacity: 1; }
.portfolio-item .portfolio-info h4 {
	font-family: var(--heading-font);
	color: var(--washi);
	font-size: 20px;
	letter-spacing: 0.06em;
	margin: 0;
	font-weight: 500;
}
.portfolio-item .portfolio-info h4::before {
	content: '';
	display: block;
	width: 30px; height: 2px;
	background: var(--shu);
	margin-bottom: 10px;
}
.portfolio-item .portfolio-info .preview-link {
	position: absolute;
	top: 16px; right: 16px;
	width: 40px; height: 40px;
	background: var(--shu);
	color: var(--washi);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
}

/* === SERVICES =========================== */
.services { background: var(--sumi-soft); }

.service-realm {
	background: linear-gradient(180deg, rgba(20,18,16,.95), rgba(12,10,9,.95));
	border: 1px solid var(--ink-line);
	padding: 50px 44px;
	position: relative;
	height: 100%;
	overflow: hidden;
	transition: all .4s ease;
}
.service-realm::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--shu), var(--kin));
}
.service-realm:hover {
	transform: translateY(-4px);
	box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.service-realm .realm-kanji {
	position: absolute;
	top: 30px; right: 40px;
	font-family: var(--heading-font);
	font-size: 120px;
	color: rgba(200,37,44,.08);
	line-height: 1;
	font-weight: 700;
	pointer-events: none;
}
.service-realm .realm-en {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 0.5em;
	color: var(--kin);
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 8px;
	display: block;
}
.service-realm h3 {
	font-family: var(--heading-font);
	color: var(--washi);
	font-size: 32px;
	margin-bottom: 26px;
	letter-spacing: 0.05em;
	font-weight: 500;
}
.service-realm h3::after {
	content: '';
	display: block;
	width: 60px;
	height: 1px;
	background: var(--kin);
	margin-top: 20px;
}
.service-realm .realm-desc {
	color: rgba(216,210,196,.75);
	font-size: 15px;
	line-height: 2;
	margin-bottom: 30px;
}
.service-realm .service-list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	z-index: 1;
}
.service-realm .service-list li {
	padding: 16px 0;
	border-bottom: 1px solid var(--ink-line);
	display: flex;
	align-items: flex-start;
	gap: 18px;
	transition: all .3s ease;
}
.service-realm .service-list li:hover { padding-left: 8px; }
.service-realm .service-list li:last-child { border-bottom: none; }
.service-realm .service-list .num {
	font-family: 'Cormorant Garamond', serif;
	color: var(--shu);
	font-size: 18px;
	font-style: italic;
	flex-shrink: 0;
	min-width: 30px;
	letter-spacing: 0.05em;
}
.service-realm .service-list .label {
	color: var(--washi);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.04em;
	display: block;
	margin-bottom: 4px;
}
.service-realm .service-list .desc {
	color: rgba(216,210,196,.6);
	font-size: 13px;
	letter-spacing: 0.03em;
}

/* === CONTACT ============================================= */
.contact { background: var(--sumi); }
.contact .info-wrap {
	background: var(--sumi-soft);
	border: 1px solid var(--ink-line);
	padding: 40px;
	height: 100%;
}
.contact .info-item {
	padding: 20px 0;
	border-bottom: 1px solid var(--ink-line);
}
.contact .info-item:last-child { border-bottom: none; }
.contact .info-item i {
	font-size: 24px;
	color: var(--shu);
	margin-right: 16px;
}
.contact .info-item h3 {
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: 0.4em;
	color: var(--kin);
	text-transform: uppercase;
	margin-bottom: 6px;
	font-weight: 500;
}
.contact .info-item p {
	color: var(--washi);
	margin: 0;
	font-size: 15px;
	letter-spacing: 0.05em;
}

.php-email-form {
	background: var(--sumi-soft);
	border: 1px solid var(--ink-line);
	padding: 40px;
}
.php-email-form label {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 0.3em;
	color: var(--kin);
	text-transform: uppercase;
	font-weight: 500;
}
.php-email-form .form-control {
	background: var(--sumi);
	border: 1px solid var(--ink-line);
	color: var(--washi);
	border-radius: 0;
	padding: 14px 16px;
}
.php-email-form .form-control:focus {
	background: var(--sumi);
	border-color: var(--shu);
	box-shadow: 0 0 0 1px var(--shu);
	color: var(--washi);
}
.php-email-form button[type=submit] {
	background: var(--shu) !important;
	color: var(--washi) !important;
	border: none;
	padding: 16px 50px;
	font-family: 'Cinzel', serif;
	font-size: 12px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	font-weight: 500;
	margin-top: 10px;
	border-radius: 0;
}
.php-email-form button[type=submit]:hover {
	background: var(--shu-deep) !important;
	letter-spacing: 0.5em;
}

/* === FOOTER ============================================== */
.footer {
	background: var(--sumi) !important;
	border-top: 1px solid var(--ink-line);
	padding: 40px 0 20px;
}
.footer .copyright p {
	color: rgba(216,210,196,.5);
	font-size: 12px;
	letter-spacing: 0.1em;
	margin: 0;
}
.footer .credits {
	color: rgba(216,210,196,.4);
	font-size: 11px;
	margin-top: 8px;
}
.footer .credits a { color: var(--kin); }

/* === SCROLL TO TOP ======================================= */
#scroll-top {
	background: var(--shu) !important;
	color: var(--washi) !important;
	border-radius: 0 !important;
}
#scroll-top:hover { background: var(--kin) !important; color: var(--sumi) !important; }

/* === RESPONSIVE ========================================== */
@media (max-width: 1199px) {
	#hero .vertical-text { display: none; }
	#hero h2 { font-size: 56px !important; }
}
@media (max-width: 991px) {
	#hero h2 { font-size: 44px !important; }
	#hero p { font-size: 18px !important; }
	.section-title h2 { font-size: 40px; }
	.skill-categories { grid-template-columns: 1fr; }
	.service-realm .realm-kanji { font-size: 80px; }
}
@media (max-width: 575px) {
	#hero h2 { font-size: 36px !important; }
	.section-title h2 { font-size: 32px; }
	.stats-item .purecounter { font-size: 48px; }
	.service-realm { padding: 36px 24px; }
}

[data-aos] { transition-duration: 0.9s !important; }