/* The projects page (it/progetti/, en/projects/, de/projekte/), loaded after site.css, which gives it the palette,
   the type, the nav, the footer and the fade-ins. One idea per screen: the opening, a wall of results in very large
   numbers, one chapter per project with its photo on half the screen, the foundations, the work in progress and the
   close. Nothing moves on its own but the numbers, which count up once (assets/site.js), and the light next to "Live". */

.count small { font-size: .5em; letter-spacing: -.02em; }

/* The opening: one sentence and a way down. */
.pj-open { position: relative; min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + 3rem) 6rem; }
.pj-open__title { font-size: clamp(3rem, 8vw, 8.25rem); font-weight: 200; line-height: .98; letter-spacing: -.045em; }
.pj-open__cue svg { width: 1rem; height: 1rem; }

/* The wall of results: one number per row, as large as the screen allows, with the sector and a sentence at the foot
   of the row on the right. Every row leads to its chapter. */
.pj-wall { padding-block: clamp(3rem, 8vw, 7rem); }
.pj-wall__list { border-bottom: 1px solid var(--rule); }
.pj-wall__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); align-items: end; gap: 1rem 3rem; padding-block: clamp(1.4rem, 2.6vw, 2.4rem) clamp(1.6rem, 3vw, 2.8rem); border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.pj-wall__num { display: flex; align-items: center; gap: .14em; font-size: clamp(6.5rem, 14vw, 13.5rem); font-weight: 200; line-height: .8; letter-spacing: -.055em; color: var(--brass-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-wall__text { padding-bottom: .3rem; font-size: 1rem; line-height: 1.5; color: var(--mist); transition: color .2s ease; }
.pj-wall__sector { display: block; margin-bottom: .45rem; font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); }
.pj-wall__row:hover .pj-wall__text { color: var(--bone); }

/* "Live" has a light instead of a number. Its ring widens and fades three times when the row comes into view, then
   the light stays on. */
.pj-live { position: relative; flex: none; width: .09em; height: .09em; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 .22em color-mix(in srgb, var(--brass-hi) 55%, transparent); }
.pj-live::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--brass-hi); border-radius: 50%; opacity: 0; }
.js .pj-wall__row.is-in .pj-live::after { animation: pj-live 1.6s ease-out .4s 3; }
@keyframes pj-live { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.4); } }

/* A chapter: the photo fills half the screen at full height, the text sits on the other half. Even chapters swap sides. */
.pj-ch { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 100svh; }
.pj-ch__media { position: relative; overflow: hidden; }
.pj-ch__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pj-ch--flip .pj-ch__media { order: 2; }
.pj-ch__body { align-self: center; max-width: 40rem; padding: clamp(4rem, 8vw, 7rem) clamp(1.5rem, 6vw, 6.5rem); }
.pj-ch__title { margin-bottom: 1.6rem; font-size: clamp(2.2rem, 3.6vw, 3.6rem); font-weight: 200; line-height: 1.04; letter-spacing: -.035em; }
.pj-ch__text { max-width: 30rem; color: var(--mist); }
.pj-ch__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem; margin-top: clamp(2rem, 4vw, 3.2rem); }
.pj-ch__num { font-size: clamp(4.5rem, 8vw, 7.5rem); font-weight: 200; line-height: .85; letter-spacing: -.05em; color: var(--brass-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pj-ch__note { max-width: 16rem; font-size: .92rem; line-height: 1.5; color: var(--mist); }
.pj-ch__sites { display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; margin-top: 2.4rem; font-size: .95rem; color: var(--mist); }
.pj-ch__sites a, .pj-wip__partner a { color: var(--brass-hi); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--brass-hi) 40%, transparent); transition: border-color .2s ease; }
.pj-ch__sites a:hover, .pj-wip__partner a:hover { border-bottom-color: var(--brass-hi); }
.pj-ch__sites a { margin-right: .35rem; font-size: 1.35rem; }
.pj-ch__aside { max-width: 28rem; margin-top: 1.6rem; font-size: .88rem; line-height: 1.55; color: var(--mist); }
.pj-ch__index { position: absolute; right: var(--gutter); bottom: 1.6rem; font-size: .75rem; letter-spacing: .24em; color: var(--mist); }
.pj-ch--flip .pj-ch__index { right: calc(50% + var(--gutter)); }

/* The foundations, the work in progress and the close: one screen each. */
.pj-statement, .pj-wip, .pj-close { min-height: 100svh; display: grid; align-items: center; padding-block: 6rem; }
.pj-statement, .pj-close { text-align: center; }
.pj-statement__text { max-width: 18em; margin-inline: auto; font-size: clamp(2rem, 4.2vw, 3.9rem); font-weight: 200; line-height: 1.14; letter-spacing: -.03em; text-wrap: balance; }
.pj-wip__title { margin-bottom: 1.4rem; font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 200; line-height: 1.04; letter-spacing: -.035em; }
.pj-wip__text { max-width: 34rem; color: var(--mist); }
.pj-wip__list { display: flex; flex-wrap: wrap; gap: 1.6rem clamp(2.5rem, 6vw, 5rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: .95rem; color: var(--mist); }
.pj-wip__list strong { display: block; margin-bottom: .3rem; font-size: 1.05rem; font-weight: 400; color: var(--bone); }
.pj-wip__partner { max-width: 34rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); font-size: .95rem; color: var(--mist); }
.pj-close .eyebrow { justify-content: center; }
.pj-close__title { margin-bottom: 2.4rem; font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 200; line-height: 1.02; letter-spacing: -.04em; }

/* Long words wrap instead of leaving the screen; German compounds are hyphenated. */
.pj-open__title, .pj-ch__title, .pj-statement__text, .pj-wip__title, .pj-close__title { overflow-wrap: break-word; }
:lang(de) :is(.pj-open__title, .pj-ch__title, .pj-statement__text, .pj-wip__title, .pj-close__title, .pj-ch__text, .pj-wall__text) { -webkit-hyphens: auto; hyphens: auto; }

/* Below 1000 px, tablets in portrait included, a chapter stacks its photo above its text, as the landing does. */
@media (max-width: 1000px) {
  .pj-ch { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pj-ch__media { aspect-ratio: 3 / 2; }
  .pj-ch--flip .pj-ch__media { order: 0; }
  .pj-ch__body { max-width: none; padding: 2.6rem var(--gutter) 4.5rem; }
  .pj-ch__index { display: none; }
}

@media (max-width: 760px) {
  .pj-wall__row { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .pj-wall__num { font-size: clamp(6rem, 31vw, 9rem); }
}

@media (prefers-reduced-motion: reduce) {
  .js .pj-wall__row.is-in .pj-live::after { animation: none; }
}