:root {
  --sp: clamp(64px, 12vw, 160px);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
/* display:flex/grid on a section would otherwise beat the UA [hidden] rule */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  background: var(--ombra);
  color: var(--luce);
  font-family: var(--text);
  padding-top: 116px;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 900px) {
  body { padding-top: 96px; }
}
.wrap { max-width: 2200px; margin: 0 auto; padding: 0 var(--mx); width: 100%; }

.project-topnav {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 32px var(--mx) 20px;
}
/* The switcher and the Home link are one capsule, not two controls that
   happen to sit near each other, same grouping the home page header uses
   for everything on its right-hand side. They are a single "leave this
   page" cluster, and two surfaces for that competed with the back link
   across the row for a third meaning that was never there. */
.topnav-actions,
.back-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 9999px;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 500;
  color: var(--luce);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  will-change: backdrop-filter;
}
.topnav-actions {
  gap: 4px;
  padding: 0 6px;
}
.back-link {
  padding: 0 28px;
}
.topnav-actions::before,
.back-link::before {
  content: "";
  position: absolute;
  inset: 0 14px auto 14px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.5) 55%,
    transparent
  );
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topnav-actions,
  .back-link { background: rgba(32, 32, 36, 0.9); }
}

/* Inside the capsule both controls are flat: the glass belongs to the
   capsule, and a surface of their own would draw a pill inside a pill.
   A hairline splits them instead, the way the filter rail on the grid
   page splits its two axes. */
.topnav-actions .lang-btn {
  height: 40px;
  padding: 0 16px;
  border-color: transparent;
  border-radius: 9999px;
  transition: background 200ms var(--ease);
}
@media (hover: hover) {
  .topnav-actions .lang-btn:hover {
    border-color: transparent;
    background: rgba(255, 255, 255, 0.08);
  }
}
.home-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 9999px;
  font-family: var(--text);
  font-size: 16px;
  font-weight: 500;
  color: var(--luce);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 200ms var(--ease);
}
@media (hover: hover) {
  .home-pill:hover {
    background: rgba(255, 255, 255, 0.08);
  }
}
@media (hover: none) {
  .topnav-actions .lang-btn:hover,
  .home-pill:hover { background: none; }
}
.home-pill::before {
  content: "";
  position: absolute;
  inset: 10px auto 10px -3px;
  width: 1px;
  height: auto;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
/* The back link shares that capsule rather than sitting on the row as bare
   grey text: it was the only control up there with no surface under it, so
   the fixed line read as one pill floating next to a stray label instead of
   the pair of Liquid-Glass pills the home page header puts on its own row. */
.back-link {
  white-space: nowrap;
  transition: border-color 200ms var(--ease);
}
@media (hover: hover) {
  .back-link:hover { border-color: rgba(255, 255, 255, 0.32); }
}
@media (hover: none) {
  .back-link:hover { border-color: rgba(255, 255, 255, 0.16); }
}

.project-head {
  text-align: center;
}
.project-eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
}
.project-head .project-eyebrow {
  margin-top: 16px;
}
.project-title {
  font-family: var(--display-xl);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(22.8px, 3.6vw, 43.2px);
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(32px, 4vw, 64px);
  border-top: 1px solid var(--grafite);
  border-bottom: 1px solid var(--grafite);
  padding: 20px 0;
  margin-top: 40px;
  text-align: center;
}
/* previous / next project, either side of the Year / Category info */
.meta-row {
  align-items: center;
}
.proj-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: var(--luce);
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.proj-nav:hover,
.proj-nav:focus-visible {
  border-color: var(--oro);
  color: var(--oro);
}
.proj-nav-prev:hover { transform: translateX(-3px); }
.proj-nav-next:hover { transform: translateX(3px); }
.proj-nav-prev { order: -1; }
.proj-nav-next { order: 99; }
.meta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cenere);
}
.meta-val {
  font-size: 15px;
  margin-top: 6px;
}

.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 3.5fr) minmax(0, 1fr);
  border: 1px solid var(--grafite);
  border-radius: 2px;
  overflow: hidden;
  margin-top: clamp(32px, 5vw, 56px);
}
.hero-row.no-products {
  grid-template-columns: 1fr;
}
.hero-image {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: var(--notte);
}
.products-used {
  background: var(--notte);
  border-left: 1px solid var(--grafite);
  padding: 28px;
  display: flex;
  flex-direction: column;
}
.products-used h2 {
  font-family: var(--text);
  font-size: 18px;
  font-weight: 600;
  color: var(--luce);
}
.products-list {
  list-style: none;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.products-list li {
  font-size: 14px;
  color: var(--cenere);
  line-height: 1.4;
}
.products-list li::before {
  content: "- ";
  color: var(--grafite);
}
@media (max-width: 900px) {
  .hero-row {
    grid-template-columns: 1fr;
  }
  .products-used {
    border-left: none;
    border-top: 1px solid var(--grafite);
  }
}

.project-desc {
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.7;
  color: var(--nebbia);
  max-width: none; /* as wide as the photo above it */
  margin-top: clamp(32px, 5vw, 56px);
}

/* project story, photos + explanation */
.project-story {
  margin-top: clamp(56px, 9vw, 120px);
  border-top: 1px solid var(--grafite);
  padding-top: clamp(48px, 8vw, 104px);
}
.story-photo {
  background-size: cover;
  background-position: center;
  background-color: var(--notte);
  border: 1px solid var(--grafite);
  border-radius: 2px;
}
.story-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-bottom: clamp(48px, 8vw, 104px);
}
.story-row .story-photo {
  aspect-ratio: 3 / 2;
}
.story-row.reverse .story-photo {
  order: 2;
}
.story-text p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
  color: var(--nebbia);
}
.story-text p + p {
  margin-top: 16px;
}
.story-wide {
  aspect-ratio: 21 / 9;
  margin-bottom: clamp(48px, 8vw, 104px);
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-bottom: clamp(48px, 8vw, 104px);
}
.story-grid .story-photo {
  aspect-ratio: 4 / 3;
}
.story-close {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.story-close p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
  color: var(--nebbia);
}
.story-close p + p {
  margin-top: 16px;
}
@media (max-width: 900px) {
  .story-row,
  .story-row.reverse {
    grid-template-columns: 1fr;
  }
  .story-row.reverse .story-photo {
    order: 0;
  }
  .story-grid {
    grid-template-columns: 1fr;
  }
  .story-wide {
    aspect-ratio: 16 / 9;
  }
}

