/* COMMON.CSS — Vintage Bauhaus Portfolio 2026 */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,400&display=swap');

*, *::before, *::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box
}
html {
		font-size: 16px;
		scroll-behavior: smooth
}
body {
		font-family: 'Noto Sans JP', sans-serif;
		background: #F2EFE9;
		color: #2D2926;
		line-height: 1.8;
		overflow-x: hidden
}
body.custom-cursor {
		cursor: none
}
a {
		color: inherit;
		text-decoration: none
}
img {
		max-width: 100%;
		display: block
}
ul, ol {
		list-style: none
}
button {
		border: none;
		background: none;
		cursor: pointer;
		font-family: inherit;
		color: inherit
}
::selection {
		background: #D63426;
		color: #F2EFE9
}

/* Grain overlay */
.grain {
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9999;
		mix-blend-mode: multiply;
		opacity: .32;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
		background-size: 256px 256px;
		will-change: transform
}
body::after {
		content: '';
		position: fixed;
		inset: 0;
		pointer-events: none;
		z-index: 9998;
		background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(45, 41, 38, .008) 2px, rgba(45, 41, 38, .008) 3px)
}

/* Custom cursor */
.cursor {
		position: fixed;
		width: 16px;
		height: 16px;
		background: #2D2926;
		border-radius: 50%;
		pointer-events: none;
		z-index: 100000;
		transform: translate(-50%, -50%);
		transition: width .4s cubic-bezier(.16, 1, .3, 1), height .4s cubic-bezier(.16, 1, .3, 1), background .3s ease;
		mix-blend-mode: difference
}
.cursor--hover {
		width: 48px;
		height: 48px;
		background: #D63426;
		mix-blend-mode: multiply
}

/* Typography */
h1, h2, h3, h4 {
		font-family: 'Space Grotesk', sans-serif;
		font-weight: 700;
		line-height: 1.05;
		letter-spacing: -.03em
}

/* Stamp label */
.stamp {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		font-family: 'DM Mono', monospace;
		font-size: clamp(.5rem, 1.8vw, .65rem);
		letter-spacing: .15em;
		text-transform: uppercase;
		color: #D63426;
		border: 1.5px solid #D63426;
		padding: .35rem .9rem;
		transform: rotate(-1.2deg);
		position: relative;
		max-width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis
}
.stamp::before {
		content: '';
		position: absolute;
		inset: -2px;
		border: 1px solid #D63426;
		opacity: .25;
		transform: translate(2px, 2px)
}

/* Layout */
.container {
		max-width: 1360px;
		margin: 0 auto;
		padding: 0 2rem
}
.section {
		padding: 8rem 0;
		position: relative
}

/* Header */
.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 72px;
		z-index: 1000;
		transition: background .5s ease
}
.header.scrolled {
		background: rgba(242, 239, 233, .92);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid rgba(45, 41, 38, .06)
}
.header__inner {
		max-width: 1360px;
		margin: 0 auto;
		padding: 0 2rem;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 1
}
.header__logo {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.3rem;
		font-weight: 700;
		display: flex;
		align-items: center;
		gap: .5rem
}
.header__logo-dot {
		width: 10px;
		height: 10px;
		background: #D63426;
		border-radius: 50%;
		display: inline-block
}

/* Navigation */
.nav__list {
		display: flex;
		gap: 2rem;
		align-items: center
}
.nav__link {
		font-family: 'DM Mono', monospace;
		font-size: .68rem;
		letter-spacing: .14em;
		text-transform: uppercase;
		opacity: .5;
		position: relative;
		padding: .4rem 0;
		transition: opacity .3s ease
}
.nav__link::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 1.5px;
		background: #D63426;
		transition: width .6s cubic-bezier(.16, 1, .3, 1)
}
.nav__link:hover, .nav__link--active {
		opacity: 1
}
.nav__link:hover::after, .nav__link--active::after {
		width: 100%
}

