
#nav-gradient {
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:-1;
}

.nav-gradient-layer {
	position:absolute;
	inset:0;
	opacity:0;
	transition:opacity 0.45s ease;
	background-attachment:fixed;
	background-image:radial-gradient(circle, #000 40%, #333 100%);
}

.nav-gradient-layer.active {
	opacity:1;
}



#content {
	margin-left:0;
	margin-right:0;
	min-width:450px;

}


.block {
	display:flex;
	box-sizing: border-box;
	
	min-height:100vh;
	flex-direction: row;
	overflow:hidden;

	background-image: conic-gradient(from 92deg at 100% 0%, #000000FF 20%, #7C1F5CFF 43%, #231F1FFF 61%, #FFFFFFFF 100%);
}

.alternate-background {
	background-image: conic-gradient(from 92deg at 100% 0%, #000000FF 20%, #300020FF 43%, #231F1FFF 61%, #FFFFFFFF 100%);
}

.hero-block {
	flex-direction:column;
}

.start-block {
	position:relative;
}

.dust-motes {
	position:absolute;
	top:0;
	right:0;
	width:50%;
	height:50%;
	z-index:3;
	overflow:hidden;
	pointer-events:none;
	mix-blend-mode:screen;
}

.dust-motes::before {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(225deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 38%, transparent 74%);
	opacity:0.55;
}

.dust-motes span {
	position:absolute;
	left:var(--x);
	top:var(--y);
	width:var(--size);
	height:var(--size);
	border-radius:50%;
	background:rgba(255, 255, 245, var(--alpha));
	box-shadow:0 0 calc(var(--size) * 6) rgba(255, 244, 214, var(--alpha));
	filter:blur(0.2px);
	animation:dust-mote-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}

@keyframes dust-mote-drift {
	from {
		transform:translate3d(0, 0, 0);
	}
	to {
		transform:translate3d(var(--travel-x), var(--travel-y), 0);
	}
}

.headline-content {
	box-sizing:border-box;
	width:100%;
	padding:50px 50px 0;
}

.hero-body {
	display:flex;
	flex:1;
	width:100%;
}

.start-block .hero-body .text-content {
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
}



.key-visual {
	display:flex;
	align-items:flex-end;
	justify-content:center;
	width:50%;
	flex-shrink: 0;
	box-sizing:border-box;
	filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.key-visual img {
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
	max-height:75vh;
	object-fit:contain;
	align-self:flex-end;
}

@keyframes key-visual-slide-in {
	from {
		opacity:0;
		transform:translate(200px, 0);
	}
	to {
		opacity:1;
		transform:translate(0, 0);
	}
}

.key-visual img {
	opacity:0;
	transform:translate(200px, 0);
}

.block.is-in-view .key-visual img {
	animation:key-visual-slide-in 1.2s ease-out both;
}

.key-visual-background {
	background-position:50% 10%;
	background-repeat:no-repeat;
	background-size:cover;
}

.text-content {
	width:50%;
	padding:50px;
	box-sizing: border-box;
}

.contact-form {
	display:flex;
	flex-direction:column;
	gap:12px;
	margin-top:30px;
	max-width:560px;
}

.contact-form label {
	font-size:0.85em;
	line-height:1.1;
	color:#ffccdd;
}

.contact-form input,
.contact-form textarea {
	box-sizing:border-box;
	width:100%;
	border:1px solid rgba(255, 255, 255, 0.36);
	border-radius:6px;
	padding:12px 14px;
	background:rgba(0, 0, 0, 0.28);
	color:#fff;
	font:inherit;
	letter-spacing:0;
}

.contact-form textarea {
	min-height:140px;
	resize:none;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline:2px solid #FF4080;
	outline-offset:2px;
	border-color:#FF4080;
	background:rgba(0, 0, 0, 0.42);
}

.contact-form input.is-invalid,
.contact-form textarea.is-invalid {
	border-color:#ffd166;
}

.contact-form-error {
	min-height:1.2em;
	margin:-6px 0 2px;
	font-size:0.76em;
	line-height:1.2;
	color:#ffd166;
}

.contact-form button {
	align-self:flex-start;
	border:0;
	border-radius:6px;
	padding:12px 22px;
	background:#FF4080;
	color:#fff;
	font:inherit;
	line-height:1;
	cursor:pointer;
}

.contact-form button:hover,
.contact-form button:focus-visible {
	background:#ff6a9d;
}

.contact-form button:disabled {
	cursor:default;
	opacity:0.68;
}

.contact-form-status {
	min-height:1.4em;
	margin:2px 0 0;
	color:#ffccdd;
}

.contact-form-status.is-error {
	color:#ffd166;
}

.contact-form-status.is-success {
	color:#a6ffcb;
}

.legal-links {
	display:flex;
	gap:16px;
	margin-top:18px;
	font-size:0.78em;
	line-height:1.2;
}

.legal-links a {
	color:#ffccdd;
	letter-spacing:0;
	text-decoration:underline;
	text-underline-offset:3px;
}

.legal-links a:hover,
.legal-links a:focus-visible {
	color:#fff;
}

.legal-page {
	min-height:100vh;
	background-image:conic-gradient(from 92deg at 100% 0%, #000000FF 20%, #300020FF 43%, #231F1FFF 61%, #FFFFFFFF 100%);
}

.legal-nav.top-nav {
	justify-content:flex-start;
	padding:0 clamp(18px, 5vw, 64px);
}

.legal-nav.top-nav a:first-child {
	margin-right:auto;
}

.legal-main {
	box-sizing:border-box;
	min-width:0;
	max-width:940px;
	margin:0 auto;
	padding:110px clamp(24px, 6vw, 80px) 72px;
}

.legal-main h1 {
	margin:0 0 42px;
	font-size:clamp(2.2em, 7vw, 4.8em);
	color:#fff;
}

.legal-main h2 {
	margin:0 0 14px;
	font-size:1.35em;
	color:#FF4080;
}

.legal-main section {
	margin:0 0 34px;
}

.legal-main p {
	margin:0 0 16px;
	max-width:72ch;
	color:#f5edf2;
}

.legal-main a {
	color:#fff;
	letter-spacing:0;
	text-decoration:underline;
	text-underline-offset:3px;
}

.legal-main code {
	font:0.95em Consolas, Monaco, monospace;
	color:#fff;
}

@media (orientation: portrait) {
	.block {
		flex-direction: column;
	}
	.hero-body {
		flex-direction:column;
	}
	.text-content {
		width:100%;
		order:1;
	}
	.key-visual {
		width:100%;
		min-height:25vh;
		flex-grow:1;
		order:2;
	}
	.dust-motes {
		width:70%;
		height:40%;
	}
	.contact-form {
		max-width:none;
	}
}

@media (max-width: 800px) {
	.legal-nav.top-nav {
		display:flex;
		justify-content:flex-start;
		padding:0 10px;
	}
	.legal-nav.top-nav a {
		height:auto;
		line-height:1.1;
		padding:16px 8px;
		white-space:nowrap;
	}
	.legal-main {
		padding-top:92px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.key-visual img,
	.dust-motes span {
		animation:none;
	}
	.key-visual img {
		opacity:1;
		transform:none;
	}
}



   
    @font-face {
      font-family: "Lilita One";
      src: url("../fonts/LilitaOne/LilitaOne-Regular.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Manrope";
      src: url("../fonts/Manrope/Manrope.ttf") format("truetype");
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }


    body {
      	font-family:"Manrope";
    }
    .top-nav a,
    h2,
    h3,
    h4,
    h5,
    h6 {
	    font-family:"Lilita One";
	    font-weight:normal;
    }
    h1 {
	    font-family:"Lilita One";
	    font-weight:normal;
    }
   




.top-nav {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:20;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	box-sizing:border-box;
	padding:0;
	overflow-x:auto;
	background:rgba(0, 0, 0, 0.48);
	backdrop-filter:blur(14px);
	height:50px;
}

.top-nav a {
	flex:0 0 auto;
	color:#fff;
	font-size:0.8em;
	line-height:1;
	letter-spacing:0;
	height:50px;
	line-height:50px;
	padding:0 20px 0 20px;
}

.top-nav a:hover,
.top-nav a:focus-visible {
	color:#FF4080;
}

:target {
	scroll-margin-top:50px;
}



@media (max-width: 800px) {
	.top-nav {
		display:none;
	}
    :target {
    	scroll-margin-top:0;
    }

}


html {
	scroll-behavior: smooth;
	scroll-snap-type: y proximity;
}
body {
	padding:0;
	margin:0;
	border:0;
	position:relative;


	font-size: clamp(17px, 0.6vw + 12px, 20px);
    line-height: 1.4;
	color: #eee;
	
}




* {
    transition: all 0.3s ease;
}

a {
	text-decoration: none;
		color:#ffccdd;
}


a, h1, h2, h3 {

	font-weight:normal;
	clear:both;
	
	letter-spacing:-0.04em;
	line-height: 1.2;

	margin:0;
	padding:0;
}

h1 {
	font-size:3.2em;
	line-height:0.9;
	margin-top:75px;
	margin-bottom:5px;
	position:relative;
}
h2 {
	font-size:1.7em;	
	line-height:1.1;
	margin-top:45px; 
	margin-bottom:45px;
	position:relative;
}  
h1.kr, h2.kr {
	--kr-opacity:0.5;
	opacity:var(--kr-opacity);
}
span.kr {
	--kr-opacity:0.3;
	display:block;
	overflow:visible;
	position:relative;
	z-index:1;
	opacity:var(--kr-opacity);
	pointer-events:none;
	font-weight:normal;
	letter-spacing:-0.04em;
	line-height:1;
	color:#fff;
	text-align:right;
}

.cowpack-svg-text {
	display:inline-block;
	width:auto;
	max-width:100%;
	height:1em;
	vertical-align:baseline;
}

span.kr:has(+ h1) {
	font-size:3.2em;
	line-height:0.9;
	margin-top:var(--marg);
	margin-bottom:-0.9em;
}

span.kr:has(+ h2) {
	font-size:1.7em;
	line-height:1.1;
	margin-top:75px;
	margin-bottom:-1.1em;
}

span.kr:has(+ h3),
span.kr:has(+ h4),
span.kr:has(+ h5),
span.kr:has(+ h6) {
	font-size:1.2em;
	line-height:1.2;
	margin-bottom:-1.2em;
}

h1 + span.kr:has(+ h2) {
	margin-top:0;
}

span.kr + h1,
span.kr + h2,
span.kr + h3,
span.kr + h4,
span.kr + h5,
span.kr + h6 {
	margin-top:0;
}

span.kr + h1,
span.kr + h2,
span.kr + h3,
span.kr + h4,
span.kr + h5,
span.kr + h6 {
	position:relative;
	z-index:2;
}

@keyframes kr-headline-fade {
	from {
		opacity:0;
		transform:translate(200px, 0.25em);
	}
	to {
		opacity:var(--kr-opacity);
		transform:translateY(0);
	}
}

.block .kr {
	opacity:0;
	transform:translate(200px, 0.25em);
}

.block.is-in-view .kr {
	animation:kr-headline-fade 1.2s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
	.block .kr {
		animation:none;
		opacity:var(--kr-opacity);
		transform:none;
	}
}

h2 {
	color:#FF4080;
}

p:nth-of-type(even) {
	color:#ffccdd;
}


h1 + h1 {
	margin-top:10px;
}

h2 + h2 {
	margin-top:-35px;
}


