/* ==========================================================================
   Isacco Brioschi — foglio di stile del sito
   Colori: --accent, --on-accent, --bar-bg e --bar-fg arrivano dal pannello
   (templates/base.html, calcolati da colors.py): il testo sul colore principale
   supera sempre il contrasto WCAG AA 4.5:1. Qui sotto i valori predefiniti.
   ========================================================================== */

@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --accent: #e2502f;     /* colore principale (dal pannello) */
  --on-accent: #1b0804;  /* testo sul colore principale (calcolato) */
  --bar-bg: #1b0804;     /* barra superiore: colori invertiti */
  --bar-fg: #f9eeec;
  --ink: #1c0600;        /* inchiostro */
  --paper: #f4efe6;    /* carta */
  --black: #0b0b0b;

  --gutter: clamp(1.25rem, 7vw, 8rem);
  --col-gap: clamp(1rem, 2vw, 2rem);
  --gap: 10px;                 /* spazio tra le immagini dei progetti */
  --bar-h: 3.75rem;

  --fs-label: 0.8125rem;
  --track: 0.16em;
  --ease: cubic-bezier(0.7, 0, 0.2, 1);

  /* caratteri: principale (logo, menu, titoli, etichette) e testi (paragrafi) */
  --font-main: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-text: var(--font-main);
}

/* --- reset essenziale ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-main);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.4s ease;
}
img, video { display: block; max-width: 100%; height: auto; }
picture { display: block; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, p, dl, dd { margin: 0; }
button { font: inherit; }

a { color: inherit; text-decoration: none; }
a:hover, a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:focus:not(:focus-visible) { outline: none; }

.theme-accent { background: var(--accent); color: var(--on-accent); }
.theme-dark { background: var(--black); color: var(--paper); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 1000;
  padding: 0.75rem 1rem; background: var(--ink); color: var(--paper);
  font-size: var(--fs-label); letter-spacing: var(--track); text-transform: uppercase;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* --- tipografia ----------------------------------------------------------- */
.label, .stage__nav, .stage__cats, .plist, .bar, .footer, .meta {
  font-size: var(--fs-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-weight: 450;
  line-height: 1.55;
}
.logo {
  display: inline-block;
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}
.logo:hover { text-decoration: none; }
/* logo su due righe: la seconda (es. Associati) più piccola, stessa spaziatura proporzionale */
.logo__l1, .logo__l2 { display: block; }
.logo__l2 { font-size: 0.75em; font-weight: 400; margin-top: 0.45em; }

/* --- griglia a colonne (1 : 1 : 2), condivisa da tutte le pagine ------------ */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  column-gap: var(--col-gap);
  padding-inline: var(--gutter);
}

/* --- pagine "palco": home ed elenco progetti --------------------------------- */
/* Palco + footer occupano esattamente lo schermo: se il contenuto ci sta, il footer resta
   in fondo e la pagina non scorre; se è più lungo, la pagina scorre e il footer viene dopo.
   --footer-h è l'altezza reale del footer (misurata da site.js; qui il valore di partenza). */
:root { --footer-h: 5.25rem; }
.stage {
  position: relative; z-index: 1; align-items: start;
  min-height: calc(100vh - var(--footer-h)); min-height: calc(100svh - var(--footer-h));
}
.stage__col1, .stage__col2 {
  grid-row: 1;
  position: sticky; top: 0;
  padding-top: calc(50vh - 0.6rem);
  padding-top: calc(50svh - 0.6rem);
}
.stage__col1 { grid-column: 1; }
.stage__col2 { grid-column: 2; }
/* l'elenco resta centrato sulla linea del logo (a metà schermo) finché ci sta */
.stage__col3 {
  grid-column: 3; grid-row: 1;
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - var(--footer-h)); min-height: calc(100svh - var(--footer-h));
  padding-top: calc(2rem + var(--footer-h)); padding-bottom: 2rem;
}
.stage__logo { display: block; width: max-content; }
.stage__nav { margin-top: 1.5rem; }
.stage__nav li + li, .stage__cats li + li { margin-top: 0.15rem; }
.stage__nav a, .stage__cats a, .plist a { display: inline-block; padding-block: 0.1rem; }
.stage__msg p { margin-top: 1rem; }

/* sito in costruzione: il messaggio prende il posto del menu, il logo resta dov'è */
.page-soon .stage__col1 { grid-column: 1 / 3; }
.soon { margin-top: 1.5rem; max-width: 26rem; }
.soon__text { margin-top: 0.75rem; font-family: var(--font-text); line-height: 1.6; }
.soon__text p + p { margin-top: 0.75em; }

.plist li + li { margin-top: 0.1rem; }

