/* ==========================================================================
   GULLO — brand layer on top of main.css (25/10/2026).
   Same structure, same behaviours; only colours, type, layout details change.
   Source: ~/Desktop/GULLO-materiali (brand kit + "03 Sito nuovo").
   Run fast. Stop for the view.
   ========================================================================== */

/* ---------- FONTS (Mona Sans, OFL, hosted here) ---------- */
@font-face { font-family: "Mona Sans"; src: url("../fonts/mona/MonaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/mona/MonaSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Mona Sans"; src: url("../fonts/mona/MonaSans-SemiBold.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }
@font-face { font-family: "Mona Sans Condensed"; src: url("../fonts/mona/MonaSansDisplayCondensed-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Mona Sans Expanded"; src: url("../fonts/mona/MonaSansExpanded-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

/* ---------- TOKENS ---------- */
:root {
	--nero: #0B0B0A; --osso: #ECEBE6; --rosso: #FF4419; --grafite: #1A1917; --cenere: #8C8A84;
	--brace: #8A1A06; --alba: #FF7A3D;
	--g-segnale: radial-gradient(ellipse at 76% 40%, rgba(255,68,25,.95) 0%, rgba(138,26,6,.85) 26%, rgba(11,11,10,0) 62%);
	--g-orizzonte: linear-gradient(to bottom, var(--alba) 0%, var(--rosso) 16%, var(--brace) 40%, var(--nero) 70%);
	--g-brace: radial-gradient(ellipse at 50% 125%, var(--rosso) 0%, var(--brace) 36%, var(--nero) 72%);
	--grain: 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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

	--f-sans: "Mona Sans", Arial, ui-sans-serif, system-ui, sans-serif;
	--f-title: "Mona Sans Condensed", "Arial Narrow", "Mona Sans", sans-serif;
	--f-wide: "Mona Sans Expanded", "Mona Sans", Arial, sans-serif;
	--f-serif: var(--f-title);
	--f-mono: var(--f-sans);

	--fs-display: clamp(3.4rem, 9.6vw, 10.5rem);
	--fs-h1: clamp(3rem, 7.4vw, 7.75rem);
	--fs-h2: clamp(2.6rem, 6vw, 6.5rem);
	--fs-h3: clamp(1.6rem, 2.6vw, 2.6rem);
	--fs-body: clamp(1rem, 1.05vw, 1.125rem);
	--fs-micro: .75rem;

	--r-media: 6px;
	--r-card: 8px;
	--header-h: 72px;
	--gutter: clamp(16px, 4vw, 56px);
	--max: 1440px;
}
:root, :root[data-theme="dark"] {
	--bg: var(--nero); --bg-2: #121211; --surface: var(--grafite);
	--ink: var(--osso); --ink-2: #B9B6AE; --ink-3: var(--cenere);
	--line: rgba(236,235,230,.16); --accent: var(--rosso); --on-accent: var(--nero); --media-bg: var(--grafite);
	color-scheme: dark;
}
:root[data-theme="light"] {
	--bg: var(--osso); --bg-2: #E2E1DB; --surface: #F4F3EF;
	--ink: var(--nero); --ink-2: #4A4844; --ink-3: #6B6964;
	--line: rgba(11,11,10,.16); --accent: var(--rosso); --on-accent: var(--nero); --media-bg: #D6D5CF;
	color-scheme: light;
}
::selection { background: var(--rosso); color: var(--nero); }
body { font-family: var(--f-sans); font-size: 1.0625rem; line-height: 1.5; }
:focus-visible { outline-color: var(--rosso); }

/* Grain (film), on dark media blocks */
.gl-grain, .hero--reel .hero__stage, .stack-card, .cta, .site-footer, .page-hero--signal, .matters { position: relative; isolation: isolate; }
.gl-grain::after, .hero--reel .hero__stage::after, .stack-card::after, .cta::after, .site-footer::after, .page-hero--signal::after, .matters::after {
	content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .13; mix-blend-mode: overlay; background-image: var(--grain);
}

/* ---------- TYPE: one title voice, condensed black, uppercase ---------- */
.t-display, .t-h1, .t-h2, .hero__title, .pov__statement, .stack-card__title, .matters__item, .career-hero__title,
.darkroom__title, .disc-x__title, .compass-x__title, .compass-x__q p, .bigword__track, .vault__title, .roll__title,
.about-xp__name, .career-primary__name, .index-row__title, .mine-box__word, .about-facts__row strong, .frames-end__facts strong,
.cta__title, .film-block__head h2, .film-block__head h3, .entry > h2, .mosaic__more strong, .card__title, .lab-card__title {
	font-family: var(--f-title); font-weight: 900; text-transform: uppercase; letter-spacing: -.005em; line-height: .88;
}
.t-display, .t-h1, .t-h2 { padding-bottom: 0; }
.t-display { line-height: .86; }
.t-h3 { font-family: var(--f-title); font-weight: 900; text-transform: uppercase; letter-spacing: 0; line-height: .95; }
.card__title { font-size: clamp(1.5rem, 2vw, 2.1rem); line-height: .92; }

/* <em> in titles = "rosso segnale", same font. While moving it is blurred and skewed
   (the comet's motion trail); it stops once it is in view (see .gl-run in app.js). */
.t-display em, .t-h1 em, .t-h2 em, .t-h3 em, .hero__title em, .pov__statement em, .stack-card__title em, .matters__item em,
.career-hero__title em, .darkroom__title em, .disc-x__title em, .compass-x__title em, .compass-x__q em, .disc-x__head em,
.bigword__item em, .vault__title em, .roll__title em, .card__title em, .mine-strip__head .t-h3 em, .film-block__head em,
.entry h2 em, .entry h3 em, .cta em, .serif, .logo em {
	font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; letter-spacing: inherit; color: var(--rosso); padding-right: 0;
}
.gl-run { display: inline-block; transform-origin: left bottom; }
@media (prefers-reduced-motion: no-preference) {
	.js .gl-run { filter: blur(3px); transform: skewX(-8deg);
		text-shadow: -.12em 0 .05em rgba(255,68,25,.55), -.28em 0 .1em rgba(255,68,25,.3), -.5em 0 .16em rgba(255,68,25,.14);
		transition: filter 700ms var(--ease-out), transform 700ms var(--ease-out), text-shadow 700ms var(--ease-out); }
	.js .gl-run.is-still, .js .gl-run:hover { filter: none; transform: none; text-shadow: none; }
}
.gl-dim { color: var(--ink); opacity: .32; }

/* Labels and small print: Mona Sans, not mono */
.t-micro, .label { font-family: var(--f-sans); font-weight: 500; font-size: var(--fs-micro); letter-spacing: .1em; color: var(--ink-2); }
.label__num { color: var(--rosso); }
.label::before { background: var(--rosso); }
.t-body { color: var(--ink-2); }
.t-intro { font-family: var(--f-sans); letter-spacing: 0; }

/* ---------- BUTTONS: pills ---------- */
.btn { font-family: var(--f-sans); font-weight: 600; font-size: .8125rem; letter-spacing: .08em; border: 1.5px solid currentColor; padding: 10px 20px; }
.btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--solid, .stack-card__cta, .mine-box__cta.is-btn { background: var(--rosso); color: var(--nero); border-color: var(--rosso); }
.btn--solid:hover { background: var(--osso); border-color: var(--osso); color: var(--nero); }
.stack-card__cta { font-family: var(--f-sans); font-weight: 600; font-size: .8125rem; letter-spacing: .08em; }
.filters button { font-family: var(--f-sans); font-weight: 600; letter-spacing: .08em; border-width: 1.5px; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* ---------- HEADER: wordmark · pill nav · round tools ---------- */
.site-header { height: var(--header-h); }
.site-header::before { background: linear-gradient(to bottom, rgba(11,11,10,.85), rgba(11,11,10,0)); border-bottom: 0; opacity: 1; }
:root[data-theme="light"] .site-header.is-scrolled::before { background: linear-gradient(to bottom, rgba(236,235,230,.9), rgba(236,235,230,0)); }
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-header .nav { display: contents; }
.logo { color: var(--ink); display: inline-flex; align-items: center; }
.logo .wordmark { width: 132px; height: auto; display: block; overflow: visible; }
.nav__list { justify-self: center; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(11,11,10,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
:root[data-theme="light"] .nav__list { background: rgba(236,235,230,.72); }
.nav__list li { list-style: none; }
.nav__list a { display: inline-flex; align-items: center; min-height: 40px; padding: 9px 16px; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--ink); background: none; transition: background-color var(--d-fast), color var(--d-fast); }
.nav__list a:hover { background: rgba(236,235,230,.12); }
.nav__list a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.nav__tools { justify-self: end; display: flex; align-items: center; gap: 6px; }
.lang-switch { gap: 6px; font-family: var(--f-sans); font-weight: 600; font-size: .75rem; }
.lang-switch a, .theme-toggle { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; padding: 0; border: 1px solid rgba(236,235,230,.3); border-radius: 999px; color: var(--ink); }
:root[data-theme="light"] .lang-switch a, :root[data-theme="light"] .theme-toggle { border-color: rgba(11,11,10,.25); }
.lang-switch a[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.theme-toggle { width: 40px; height: 40px; }
.menu-toggle { font-family: var(--f-sans); font-weight: 600; border: 1px solid rgba(236,235,230,.3); border-radius: 999px; padding: 0 16px; }
.mobile-menu { background: var(--nero); color: var(--osso); }
:root[data-theme="light"] .mobile-menu { background: var(--osso); color: var(--nero); }
.mobile-menu li a { font-family: var(--f-title); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 16vw, 6rem); line-height: .9; }
@media (max-width: 899px) {
	.site-header .wrap { grid-template-columns: auto 1fr; }
	.nav__list { display: none; }
	.logo .wordmark { width: 108px; }
}
/* On the reel the header stays light whatever the theme */
.home:not(:has(.mobile-menu.is-open)) .site-header:not(.is-scrolled) { --ink: var(--osso); --bg: var(--nero); }

/* ---------- HOME: SHOWREEL ---------- */
.hero--reel .hero__media::after {
	background: radial-gradient(ellipse at 20% 110%, rgba(255,68,25,.55) 0%, rgba(138,26,6,.45) 30%, rgba(11,11,10,0) 65%),
		linear-gradient(to top, rgba(11,11,10,.95) 0%, rgba(11,11,10,.2) 60%, rgba(11,11,10,.5) 100%);
}
.hero--reel .hero__title { font-size: clamp(3.5rem, min(9.5vw, 14.5vh), 10.5rem); line-height: .86; color: var(--osso); text-shadow: none; max-width: none; }
.hero--reel .hero__content { max-width: var(--max); margin-inline: auto; width: 100%; padding-inline: var(--gutter); }
.hero--reel .hero__bar { max-width: var(--max); margin-inline: auto; width: calc(100% - 2 * var(--gutter)); padding-inline: 0; padding-block: 12px; margin-bottom: clamp(20px, 4vh, 36px);
	border-block: 1px solid rgba(236,235,230,.16); }
.hero--reel .hero__bar .t-micro, .hero--reel .scroll-cue { color: var(--osso); }
.hero__pause { color: var(--osso); border-color: rgba(236,235,230,.5); }

/* ---------- HOME: POINT OF VIEW ---------- */
.pov__statement { font-size: clamp(3rem, 7.4vw, 7.75rem); line-height: .9; color: var(--ink); }
.pov__statement img, .pov__inline { border-radius: 4px; }

/* ---------- STACKED PROJECTS: blur that clears, more blur as the next one covers ---------- */
.stack-card { border-radius: var(--r-card); background: var(--nero); color: var(--osso); }
.stack-card__media::after { background: linear-gradient(to top, rgba(11,11,10,.92) 0%, rgba(11,11,10,.35) 55%, rgba(11,11,10,0) 80%), rgba(11,11,10, calc(var(--p) * .55)); }
.stack-card__title { font-size: clamp(2.6rem, 5.6vw, 5.6rem); line-height: .88; }
.stack-card__meta { font-family: var(--f-sans); font-weight: 500; letter-spacing: .1em; }
.stack-card__excerpt { font-family: var(--f-sans); font-size: 1.0625rem; line-height: 1.45; color: #D6D3CC; }
.stack-card__body { max-width: none; right: 0; grid-template-columns: minmax(0, 760px) auto; align-items: end; column-gap: 24px; }
.stack-card__body > :not(.stack-card__cta) { grid-column: 1; }
.stack-card__cta { grid-column: 2; grid-row: 1 / span 3; align-self: end; justify-self: end; }
@media (max-width: 899px) { .stack-card__body { grid-template-columns: 1fr; } .stack-card__cta { grid-column: 1; grid-row: auto; justify-self: start; } }
@media (prefers-reduced-motion: no-preference) {
	.stack-card__media img, .stack-card__media video { filter: blur(calc(6px * var(--blur, 1) + var(--p) * 10px)) saturate(calc(1 - var(--p) * .4)); transition: filter 700ms var(--ease-out), transform 1600ms var(--ease-editorial), opacity 800ms var(--ease-out); }
	.stack-card.is-sharp { --blur: 0; }
	.stack-card:hover { --blur: 0; }
}

/* ---------- WHAT MATTERS: orange horizon, lines sharpen one by one ---------- */
.matters { background: var(--g-orizzonte); color: var(--osso); --ink: var(--osso); --ink-2: rgba(236,235,230,.78); --ink-3: rgba(236,235,230,.7); --line: rgba(236,235,230,.2); }
.matters > .wrap { position: relative; z-index: 4; }
.matters__item { font-size: clamp(2.6rem, 6.6vw, 6.75rem); line-height: .88; grid-template-columns: 60px 1fr; }
.matters__item .t-micro { transform: none; align-self: center; }
@media (prefers-reduced-motion: no-preference) {
	.js .matters__item [data-scrub] { transition: filter 700ms var(--ease-out); }
}

/* ---------- FRAMES TEASER + POLAROIDS ---------- */
.frames-teaser { background: var(--bg) !important; }
.pola { border-radius: 3px; }
.pola__cap { font-family: var(--f-sans); font-style: normal; font-weight: 500; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: #3A3935; }
.pola-hint { color: var(--ink-2); }

/* ---------- CLIENTS: original logos, osso by default, brand colours on hover ---------- */
.clients--logos, .client-wall { background: var(--bg); }
.clients--logos { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-cell { color: var(--ink-3); }
.logo-cell .logo-color { position: absolute; inset: 0; margin: auto; width: var(--w, 50%); max-height: 52%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); pointer-events: none; }
.logo-cell:has(.logo-color) { position: relative; }
.logo-cell:has(.logo-color)::before { content: ""; position: absolute; inset: 10%; border-radius: 6px; background: var(--osso); opacity: 0; transform: scale(.92); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); }
.logo-cell:has(.logo-color):hover::before, .logo-cell:has(.logo-color):focus-visible::before { opacity: 1; transform: none; }
.logo-cell:has(.logo-color):hover .logo-color, .logo-cell:has(.logo-color):focus-visible .logo-color { opacity: 1; }
.logo-cell:has(.logo-color):hover .logo-mark, .logo-cell:has(.logo-color):focus-visible .logo-mark { opacity: 0; }
.clients--logos .logo-color { max-height: 64%; }
.logo-word { font-family: var(--f-title); font-weight: 900; letter-spacing: .02em; }

/* ---------- PROGETTI MIEI ---------- */
.mine-box { border-radius: var(--r-card); background: transparent; border: 1px solid var(--line); }
.mine-box--humera { background: linear-gradient(100deg, var(--nero) 0%, var(--brace) 48%, var(--rosso) 100%); border: 0; color: var(--osso); }
.mine-box__label { color: var(--rosso); }
.mine-box--humera .mine-box__label { color: rgba(236,235,230,.8); }
.mine-box__kind { font-family: var(--f-wide); font-weight: 800; text-transform: uppercase; font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: 0; line-height: 1.1; }
.mine-box__motto { font-family: var(--f-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.mine-box__motto em { color: var(--rosso); }
.mine-box--humera .mine-box__motto em { color: var(--osso); }
.mine-box__cta { font-family: var(--f-sans); font-weight: 600; }
.mine-box__dot { fill: var(--rosso); }
.mine-strip__kind { font-family: var(--f-sans); }
.mine-strip__item .arrow { color: var(--rosso); }

/* ---------- BIG WORDS ---------- */
.bigword__track { font-size: clamp(5rem, 19vw, 20rem); line-height: .84; }
.bigword__dot { width: .22em; height: .22em; border-radius: 0; background: none; position: relative; }
.bigword__dot::before { content: ""; position: absolute; inset: 0; background: var(--rosso); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* ---------- CTA: "segnale" glow ---------- */
.cta { background: var(--g-segnale), var(--nero); color: var(--osso); --ink: var(--osso); --ink-2: #D6D3CC; --line: rgba(236,235,230,.16); }
.cta > .wrap { position: relative; z-index: 4; }
.cta .t-display { font-size: clamp(3.5rem, 9.5vw, 10rem); }
.cta .t-micro { color: var(--osso); opacity: .85; }
.cta .btn { color: var(--osso); border-color: var(--osso); }
.cta .btn:hover { background: var(--osso); color: var(--nero); }
.cta .btn--solid { background: var(--rosso); color: var(--nero); border-color: var(--rosso); }
.cta .btn--solid:hover { background: var(--osso); border-color: var(--osso); }
.cta__row { border-top: 1px solid var(--line); padding-top: 24px; align-items: center; }
.cta__mail { font-family: var(--f-wide); font-weight: 800; text-transform: uppercase; font-size: clamp(1.25rem, 2.4vw, 2.1rem); letter-spacing: 0; }

/* ---------- FOOTER: "brace" glow + animated wordmark ---------- */
.site-footer { background: var(--g-brace); color: var(--osso); border-top: 0; padding-block: 72px 28px; --ink: var(--osso); --ink-2: #B9B6AE; --ink-3: #B9B6AE; --line: rgba(236,235,230,.16); overflow: hidden; }
.site-footer__inner { position: relative; z-index: 4; display: grid; gap: 48px; }
.site-footer__col { font-family: var(--f-sans); font-weight: 500; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__col a { color: var(--osso); }
.site-footer__col .t-micro { color: #B9B6AE; }
.site-footer__brand .wordmark { width: 150px; }
.site-footer__brand .t-small { color: #B9B6AE; }
.site-footer__legal { margin-top: 0; color: var(--osso); align-items: center; }
.site-footer__payoff { color: var(--osso); }
.footer-secret__label { font-family: var(--f-sans); }

.wm-anim { color: var(--osso); }
.wm-anim__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm-anim__payoff { display: none; }
.wm-anim__comet, .wm-anim__blur, .wm-anim__trail { transform-box: fill-box; transform-origin: center; }
.wm-anim__trail { transform-origin: right center; opacity: 0; }
.wm-anim__blur { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.js .wm-anim__gul, .js .wm-anim__lo { opacity: 0; }
	.js .wm-anim__comet { opacity: 0; }
	.js .wm-anim.is-playing .wm-anim__gul { animation: wm-left 1s var(--ease-out) 1.55s forwards; }
	.js .wm-anim.is-playing .wm-anim__lo { animation: wm-right 1s var(--ease-out) 1.55s forwards; }
	.js .wm-anim.is-playing .wm-anim__comet { animation: wm-run 1.9s var(--ease-out) .1s both; }
	.js .wm-anim.is-playing .wm-anim__blur { animation: wm-blur 1.9s var(--ease-out) .1s both; }
	.js .wm-anim.is-playing .wm-anim__trail { animation: wm-trail 1.9s var(--ease-out) .1s both; }
}
@keyframes wm-run { 0% { transform: translateX(-1500px) scale(2.4); filter: blur(9px); opacity: 0; } 8% { opacity: 1; } 62% { transform: translateX(-14px) scale(1.1); filter: blur(1.5px); } 80% { transform: none; filter: blur(0); } 88% { transform: scale(1.28); } 100% { transform: none; filter: blur(0); opacity: 1; } }
@keyframes wm-blur { 0% { transform: translateX(-1500px) scale(2.4); opacity: 0; } 8% { opacity: 1; } 62% { transform: translateX(-14px) scale(1.1); opacity: .8; } 78% { transform: none; opacity: 0; } 100% { opacity: 0; } }
@keyframes wm-trail { 0% { transform: translateX(-1500px) scaleX(1); opacity: 0; } 8% { opacity: .9; } 62% { transform: translateX(-14px) scaleX(.35); opacity: .6; } 80%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes wm-left { from { opacity: 0; transform: translateX(-60px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes wm-right { from { opacity: 0; transform: translateX(60px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
@media (max-width: 899px) { .site-footer__col { grid-column: span 6; } }

/* ---------- PAGE HEROES (Projects, Frames, Contact, …): "segnale" glow on the right ---------- */
.page-hero { position: relative; isolation: isolate; }
.page-hero--signal { background: var(--g-segnale), var(--bg); }
.page-hero--signal > * { position: relative; z-index: 4; }
.page-hero .t-h1 { max-width: 18ch; font-size: clamp(3.2rem, 8vw, 8.5rem); line-height: .86; }
.page-hero__sub { color: var(--ink-2); }

/* ---------- PROJECT PAGE ---------- */
.p-hero__media { border-radius: 0; }
.p-hero__title { font-family: var(--f-title); font-weight: 900; text-transform: uppercase; line-height: .86; }
.fact dt, .credits__list dt { font-family: var(--f-sans); font-weight: 500; letter-spacing: .1em; color: var(--ink-3); }
.credits__list dt { color: var(--rosso); }
.film__badge, .film__now { font-family: var(--f-sans); font-weight: 600; letter-spacing: .1em; }
.film__pick.is-current, .film__pick[aria-current="true"] { border-color: var(--rosso); }
.film__pick strong { font-family: var(--f-title); font-weight: 900; text-transform: uppercase; }
.next__title, .next .t-display { font-family: var(--f-title); }

/* ---------- ABOUT ---------- */
.about-hero__title { font-size: clamp(3.6rem, 11vw, 11rem); line-height: .86; }
.about-hero__portrait { border-radius: var(--r-media); }
.about-facts { border: 0; }
.about-facts__row { gap: 8px; }
.about-facts__row li { padding: clamp(18px, 2vw, 28px); border-radius: var(--r-card); background: var(--grafite); color: var(--osso); min-height: clamp(150px, 14vw, 200px); display: flex; flex-direction: column; justify-content: space-between; }
.about-facts__row li:first-child { background: var(--rosso); color: var(--nero); }
.about-facts__row li:last-child { background: var(--osso); color: var(--nero); }
.about-facts__row li span { color: inherit; opacity: .85; }
.about-facts__row strong { font-size: clamp(2.6rem, 5vw, 4.6rem); letter-spacing: 0; }
.about-xp { background: var(--surface); }
.about-xp__role { font-family: var(--f-sans); font-style: normal; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rosso); }
.compass-x { background: var(--g-orizzonte); }
.disc-x__list { border-top-color: var(--line); }
.disc-x__title { font-size: clamp(2.2rem, 4.3vw, 4.3rem); }
.disc-x__row::before { background: var(--grafite); }

/* ---------- CAREER ---------- */
.career-hero__title { line-height: .86; }
.career-cv { background: var(--grafite); }

/* ---------- CONTACT ---------- */
.contact-line a { font-family: var(--f-title); font-weight: 900; text-transform: uppercase; color: var(--rosso); letter-spacing: 0; }
.form label { font-family: var(--f-sans); font-weight: 500; letter-spacing: .1em; }
.form input, .form textarea, .form select { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); }
.form input:focus, .form textarea:focus, .form select:focus { border-bottom-color: var(--rosso); }

/* ---------- CURSOR ---------- */
.cursor { --cursor-bg: var(--rosso); }
.cursor span { font-family: var(--f-sans); font-weight: 600; }

/* ---------- CAMERA OSCURA keeps its own red light; only type changes ---------- */
.darkroom__label .t-micro, .darkroom__go { font-family: var(--f-sans); }

@media (prefers-reduced-motion: reduce) {
	.gl-run, .stack-card__media img, .stack-card__media video { filter: none !important; transform: none !important; text-shadow: none !important; }
}

/* Pause button: top right, inside the frame even once the reel has shrunk, away from the title. */
.hero__pause { top: calc(var(--header-h) + 3svh + 16px); bottom: auto; }

/* ---------- PROJECT AFTER PROJECT: runway under "next" ---------- */
.next { border-top: 1px solid var(--line); }
.next .t-h1 { font-size: clamp(3rem, 7.4vw, 7.75rem); }
.next .t-h1 em { color: var(--ink); opacity: .45; }
.next__media { border-radius: var(--r-media); }
.next-runway { height: 60vh; display: grid; place-content: center; justify-items: center; gap: 16px; padding-inline: var(--gutter); text-align: center; }
.next-runway__track { position: relative; width: min(420px, 70vw); height: 2px; background: var(--line); overflow: hidden; border-radius: 2px; }
.next-runway__bar { position: absolute; inset: 0; background: var(--rosso); transform: scaleX(0); transform-origin: 0 50%; }
.next-runway .t-micro { transition: color var(--d-base); }
.next-runway.is-full .t-micro { color: var(--rosso); }
.next-runway.is-going { opacity: .4; transition: opacity 260ms; }

/* ---------- PROJECT HERO: full screen, title over the image (CSS only, same markup) ---------- */
.p-hero { position: relative; padding-top: 0; min-height: 100svh; display: grid; align-items: end; isolation: isolate; }
.p-hero__media { position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0; z-index: -1; }
.p-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,11,10,.95) 0%, rgba(11,11,10,.35) 45%, rgba(11,11,10,.15) 70%, rgba(11,11,10,.5) 100%); pointer-events: none; }
.p-hero__head { position: relative; z-index: 2; padding-block: 0 clamp(32px, 6vh, 64px); color: var(--osso); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
.p-hero__corner { display: flex; gap: 0; justify-self: start; text-align: left; color: var(--osso); }
.p-hero__corner span + span::before { content: " · "; white-space: pre; }
.p-hero__title { font-size: clamp(3.4rem, 9.4vw, 10rem); line-height: .86; color: var(--osso); max-width: 14ch; }
.p-hero__title em { color: var(--osso); opacity: .55; }
@media (max-width: 899px) { .p-hero { min-height: 86svh; } .p-hero__media { height: auto; } }

/* Compass sits on the orange horizon: red words become dim osso there (readable). */
.compass-x em, .compass-x__title em, .compass-x__q em { color: var(--osso); opacity: .45; }
.compass-x .gl-run { text-shadow: none; }
/* Brand wordmarks keep their own case. */
.mine-box__word { font-family: var(--f-sans); font-weight: 700; text-transform: none; letter-spacing: -.05em; line-height: .8; }

/* White-only original logos (Ca' del Bosco, Riva, Twinkly, AGN, Sant'Orsola, Fedriga) sit on a graphite chip instead. */
.logo-cell:has(.logo-color.is-light)::before { background: var(--grafite); border: 1px solid var(--line); }

/* ---------- MOTION: titles lean with the scroll speed (--vel from app.js), like the comet ---------- */
@media (prefers-reduced-motion: no-preference) {
	.bigword__track { transform: skewX(calc(var(--vel, 0) * -14deg)); }
	.t-display, .t-h1, .t-h2, .stack-card__title, .matters__item [data-scrub], .pov__statement { transform: skewX(calc(var(--vel, 0) * -4deg)); transform-origin: left bottom; }
}

/* Menu pill that follows the pointer */
.nav__list { position: relative; }
.nav__list li { position: relative; z-index: 1; }
.nav__blob { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: 0; border-radius: 999px; background: rgba(236,235,230,.14); opacity: 0; pointer-events: none;
	transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity 220ms; }
:root[data-theme="light"] .nav__blob { background: rgba(11,11,10,.1); }
.nav__blob.is-on { opacity: 1; }
.nav__list a:hover { background: none; }

/* ---------- PAGE CHANGE: "run fast, stop for the view" — the old page runs off blurred, the new one arrives and stops ---------- */
::view-transition-old(root) { animation: gl-vt-out 460ms cubic-bezier(.7, 0, .84, 0) both; }
::view-transition-new(root) { animation: gl-vt-in 720ms var(--ease-out) both; }
@keyframes gl-vt-out { to { opacity: 0; transform: translateX(-4%); filter: blur(8px); } }
@keyframes gl-vt-in { from { opacity: 0; transform: translateX(5%); filter: blur(10px); } }

/* Light theme: light header fade everywhere, except over the home reel. */
:root[data-theme="light"] .site-header::before { background: linear-gradient(to bottom, rgba(236,235,230,.92), rgba(236,235,230,0)); }
:root[data-theme="light"] .home .site-header:not(.is-scrolled)::before { background: linear-gradient(to bottom, rgba(11,11,10,.85), rgba(11,11,10,0)); }
:root[data-theme="light"] .home:not(:has(.mobile-menu.is-open)) .site-header:not(.is-scrolled) .nav__list { background: rgba(11,11,10,.6); }

/* What matters: the polaroid pair follows the mouse; without a mouse it would sit on the words, so it stays hidden. */
@media (hover: none), (max-width: 899px) { .matters__pics { display: none !important; } }

/* Phone header: everything fits next to the wordmark. */
@media (max-width: 420px) {
	.nav__tools { gap: 4px; }
	.menu-toggle { padding: 0 12px; }
	.logo .wordmark { width: 96px; }
}

/* Projects → Indice: red accent words, and the hover preview passes BEHIND the text (never covers it). */
.index-row__title { font-size: clamp(1.6rem, 2.6vw, 2.6rem); }
.index-row__title em { font-family: inherit; font-style: normal; font-weight: inherit; font-size: 1em; color: var(--rosso); }
.projects-index { position: relative; z-index: 2; }
.index-row { position: relative; z-index: 2; }
.index-preview { z-index: 1 !important; mix-blend-mode: normal; opacity: 0; }
.index-preview.is-visible { opacity: .55; }

/* ---------- HOME REEL: only the white comet, the video becomes its background ----------
   Video in black and white, tinted "rosso segnale" (multiply), dark vignette around a warm
   glow that sits between the film and the comet. The comet runs in from the left with its
   trail and stops in the middle (run fast, stop for the view), then breathes. */
.hero--reel .hero__media video, .hero--reel .hero__media img { filter: grayscale(1) contrast(1.25) brightness(.62); }
.hero--reel .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--rosso); mix-blend-mode: multiply; opacity: .62; pointer-events: none; }
.hero--reel .hero__media::after { z-index: 2;
	background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255,122,61,.28) 0%, rgba(138,26,6,.35) 38%, rgba(11,11,10,.78) 78%, rgba(11,11,10,.95) 100%),
		linear-gradient(to bottom, rgba(11,11,10,.55) 0%, rgba(11,11,10,0) 22%, rgba(11,11,10,0) 70%, rgba(11,11,10,.7) 100%); }
.hero__comet { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.hero__comet > * { grid-area: 1 / 1; }
.hero__comet-star { width: clamp(30px, 3.2vw, 52px); height: auto; overflow: visible; fill: var(--osso); filter: drop-shadow(0 0 8px rgba(255,122,61,.55)) drop-shadow(0 0 2px rgba(236,235,230,.9)); }
.hero__comet-halo { width: min(62vmin, 620px); aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,122,61,.55) 0%, rgba(255,68,25,.32) 22%, rgba(138,26,6,.18) 45%, rgba(138,26,6,0) 70%); mix-blend-mode: screen; }
.hero__comet-trail { width: min(46vw, 640px); height: 3px; border-radius: 3px; justify-self: end; margin-right: 50%;
	background: linear-gradient(90deg, rgba(255,68,25,0), rgba(255,122,61,.9)); transform-origin: right center; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
	.js .hero__comet-star { animation: comet-run 1.9s var(--ease-out) .35s both, comet-breathe 4.8s ease-in-out 2.4s infinite; }
	.js .hero__comet-trail { animation: comet-trail 1.9s var(--ease-out) .35s both; }
	.js .hero__comet-halo { animation: halo-in 2.2s var(--ease-out) .6s both, halo-breathe 4.8s ease-in-out 2.8s infinite; }
	.js.intro-seen .hero__comet-star { animation: comet-breathe 4.8s ease-in-out infinite; }
	.js.intro-seen .hero__comet-trail { animation: none; }
	.js.intro-seen .hero__comet-halo { animation: halo-breathe 4.8s ease-in-out infinite; }
}
@keyframes comet-run {
	0% { transform: translateX(-55vw) scale(2.2); filter: blur(9px) drop-shadow(0 0 8px rgba(255,122,61,.55)); opacity: 0; }
	8% { opacity: 1; }
	62% { transform: translateX(-10px) scale(1.1); filter: blur(1.5px) drop-shadow(0 0 8px rgba(255,122,61,.55)); }
	80% { transform: none; filter: blur(0) drop-shadow(0 0 8px rgba(255,122,61,.55)); }
	88% { transform: scale(1.3); }
	100% { transform: none; opacity: 1; }
}
@keyframes comet-trail { 0% { transform: translateX(-55vw) scaleX(1); opacity: 0; } 8% { opacity: .9; } 62% { transform: translateX(-10px) scaleX(.35); opacity: .6; } 80%, 100% { transform: scaleX(0); opacity: 0; } }
@keyframes comet-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes halo-in { from { opacity: 0; transform: scale(.4); } }
@keyframes halo-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .8; } }
/* While the reel shrinks into its frame the comet fades and gets smaller. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.hero--reel .hero__comet { animation: comet-away linear both; animation-timeline: scroll(root); animation-range: 0 60svh; }
	}
	@keyframes comet-away { to { opacity: 0; transform: scale(.7); } }
}
.hero__comet-halo { translate: calc(var(--cx, 0) * 90px) calc(var(--cy, 0) * 70px); }
.hero__comet-star { translate: calc(var(--cx, 0) * 26px) calc(var(--cy, 0) * 20px); }
/* The grain layer must not undo the sticky reel stage. */
.hero--reel .hero__stage { position: sticky; top: 0; }

/* ---------- Cifra wordmark, as on cifra.humera.it: "cifra" in Archivo Black with the yellow highlighter pass
   (on dark: a thick underline; on light: the lower half of the letters). The pass runs again on hover. ---------- */
@font-face { font-family: "Archivo Cifra"; src: url("../fonts/archivo-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
.mine-box__word { position: relative; isolation: isolate; display: inline-block; padding: 0 .12em; font-family: "Archivo Cifra", var(--f-sans); font-weight: 900; letter-spacing: -.045em; line-height: 1; text-transform: none; }
.mine-box__word::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: -.16em; height: .2em; background: #F8F32B; transform-origin: left center; }
:root[data-theme="light"] .mine-box__word::before { bottom: .02em; height: .46em; }
@media (prefers-reduced-motion: no-preference) {
	:is(.mine-box, .mine-strip__item):hover .mine-box__word::before { animation: cifra-pass 420ms var(--ease-out) both; }
}
@keyframes cifra-pass { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
/* Brand icon (comet with its tail) on the reel: a bit wider than the 4-point star, optically centred on the head. */
.hero__comet-star { width: clamp(56px, 5.6vw, 92px); margin-left: calc(clamp(56px, 5.6vw, 92px) * -.12); }

/* Header once the page has scrolled: a real (slightly translucent) background, so text never shows through it. */
.site-header.is-scrolled::before { background: rgba(11,11,10,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(236,235,230,.08); opacity: 1; }
:root[data-theme="light"] .site-header.is-scrolled::before { background: rgba(236,235,230,.9); border-bottom-color: rgba(11,11,10,.08); }
/* About compass: the pinned column stays clear of the header. */
.compass-x__aside { top: calc(var(--header-h) + 5vh); }

/* Words on the run: they stay blurred longer and settle slowly (≈2.6 s), the blur and the lean easing out
   at slightly different speeds so the trail fades first and the word straightens last. */
@media (prefers-reduced-motion: no-preference) {
	.js .gl-run { filter: blur(4px); transform: skewX(-10deg) translateX(-.04em);
		transition: text-shadow 1.8s cubic-bezier(.3, 0, .2, 1), filter 2.4s cubic-bezier(.3, 0, .15, 1), transform 2.8s cubic-bezier(.25, 0, .1, 1); }
	.js .gl-run.is-still, .js .gl-run:hover { filter: blur(0); transform: none; text-shadow: 0 0 0 rgba(255,68,25,0), 0 0 0 rgba(255,68,25,0), 0 0 0 rgba(255,68,25,0); }
}