/* =========================================================================
   [studio]. — kinetic agency page.
   Hero: 3D press-hall (canvas).
   Page: dense, scrolling, motion-rich.
   ========================================================================= */

:root{
  --bg:        #0a0805;
  --bg-deep:   #050402;
  --carta:     #F2ECE0;
  --warm:      #ffe1b8;
  --rosso:     #B42A1C;
  --ottone:    #c9a064;
  --inchiostro:#2B3A55;
  --rule:      rgba(242,236,224,0.15);
  --rule-strong: rgba(242,236,224,0.30);

  --display: 'Fraunces', 'Times New Roman', serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --pad: clamp(20px, 3vw, 56px);
  --ease: cubic-bezier(.2,.8,.2,1);
}

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

html, body{
  margin:0; padding:0;
  background: var(--bg);
  color: var(--carta);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body{
  background:
    radial-gradient(1200px 700px at 30% 0%, #14110b 0%, transparent 60%),
    radial-gradient(900px 600px at 80% 100%, #0e0c08 0%, transparent 70%),
    var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
ul, ol{ margin:0; padding:0; list-style:none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection{ background: var(--rosso); color: var(--carta); }

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

/* ============================================================
   HUD — fixed top bar, present on every section
   ============================================================ */
.hud{
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 14px var(--pad);
  background: linear-gradient(to bottom, rgba(10,8,5,0.92), rgba(10,8,5,0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hud__mark{
  display: inline-flex; align-items: center;
  gap: 10px;
  color: var(--carta);
}
.hud__sigil{
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  transition: transform .4s var(--ease), filter .4s var(--ease);
  filter: drop-shadow(0 1px 4px rgba(180,42,28,0.35));
}
.hud__mark:hover .hud__sigil{
  transform: rotate(-12deg) scale(1.05);
  filter: drop-shadow(0 2px 8px rgba(180,42,28,0.6));
}
.hud__mark-text{
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 0.92;
  gap: 1px;
}
.hud__mark-l1{
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--carta);
  font-variation-settings: "opsz" 14, "SOFT" 50;
}
.hud__mark-l1 i{ font-style: italic; }
.hud__mark-l2{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.32em;
  color: rgba(242,236,224,0.70);
  /* Optical alignment — the mono caps need a hair of nudge */
  padding-left: 1px;
}

.hud__live{
  justify-self: center;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.85);
}
.hud__live-dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rosso);
  box-shadow: 0 0 12px rgba(180,42,28,0.85);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity: .35; } 50%{ opacity: 1; } }
.hud__live-text{ display: inline-block; min-width: 28ch; text-align: left; }

.hud__nav{
  justify-self: end;
  display: flex; gap: 20px; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.hud__nav a{ position: relative; color: rgba(242,236,224,0.75); }
.hud__nav a:hover{ color: var(--carta); }
.hud__nav a::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
  background: var(--rosso);
  transition: right .35s var(--ease);
}
.hud__nav a:hover::after{ right: 0; }

.hud__cta{
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--carta);
  border-bottom: 1px solid rgba(242,236,224,0.30);
  padding-bottom: 1px;
}
.hud__cta:hover{ color: #fff; border-bottom-color: var(--rosso); }

/* EN · IT toggle in the HUD nav */
.hud__lang{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: rgba(242,236,224,0.40);
  display: inline-flex; align-items: center; gap: 4px;
}
.hud__lang .is-active{ color: var(--carta); }
.hud__lang a{
  color: rgba(242,236,224,0.55);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.hud__lang a:hover{ color: var(--carta); border-bottom-color: var(--rosso); }

/* Same toggle inside the mobile menu */
.menu__lang{
  margin: clamp(20px, 3vh, 28px) 0 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.30em;
  color: rgba(242,236,224,0.40);
}
.menu__lang .is-active{ color: var(--carta); }
.menu__lang a{
  color: rgba(242,236,224,0.55);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.menu__lang a:hover{ color: var(--carta); border-bottom-color: var(--rosso); }
.menu.is-open .menu__lang{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .55s var(--ease);
  transition-delay: 0.48s;
}
.menu.is-open .menu__lang{ opacity: 1; transform: translateY(0); }

/* ---- Mobile menu trigger — text label, hidden on desktop. ---- */
.hud__menu-btn{
  display: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--carta);
  position: relative;
  justify-self: end;
  z-index: 70; /* above the menu overlay so it's tappable when open */
}
.hud__menu-btn::after{
  content: "";
  display: block;
  height: 1px;
  background: var(--rosso);
  margin-top: 4px;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition: transform .3s var(--ease);
}
.hud__menu-btn:hover::after{ transform: scaleX(1); }

.hud__menu-label{ display: inline-block; }
/* Show "Menu" by default, "Close" when expanded */
.hud__menu-btn [data-menu-label-close]{ display: none; }
.hud__menu-btn[aria-expanded="true"] [data-menu-label-open]{ display: none; }
.hud__menu-btn[aria-expanded="true"] [data-menu-label-close]{ display: inline-block; }

@media (max-width: 760px){
  .hud{ grid-template-columns: auto 1fr; gap: 12px; padding-right: var(--pad); }
  .hud__nav{ display: none; }
  .hud__menu-btn{ display: inline-flex; }
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.menu{
  position: fixed; inset: 0;
  z-index: 60; /* above HUD (50) */
  background: var(--bg-deep);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 100px var(--pad) 64px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
  transition: opacity .35s var(--ease), transform .45s var(--ease);
  overflow-y: auto;
  gap: clamp(24px, 4vh, 40px);
}
.menu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.menu-open{ overflow: hidden; }

/* Brand sigil at the top of the menu — small chilli */
.menu__sigil{
  width: 56px; height: 56px;
  filter: drop-shadow(0 2px 12px rgba(180,42,28,0.45));
}

.menu__nav{
  display: flex;
  flex-direction: column;
  gap: 8px;       /* tight — these are big italic words; they don't need air */
  align-items: center;
  width: 100%;
}

.menu__link{
  display: inline-block;
  text-decoration: none;
  color: var(--carta);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(44px, 13vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  transition: color .25s var(--ease), transform .35s var(--ease);
}
.menu__link:hover,
.menu__link:active{
  color: var(--rosso);
  transform: translateY(-2px);
}
.menu__link i{ font-style: italic; }

.menu__email{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: clamp(16px, 3vh, 32px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--carta);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 4px;
  text-transform: uppercase;
}
.menu__email-arrow{
  color: var(--rosso);
  transition: transform .3s var(--ease);
}
.menu__email:hover{ border-bottom-color: var(--rosso); }
.menu__email:hover .menu__email-arrow{ transform: translate(2px, -2px); }

/* Stagger reveal: sigil first, then nav items, then email */
.menu__sigil, .menu__link, .menu__email{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .55s var(--ease), color .25s var(--ease);
}
.menu.is-open .menu__sigil,
.menu.is-open .menu__link,
.menu.is-open .menu__email{
  opacity: 1;
  transform: translateY(0);
}
.menu.is-open .menu__sigil{ transition-delay: 0.04s; }
.menu.is-open .menu__link:nth-of-type(1){ transition-delay: 0.10s; }
.menu.is-open .menu__link:nth-of-type(2){ transition-delay: 0.16s; }
.menu.is-open .menu__link:nth-of-type(3){ transition-delay: 0.22s; }
.menu.is-open .menu__link:nth-of-type(4){ transition-delay: 0.28s; }
.menu.is-open .menu__link:nth-of-type(5){ transition-delay: 0.34s; }
.menu.is-open .menu__email{ transition-delay: 0.42s; }

/* Stagger reveal for menu items when opened */
.menu__link, .menu__email{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s var(--ease), transform .55s var(--ease), color .25s var(--ease), padding-left .35s var(--ease);
}
.menu.is-open .menu__link,
.menu.is-open .menu__email{
  opacity: 1;
  transform: translateY(0);
}
.menu.is-open .menu__link:nth-child(1){ transition-delay: 0.10s; }
.menu.is-open .menu__link:nth-child(2){ transition-delay: 0.16s; }
.menu.is-open .menu__link:nth-child(3){ transition-delay: 0.22s; }
.menu.is-open .menu__link:nth-child(4){ transition-delay: 0.28s; }
.menu.is-open .menu__link:nth-child(5){ transition-delay: 0.34s; }
.menu.is-open .menu__email{ transition-delay: 0.42s; }

/* ============================================================
   HERO — broadside cover composition
   Treated like the cover of a periodical: 3-column eyebrow header,
   centered display headline, bordered figure plate, 3-column footer.
   No type-on-image. No glowing dots. Structure does the work.
   ============================================================ */
.hero{
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: var(--bg);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* No bottom padding — the ticker pins to the bottom edge of the hero. */
  padding: clamp(80px, 9vh, 120px) 0 0;
  overflow: hidden;
}

.hero__inner{
  padding: 0 var(--pad);
}

/* Ticker pulled into the hero — sits flush at the bottom edge. */
.hero__ticker{
  position: relative;
  z-index: 5; /* over watermark + corno */
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-deep);
  overflow: hidden;
  margin-top: auto; /* pin to bottom */
}
.hero__ticker .ticker__row{
  position: relative;
  overflow: hidden;
  padding: 14px 0;
}
.hero__ticker .ticker__rail{
  display: flex;
  width: max-content;
  animation: tick-l 80s linear infinite;
  will-change: transform;
}
.hero__ticker .ticker__set{
  display: inline-flex;
  gap: 28px;
  align-items: center;
  flex-shrink: 0;
  padding-right: 28px;
}
.hero__ticker .ticker__set > span:not(.dot){
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(242,236,224,0.92);
  white-space: nowrap;
  font-variation-settings: "opsz" 60, "SOFT" 50;
}
.hero__ticker .ticker__set > span:not(.dot):nth-of-type(3n+1){
  color: var(--rosso);
}
.hero__ticker .dot{
  font-family: var(--display);
  font-size: clamp(20px, 1.8vw, 28px);
  color: rgba(242,236,224,0.30);
  font-style: normal;
}

/* Giant outlined watermark — Roman numerals as a registration mark behind the
   composition, like Filippo's `©2023`. Reads as background structure, not noise. */
.hero__watermark{
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  font-style: italic;
  font-size: 32vw;
  line-height: 0.85;
  letter-spacing: -0.02em;
  -webkit-text-stroke: 1px rgba(180,42,28,0.38);
  color: transparent;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  animation: hero-watermark-drift 60s ease-in-out infinite alternate;
}
@keyframes hero-watermark-drift{
  0%   { transform: translateX(-1.2%); }
  100% { transform: translateX( 1.2%); }
}

/* The corno canvas — sits in front of the watermark, behind the eyebrows/lede,
   centered on the composition. */
.hero__corno{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 70vw);
  height: min(900px, 70vh);
  z-index: 1;
  pointer-events: none;
  display: block;
  /* Soft mask so the corno bleeds out at edges instead of cutting hard */
  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
}

.hero__inner{
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  position: relative;
  z-index: 2; /* over watermark and corno */
}

/* ---- Headline — the only large text on the hero ---- */
.hero__head{
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero__big{
  display: inline-block;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(80px, 13.5vw, 240px);
  line-height: 0.88;
  letter-spacing: -0.025em;
  color: var(--carta);
  font-style: italic;
  padding-right: 0.04em;
}

/* ---- One line of metadata at the bottom of the hero ---- */
.hero__meta{
  align-self: end;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  opacity: 0;
  animation: hero-fade-in 1.2s var(--ease) 1.4s forwards;
}
.hero__meta .dim{ color: rgba(242,236,224,0.25); }
.hero__meta i{
  font-family: var(--display);
  font-style: italic;
  text-transform: none;
  font-size: 13px;
  letter-spacing: 0;
  color: rgba(242,236,224,0.55);
  font-variation-settings: "opsz" 14, "SOFT" 50;
  margin: 0 2px;
}
.hero__meta a{
  color: var(--carta);
  border-bottom: 1px solid rgba(242,236,224,0.30);
  padding-bottom: 1px;
  transition: border-color .3s var(--ease);
}
.hero__meta a:hover{ border-bottom-color: var(--rosso); }

/* SplitText chars — the JS wraps each character */
.hero__char{
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform, opacity;
}
.hero__char.is-in{
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.95s var(--ease), opacity .55s var(--ease);
}

@keyframes hero-fade-in{ to{ opacity: 1; } }

/* ---- Mobile ---- */
@media (max-width: 900px){
  .hero{ padding-top: 84px; }
  .hero__big{ font-size: clamp(48px, 16vw, 100px); letter-spacing: -0.035em; }
  .hero__meta{ font-size: 9px; gap: 8px; }
  .hero__meta i{ font-size: 11px; }
  .hero__corno{ width: 90vw; height: 60vh; }
}

/* ============================================================
   CLIENT TICKER — two opposing rails
   ============================================================ */
.ticker{
  position: relative;
  z-index: 4;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-deep);
  overflow: hidden;
}
.ticker__row{
  position: relative;
  overflow: hidden;
  padding: 12px 0;
}
.ticker__row--names{
  border-bottom: 1px solid var(--rule);
}
.ticker__row--metrics{
  background: rgba(180,42,28,0.06);
}
.ticker__rail{
  display: flex;
  width: max-content;
  animation: tick-l 80s linear infinite;
  will-change: transform;
}
.ticker__rail--reverse{
  animation: tick-r 60s linear infinite;
}
.ticker__set{
  display: inline-flex;
  gap: 28px;
  align-items: center;
  flex-shrink: 0;
  padding-right: 28px;
}

/* Names row: italic Fraunces, big, every 3rd in red */
.ticker__row--names .ticker__set > span:not(.dot){
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(242,236,224,0.92);
  white-space: nowrap;
  font-variation-settings: "opsz" 60, "SOFT" 50;
}
.ticker__row--names .ticker__set > span:not(.dot):nth-of-type(3n+1){
  color: var(--rosso);
}
.ticker__row--names .dot{
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 30px);
  color: rgba(242,236,224,0.30);
  font-style: normal;
}

/* Metrics row: mono, smaller, all-caps */
.ticker__row--metrics .ticker__set > span:not(.dot){
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.85);
  white-space: nowrap;
}
.ticker__row--metrics .dot{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rosso);
}

@keyframes tick-l{
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}
@keyframes tick-r{
  0%   { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ============================================================
   WORK GRID
   ============================================================ */
.work{
  position: relative;
  padding: clamp(64px, 9vw, 140px) var(--pad) clamp(48px, 6vw, 96px);
  background: var(--bg);
}

.work__head{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.work__title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  color: var(--carta);
  display: flex; align-items: baseline; gap: 18px;
  flex-wrap: wrap;
}
.work__title .num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rosso);
  font-weight: 500;
  font-variation-settings: normal;
}
.work__count{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.55);
  margin: 0;
  white-space: nowrap;
}

