/* Senmon · Coming Soon
   Target Figma: Desktop 1600×1040 (node 1:358), Mobile 390×995 (node 1:449).
   Palette: Sumi #14100D, Rame #C9A15A, Sake #E4C79A, Hakuji #F2EBDC.

   Strategy: fluid scaling — layer decorativi (sashimi, kanji, pittogramma) sempre
   visibili, gradient Figma standard, content max 760 con padding-block adaptive.
   Typography clamp() proporzionale a Figma 1600. */

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

html, body {
	margin: 0;
	padding: 0;
	background: #14100D;
	color: #F2EBDC;
	font-family: 'Acumin Variable Concept', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.senmon-cs-body {
	overflow-x: hidden;
	min-height: 100vh;
}

/* ============================================================
   ROOT
   ============================================================ */
.cs-root {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background: #14100D;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: clamp(80px, 10vh, 140px) clamp(20px, 4vw, 60px);
}

/* ============================================================
   PITTOGRAMMA — brush enso circle background left (opacity 0.12)
   Figma: 1080×1080, left -280, top -10, opacity 0.08.
   Alzo opacity a 0.12 per visibilità richiesta user.
   ============================================================ */
.cs-pittogramma {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
	opacity: 0.12;
}
.cs-pitto-slot {
	position: absolute;
	display: block;
}
.cs-pitto-slot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cs-pitto-main {
	top: 5.48%;
	right: 4.4%;
	bottom: 5.48%;
	left: 4.4%;
}
.cs-pitto-vec {
	top: 42.25%;
	right: 41.3%;
	bottom: 42.71%;
	left: 44.11%;
}

/* ============================================================
   SASHIMI photo — right side always fully visible
   ============================================================ */
.cs-sashimi {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
}
.cs-sashimi-img {
	position: absolute;
	display: block;
	max-width: none;
}
.cs-sashimi-desktop { display: block; }
.cs-sashimi-mobile  { display: none; }

.cs-sashimi-gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ============================================================
   KANJI STRIP — vertical rail left
   ============================================================ */
.cs-kanji-strip {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	z-index: 2;
}
.cs-kanji-cap {
	display: block;
	width: 28px;
	height: 1px;
	background: rgba(201, 161, 90, 0.7);
}
.cs-kanji-text {
	font-family: 'Shippori Mincho', 'Yu Mincho', serif;
	font-size: 22px;
	line-height: 1.5;
	color: rgba(228, 199, 154, 0.9);
	text-align: center;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
}
.cs-kanji-line {
	display: block;
	width: 1px;
	height: clamp(400px, 60vh, 760px);
	background: rgba(201, 161, 90, 0.35);
}

.cs-kanji-mobile { display: none; }

/* ============================================================
   CONTENT — normal flow, centered, max 760
   ============================================================ */
.cs-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 760px;
}

/* ============================================================
   LOGO — PNG 920×210, ratio 4.38
   ============================================================ */
.cs-logo {
	display: block;
	flex-shrink: 0;
	width: 100%;
	max-width: 460px;
	height: auto;
	object-fit: contain;
}

/* ============================================================
   TITLE + DIVIDER + TAGLINE
   ============================================================ */
.cs-title {
	margin: 0;
	font-family: 'Fraunces', serif;
	font-weight: 300;
	font-variation-settings: "SOFT" 0, "WONK" 1;
	color: #C9A15A;
	white-space: nowrap;
}

.cs-divider {
	display: block;
	flex-shrink: 0;
	max-width: 100%;
}
.cs-divider-desktop { display: block; }
.cs-divider-mobile  { display: none; }

.cs-tagline {
	margin: 0;
	font-family: 'Acumin Variable Concept', system-ui, sans-serif;
	font-weight: 400;
	color: #F2EBDC;
	text-align: center;
	line-height: 1.5;
}

/* ============================================================
   CARDS (Prenota + Contatti)
   ============================================================ */
.cs-card {
	background: #14100D;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	flex-shrink: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: 600px;
}
.cs-card-prenota { border: 1px solid rgba(201, 161, 90, 0.85); }
.cs-card-contatti { border: 1px solid rgba(201, 161, 90, 0.6); }

.cs-card-icon { display: block; flex-shrink: 0; }

.cs-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.cs-card-title {
	margin: 0;
	font-family: 'Acumin Concept SC', 'Acumin Variable Concept', system-ui, sans-serif;
	font-weight: 600;
	color: #C9A15A;
}
.cs-card-sub {
	margin: 0;
	font-family: 'Acumin Variable Concept', system-ui, sans-serif;
	font-weight: 400;
	color: #F2EBDC;
}