/* Hamburger */
.hamburger {
		display: none;
		flex-direction: column;
		gap: 5px;
		padding: 8px;
		z-index: 1001
}
.hamburger__line {
		width: 26px;
		height: 1.5px;
		background: #2D2926;
		transition: all .4s cubic-bezier(.16, 1, .3, 1);
		transform-origin: center
}
.hamburger.active .hamburger__line:nth-child(1) {
		transform: rotate(45deg) translate(4px, 5px)
}
.hamburger.active .hamburger__line:nth-child(2) {
		opacity: 0
}
.hamburger.active .hamburger__line:nth-child(3) {
		transform: rotate(-45deg) translate(4px, -5px)
}

/* Mobile nav */
.mobile-nav {
		display: none;
		position: fixed;
		inset: 0;
		background: #F2EFE9;
		z-index: 999;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3rem;
		opacity: 0;
		pointer-events: none;
		transition: opacity .5s cubic-bezier(.16, 1, .3, 1)
}
.mobile-nav.active {
		opacity: 1;
		pointer-events: all
}
.mobile-nav__link {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 2.5rem;
		font-weight: 700;
		opacity: 0;
		transform: translateY(30px);
		transition: all .6s cubic-bezier(.16, 1, .3, 1)
}
.mobile-nav.active .mobile-nav__link {
		opacity: 1;
		transform: translateY(0)
}
.mobile-nav__link:hover {
		color: #D63426
}

/* Button */
.btn {
		display: inline-flex;
		align-items: center;
		gap: .75rem;
		font-family: 'DM Mono', monospace;
		font-size: .7rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		padding: .9rem 1.8rem;
		border: 1.5px solid #2D2926;
		position: relative;
		transition: all .4s cubic-bezier(.16, 1, .3, 1);
		cursor: pointer
}
.btn::before {
		content: '';
		position: absolute;
		inset: 0;
		background: #2D2926;
		transform: scaleX(0);
		transform-origin: left;
		transition: transform .5s cubic-bezier(.16, 1, .3, 1);
		z-index: -1
}
.btn:hover {
		color: #F2EFE9
}
.btn:hover::before {
		transform: scaleX(1)
}
.btn--red {
		border-color: #D63426;
		color: #D63426
}
.btn--red::before {
		background: #D63426
}
.btn__arrow {
		transition: transform .4s cubic-bezier(.16, 1, .3, 1)
}
.btn:hover .btn__arrow {
		transform: translateX(5px)
}

/* Reveal animation */
.reveal {
		opacity: 0;
		transform: translateY(50px);
		transition: all 1s cubic-bezier(.16, 1, .3, 1)
}
.reveal.visible {
		opacity: 1;
		transform: translateY(0)
}
.reveal--d1 {
		transition-delay: .1s
}
.reveal--d2 {
		transition-delay: .2s
}
.reveal--d3 {
		transition-delay: .3s
}
.reveal--d4 {
		transition-delay: .4s
}

/* Registration marks */
.reg-mark {
		position: absolute;
		width: 24px;
		height: 24px;
		opacity: .2
}
.reg-mark::before, .reg-mark::after {
		content: '';
		position: absolute;
		background: #2D2926
}
.reg-mark::before {
		width: 100%;
		height: .5px;
		top: 50%
}
.reg-mark::after {
		height: 100%;
		width: .5px;
		left: 50%
}
.reg-mark--tl {
		top: 2rem;
		left: 2rem
}
.reg-mark--tr {
		top: 2rem;
		right: 2rem
}
.reg-mark--bl {
		bottom: 2rem;
		left: 2rem
}
.reg-mark--br {
		bottom: 2rem;
		right: 2rem
}