/* The grid — Layout B: lead tile spans full height left, three side tiles stacked right */
.grid{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: repeat(3, minmax(180px, 1fr));
  gap: 14px;
  min-height: 78vh;
}
.tile--lead{
  grid-column: 1;
  grid-row: 1 / span 3;
}
.tile--side{
  grid-column: 2;
  grid-row: span 1;
}

@media (max-width: 900px){
  .grid{
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
  }
  .tile--lead{ grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; }
  .tile--side{ grid-column: 1; grid-row: auto; aspect-ratio: 16 / 10; }
}

.tile{
  position: relative;
  background: var(--bg-deep);
  border: 1px solid var(--rule);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .35s var(--ease);
  isolation: isolate;
}
.tile:hover{
  border-color: var(--rule-strong);
}

/* The website screenshot — the resting state of the tile */
.tile__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
  /* Slight desaturation in resting state so screenshots feel "in conversation"
     with the dark page palette rather than fighting it. */
  filter: saturate(0.85) brightness(0.78) contrast(1.05);
  transition: filter .55s var(--ease), transform .9s var(--ease);
}
.tile.is-hot .tile__img{
  filter: saturate(1.0) brightness(0.95) contrast(1.08);
  transform: scale(1.02);
}

/* Bloom canvas — overlays the screenshot on hover with a multiply/overlay
   blend. Reads as ink dispersing across a printed page. */