/* sfondo a tutto schermo con la copertina del progetto */
.preview { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.preview__img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; opacity: 0; transition: opacity 0.5s ease;
}
.preview__img.is-on { opacity: 1; }
.preview::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(10, 4, 0, 0.55); opacity: 0; transition: opacity 0.5s ease;
}
.is-previewing .preview::after { opacity: 1; }
.is-previewing { color: var(--paper); }

/* --- footer --------------------------------------------------------------- */
.footer { position: relative; z-index: 1; padding-block: 2rem; }
.footer__vat, .footer__line { display: block; }
.footer__line { overflow-wrap: anywhere; }   /* email lunghe: vanno a capo invece di uscire dalla colonna */
.page-home { position: relative; }

/* avviso per chi ha fatto l'accesso al pannello (i visitatori non lo vedono) */
.admin-strip { position: relative; z-index: 60; padding: 0.6rem var(--gutter); background: var(--paper); color: var(--ink); }
.admin-strip a { text-decoration: underline; text-underline-offset: 0.35em; }

/* --- barra superiore (pagine interne) --------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bar-bg); color: var(--bar-fg);
}
.theme-dark .bar { background: var(--black); color: var(--paper); }
.bar__inner { position: relative; height: var(--bar-h); align-items: center; }
.bar__col3 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 5rem; }
.bar__toggle {
  position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: inherit; cursor: pointer;
  padding: 0.6rem 0 0.6rem 0.6rem; min-height: 44px;
}
.bar__toggle[aria-expanded="true"] { text-decoration: underline; text-underline-offset: 0.35em; }
.bar__menu {
  position: absolute; top: 100%; right: 0;
  background: inherit; padding: 1.25rem var(--gutter) 1.75rem 3rem;
}
.bar__menu[hidden] { display: none; }
.bar__menu li + li { margin-top: 0.35rem; }
.bar__menu a { display: inline-block; padding-block: 0.2rem; }

/* --- pagina progetto --------------------------------------------------------- */
.draft-note { padding: 0.75rem var(--gutter); background: var(--paper); color: var(--ink); }
.project__hero { height: calc(100vh - var(--bar-h)); height: calc(100svh - var(--bar-h)); min-height: 18rem; }
.project__hero picture, .project__hero img { width: 100%; height: 100%; object-fit: cover; }

.project__intro {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--gap);
}
.project__square img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.project__text {
  align-self: center;
  padding: clamp(2.5rem, 6vw, 6rem) var(--gutter) clamp(2.5rem, 6vw, 6rem) clamp(1.5rem, 5vw, 5.5rem);
}
.project__title {
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  overflow-wrap: anywhere;
}
.project__desc p, .info__text p, .jobs__desc {
  font-family: var(--font-text);
  font-size: 0.9375rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
  max-width: 34rem;
}
.project__desc p + p, .info__text p + p { margin-top: 1em; }

.meta { margin-top: 2rem; }
.meta div { display: flex; flex-wrap: wrap; column-gap: 0.6em; }
.meta dt::after { content: " —"; }
.meta dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }

.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--gap); }
.gallery__item img { width: 100%; }
.gallery__item--wide { grid-column: 1 / -1; }

/* crediti: sezione a parte, dopo la galleria, solo se compilata */
.credits { padding-block: clamp(3.5rem, 8vw, 7rem) 0; align-items: start; }
.credits__title { grid-column: 1; margin: 0; }
.credits__list { grid-column: 3; margin-top: 0; }
.credits__list div + div { margin-top: 0.3rem; }

.related { padding: clamp(4rem, 9vw, 8rem) var(--gutter) 1rem; }
.related__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); margin-top: 1.5rem; }
.card { display: block; }
.card:hover { text-decoration: none; }
.card__img img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; transition: opacity 0.3s ease; }
.card:hover .card__img img { opacity: 0.85; }
.card__title { display: inline-block; margin-top: 0.9rem; }
.card:hover .card__title { text-decoration: underline; text-underline-offset: 0.35em; }

/* --- chi siamo / contatti ---------------------------------------------------- */
.info { align-items: start; padding-block: clamp(3rem, 10vh, 7rem); min-height: calc(100svh - var(--bar-h) - 6rem); }
.info__label { position: sticky; top: 50vh; grid-column: 1; }
.info__media { grid-column: 2; position: sticky; top: calc(var(--bar-h) + 18vh); }
.info__media picture { width: 70%; }
.info__text { grid-column: 3; }
.meta--large { margin-top: 0; font-size: 0.9375rem; }
.meta--large div + div { margin-top: 1.25rem; }
.meta--large div { flex-direction: column; }
.meta--large dt::after { content: ""; }
.meta--large dt { opacity: 1; font-size: var(--fs-label); }
.meta--large p { text-transform: none; letter-spacing: 0.04em; }

