/* ============================================================
   SHELL — il tetto di larghezza per i monitor grandi.

   Fino a 1800px di finestra questo foglio non fa NIENTE: tutte
   le regole stanno dentro una media query e sotto quella soglia
   il sito e' esattamente com'era. Sopra, i margini laterali
   crescono da soli e il contenuto si ferma a 1720px, cioe' la
   stessa colonna che si vedeva su una finestra da 1800.

   Come e' costruito: --edge vale (100% - 1720px)/2, che a 1800px
   di finestra fa esattamente 40px = i 2.5rem storici. Nessuno
   scalino al passaggio: la misura riparte da dove stava.

   Cosa NON viene cappato, di proposito: i fondali (video hero,
   .phero-bg) e i filetti di sezione, che restano a tutta pagina.
   E' il pieno-schermo del sito: si cappa il contenuto, non la
   cornice.

   Caricato dopo il blocco <style> di pagina apposta (vedi
   includes/head.php): quasi tutte le schede si ridichiarano
   .phero/.cover/.body in casa, e cosi' le batte a parita' di
   specificita' senza !important.
   ============================================================ */

@media(min-width:1800px){

  :root{
    /* margine laterale dei blocchi che oggi stanno a 2.5rem */
    --edge:calc((100% - 1720px) / 2);
    /* margine dei blocchi che oggi sono a tutta pagina (.shots,
       .fullbleed): restano 2.5rem piu' larghi degli altri per
       lato, come adesso */
    --edge-bleed:calc((100% - 1800px) / 2);
  }

  /* ---- comuni a tutte le pagine ---- */
  /* header: il gradiente resta a tutta pagina, si sposta solo il
     contenuto — logo e nav si riavvicinano alla colonna */
  header{padding-left:var(--edge);padding-right:var(--edge);}
  .contact-block{padding-left:var(--edge);padding-right:var(--edge);}
  footer{padding-left:var(--edge);padding-right:var(--edge);}
  /* lo switcher e' una fascia in due meta': ognuna tiene il suo
     lato esterno allineato alla colonna, il divisorio resta al
     centro dov'e' sempre stato */
  .switcher a:first-child{padding-left:var(--edge);}
  .switcher a:last-child{padding-right:var(--edge);}

  /* ---- home ---- */
  .hero{padding-left:var(--edge);padding-right:var(--edge);}
  /* il filetto verticale segna il bordo della colonna, non dello schermo */
  .hero::before{right:var(--edge);}
  .scroll-cue{left:var(--edge);}
  .bg-switch{right:var(--edge);}
  .section-head{padding-left:var(--edge);padding-right:var(--edge);}
  .grid{margin-left:var(--edge);margin-right:var(--edge);}

  /* ---- schede progetto ---- */
  .phero{padding-left:var(--edge);padding-right:var(--edge);}
  .cover{margin-left:var(--edge);margin-right:var(--edge);}
  /* .gallery-title si sposta col margine, non col padding: ha max-width:72ch
     e box-sizing:border-box, quindi un padding da 1000px le mangerebbe tutta
     la colonna di testo. Il -2.5rem tiene conto del padding che ha gia'. */
  .gallery-title{margin-left:calc(var(--edge) - 2.5rem);}
  /* blocchi su misura delle singole schede (alien army, dmc,
     dj skizo): stessa colonna di tutto il resto */
  .duo,
  .plate,
  .cg,
  .spreads,
  .collage{margin-left:var(--edge);margin-right:var(--edge);}
  .dj-plate.dj-plate-pair{margin-left:var(--edge);margin-right:var(--edge);}
  /* .body, .cta-block, .video-row e .dj-plate singolo hanno gia'
     un max-width e stanno centrati: non li tocchiamo */

  /* i due a tutta pagina */
  .shots{padding-left:var(--edge-bleed);padding-right:var(--edge-bleed);}
  .fullbleed{margin-left:var(--edge-bleed);margin-right:var(--edge-bleed);}

  /* ---- tattoos ---- */
  .pintro{padding-left:var(--edge);padding-right:var(--edge);}
  .tattoo-grid{padding-left:var(--edge);padding-right:var(--edge);}

}