.tile__bloom{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.tile.is-hot .tile__bloom{ opacity: 0.65; }

/* Subtle dark vignette on the bottom of every tile so meta text always reads.
   Sits above the image but below the meta + numbers. */
.tile::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top,
    rgba(5,4,2,0.92) 0%,
    rgba(5,4,2,0.55) 45%,
    rgba(5,4,2,0) 100%);
  z-index: 2;
  pointer-events: none;
}

/* ---- Tile labels ---- */
.tile__num{
  position: absolute; top: 16px; left: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--carta);
  z-index: 4;
  /* Subtle plate behind the number so it always reads against any screenshot */
  padding: 4px 8px;
  background: rgba(10,8,5,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tile__live{
  position: absolute; top: 16px; right: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--carta);
  z-index: 4;
  padding: 4px 8px;
  background: rgba(180,42,28,0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tile__live::before{
  content: "●";
  margin-right: 6px;
  color: var(--carta);
  animation: pulse 1.6s ease-in-out infinite;
}

/* ---- The meta block at the bottom-left of every tile ---- */
.tile__meta{
  position: absolute;
  left: 22px; right: 22px; bottom: 20px;
  z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}
.tile__name{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 34px);
  line-height: 1.0;
  letter-spacing: -0.015em;
  color: var(--carta);
  margin: 0;
  font-variation-settings: "opsz" 60, "SOFT" 30;
  /* Lead tile gets a much bigger title */
}
.tile--lead .tile__name{
  font-size: clamp(28px, 3vw, 56px);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.tile__tag{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.70);
  margin: 0;
}

/* "+ more" line under the grid */
.work__more{
  margin: 64px 0 0;
  display: flex; gap: clamp(16px, 4vw, 80px);
  align-items: baseline; flex-wrap: wrap;
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 32px);
  font-weight: 300;
  color: rgba(242,236,224,0.85);
  font-variation-settings: "opsz" 60, "SOFT" 30;
}
.work__more-email{
  display: inline-flex; align-items: baseline; gap: 2px;
  font-style: italic;
  color: var(--carta);
  border-bottom: 1px solid rgba(242,236,224,0.30);
  padding-bottom: 1px;
}
.work__more-email:hover{ color: #fff; border-bottom-color: var(--rosso); }
.work__more-email .cursor{
  animation: blink 1s step-end infinite;
  color: var(--rosso);
  font-weight: 400;
}
@keyframes blink{ 0%,49%{ opacity: 1; } 50%,100%{ opacity: 0; } }

/* ============================================================
   DISCIPLINES — IN TRE ATTI
   Three tall panels framed in a thin red rule. Empty stages with
   one big italic word. Hover wakes a real WebGL shader behind it.
   Background is the same dark page color, edge to edge.
   ============================================================ */
.atti{
  position: relative;
  padding: clamp(72px, 9vw, 140px) var(--pad);
  background: var(--bg);
  color: var(--carta);
  overflow: hidden;
}

.atti__head{
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(36px, 4vw, 64px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.atti__title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4.4vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  color: var(--carta);
}
.atti__title i{
  font-style: italic;
  color: var(--carta);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}
.atti__title .num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rosso);
  font-weight: 500;
  font-variation-settings: normal;
}
.atti__lede{
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.5;
  color: rgba(242,236,224,0.62);
  max-width: 48ch;
  margin: 0;
  justify-self: end;
  text-align: right;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}
