/* ==========================================================================
   HC Bottega – stili principali
   ========================================================================== */

:root {
	--paper: #f1e8d8;
	--paper-2: #e8dcc6;
	--paper-3: #dccbb0;
	--card: #f8f2e7;
	--ink: #2b2118;
	--ink-2: #5a4836;
	--ink-3: #8a7454;
	--wood: #9a6a3e;
	--wood-d: #6e4826;
	--brass: #c08a2e;
	--brass-d: #9c6d1c;
	--glow: #ffd98a;
	--moss: #4d5b3c;
	--night: #1f1812;
	--night-2: #2c2219;
	--line: rgba(43, 33, 24, .16);

	--f-serif: "Young Serif", Georgia, "Times New Roman", serif;
	--f-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-hand: "Reenie Beanie", "Bradley Hand", cursive;

	--wrap: 1240px;
	--gutter: clamp(16px, 4vw, 40px);
	--r: 4px;
	--ease: cubic-bezier(.2, .7, .2, 1);
	--header-h: 76px;
}

/* --------------------------------------------------------------- base */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-sans);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* grana della carta */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: .35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

img,
svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--wood-d); }

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
	font-family: var(--f-serif);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.01em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

em { font-style: italic; }
h1 em, h2 em, .hc-h2 em, .hc-footer__claim em { color: var(--wood); }

::selection { background: var(--glow); color: var(--ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.hc-skip {
	position: absolute;
	left: 16px; top: -60px;
	z-index: 100;
	background: var(--ink);
	color: var(--paper);
	padding: 10px 16px;
	border-radius: var(--r);
}
.hc-skip:focus { top: 12px; color: var(--paper); }

.hc-wrap {
	width: 100%;
	max-width: calc(var(--wrap) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.hc-hand {
	font-family: var(--f-hand);
	font-size: 1.6em;
	line-height: 1;
	color: var(--wood-d);
	letter-spacing: .01em;
}

.hc-muted { color: var(--ink-3); }

.hc-icon { width: 1.25em; height: 1.25em; flex: none; }

/* --------------------------------------------------------------- bottoni */

.hc-btn {
	--bg: var(--ink);
	--fg: var(--paper);
	--bd: var(--ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 52px;
	padding: .8em 1.4em;
	border: 1.5px solid var(--bd);
	border-radius: 999px;
	background: var(--bg);
	color: var(--fg);
	font: 500 1rem/1.2 var(--f-sans);
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.hc-btn:hover { color: var(--fg); transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(43, 33, 24, .55); }
.hc-btn:active { transform: translateY(0); }
.hc-btn .hc-icon:last-child { transition: transform .25s var(--ease); }
.hc-btn:hover .hc-icon:last-child { transform: translateX(3px); }

.hc-btn--brass { --bg: var(--brass); --bd: var(--brass); --fg: var(--night); }
.hc-btn--brass:hover { --bg: var(--glow); --bd: var(--glow); }
.hc-btn--ink:hover { --bg: var(--wood-d); --bd: var(--wood-d); }
.hc-btn--line { --bg: transparent; --fg: var(--ink); }
.hc-btn--line:hover { --bg: var(--ink); --fg: var(--paper); }
.hc-btn--light { --bg: var(--paper); --bd: var(--paper); --fg: var(--ink); }
.hc-btn--light:hover { --bg: var(--glow); --bd: var(--glow); }
.hc-btn--ghost { --bg: transparent; --fg: var(--moss); --bd: var(--moss); min-height: 46px; }
.hc-btn--ghost:hover { --bg: var(--moss); --fg: var(--paper); }

.hc-link-hand {
	font-family: var(--f-hand);
	font-size: 1.7rem;
	line-height: 1;
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 2px;
}
.hc-link-hand:hover { color: var(--brass); }

/* --------------------------------------------------------------- topbar + header */

.hc-topbar {
	background: var(--night);
	color: #d8c8ab;
	font-size: .82rem;
	letter-spacing: .04em;
}
.hc-topbar__in {
	display: flex;
	align-items: center;
	gap: .7em;
	min-height: 36px;
}
.hc-topbar__sep { opacity: .5; }
.hc-topbar__wa {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: .4em;
	color: var(--glow);
	text-decoration: none;
	font-weight: 500;
}
.hc-topbar__wa:hover { color: #fff; }
.hc-topbar__wa .hc-icon { width: 16px; height: 16px; }

.hc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid transparent;
	transition: border-color .3s, box-shadow .3s;
}
/* sfondo sfocato su uno strato a parte: se fosse sull'header stesso,
   il menu mobile (position: fixed) resterebbe chiuso dentro l'header */
.hc-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(241, 232, 216, .92);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
}
.hc-nav-open .hc-header::before { background: var(--paper); }
.hc-header.is-scrolled { border-color: var(--line); box-shadow: 0 10px 30px -24px rgba(43, 33, 24, .6); }
.admin-bar .hc-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .hc-header { top: 0; } }

.hc-header__in {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: var(--header-h);
}

.hc-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--ink);
	flex: none;
}
.hc-brand:hover { color: var(--ink); }
.hc-brand__logo { max-height: 52px; width: auto; }
.hc-brand__stamp {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wood);
	color: var(--paper);
	font: 1.05rem/1 var(--f-serif);
	letter-spacing: .02em;
	box-shadow: inset 0 0 0 3px var(--wood), inset 0 0 0 4.5px rgba(241, 232, 216, .6);
	transform: rotate(-8deg);
	transition: transform .4s var(--ease);
}
.hc-brand:hover .hc-brand__stamp { transform: rotate(4deg); }
.hc-brand__text { display: flex; flex-direction: column; }
.hc-brand__name { font: 1.35rem/1 var(--f-serif); }
.hc-brand__sub {
	font-size: .7rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-top: 5px;
}

.hc-nav { margin-left: auto; }
.hc-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}
.hc-menu a {
	position: relative;
	display: block;
	padding: 10px 14px;
	text-decoration: none;
	font-weight: 500;
	font-size: .95rem;
	color: var(--ink-2);
}
.hc-menu a::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 5px;
	height: 2px;
	background: var(--brass);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--ease);
}
.hc-menu a:hover,
.hc-menu .current-menu-item > a { color: var(--ink); }
.hc-menu a:hover::after,
.hc-menu .current-menu-item > a::after { transform: scaleX(1); }
.hc-menu .sub-menu { display: none; }
.hc-nav__extra { display: none; }