.cs-contact-row { display: flex; align-items: center; }
.cs-contact-inline { gap: 26px; flex-wrap: wrap; justify-content: center; }
.cs-contact {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #F2EBDC;
	text-decoration: none;
	font-family: 'Acumin Variable Concept', system-ui, sans-serif;
	font-weight: 500;
	white-space: nowrap;
	transition: color .15s ease;
}
.cs-contact:hover { color: #C9A15A; }
.cs-contact-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.cs-contact-sep {
	display: block;
	width: 1px;
	height: 22px;
	background: rgba(201, 161, 90, 0.4);
}
.cs-contact-addr {
	gap: 10px;
	color: #F2EBDC;
	font-family: 'Acumin Variable Concept', system-ui, sans-serif;
	font-weight: 500;
	white-space: nowrap;
}
.cs-contact-caption {
	margin: 0;
	font-family: 'Acumin Variable Concept', system-ui, sans-serif;
	font-weight: 400;
	color: rgba(242, 235, 220, 0.75);
	text-align: center;
}

/* ============================================================
   DESKTOP (≥768px)
   Sashimi width proporzionale al viewport target 1600 (760/1600 = 47.5vw).
   Cap 760px per viewport large. Sempre visibile (gradient Figma standard).
   ============================================================ */
@media (min-width: 768px) {

	.cs-pittogramma {
		left: clamp(-320px, -17.5vw, -200px);
		top: -10px;
		width: clamp(700px, 67.5vw, 1080px);
		height: clamp(700px, 67.5vw, 1080px);
	}

	.cs-sashimi {
		right: 0;
		top: 0;
		width: clamp(320px, 47.5vw, 760px);
		height: 100%;
	}
	.cs-sashimi-img {
		top: 11.84%;
		left: -23.23%;
		width: 161.11%;
		height: 78.49%;
		object-fit: cover;
	}
	.cs-sashimi-gradient {
		background:
			linear-gradient(90deg, rgba(20,16,13,0.2) 0%, rgba(20,16,13,0.2) 100%),
			linear-gradient(90deg, #14100D 0%, rgba(20,16,13,0) 50%);
	}

	.cs-kanji-strip {
		left: clamp(20px, 3.75vw, 60px);
		top: clamp(80px, 11.5vh, 160px);
	}

	.cs-content {
		gap: clamp(20px, 1.9vw, 30px);
	}

	.cs-title {
		font-size: clamp(26px, 2.625vw, 42px);
		letter-spacing: clamp(4px, 0.58vw, 9.24px);
	}

	.cs-divider-desktop {
		width: clamp(140px, 11.75vw, 188px);
		height: 16px;
	}

	.cs-tagline {
		font-size: clamp(18px, 1.5vw, 24px);
	}

	.cs-card-prenota {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 22px;
		padding: 26px 34px;
	}
	.cs-card-prenota .cs-card-icon { width: 34px; height: 34px; }
	.cs-card-prenota .cs-card-title { font-size: 20px; letter-spacing: 0.8px; }
	.cs-card-prenota .cs-card-sub   { font-size: 15px; }

	.cs-card-contatti {
		flex-direction: column;
		align-items: center;
		gap: 12px;
		padding: 24px 34px;
	}
	.cs-card-contatti .cs-contact,
	.cs-card-contatti .cs-contact-addr span { font-size: 18px; }
	.cs-card-contatti .cs-contact-caption   { font-size: 15px; }
}

/* ============================================================
   TABLET (768-1023px) — hide kanji + sashimi ridotta
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.cs-kanji-strip { display: none; }
	.cs-sashimi { width: 35vw; }
}

/* ============================================================
   MOBILE (<768px) — pixel-perfect Figma 1:449
   ============================================================ */
@media (max-width: 767.98px) {

	.cs-root {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 0;
	}

	.cs-pittogramma {
		top: auto;
		bottom: -280px;
		left: 50%;
		width: 563px;
		height: 563px;
		transform: translateX(-50%) rotate(-105deg);
		transform-origin: center;
		opacity: 0.08;
	}

	.cs-sashimi {
		position: relative;
		width: 100%;
		height: 300px;
		flex-shrink: 0;
	}
	.cs-sashimi-desktop { display: none; }
	.cs-sashimi-mobile {
		display: block;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.cs-sashimi-gradient {
		background: linear-gradient(
			to bottom,
			rgba(20,16,13,0) 0%,
			rgba(20,16,13,0) 55%,
			#14100D 100%
		);
	}

	.cs-kanji-strip { display: none; }

	.cs-content {
		gap: 22px;
		padding: 4px 28px 48px;
	}

	/* Figma order mobile: kanji → logo → COMING SOON → divider → tagline → cards */
	.cs-kanji-mobile  { order: 1; }
	.cs-logo          { order: 2; }
	.cs-title         { order: 3; }
	.cs-divider-mobile{ order: 4; }
	.cs-tagline       { order: 5; }
	.cs-card-prenota  { order: 6; }
	.cs-card-contatti { order: 7; }

	.cs-kanji-mobile {
		display: block;
		margin: 0;
		font-family: 'Shippori Mincho', 'Yu Mincho', serif;
		font-size: 15px;
		letter-spacing: 0.9px;
		color: rgba(228, 199, 154, 0.9);
		white-space: nowrap;
	}

	.cs-logo { width: 270px; max-width: 100%; }

	.cs-title {
		font-weight: 400;
		font-size: 26px;
		letter-spacing: 5.2px;
	}

	.cs-divider-desktop { display: none; }
	.cs-divider-mobile  { display: block; width: 137px; height: 13px; }

	.cs-tagline { font-size: 18px; }

	.cs-card-prenota {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 26px 24px;
	}
	.cs-card-prenota .cs-card-icon { width: 30px; height: 30px; }
	.cs-card-prenota .cs-card-body { align-items: center; gap: 4px; }
	.cs-card-prenota .cs-card-title { font-size: 16px; letter-spacing: 0.64px; text-align: center; }
	.cs-card-prenota .cs-card-sub   { font-size: 14px; text-align: center; }

	.cs-card-contatti {
		flex-direction: column;
		align-items: center;
		gap: 14px;
		padding: 22px 24px;
	}
	.cs-contact-inline { flex-direction: column; gap: 14px; }
	.cs-contact-sep { display: none; }
	.cs-card-contatti .cs-contact,
	.cs-card-contatti .cs-contact-addr span { font-size: 17px; }
	.cs-card-contatti .cs-contact-caption   { font-size: 14px; }
}