@media (max-width: 760px){
  .atti__head{ grid-template-columns: 1fr; }
  .atti__lede{ justify-self: start; text-align: left; }
}

/* The three-panel slab — single red hairline frame around the trio */
.atti__panels{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  border: 1px solid var(--rosso);
  background: var(--bg);
}
@media (max-width: 900px){
  .atti__panels{ grid-template-columns: 1fr; }
}

/* Each panel — a tall stage. Internal vertical rule between siblings. */
.atto{
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 2.2vw, 40px);
  transition: background .6s var(--ease);
}
.atto + .atto{
  border-left: 1px solid var(--rosso);
}
@media (max-width: 900px){
  .atto + .atto{ border-left: 0; border-top: 1px solid var(--rosso); }
  .atto{ aspect-ratio: 4 / 5; }
}

/* The shader canvas — fills the panel, sits under the text. */
.atto__shader{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 1;
  opacity: 0;
  transition: opacity .55s var(--ease);
  pointer-events: none;
}
.atto.is-hot .atto__shader{ opacity: 1; }

/* Eyebrow — top-left mono red label */
.atto__eyebrow{
  position: relative;
  z-index: 3;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rosso);
  margin: 0;
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
}
.atto__eyebrow .dot{ color: var(--rosso); opacity: 0.55; }