.hc-actions { display: flex; align-items: center; gap: 4px; }
.hc-action {
	position: relative;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background .2s;
}
.hc-action:hover { background: var(--paper-2); color: var(--ink); }
.hc-cart-count {
	position: absolute;
	top: 4px; right: 2px;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border-radius: 10px;
	background: var(--brass);
	color: var(--night);
	font-size: .7rem;
	font-weight: 600;
	line-height: 19px;
	text-align: center;
}
.hc-cart-count[data-count="0"] { display: none; }
.hc-burger { display: none; }
.hc-burger__close { display: none; }

@media (max-width: 960px) {
	:root { --header-h: 64px; }
	.hc-topbar__hide-sm,
	.hc-topbar__sep { display: none; }
	.hc-brand__stamp { width: 40px; height: 40px; font-size: .95rem; }
	.hc-brand__name { font-size: 1.15rem; }
	.hc-brand__sub { font-size: .62rem; letter-spacing: .12em; }

	.hc-header__in { gap: 10px; }
	.hc-brand { min-width: 0; }
	.hc-actions { margin-left: auto; gap: 2px; flex: none; }
	.hc-action { width: 44px; height: 44px; }
	.hc-burger { display: grid; }
	.hc-nav-open .hc-burger__open { display: none; }
	.hc-nav-open .hc-burger__close { display: block; }

	.hc-nav {
		position: fixed;
		inset: var(--nav-top, 100px) 0 0 0;
		z-index: 49;
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 24px var(--gutter) 40px;
		background: var(--paper);
		overflow-y: auto;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-12px);
		transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
	}
	.hc-nav-open .hc-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .3s var(--ease), transform .3s var(--ease);
	}
	.hc-nav-open { overflow: hidden; }
	.hc-menu { flex-direction: column; gap: 0; }
	.hc-menu li { border-bottom: 1px solid var(--line); }
	.hc-menu a {
		padding: 18px 0;
		font: 1.7rem/1.1 var(--f-serif);
		color: var(--ink);
	}
	.hc-menu a::after { display: none; }
	.hc-menu .sub-menu { display: block; list-style: none; padding: 0 0 12px 16px; }
	.hc-menu .sub-menu a { font: 500 1rem var(--f-sans); padding: 8px 0; }
	.hc-menu .sub-menu li { border: 0; }
	.hc-nav__extra {
		display: flex;
		flex-direction: column;
		gap: 14px;
		margin-top: 28px;
		color: var(--ink-2);
	}
	.hc-nav__extra a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
}
@media (max-width: 480px) {
	.hc-brand { gap: 9px; }
	.hc-brand__sub { display: none; }
	.hc-brand__name { font-size: 1.1rem; white-space: nowrap; }
	.hc-action--account { display: none; }
	.hc-topbar__in > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
	.hc-topbar__wa { flex: none; }
}

