/* Shared colors/fonts/ease/mx come from /tokens.css. Only this
   page's own overrides live here. */
:root {
  --sp: clamp(48px, 8vw, 96px);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--ombra);
  color: var(--luce);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: 1400px;
  margin: 0 auto;
}
a {
  color: inherit;
}
main.wrap {
  flex: 1 0 auto;
  padding: var(--sp) var(--mx);
}
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oro);
}
h1.page-title {
  font-family: var(--display-xl);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-weight: 700;
  font-size: clamp(21.6px, 3.6vw, 38.4px);
  letter-spacing: -0.015em;
  margin-top: 12px;
}
.page-intro {
  font-family: var(--text);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.7;
  color: var(--cenere);
  margin-top: 22px;
  max-width: 780px;
}
.cc-wrap {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 0;
  margin-top: clamp(32px, 4vw, 56px);
  border: 1px solid var(--grafite);
  min-height: 640px;
}
.cc-photo {
  position: relative;
  background: #111 center/contain no-repeat;
  min-height: 640px;
  cursor: pointer;
}
.cc-panel {
  background: rgba(0, 0, 0, 0.55);
  padding: clamp(28px, 3.5vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.cc-count {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--cenere);
  text-transform: uppercase;
}
.cc-ghost {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--display-xl);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: clamp(72px, 10.8vw, 132px);
  line-height: 1;
  color: var(--luce);
  opacity: 0.08;
  pointer-events: none;
  font-weight: 300;
}
.cc-title {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 28px);
  line-height: 1.1;
  color: var(--luce);
  margin-top: 24px;
  font-weight: 400;
}
.cc-body {
  font-family: var(--text);
  font-size: 14px;
  line-height: 1.65;
  color: var(--cenere);
  margin-top: 18px;
  max-width: 85%;
}
.cc-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
}
.cc-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--grafite);
  background: transparent;
  color: var(--luce);
  font-size: 22px;
  cursor: pointer;
  transition:
    background 200ms var(--ease),
    border-color 200ms var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .cc-arrow:hover {
    background: var(--luce);
    color: var(--notte);
  }
}
.cc-dots {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}
.cc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grafite);
  cursor: pointer;
  padding: 0;
  border: 0;
}
.cc-dot.active {
  background: var(--luce);
}
@media (max-width: 900px) {
  .cc-wrap {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .cc-photo {
    min-height: 50vh;
  }
  .cc-panel {
    padding: 24px;
  }
}
@media (max-width: 768px) {
  .cc-photo {
    /* the photo is the swipe surface: let the browser own vertical
       panning so the page still scrolls, and keep horizontal drags
       for the step carousel */
    touch-action: pan-y;
    min-height: 46vh;
  }
  .cc-body {
    font-size: 15px;
    max-width: 100%;
  }
  .cc-nav {
    padding-top: 24px;
    flex-wrap: wrap;
  }
  /* 8px dots stay 8px; the tap area grows invisibly around them. The
     horizontal reach is capped by the neighbouring dot's own hit box,
     so the gap sets the real target width (8 + 22 = 30px each). */
  .cc-dot {
    position: relative;
  }
  .cc-dot::after {
    content: "";
    position: absolute;
    inset: -18px -11px;
  }
  .cc-dots {
    gap: 22px;
    margin-left: 16px;
  }
}
/*
 * The same invisible tap area, for a tablet. The block above is capped at
 * 768px, so an iPad -- 820px in portrait, 1024px or 1366px in landscape --
 * was left with the bare 8px dot as its only target. The gap has to come along
 * with it: at the base 8px the dots sit on a 16px pitch and a 30px hit box
 * would swallow half of each neighbour.
 */
@media (pointer: coarse) {
  .cc-dot {
    position: relative;
  }
  .cc-dot::after {
    content: "";
    position: absolute;
    inset: -18px -11px;
  }
  .cc-dots {
    gap: 22px;
  }
  /*
   * .cc-arrow declares 44x44 but .cc-nav stops wrapping above 900px and is
   * only ~230px wide there, so both arrows get shrunk -- to 23px at 1024 and
   * 11px at 1366. Letting the row wrap again, exactly as it does below 900px,
   * is what gives them their declared width back.
   *
   * NOTE: the same squeeze happens on a desktop, where the arrows end up 8px
   * wide. That is a pre-existing layout bug rather than a touch one, and
   * fixing it would move desktop, so it is deliberately left alone here.
   */
  .cc-nav {
    flex-wrap: wrap;
  }
  .cc-arrow {
    flex-shrink: 0;
  }
}
@media (hover: none) {
  a,
  button,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .cc-photo {
    touch-action: pan-y;
  }
  .cc-arrow:hover {
    background: transparent;
    color: var(--luce);
  }
  .cc-arrow:active {
    background: var(--luce);
    color: var(--notte);
  }
}
/* body is a flex column; keep the shared footer from being squashed */
footer {
  flex-shrink: 0;
}

/* Big titles are wide capitals: on phones keep them to ~8% of the
   screen width so long words (MONTERIGGIONI, COLLABORAZIONI) still fit. */
@media (max-width: 600px) {
  h1.page-title {
    font-size: min(21.6px, 4.8vw);
  }
}

/* ── How it works: frosted-glass version (2026-10-27) ──────────────────── */
main.wrap {
  position: relative;
  isolation: isolate;
  /* the glow below reaches past the right edge; without the clip phones
     widened the page by ~40px and zoomed it out */
  overflow-x: clip;
}
main.wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 18%;
  right: -10%;
  width: min(60vw, 860px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 169, 98, 0.22) 0%, rgba(201, 169, 98, 0) 62%);
  filter: blur(60px);
  pointer-events: none;
}
.cc-wrap {
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 28px);
  border: 0;
  min-height: 600px;
}
.cc-photo {
  min-height: 600px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.cc-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  border-radius: inherit;
}
.cc-photo.is-empty {
  background-color: #141414;
}
.cc-panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 30px 80px rgba(0, 0, 0, 0.45);
  border-radius: 24px;
  overflow: hidden;
  justify-content: flex-start;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cc-panel {
    background: rgba(22, 22, 24, 0.92);
  }
}
.cc-count {
  color: var(--oro);
}
.cc-ghost {
  opacity: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.14);
}
.cc-title {
  font-size: clamp(26px, 2.8vw, 38px);
  margin-top: clamp(40px, 6vw, 96px);
}
.cc-body {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--nebbia);
  max-width: 40ch;
}
.cc-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (hover: hover) {
  .cc-arrow:hover {
    background: var(--oro);
    border-color: var(--oro);
    color: var(--notte);
  }
}
.cc-dot {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  transition:
    width 0.3s var(--ease),
    background 0.3s var(--ease);
}
.cc-dot.active {
  width: 24px;
  background: var(--oro);
}
@media (max-width: 900px) {
  .cc-wrap {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .cc-photo {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
  }
  .cc-panel {
    border-radius: 20px;
  }
  .cc-title {
    margin-top: 28px;
  }
}

/* 2026-10-29: room for the fixed main site header */
body {
  padding-top: 80px;
}