/* The huge italic Fraunces wordmark — the centerpiece */
.atto__word{
  position: relative;
  z-index: 3;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(64px, 8.5vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--carta);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  text-align: left;
  align-self: flex-start;
  /* Sit a touch above the vertical center so the eye lands on it */
  margin-top: auto;
  margin-bottom: auto;
  text-shadow: 0 4px 24px rgba(0,0,0,0.55);
  transition: transform .8s var(--ease), letter-spacing .8s var(--ease);
  will-change: transform;
}
.atto__word i{
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.atto__dot{
  display: inline-block;
  color: var(--rosso);
  font-style: normal;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  margin-left: 2px;
  transition: transform .6s var(--ease);
}
.atto.is-hot .atto__dot{
  transform: scale(1.18) translateY(-2px);
}
.atto.is-hot .atto__word{
  letter-spacing: -0.035em;
}

/* The pillar copy — bottom of the panel, two lines, second is italic */
.atto__pillar{
  position: relative;
  z-index: 3;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.45;
  color: rgba(242,236,224,0.78);
  margin: 0;
  max-width: 28ch;
  font-variation-settings: "opsz" 36, "SOFT" 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.atto__pillar .i{
  font-style: italic;
  color: var(--carta);
  font-variation-settings: "opsz" 36, "SOFT" 60;
}

/* Soft inner vignette — keeps shader edges from feeling pasted */
.atto::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.45) 100%);
  z-index: 2;
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.atto.is-hot::after{ opacity: 1; }

/* ---- Mobile / coarse pointer: no hover available, so the panels are
        permanently "hot" — shader on, word styled, overlay visible. ---- */
@media (hover: none), (max-width: 760px){
  .atto .atto__shader{ opacity: 1; }
  .atto::after{ opacity: 1; }
}
.team{
  position: relative;
  padding: clamp(80px, 10vw, 160px) var(--pad);
  background: var(--bg);
}
.team__head{
  display: grid; grid-template-columns: auto 1fr; gap: 24px;
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 96px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.team__title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  font-variation-settings: "opsz" 144;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.team__title .num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rosso);
  font-weight: 500;
  font-variation-settings: normal;
}
.team__lede{
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(16px, 1.8vw, 22px);
  color: rgba(242,236,224,0.70);
  margin: 0;
  max-width: 36ch;
  justify-self: end;
  text-align: right;
}
@media (max-width: 760px){
  .team__head{ grid-template-columns: 1fr; }
  .team__lede{ justify-self: start; text-align: left; }
}

.founders{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 56px);
}
@media (max-width: 980px){ .founders{ grid-template-columns: 1fr; } }

.founder{
  position: relative;
  border: 1px solid var(--rule);
  background: var(--bg-deep);
  overflow: hidden;
  display: flex; flex-direction: column;
  cursor: crosshair;
  transition: border-color .35s var(--ease);
}
.founder:hover{ border-color: var(--rule-strong); }