/* --------------------------------------------------------------- sezioni comuni */

.hc-section { padding-block: clamp(72px, 10vw, 140px); }

.hc-head {
	display: flex;
	gap: clamp(16px, 2.5vw, 32px);
	align-items: flex-start;
	margin-bottom: clamp(36px, 5vw, 64px);
}
.hc-head > div { max-width: 760px; }
.hc-head--split { align-items: flex-end; }
.hc-head--split > .hc-btn { margin-left: auto; flex: none; }
.hc-head__num {
	flex: none;
	font: 1rem/1 var(--f-serif);
	color: var(--brass-d);
	padding-top: .55em;
	border-top: 2px solid var(--brass);
	min-width: 2.4em;
}
.hc-eyebrow {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: .9em;
}
.hc-h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); margin: 0; }

@media (max-width: 720px) {
	.hc-head { flex-direction: column; gap: 14px; }
	.hc-head--split { align-items: flex-start; }
	.hc-head--split > .hc-btn { margin-left: 0; }
}

/* --------------------------------------------------------------- hero */

.hc-hero {
	--h-bg: #f4ead6;
	--h-ink: var(--ink);
	--h-ink-2: var(--ink-2);
	position: relative;
	overflow: hidden;
	background: var(--h-bg);
	color: var(--h-ink);
	padding-top: clamp(28px, 5vw, 64px);
	transition: background 1s var(--ease), color .8s var(--ease);
}
.hc-hero[data-lamp="off"] {
	--h-bg: #241b14;
	--h-ink: #efe3cc;
	--h-ink-2: #bfae91;
}

.hc-hero__glow {
	position: absolute;
	left: var(--gx, 72%);
	top: var(--gy, 46%);
	width: min(1100px, 140vw);
	aspect-ratio: 1;
	translate: -50% -50%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 210, 120, .75), rgba(255, 200, 110, .28) 45%, rgba(255, 190, 100, 0) 72%);
	pointer-events: none;
	transition: opacity .9s var(--ease), left .6s var(--ease), top .6s var(--ease);
	animation: hc-flicker 6s infinite;
}
.hc-hero[data-lamp="off"] .hc-hero__glow { opacity: 0; animation: none; }

.hc-hero__beam {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, rgba(110, 72, 38, .07) 0 1px, transparent 1px 160px),
		linear-gradient(transparent 70%, rgba(110, 72, 38, .06));
}

.hc-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(24px, 4vw, 64px);
	align-items: center;
	min-height: min(72vh, 680px);
}