/* partner e collaboratori (pagina Chi siamo) */
.team { padding-block: clamp(1rem, 4vw, 3rem) clamp(4rem, 9vw, 7rem); }
.team__block { align-items: start; }
.team__block + .team__block { margin-top: clamp(3rem, 7vw, 5rem); }
.team__label { grid-column: 1; }
.team__people {
  grid-column: 2 / 4;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.75rem var(--col-gap);
}
.person__photo { aspect-ratio: 4 / 5; overflow: hidden; background: #1d1c1a; }
.person__photo picture, .person__photo img { width: 100%; height: 100%; object-fit: cover; }
.person__initials {
  display: flex; align-items: center; justify-content: center; height: 100%;
  font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; letter-spacing: 0.14em; color: #b9b3a8;
}
.person__name { margin-top: 1.1rem; }
.person__role, .person__bio, .team__collab { font-family: var(--font-text); letter-spacing: 0.04em; }
.person__role { margin-top: 0.25rem; font-size: 0.9375rem; line-height: 1.6; }
.person__bio { margin-top: 0.7rem; font-size: 0.875rem; line-height: 1.7; }
.team__collab { grid-column: 2 / 4; columns: 3 12rem; column-gap: var(--col-gap); font-size: 0.9375rem; line-height: 2; }
.team__collab li { break-inside: avoid; }

/* lavora con noi: blocco a tutto schermo nel colore del sito, in fondo a Chi siamo */
.jobs {
  display: flex; align-items: center;
  min-height: 100vh; min-height: 100svh;
  padding-block: clamp(4rem, 10vw, 8rem);
  background: var(--accent); color: var(--on-accent);
}
.jobs__inner { width: 100%; align-items: start; row-gap: 2.5rem; }
.jobs__title {
  grid-column: 1 / 3; margin: 0;
  font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 300; line-height: 1.02;
  letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere;
}
.jobs__body { grid-column: 3; }
.jobs__intro p { font-family: var(--font-text); font-size: 0.9375rem; line-height: 1.8; letter-spacing: 0.04em; max-width: 34rem; }
.jobs__intro p + p { margin-top: 1em; }
.jobs__subtitle { margin-top: 2.75rem; }
.jobs__list { margin-top: 0.75rem; border-top: 1px solid currentColor; }
.jobs__list li {
  display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 2rem; align-items: baseline;
  padding-block: 1.1rem; border-bottom: 1px solid currentColor;
}
.jobs__desc { grid-column: 1; line-height: 1.7; }
.jobs__apply { grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap; text-decoration: underline; text-underline-offset: 0.35em; }
.jobs__cta {
  display: inline-block; margin-top: 2.5rem; padding: 0.95rem 1.4rem;
  border: 1px solid currentColor; text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.jobs__cta:hover { background: var(--on-accent); color: var(--accent); text-decoration: none; }
.jobs__note { margin-top: 1.25rem; font-size: var(--fs-label); line-height: 1.7; max-width: 34rem; font-family: var(--font-text); }

/* --- intro animata (solo home) ----------------------------------------------- */
.intro { display: none; }
.js.intro-pending .intro {
  display: block;
  position: fixed; inset: 0; z-index: 100;
  background-color: #000; color: var(--paper);
  transition: background-color 0.9s ease, opacity 0.6s ease;
  --win-w: min(calc(58vh * 0.6), 46vw);
  --win-h: calc(var(--win-w) / 0.6);
}
.js.intro-pending .stage__nav, .js.intro-pending .soon, .js.intro-pending .footer-wrap { opacity: 0; }
.stage__nav, .soon, .footer-wrap { transition: opacity 0.8s ease 0.2s; }

.intro__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* Il logo dell'intro è composto come testo normale (spazio vero tra le parole, stessa
   spaziatura delle lettere) così, a fine animazione, coincide al pixel con quello della home. */
.intro__logo {
  position: relative; z-index: 2;
  display: block; white-space: nowrap;
  opacity: 0;
  transition: opacity 0.8s ease, color 0.9s ease, transform 1s var(--ease);
}
.intro__logo .lw { display: inline; }
/* la seconda riga resta sotto il nome senza spostarlo: così I e B sono centrate sulla finestra */
.intro__l2 {
  position: absolute; left: 0; top: 100%; transform-origin: 0 0;
  transition: opacity 0.6s ease, transform 0.9s var(--ease);
}
.intro.is-split .intro__l2 { opacity: 0; }
.intro__logo > .logo__l1 > .lw:first-child { transition: margin-right 0.9s var(--ease); }
/* lo spazio tra le parole: a riposo è uno spazio vero, nella versione a coppie si chiude */
.intro__logo .lw__sp {
  display: inline-block; vertical-align: top; overflow: hidden; white-space: pre;
  transition: max-width 0.9s var(--ease);
}
.intro__logo .lw__r {
  display: inline-block; vertical-align: top; overflow: hidden;
  transition: max-width 0.9s var(--ease), opacity 0.5s ease;
}

.intro__window {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--win-w); height: var(--win-h);
  transform: translate(-50%, -50%);
  clip-path: inset(50% 0 50% 0);
  transition: clip-path 0.8s var(--ease);
  background: #111;
}
.intro__frame, .intro__frame img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.intro__frame { opacity: 0; }
.intro__frame.is-on { opacity: 1; }