/* Footer */
.footer {
		padding: 8rem 0 3rem;
		border-top: 1.5px solid #2D2926
}
.footer__inner {
		max-width: 1360px;
		margin: 0 auto;
		padding: 0 2rem;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		flex-wrap: wrap;
		gap: 3rem
}
.footer__brand {
		font-family: 'Space Grotesk', sans-serif;
		font-size: 1.2rem;
		font-weight: 700;
		margin-bottom: 1rem
}
.footer__tagline {
		opacity: .5;
		font-size: .85rem;
		max-width: 280px
}
.footer__links {
		display: flex;
		gap: 2rem
}
.footer__link {
		font-family: 'DM Mono', monospace;
		font-size: .65rem;
		letter-spacing: .1em;
		text-transform: uppercase;
		opacity: .4;
		transition: opacity .3s ease
}
.footer__link:hover {
		opacity: 1;
		color: #D63426
}
.footer__bottom {
		max-width: 1360px;
		margin: 3rem auto 0;
		padding: 1.5rem 2rem 0;
		border-top: .5px solid rgba(45, 41, 38, .06);
		display: flex;
		justify-content: space-between;
		font-family: 'DM Mono', monospace;
		font-size: .6rem;
		letter-spacing: .1em;
		opacity: .35
}

/* Loader */
.loader {
		position: fixed;
		inset: 0;
		background: #F2EFE9;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		gap: 1.5rem;
		transition: opacity .9s cubic-bezier(.16, 1, .3, 1), visibility .9s
}
.loader.hidden {
		opacity: 0;
		visibility: hidden
}
.loader__shapes {
		display: flex;
		gap: 1.5rem;
		align-items: center
}
.loader__shape {
		opacity: 0;
		animation: shapeIn .6s cubic-bezier(.16, 1, .3, 1) forwards
}
.loader__shape--circle {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: #D63426;
		animation-delay: .2s
}
.loader__shape--triangle {
		width: 0;
		height: 0;
		border-left: 22px solid transparent;
		border-right: 22px solid transparent;
		border-bottom: 38px solid #2B4C7E;
		animation-delay: .4s
}
.loader__shape--square {
		width: 36px;
		height: 36px;
		background: #EBB424;
		animation-delay: .6s
}
@keyframes shapeIn {
		from {
				opacity: 0;
				transform: scale(0) rotate(90deg)
		}
		to {
				opacity: 1;
				transform: scale(1) rotate(0)
		}
}
.loader__bar {
		width: 180px;
		height: 1.5px;
		background: rgba(45, 41, 38, .06);
		overflow: hidden;
		margin-top: 1rem
}
.loader__progress {
		width: 0;
		height: 100%;
		background: #2D2926;
		animation: loaderFill .6s cubic-bezier(.25, 1, .5, 1) .2s forwards
}
@keyframes loaderFill {
		to {
				width: 100%
		}
}

/* ===== Responsive ===== */
@media(max-width:991px) {
		.nav__list {
				display: none
		}
		.hamburger {
				display: flex
		}
		.mobile-nav {
				display: flex
		}
		.cursor {
				display: none
		}
		.section {
				padding: 5rem 0
		}
		.footer {
				padding: 5rem 0 3rem
		}
		.footer__inner {
				flex-direction: column;
				align-items: flex-start
		}
		.footer__bottom {
				flex-direction: column;
				gap: .5rem
		}
}
@media(max-width:767px) {
		.container {
				padding: 0 1.5rem
		}
		.header {
				height: 60px
		}
		.header__inner {
				padding: 0 1.5rem
		}
		.section {
				padding: 3.5rem 0
		}
		.footer {
				padding: 3.5rem 0 3rem
		}
		.mobile-nav__link {
				font-size: 1.8rem
		}
		.btn {
				padding: .75rem 1.4rem;
				font-size: .65rem
		}
		.footer__links {
				flex-direction: column;
				gap: 1rem
		}
		.footer__bottom {
				padding: 1.5rem 1.5rem 0
		}
		.reg-mark--tl {
				top: 1.5rem;
				left: 1.5rem
		}
		.reg-mark--tr {
				top: 1.5rem;
				right: 1.5rem
		}
		.reg-mark--bl {
				bottom: 1.5rem;
				left: 1.5rem
		}
		.reg-mark--br {
				bottom: 1.5rem;
				right: 1.5rem
		}
}
@media(max-width:480px) {
		.section {
				padding: 3rem 0
		}
		.footer {
				padding: 3rem 0 2.5rem
		}
}