.hc-hero__kicker { color: var(--brass-d); font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-bottom: .4em; transform: rotate(-2deg); transform-origin: left; }
.hc-hero[data-lamp="off"] .hc-hero__kicker { color: var(--brass); }
.hc-hero__title {
	font-size: clamp(2.6rem, 6.6vw, 5.4rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	margin-bottom: .45em;
}
.hc-hero__title em {
	position: relative;
	color: var(--brass-d);
	white-space: nowrap;
}
.hc-hero[data-lamp="on"] .hc-hero__title em { text-shadow: 0 0 34px rgba(255, 190, 80, .7); }
.hc-hero[data-lamp="off"] .hc-hero__title em { color: #7f6a4f; }
.hc-hero__text {
	max-width: 34em;
	font-size: clamp(1.02rem, 1.3vw, 1.15rem);
	color: var(--h-ink-2);
	margin-bottom: 2em;
}
.hc-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.hc-hero[data-lamp="off"] .hc-link-hand { color: var(--h-ink); }

.hc-hero__lamp {
	position: relative;
	align-self: stretch;
	display: flex;
	justify-content: center;
	min-height: 420px;
	margin-top: calc(clamp(28px, 5vw, 64px) * -1);
}

.hc-pendant {
	position: relative;
	width: min(100%, 360px);
	display: flex;
	flex-direction: column;
	align-items: center;
	transform-origin: 50% 0;
	animation: hc-sway 7s ease-in-out infinite;
}
.hc-pendant.is-swinging { animation: hc-swing 1.6s var(--ease); }
.hc-pendant__cord {
	width: 2px;
	height: clamp(40px, 9vh, 110px);
	background: #3a2a1c;
}
.hc-hero[data-lamp="off"] .hc-pendant__cord { background: #6b5a45; }
.hc-pendant__svg { width: 100%; overflow: visible; }
.hc-pendant__svg .hc-bulb__glass { transition: fill .6s var(--ease); }
.hc-hero[data-lamp="on"] .hc-pendant__svg .hc-bulb__glass {
	fill: #ffe7a8;
	filter: drop-shadow(0 0 10px rgba(255, 200, 90, .95)) drop-shadow(0 0 28px rgba(255, 180, 70, .7));
}
.hc-hero[data-lamp="on"] .hc-pendant__svg .hc-bulb__wire { stroke: #e07b14; }
.hc-hero[data-lamp="off"] .hc-pendant__svg .hc-bulb__glass { fill: #4a3d30; }
.hc-hero[data-lamp="off"] .hc-pendant__svg [stroke="#3a2a1c"],
.hc-hero[data-lamp="off"] .hc-pendant__svg g[stroke="#3a2a1c"] { stroke: #8c7a62; }

.hc-pull {
	position: absolute;
	top: 0;
	right: clamp(0px, 4%, 40px);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 10px 10px;
	border: 0;
	background: none;
	color: inherit;
	cursor: grab;
	touch-action: manipulation;
}
.hc-pull__cord {
	width: 1.5px;
	height: var(--pull-h, clamp(300px, 46vh, 420px));
	background: repeating-linear-gradient(#7d5330 0 3px, #b07b4a 3px 6px);
	transition: height .35s var(--ease);
}
.hc-pull.is-pulled .hc-pull__cord { height: calc(var(--pull-h, clamp(300px, 46vh, 420px)) + 26px); transition-duration: .12s; }
.hc-pull__knob {
	width: 16px;
	height: 26px;
	border-radius: 8px 8px 10px 10px;
	background: linear-gradient(90deg, var(--brass-d), var(--glow) 45%, var(--brass));
	box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
	transition: transform .2s var(--ease);
}
.hc-pull:hover .hc-pull__knob { transform: scale(1.12); }
.hc-pull__label {
	position: absolute;
	top: calc(100% + 6px);
	left: 50%;
	width: 6.5em;
	margin-left: -3.25em;
	text-align: center;
	font-size: 1.6rem;
	color: var(--brass-d);
	transform: rotate(-4deg);
	pointer-events: none;
}
.hc-pull__label::before {
	content: "↑";
	display: block;
	font-family: var(--f-sans);
	font-size: .6em;
	line-height: 1.2;
}
.hc-hero[data-lamp="off"] .hc-pull__label { color: var(--glow); }

.hc-spec {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: clamp(20px, 4vw, 40px) 0 0;
	padding: 22px 0 clamp(64px, 8vw, 96px);
	border-top: 1px solid var(--line);
}
.hc-hero[data-lamp="off"] .hc-spec { border-color: rgba(239, 227, 204, .16); }
.hc-spec > div { padding-right: 16px; }
.hc-spec > div + div { padding-left: 20px; border-left: 1px dashed var(--line); }
.hc-spec dt {
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--h-ink-2);
	margin-bottom: 4px;
}
.hc-spec dd { margin: 0; font: 1.12rem/1.3 var(--f-serif); }

.hc-hero__edge {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	width: 100%;
	height: 34px;
	fill: var(--paper);
}

@media (max-width: 900px) {
	.hc-hero__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.hc-hero__lamp {
		order: -1;
		min-height: 300px;
		margin-top: calc(clamp(28px, 5vw, 64px) * -1);
	}
	.hc-pendant { width: min(78%, 300px); }
	.hc-pendant__cord { height: 24px; }
	.hc-pull { right: 2px; }
	.hc-pull { --pull-h: 120px; }
	.hc-pull__label { font-size: 1.3rem; width: 5em; margin-left: -2.5em; }
	.hc-hero__glow { left: 50%; top: 22%; }
	.hc-spec { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
	.hc-spec > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 420px) {
	.hc-hero__title em { white-space: normal; }
	.hc-hero__lamp { min-height: 260px; }
}

/* --------------------------------------------------------------- collezioni */

.hc-coll-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.8vw, 24px);
}

.hc-coll {
	position: relative;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--ink);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r);
	overflow: hidden;
	transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hc-coll:hover { color: var(--ink); transform: translateY(-6px); box-shadow: 0 24px 40px -28px rgba(43, 33, 24, .55); }
.hc-coll:nth-child(even) { margin-top: clamp(0px, 4vw, 48px); }

.hc-coll__no {
	position: absolute;
	top: 14px; left: 16px;
	z-index: 1;
	font: .82rem/1 var(--f-serif);
	color: var(--ink-3);
}
.hc-coll__art {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1 / 1;
	padding: 18%;
	background:
		radial-gradient(circle at 50% 55%, rgba(255, 217, 138, 0) 0, rgba(255, 217, 138, 0) 60%),
		var(--paper-2);
	border-bottom: 1px solid var(--line);
	transition: background .5s var(--ease);
}
.hc-coll--2 .hc-coll__art { background-color: #dfe0c9; }
.hc-coll--3 .hc-coll__art { background-color: #ead8c0; }
.hc-coll--4 .hc-coll__art { background-color: #e2d4bd; }
.hc-coll__art svg { width: 100%; transition: transform .6s var(--ease); }
.hc-coll:hover .hc-coll__art {
	background-image: radial-gradient(circle at 50% 48%, rgba(255, 210, 120, .75), rgba(255, 210, 120, 0) 62%);
}
.hc-coll:hover .hc-coll__art svg { transform: scale(1.06) rotate(-1.5deg); }
.hc-coll .hc-flame-glow { opacity: 0; transition: opacity .5s; }
.hc-coll:hover .hc-flame-glow { opacity: .7; }

.hc-coll__body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.hc-coll__name { font: 1.45rem/1.15 var(--f-serif); margin-bottom: 8px; }
.hc-coll__text { font-size: .93rem; color: var(--ink-2); margin-bottom: 18px; }
.hc-coll__more {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 12px;
	border-top: 1px dashed var(--line);
}
.hc-coll__more .hc-hand { font-size: 1.7rem; color: var(--brass-d); }
.hc-coll__more .hc-icon { transition: transform .3s var(--ease); }
.hc-coll:hover .hc-coll__more .hc-icon { transform: translateX(4px); }

@media (max-width: 1024px) {
	.hc-coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hc-coll:nth-child(even) { margin-top: 0; }
}
@media (max-width: 560px) {
	.hc-coll-grid { grid-template-columns: 1fr; }
	.hc-coll { flex-direction: row; }
	.hc-coll__art { width: 38%; flex: none; aspect-ratio: auto; padding: 10%; border-bottom: 0; border-right: 1px solid var(--line); }
	.hc-coll__body { padding: 30px 16px 14px; }
	.hc-coll__name { font-size: 1.25rem; }
	.hc-coll__text { font-size: .88rem; margin-bottom: 10px; }
	.hc-coll__no { left: auto; right: 14px; }
}

/* --------------------------------------------------------------- pezzi disponibili */

.hc-pieces { background: var(--paper-2); }
.hc-pieces .hc-head__num { border-color: var(--wood); }

.hc-empty {
	max-width: 620px;
	padding: clamp(28px, 5vw, 48px);
	background: var(--card);
	border: 1.5px dashed var(--paper-3);
	border-radius: var(--r);
}
.hc-empty__hand { font-size: 2rem; margin-bottom: .4em; }

/* --------------------------------------------------------------- la bottega */

.hc-story__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.hc-story__media {
	position: sticky;
	top: calc(var(--header-h) + 32px);
	margin: 0;
	padding: 14px 14px 56px;
	background: #fbf7ef;
	box-shadow: 0 1px 0 var(--line), 0 30px 50px -36px rgba(43, 33, 24, .6);
	transform: rotate(-1.6deg);
}
.hc-story__img,
.hc-story__svg { width: 100%; aspect-ratio: 9 / 11; object-fit: cover; }
.hc-story__media figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 12px;
	text-align: center;
	font-size: 1.7rem;
	color: var(--ink-2);
}
.hc-tape {
	position: absolute;
	width: 110px;
	height: 30px;
	background: rgba(233, 214, 170, .78);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.hc-tape--a { top: -12px; left: 28px; transform: rotate(-8deg); }
.hc-tape--b { top: -10px; right: 24px; transform: rotate(6deg); }

.hc-story__text { font-size: 1.08rem; color: var(--ink-2); max-width: 36em; }
.hc-story__text p:first-child::first-letter {
	float: left;
	font: 4.2em/.82 var(--f-serif);
	color: var(--wood);
	margin: .06em .1em 0 0;
}

.hc-steps {
	list-style: none;
	counter-reset: s;
	margin: clamp(32px, 4vw, 52px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
}
.hc-steps li {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 14px;
	padding: 20px 16px 20px 0;
	border-bottom: 1px solid var(--line);
}
.hc-steps li:nth-child(odd) { border-right: 1px dashed var(--line); }
.hc-steps li:nth-child(even) { padding-left: 20px; }
.hc-steps__n {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1.5px solid var(--brass);
	font: .95rem/1 var(--f-serif);
	color: var(--brass-d);
}
.hc-steps strong { font: 1.15rem/1.3 var(--f-serif); font-weight: 400; }
.hc-steps li > span:last-child { font-size: .92rem; color: var(--ink-2); }

@media (max-width: 900px) {
	.hc-story__grid { grid-template-columns: 1fr; }
	.hc-story__media { position: relative; top: 0; max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
	.hc-steps { grid-template-columns: 1fr; }
	.hc-steps li:nth-child(odd) { border-right: 0; }
	.hc-steps li:nth-child(even) { padding-left: 0; }
}

/* --------------------------------------------------------------- su misura */

.hc-custom { padding-top: 0; }
.hc-sheet {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(28px, 5vw, 64px);
	background-color: #f7f3ea;
	background-image:
		linear-gradient(rgba(47, 74, 107, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(47, 74, 107, .08) 1px, transparent 1px);
	background-size: 24px 24px;
	border-radius: var(--r);
	box-shadow: 0 1px 0 var(--line), 0 40px 60px -48px rgba(43, 33, 24, .6);
}
.hc-sheet::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: clamp(14px, 2.5vw, 34px);
	width: 1.5px;
	background: rgba(192, 80, 60, .3);
}
.hc-sheet__hand { color: #2f4a6b; font-size: 2rem; margin-bottom: .3em; transform: rotate(-2deg); transform-origin: left; }
.hc-sheet .hc-h2 { margin-bottom: .5em; }
.hc-sheet__copy > p:not(.hc-hand) { color: var(--ink-2); max-width: 34em; }
.hc-sheet__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hc-sheet__sketch svg { width: 100%; max-width: 380px; margin-inline: auto; }
.js .hc-sheet__sketch path { stroke-dasharray: 900; stroke-dashoffset: 900; }
.hc-sheet__sketch path[stroke-dasharray] { stroke-dasharray: 4 5; stroke-dashoffset: 0; }
.hc-sheet.is-in .hc-sheet__sketch path { animation: hc-draw 2.6s var(--ease) forwards; }
.hc-sheet.is-in .hc-sheet__sketch path[stroke-dasharray] { animation: none; }
.js .hc-sheet__sketch text { opacity: 0; transition: opacity .8s 1.8s; }
.hc-sheet.is-in .hc-sheet__sketch text { opacity: 1; }

@media (max-width: 860px) {
	.hc-sheet { grid-template-columns: 1fr; padding-left: calc(clamp(14px, 2.5vw, 34px) + 22px); }
	.hc-sheet__sketch { order: -1; }
	.hc-sheet__sketch svg { max-width: 260px; }
}
@media (max-width: 480px) {
	.hc-sheet__ctas .hc-btn { width: 100%; }
}

/* --------------------------------------------------------------- contatti */

.hc-visit { padding-top: 0; }
.hc-visit__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.hc-visit .hc-head { margin-bottom: 0; }
.hc-visit__lead { margin-top: 1.2em; color: var(--ink-2); }

.hc-mapcard {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--r);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	box-shadow: 0 1px 0 var(--line), 0 30px 50px -36px rgba(43, 33, 24, .6);
}
.hc-mapcard:hover { color: var(--ink); }
.hc-mapcard__map { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.2s var(--ease); }
.hc-mapcard:hover .hc-mapcard__map { transform: scale(1.04); }
.hc-mapcard__info {
	position: absolute;
	left: 16px; bottom: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: calc(100% - 32px);
	padding: 16px 18px;
	background: var(--card);
	border-radius: var(--r);
	box-shadow: 0 10px 24px -14px rgba(43, 33, 24, .6);
}
.hc-mapcard__label { display: flex; align-items: center; gap: 6px; font: 1.15rem/1.2 var(--f-serif); }
.hc-mapcard__label .hc-icon { color: var(--brass-d); }
.hc-mapcard__addr { font-size: .95rem; }
.hc-mapcard__hours { font-size: .85rem; color: var(--ink-3); }
.hc-mapcard__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: .85rem;
	font-weight: 600;
	color: var(--wood-d);
}
.hc-mapcard__go .hc-icon { width: 16px; height: 16px; }

@media (max-width: 860px) {
	.hc-visit__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.hc-mapcard { aspect-ratio: 4 / 5; }
}

/* --------------------------------------------------------------- footer */

.hc-footer {
	position: relative;
	overflow: hidden;
	margin-top: clamp(40px, 6vw, 80px);
	padding-top: clamp(56px, 8vw, 100px);
	background: var(--night);
	color: #cdbb9c;
	font-size: .95rem;
}
.hc-footer__grain {
	position: absolute;
	inset: 0;
	opacity: .5;
	background: repeating-linear-gradient(176deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 9px);
	pointer-events: none;
}
.hc-footer a { color: #efe3cc; text-decoration: none; }
.hc-footer a:hover { color: var(--glow); }
.hc-footer__top {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-bottom: clamp(36px, 5vw, 56px);
	border-bottom: 1px solid rgba(239, 227, 204, .12);
}
.hc-footer__claim {
	max-width: 15em;
	margin: 0;
	font: clamp(1.9rem, 4vw, 3rem)/1.08 var(--f-serif);
	color: #efe3cc;
}
.hc-footer__claim em { color: var(--glow); }
.hc-footer .hc-btn--light { color: var(--ink); }
.hc-footer__cols {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	padding-block: clamp(36px, 5vw, 56px);
}
.hc-footer__cols p { margin-bottom: .5em; }
.hc-footer__label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brass) !important;
	margin-bottom: 1em !important;
}
.hc-footer .hc-muted { color: #8f7d62; }
.hc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.hc-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	padding-block: 20px;
	border-top: 1px solid rgba(239, 227, 204, .12);
	font-size: .82rem;
	color: #8f7d62;
}
.hc-footer__bottom a { color: #cdbb9c; text-decoration: underline; text-decoration-color: rgba(205, 187, 156, .35); }
.hc-footer__giant {
	margin: 0 0 -.22em;
	font: clamp(3.4rem, 15.5vw, 15rem)/1 var(--f-serif);
	letter-spacing: -.04em;
	white-space: nowrap;
	text-align: center;
	color: transparent;
	-webkit-text-stroke: 1px rgba(239, 227, 204, .14);
	user-select: none;
}

@media (max-width: 860px) {
	.hc-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
	.hc-footer__cols { grid-template-columns: 1fr; }
	.hc-footer__top .hc-btn { width: 100%; }
}

.hc-wa-float {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 40;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #2f6f4e;
	color: #fff;
	box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .5);
	transition: transform .3s var(--ease), opacity .3s;
}
.hc-wa-float:hover { color: #fff; transform: scale(1.07) rotate(-6deg); }
.hc-wa-float .hc-icon { width: 28px; height: 28px; }
.hc-nav-open .hc-wa-float { opacity: 0; pointer-events: none; }

/* --------------------------------------------------------------- pagine interne */

.hc-pagehead {
	padding: clamp(40px, 7vw, 88px) 0 clamp(28px, 4vw, 48px);
	border-bottom: 1px solid var(--line);
	background:
		radial-gradient(60% 120% at 85% 0%, rgba(255, 210, 120, .35), transparent 60%),
		var(--paper);
}
.hc-pagehead--compact { padding: clamp(28px, 4vw, 48px) 0 clamp(20px, 3vw, 32px); }
.hc-pagehead__title { font-size: clamp(2.2rem, 5.4vw, 4.2rem); margin: 0; }
.hc-pagehead--compact .hc-pagehead__title { font-size: clamp(1.9rem, 4vw, 3rem); }
.hc-pagehead__text { max-width: 40em; margin-top: 1em; color: var(--ink-2); }
.hc-pagehead__text p:last-child { margin-bottom: 0; }

.hc-page { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 8vw, 100px); }

.hc-prose { max-width: 720px; }
.hc-page--wide .hc-prose { max-width: none; }
.hc-prose h2 { font-size: 1.9rem; margin-top: 1.6em; }
.hc-prose h3 { font-size: 1.4rem; margin-top: 1.4em; }
.hc-prose img { border-radius: var(--r); }
.hc-prose blockquote {
	margin: 1.6em 0;
	padding-left: 1.2em;
	border-left: 3px solid var(--brass);
	font: 1.3rem/1.4 var(--f-serif);
}
.hc-post-cover { margin: 0 0 2em; }

.hc-posts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}
.hc-post {
	display: block;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}
.hc-post img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); margin-bottom: 14px; }
.hc-post h2 { font-size: 1.5rem; margin: .2em 0 .3em; }
.hc-post p { color: var(--ink-2); font-size: .95rem; }
.hc-post .hc-hand { font-size: 1.4rem; }

.hc-pagination,
.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-links .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	text-decoration: none;
}
.nav-links .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.hc-404 { padding-block: clamp(56px, 10vw, 140px); }
.hc-404__in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.hc-404__art { filter: grayscale(.6) brightness(.9); opacity: .85; }
.hc-404 .hc-hand { font-size: 2rem; }
.hc-404 .hc-h2 { margin-bottom: .4em; }
.hc-404 p:not(.hc-hand) { color: var(--ink-2); max-width: 32em; margin-bottom: 1.6em; }
@media (max-width: 640px) {
	.hc-404__in { grid-template-columns: 1fr; }
	.hc-404__art { max-width: 200px; }
}

/* moduli generici */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"], textarea, select {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 1.5px solid var(--paper-3);
	border-radius: var(--r);
	background: #fffcf6;
	color: var(--ink);
	font: 1rem/1.4 var(--f-sans);
	transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(192, 138, 46, .2); }
label { font-size: .92rem; font-weight: 500; }

/* --------------------------------------------------------------- animazioni */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
	transition-delay: var(--d, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes hc-sway {
	0%, 100% { transform: rotate(-.8deg); }
	50% { transform: rotate(.8deg); }
}
@keyframes hc-swing {
	0% { transform: rotate(0); }
	20% { transform: rotate(4deg); }
	45% { transform: rotate(-2.6deg); }
	70% { transform: rotate(1.2deg); }
	100% { transform: rotate(0); }
}
@keyframes hc-flicker {
	0%, 100% { opacity: 1; }
	47% { opacity: 1; }
	48% { opacity: .9; }
	50% { opacity: 1; }
	72% { opacity: .96; }
}
@keyframes hc-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
	.js .hc-sheet__sketch path { stroke-dashoffset: 0; }
	.js .hc-sheet__sketch text { opacity: 1; }
}