.intro__skip {
  position: absolute; right: var(--gutter); bottom: 1.5rem;
  background: none; border: 0; color: var(--paper); cursor: pointer;
  padding: 0.75rem 0; min-height: 44px;
  transition: opacity 0.4s ease;
}
.intro__skip:hover { text-decoration: underline; text-underline-offset: 0.35em; }

.intro.is-logo .intro__logo { opacity: 1; }
.intro.is-split .lw__r { max-width: 0 !important; opacity: 0; }
.intro.is-split:not(.is-pair) .intro__logo > .logo__l1 > .lw:first-child { margin-right: calc(var(--win-w) + 3rem); }
/* versione a coppie (IB … AA): le parole si chiudono, la seconda riga sale a destra della finestra */
.intro.is-pair.is-split .lw__sp { max-width: 0 !important; }
.intro.is-pair.is-split .intro__l2 {
  opacity: 1;
  transform: translate(var(--l2-dx, 0px), var(--l2-dy, 0px)) scale(var(--l2-k, 1));
}
/* le due iniziali hanno larghezze diverse: piccolo spostamento perché restino equidistanti dalla finestra */
.intro.is-split .intro__logo { transform: translateX(var(--split-shift, 0px)); }
.intro.is-open .intro__window { clip-path: inset(0 0 0 0); }
.intro.is-done { background-color: var(--accent); }
.intro.is-done .intro__logo { color: var(--on-accent); }
.intro.is-done .intro__skip { opacity: 0; }
.intro.is-gone { opacity: 0; pointer-events: none; }

/* --- tablet ------------------------------------------------------------------ */
@media (max-width: 1100px) {
  :root { --gutter: clamp(1.25rem, 5vw, 3rem); }
  .team__people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: 1.1fr 0.9fr 2fr; }
}

/* --- mobile ------------------------------------------------------------------ */
@media (max-width: 759px) {
  :root { --bar-h: 3.5rem; --gap: 6px; }
  .grid { grid-template-columns: 1fr; }

  .stage__col1, .stage__col2, .stage__col3, .page-soon .stage__col1 { grid-column: 1; grid-row: auto; position: static; }
  .page-list .stage__col1 { padding-top: 3rem; }
  .stage__col2 { padding-top: 1.75rem; }
  .stage__cats ul { display: flex; flex-wrap: wrap; column-gap: 1.25rem; }
  .stage__cats li + li { margin-top: 0; }
  .stage__col3 { padding-block: 2.5rem 3rem; min-height: 0; display: block; }
  .page-home .stage__col1 { padding-bottom: 3rem; }
  .plist a { padding-block: 0.35rem; }  /* bersagli touch più comodi */

  .bar__col2, .bar__col3 { display: none; }
  .bar__menu { left: 0; padding-left: var(--gutter); }
  .bar__menu a { padding-block: 0.5rem; }

  .project__intro, .gallery { grid-template-columns: 1fr; }
  .project__text { padding: 2.5rem var(--gutter) 3rem; }
  .related__list { grid-template-columns: 1fr; row-gap: 2rem; }
  .credits { row-gap: 1rem; }
  .credits__title, .credits__list { grid-column: 1; }
  .jobs__title, .jobs__body { grid-column: 1; }
  .team__label, .team__people, .team__collab { grid-column: 1; }
  .team__people { gap: 2rem 1rem; }
  .team__block { row-gap: 1.25rem; }
  .team__collab { columns: 2; }
  .jobs__list li { grid-template-columns: 1fr; }
  .jobs__apply { grid-column: 1; grid-row: auto; }

  .info { row-gap: 2rem; }
  .info__label, .info__media, .info__text { grid-column: 1; position: static; }
  .info__media picture { width: 60%; }

  .footer ul { row-gap: 0.4rem; }
}

/* --- movimento ridotto ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* --- Windows "contrasto elevato" ------------------------------------------- */
@media (forced-colors: active) {
  .preview, .intro { display: none !important; }
  .is-previewing { color: inherit; }
}