.founder__portrait{
  position: relative;
  aspect-ratio: 4 / 5;
  background: #f2ece0;        /* paper white — riso shows on light stock */
  overflow: hidden;
  isolation: isolate;
  cursor: crosshair;
}
.riso__paper{
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0 0.06  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: 0.18;
  mix-blend-mode: multiply;
  z-index: 4;
}
.founder__portrait::before{
  /* paper tooth — soft bloom */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 50% 60%, rgba(255,255,255,0) 0%, rgba(28,23,19,0.10) 100%);
  pointer-events: none;
  z-index: 3;
}

.riso{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(120px, 18vw, 280px);
  letter-spacing: -0.05em;
  font-variation-settings: "opsz" 144, "SOFT" 60;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: transform .6s var(--ease), filter .6s var(--ease);
  filter: blur(0.4px);
  user-select: none;
  line-height: 1;
}
.riso--blue{
  color: #2B3A55;
  transform: translate(-12px, 8px);
  z-index: 1;
}
.riso--red{
  color: #B42A1C;
  transform: translate(10px, -6px);
  z-index: 2;
}
.founder:hover .riso--blue,
.founder:hover .riso--red{
  transform: translate(0, 0);
  filter: blur(0px);
}

.founder__corner{
  position: absolute; top: 12px; left: 12px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1c1713;
  background: #f2ece0;
  padding: 4px 6px;
  border: 1px solid rgba(28,23,19,0.20);
}
.founder__hostmark{
  position: absolute; bottom: 12px; right: 12px;
  z-index: 5;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: #B42A1C;
  background: #f2ece0;
  padding: 4px 6px;
  border: 1px solid #B42A1C;
}

.founder__meta{
  padding: 22px 22px 26px;
  border-top: 1px solid var(--rule);
}
.founder__name{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  font-variation-settings: "opsz" 60;
  color: var(--carta);
}
.founder__role{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rosso);
  margin: 0;
}
/* .founder__city — removed: no city references in this brand */
.founder__bio{
  font-size: 14px;
  line-height: 1.5;
  color: rgba(242,236,224,0.75);
  margin: 0;
  max-width: 32ch;
}

.team__plus{
  margin: 56px 0 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 22px);
  color: rgba(242,236,224,0.65);
}
.team__plus a{ color: var(--carta); border-bottom: 1px solid rgba(242,236,224,0.30); padding-bottom: 1px; }
.team__plus a:hover{ color: #fff; border-bottom-color: var(--rosso); }

/* ============================================================
   METHOD
   ============================================================ */
.method{
  padding: clamp(80px, 10vw, 160px) var(--pad);
  background: var(--bg-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.method__head{
  margin-bottom: clamp(40px, 6vw, 96px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.method__title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.method__title .num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rosso);
  font-weight: 500;
}
.phases{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}
@media (max-width: 980px){ .phases{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .phases{ grid-template-columns: 1fr; } }

.phase{
  position: relative;
  border-top: 2px solid var(--carta);
  padding-top: 20px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .5s var(--ease);
}
.phase:hover{ transform: translateY(-4px); }

.phase__num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rosso);
}
.phase__time{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(242,236,224,0.50);
}
.phase__name{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -0.01em;
  margin: 4px 0 4px;
  font-variation-settings: "opsz" 60;
  color: var(--carta);
}
.phase__desc{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(242,236,224,0.70);
  margin: 0;
  max-width: 32ch;
}
.phase__mark{
  position: absolute; top: -10px; right: 0;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 14px;
  background: var(--bg-deep);
  color: var(--rosso);
  font-family: var(--mono);
  border-radius: 50%;
  border: 1px solid var(--rosso);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  padding: clamp(80px, 10vw, 160px) var(--pad);
  background: var(--bg);
}
.contact__head{
  margin-bottom: clamp(36px, 4vw, 72px);
}
.contact__title{
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.contact__title .num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rosso);
  font-weight: 500;
}
.contact__title i{ font-style: italic; }

.contact__email{
  display: block;
  font-family: var(--display);
  font-weight: 300;
  /* Sized to the 25-char ciaostudionapoli@gmail.com — clamps tighter than the
     old hero-sized scale so it never overflows on narrow viewports. */
  font-size: clamp(28px, 6.4vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--carta);
  margin: 0 0 32px;
  max-width: 100%;
  overflow-wrap: anywhere;     /* break the @gmail part to a new line if needed */
  word-break: break-word;
  hyphens: none;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  transition: color .35s var(--ease), transform .35s var(--ease);
  will-change: transform;
}
.contact__email i{ font-style: italic; }
.contact__email:hover{ color: #fff; }
.contact__email:hover i{ color: var(--rosso); }
@media (max-width: 760px){
  .contact__email{ font-size: clamp(28px, 8vw, 56px); margin-bottom: 24px; }
}

.contact__line{
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  color: rgba(242,236,224,0.75);
  max-width: 50ch;
  margin: 0 0 36px;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

.contact__ctas{
  display: flex; gap: 16px; flex-wrap: wrap;
  margin: 0 0 64px;
}
.cta{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--carta);
  color: var(--carta);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cta--primary{ background: var(--carta); color: var(--bg); }
.cta--primary:hover{ background: var(--rosso); border-color: var(--rosso); color: var(--carta); }
.cta:not(.cta--primary):hover{ background: var(--carta); color: var(--bg); }

.contact__meta{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 56px);
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  margin: 0;
}
.contact__meta div{ display: flex; flex-direction: column; gap: 8px; }
.contact__meta dt{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--rosso);
}
.contact__meta dd{
  font-size: 14px;
  color: rgba(242,236,224,0.75);
  margin: 0;
  line-height: 1.5;
}
@media (max-width: 760px){ .contact__meta{ grid-template-columns: 1fr 1fr; } }

/* ============================================================
   FOOTER — broadside layout
   Bordered 4-cell grid + tiny legal + giant wordmark with chilli companion.
   Corner registration marks anchor the whole page like a printer's bed.
   ============================================================ */
.foot{
  position: relative;
  background: var(--bg-deep);
  padding: 0;
  border-top: 1px solid var(--rule);
  isolation: isolate;
  overflow: hidden;
}

/* Corner registration marks — small red squares at the 4 extreme corners. */
.foot__reg{
  position: absolute;
  width: 8px; height: 8px;
  background: var(--rosso);
  z-index: 10;
  pointer-events: none;
}
.foot__reg--tl{ top: 14px; left: 14px; }
.foot__reg--tr{ top: 14px; right: 14px; }
.foot__reg--bl{ bottom: 14px; left: 14px; }
.foot__reg--br{ bottom: 14px; right: 14px; }

/* 4-cell bordered grid */
.foot__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px){ .foot__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .foot__grid{ grid-template-columns: 1fr; } }