.not-found {
  padding: clamp(60px, 12vw, 140px) 0;
  text-align: center;
}
.not-found p {
  font-size: 17px;
  color: var(--cenere);
  margin-top: 16px;
}
.not-found a {
  color: var(--oro);
}

/* Has to be main.wrap, not main: .wrap sets the `padding: 0 var(--mx)`
   shorthand, which zeroes padding-bottom and outranks a bare type
   selector. As `main` this rule never applied and the story column ended
   flush against the footer's contact band. */
main.wrap { padding-bottom: var(--sp); }
#projectLoading {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--cenere);
  padding: clamp(40px, 8vw, 96px) 0;
}

/* ── MOBILE ────────────────────────────────────────────────────────
   The fixed top bar measures 104px on a phone while body only reserves
   96px, so the bar clips the eyebrow of the project title. Shrinking
   the pill to a 44px touch target brings the bar to 72px and the two
   numbers back in step. */
@media (max-width: 900px) {
  body {
    padding-top: 76px;
  }
  /* The capsule has to clear its contents rather than the other way round:
     both controls inside it keep the full 44px touch target the shared
     .lang-btn rule asks for on a phone, so the capsule is 48 and the row's
     padding drops to 12 to hold the bar at the 72px body reserves. */
  .project-topnav {
    padding: 12px var(--mx);
    gap: 12px;
  }
  .topnav-actions,
  .back-link {
    height: 48px;
    font-size: 15px;
  }
  .back-link {
    padding: 0 20px;
  }
  .topnav-actions {
    gap: 2px;
    padding: 0 2px;
  }
  .topnav-actions .lang-btn {
    height: 44px;
    padding: 0 12px;
  }
  .home-pill {
    height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }
  .home-pill::before {
    inset: 12px auto 12px -2px;
  }
  .meta-row {
    gap: 20px 28px;
    padding: 18px 0;
    margin-top: 28px;
  }
  .project-desc {
    font-size: 16px;
  }
  .products-used {
    padding: 22px;
  }
  .not-found a {
    display: inline-block;
    padding: 12px 0;
  }
  main.wrap {
    padding-bottom: calc(var(--sp) + env(safe-area-inset-bottom, 0px));
  }
}

@media (hover: none) {
  a,
  button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .back-link:hover {
    color: var(--cenere);
  }
  .back-link:active {
    color: var(--luce);
  }
}

/*
 * Legibility floor: nothing below 12px on a small screen.
 *
 * These labels are set at 10-11px mono, which reads as a quiet register on a
 * desktop and as unreadable on a phone. 12px is the smallest mono size the
 * site already uses elsewhere, so this borrows a value rather than inventing
 * one. Gated on width rather than pointer: it is a typographic scale, and
 * above 900px a tablet shows the desktop composition and keeps its type.
 */
@media (max-width: 900px) {
  .meta-label {
    font-size: 12px;
  }
}

/* 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) {
  .project-title {
    font-size: min(22.8px, 4.8vw);
  }
}

/* photos beside a text show whole, in their own shape (2026-10-29) */
.story-row .story-photo--fit {
  aspect-ratio: auto;
  margin: 0;
  background: none;
  border: 0;
}
.story-photo--fit img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--grafite);
  border-radius: 2px;
}

/* a very wide photo (more than 2:1) runs the full width, its text underneath */
.story-row.story-row--wide {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
}
.story-row--wide .story-photo,
.story-row.reverse.story-row--wide .story-photo {
  order: 0;
}
.story-row--wide .story-text {
  max-width: none;
}

/* more projects at the bottom of a project page (2026-10-29) */
.related {
  margin-top: clamp(64px, 9vw, 128px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--grafite);
}
.related-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
}
.related-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.related-img {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--grafite);
  border-radius: 2px;
  background: var(--notte);
}
.related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
@media (hover: hover) {
  .related-card:hover .related-img img {
    transform: scale(1.04);
  }
  .related-card:hover .related-name {
    color: var(--oro);
  }
}
.related-name {
  font-family: var(--text);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--luce);
  margin-top: 16px;
  transition: color 0.25s var(--ease);
}
.related-meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--cenere);
  margin-top: 6px;
}
@media (max-width: 900px) {
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .related-card:nth-child(3) {
    display: none;
  }
}
@media (max-width: 560px) {
  .related-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .related-card:nth-child(3) {
    display: block;
  }
}

/* 2026-10-29: the main site header sits on top; this page's own row (tabs,
   back link, filters) is a normal row under it */
body {
  padding-top: 80px !important;
}
.project-topnav {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  z-index: 2;
}

/* 2026-10-29: "More projects" cards: no frame lines, gold type and place */
.related-img {
  border: 0;
}
.related-meta {
  color: var(--oro);
}

/* link to the project's sector page, under "More projects" (2026-11-10) */
.related-sector {
  margin-top: clamp(20px, 3vw, 32px);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.related-sector a {
  color: var(--oro);
  text-decoration: none;
}
.related-sector a:hover {
  text-decoration: underline;
}