.foot__cell{
  padding: clamp(36px, 4.5vw, 64px) clamp(24px, 2.5vw, 36px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-height: 240px;
}
.foot__cell:last-child{ border-right: 0; }
@media (max-width: 900px){
  .foot__cell{ border-bottom: 1px solid var(--rule); min-height: 180px; }
  .foot__cell:nth-child(2n){ border-right: 0; }
  .foot__cell:nth-last-child(-n+2){ border-bottom: 0; }
}
@media (max-width: 480px){
  .foot__cell{ border-right: 0; border-bottom: 1px solid var(--rule); min-height: auto; }
  .foot__cell:last-child{ border-bottom: 0; }
}

.foot__cell--right{ text-align: right; }
.foot__cell--right ul{ align-items: flex-end; }

.foot__h{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.45);
  margin: 0 0 22px;
}

.foot__cell ul{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot__cell li{
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(242,236,224,0.80);
  line-height: 1.4;
}
.foot__cell a{
  color: rgba(242,236,224,0.85);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.foot__cell a:hover{
  color: var(--carta);
  border-bottom-color: var(--rosso);
}
.foot__arrow{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--rosso);
  transition: transform .3s var(--ease);
}
.foot__cell a:hover .foot__arrow{
  transform: translate(2px, -2px);
}

/* Tiny legal band between grid and broadside */
.foot__legal{
  margin: 0;
  padding: 18px clamp(24px, 2.5vw, 36px);
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.45);
  border-bottom: 1px solid var(--rule);
}
.foot__legal .dim{ color: rgba(242,236,224,0.20); }
.foot__legal-name{ color: rgba(242,236,224,0.65); margin-left: auto; }

/* Broadside: giant wordmark filling the bottom + chilli inside it */
.foot__broadside{
  position: relative;
  padding: clamp(40px, 6vw, 96px) clamp(20px, 2vw, 40px) clamp(48px, 7vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(280px, 38vw, 520px);
  isolation: isolate;
}

.foot__bigmark{
  margin: 0;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 18vw, 320px);
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: var(--carta);
  text-align: center;
  white-space: nowrap;
  z-index: 1;
  position: relative;
  /* Wordmark rises from below as the footer enters view */
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  will-change: transform, opacity;
}
.foot.is-revealed .foot__bigmark{
  opacity: 1;
  transform: translateY(0);
}
.foot__bigmark-i{ font-style: italic; }
.foot__bigmark-c{ font-style: italic; margin-left: 0.15em; }
.foot__bigmark-sep{ display: inline-block; width: 0.05em; }

/* The 3D chilli — sits ON TOP of the wordmark, refracting it */
.foot__corno{
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(220px, 28vw, 480px);
  height: clamp(220px, 28vw, 480px);
  z-index: 2;
  display: block;
  pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(48px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  will-change: transform, opacity;
}
.foot.is-revealed .foot__corno{
  opacity: 1;
  transform: translate(-50%, -50%) translateY(0);
  transition-delay: .2s;
}

@media (max-width: 700px){
  .foot__bigmark{
    font-size: clamp(40px, 14vw, 80px);
    white-space: normal;       /* allow wrapping on narrow screens */
    line-height: 0.95;
  }
  .foot__bigmark-c{ display: block; margin-left: 0; }
  .foot__corno{ width: 180px; height: 180px; }
  .foot__legal{ flex-wrap: wrap; gap: 8px; font-size: 9px; }
  .foot__legal-name{ margin-left: 0; width: 100%; }
}

/* ============================================================
   LEGAL DOCUMENT PAGES (privacy, cookies)
   Editorial typography. Same dark warm palette. Tight, readable.
   ============================================================ */
.doc{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(96px, 14vh, 160px) var(--pad) clamp(80px, 10vh, 140px);
  color: rgba(242,236,224,0.85);
}
.doc__head{
  margin: 0 0 clamp(48px, 7vh, 80px);
  padding-bottom: clamp(28px, 3vw, 48px);
  border-bottom: 1px solid var(--rule);
}
.doc__eyebrow{
  margin: 0 0 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rosso);
}
.doc__title{
  margin: 0 0 28px;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(48px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--carta);
}
.doc__lede{
  margin: 0 0 18px;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.45;
  color: rgba(242,236,224,0.78);
  font-variation-settings: "opsz" 36, "SOFT" 50;
  max-width: 56ch;
}
.doc__updated{
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(242,236,224,0.45);
}

.doc__body h2{
  margin: clamp(48px, 6vh, 72px) 0 18px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.01em;
  color: var(--carta);
  font-variation-settings: "opsz" 60, "SOFT" 50;
}
.doc__body h2:first-child{ margin-top: 0; }
.doc__body p{
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.65;
  color: rgba(242,236,224,0.82);
  font-variation-settings: "opsz" 24, "SOFT" 30;
}
.doc__body ul{
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
}
.doc__body li{
  position: relative;
  padding-left: 22px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: rgba(242,236,224,0.78);
  font-variation-settings: "opsz" 24, "SOFT" 30;
}
.doc__body li::before{
  content: "·";
  position: absolute;
  left: 6px; top: -2px;
  color: var(--rosso);
  font-weight: 700;
  font-size: 22px;
}
.doc__body strong{ color: var(--carta); font-weight: 500; }
.doc__body code{
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(242,236,224,0.08);
  padding: 2px 6px;
  border-radius: 2px;
  color: var(--carta);
}
.doc__body a{
  color: var(--carta);
  border-bottom: 1px solid rgba(242,236,224,0.30);
  padding-bottom: 1px;
  transition: border-color .25s var(--ease);
}
.doc__body a:hover{ border-bottom-color: var(--rosso); }

.doc__sign{
  margin-top: 36px !important;
  font-style: italic;
  color: rgba(242,236,224,0.55) !important;
}

.doc__back{
  margin: clamp(56px, 8vh, 96px) 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.doc__back a{
  color: rgba(242,236,224,0.65);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.doc__back a:hover{
  color: var(--carta);
  border-bottom-color: var(--rosso);
}

/* Simpler footer for legal pages — just the bottom row, no broadside */
.foot--simple{
  padding: 28px var(--pad) 24px;
  min-height: 80px;
}
.foot--simple .foot__bottom{
  border-top: 0;
  padding-top: 0;
}

/* ============================================================
   PRINT BROADSIDE (Cmd+P)
   ============================================================ */
.broadside{ display: none; }
@media print{
  body{ background: #fff !important; }
  .hud, .hero, .ticker, .work, .atti, .team, .method, .contact, .foot, .srt{ display: none !important; }
  .broadside{
    display: block;
    padding: 36mm 22mm;
    color: #1C1713;
    font-family: var(--display);
    background: #fff;
  }
  .broadside__small{ font-family: var(--mono); font-size: 9pt; letter-spacing: .3em; text-transform: uppercase; margin: 0 0 24mm; }
  .broadside__head{ font-weight: 800; font-size: 60pt; line-height: .92; letter-spacing:-0.02em; margin: 0 0 18mm; font-variation-settings:"opsz" 144, "SOFT" 0; }
  .broadside__head i{ font-style: italic; color: #B42A1C; font-variation-settings:"opsz" 144, "SOFT" 50; }
  .broadside__sub{ font-style: italic; font-size: 18pt; color: #2B3A55; margin: 0 0 32mm; }
  .broadside__foot{ font-family: var(--mono); font-size: 9pt; letter-spacing: .3em; text-transform: uppercase; border-top: 0.5pt solid #1C1713; padding-top: 6mm; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}