/* Ludzie stamtąd — Teatr Węgajty
   Style strony spektaklu. Wartości przeniesione 1:1 z projektu (Strona.dc.html). */

/* ---------- fonty ---------- */

/* Kroje: Google Fonts (woff2, subsety latin + latin-ext), hostowane lokalnie.
   Odświeżenie: pobrać z fonts.googleapis.com/css2 i podmienić pliki w fonty/. */

@font-face{
  font-family:"Archivo Narrow";
  src:url("../fonty/archivo-narrow-latin-ext.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Archivo Narrow";
  src:url("../fonty/archivo-narrow-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonty/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonty/cormorant-garamond-italic-latin.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonty/cormorant-garamond-latin-ext.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Cormorant Garamond";
  src:url("../fonty/cormorant-garamond-latin.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonty/instrument-serif-latin-ext.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../fonty/instrument-serif-latin.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- paleta i miary ---------- */

:root{
  --tlo:#EDE7DC;
  --tekst:#1C1A17;
  --dach:#5A6469;
  --okno:#EAB343;

  --margines:clamp(22px,5vw,72px);
  --szerokosc:1500px;

  /* skale poszczególnych wierszy nagłówka — patrz reguła @media niżej */
  --skala-nadtytul:1;
  --skala-tytul:1;
  --skala-podtytul:1;
  --skala-gornego-marginesu:1;

  --serif:"Cormorant Garamond",serif;
  --tytul:"Instrument Serif",serif;
  --grot:"Archivo Narrow",sans-serif;
}

/* ---------- podstawa ---------- */

*,*::before,*::after{box-sizing:border-box}

html{color-scheme:light}

body{
  margin:0;
  background:var(--tlo);
  color:var(--tekst);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%}

a{color:var(--tekst);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--dach)}
a:focus-visible{outline:2px solid var(--okno);outline-offset:3px}

/* ---------- 1. nagłówek ---------- */

.naglowek{
  position:relative;
  height:100dvh;
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  overflow:hidden;
}

.naglowek__grafika{position:absolute;inset:0;overflow:hidden}

.naglowek__rysunek{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
}

/* wygaszenie deszczu pod typografią — równomierny gradient na górnej połowie */
.naglowek__welon{
  position:absolute;
  left:0;right:0;top:0;
  height:50%;
  background:linear-gradient(to bottom,
    #EDE7DC 0%,
    rgba(237,231,220,0.97) 26%,
    rgba(237,231,220,0.8) 58%,
    rgba(237,231,220,0.42) 82%,
    rgba(237,231,220,0) 100%);
}

.naglowek__tekst{
  position:relative;
  z-index:2;
  padding:calc(clamp(26px,4.4vw,64px) * var(--skala-gornego-marginesu)) var(--margines) 0;
  max-width:var(--szerokosc);
}

.nadtytul{
  font-family:var(--serif);
  font-size:calc(min(clamp(18px,2.4vw,34px), 4.4dvh) * var(--skala-nadtytul));
  letter-spacing:0.16em;
  text-transform:uppercase;
  line-height:1.1;
}

.tytul{
  margin:calc(clamp(10px,1.4vw,20px) * var(--skala-tytul)) 0 0;
  font-family:var(--tytul);
  font-weight:400;
  font-size:calc(min(clamp(54px,11.5vw,178px), 17dvh) * var(--skala-tytul));
  letter-spacing:-0.02em;
  line-height:0.9;
  color:var(--dach);
}

.podtytul{
  margin-top:calc(clamp(12px,1.6vw,24px) * var(--skala-podtytul));
  font-family:var(--serif);
  font-size:calc(min(clamp(14px,1.7vw,24px), 3.4dvh) * var(--skala-podtytul));
  line-height:1.3;
  max-width:34em;
}

/* Ekran poziomy o proporcji szerszej niż 3:2 (np. 16:9, 16:10): każdy wiersz
   nagłówka schodzi o własną wartość. Interlinie są bezjednostkowe, więc kurczą się
   razem z fontem; odstęp przed danym wierszem skaluje się jego własnym
   współczynnikiem. Padding od górnej krawędzi zostaje bez zmian. */
@media (orientation:landscape) and (aspect-ratio > 3/2){
  :root{
    --skala-nadtytul:0.9;  /* „Teatr Węgajty" — 10 % mniej */
    --skala-tytul:0.7;     /* „Ludzie stamtąd" — 30 % mniej */
    --skala-podtytul:0.8;  /* „na podstawie…" — 20 % mniej */
    --skala-gornego-marginesu:0.7;  /* odsunięcie całego bloku od górnej krawędzi */
  }
}

/* ---------- cytat ---------- */

.cytat-sekcja{
  /* dolny prześwit sumuje się z górnym paddingiem sekcji „premiera" —
     razem daje mniej więcej tyle samo światła, co nad cytatem */
  padding:clamp(80px,11vw,180px) var(--margines) clamp(30px,4vw,70px);
  max-width:var(--szerokosc);
  margin:0 auto;
  display:flex;
  justify-content:center;
}

.cytat{
  margin:0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(20px,3.05vw,41px);
  line-height:1.2;
  text-align:center;
  max-width:22em;
  text-wrap:pretty;
}

/* dwa wersy cytatu łamane twardo — żaden silnik nie dokłada trzeciego */
.cytat span{white-space:nowrap}

/* ---------- 2. obsada i premiera ---------- */

.metryka{
  padding:clamp(44px,7vw,110px) var(--margines) clamp(30px,5vw,70px);
  max-width:var(--szerokosc);
  margin:0 auto;
}

.metryka__siatka{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(28px,4vw,72px);
  align-items:start;
}

.metryka__pole{display:flex;flex-direction:column;gap:10px}

.etykieta{
  font-family:var(--grot);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--dach);
}

.premiera{
  font-family:var(--grot);
  font-weight:500;
  font-size:clamp(22px,2.6vw,36px);
  line-height:1.15;
}

.lista{
  font-family:var(--grot);
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.5;
}

/* ---------- kreska ---------- */

.kreska{
  display:block;
  width:calc(100% - 2 * var(--margines));
  max-width:1356px;
  height:14px;
  margin:0 auto;
}

/* ---------- 3. o spektaklu ---------- */

.tekst{
  padding:clamp(40px,6vw,96px) var(--margines) clamp(30px,5vw,64px);
  max-width:var(--szerokosc);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(26px,3vw,44px);
}

.lid{
  margin:0;
  max-width:26em;
  font-family:var(--serif);
  font-size:clamp(21px,2.3vw,32px);
  line-height:1.4;
  text-wrap:pretty;
}

.blok{
  display:flex;
  flex-direction:column;
  gap:clamp(20px,2.2vw,32px);
  max-width:62ch;
  font-family:var(--serif);
  font-size:clamp(18px,1.45vw,23px);
  line-height:1.58;
  text-wrap:pretty;
}
.blok--prawy{margin-left:auto}
.blok p{margin:0}

.pytanie{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.3;
}

.podpis-autora{
  font-family:var(--grot);
  font-size:clamp(14px,1.1vw,16px);
  letter-spacing:0.14em;
  text-transform:uppercase;
  line-height:1.7;
  color:var(--dach);
}

.zdjecie{
  margin:clamp(10px,1.5vw,24px) 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.zdjecie img{display:block;width:100%;height:auto}
.zdjecie--sredni{width:min(100%,780px)}
.zdjecie--szeroki{width:min(100%,980px);margin-left:auto}
.zdjecie--duzy{width:min(100%,860px)}

.zdjecie figcaption{
  font-family:var(--grot);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--dach);
}

/* podpis fotografa łamie się w całości, nie w środku nazwiska */
.zdjecie figcaption .fot{white-space:nowrap}

/* ---------- stopka ---------- */

.stopka{
  padding:clamp(36px,5vw,80px) var(--margines) clamp(30px,4vw,56px);
  max-width:var(--szerokosc);
  margin:0 auto;
}

.stopka__kreska{
  display:block;
  width:100%;
  height:14px;
  margin-bottom:clamp(30px,4vw,60px);
}

.stopka__srodek{display:flex;flex-direction:column;gap:clamp(34px,5vw,72px)}

.kontakt{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-family:var(--grot);
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.6;
  font-style:normal;
}

.logotypy{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(24px,4vw,56px);
}

.logotypy__znak{
  display:block;
  width:clamp(110px,10vw,150px);
  height:auto;
  flex:0 0 auto;
  position:relative;
  top:-14px;
}

/* kolofon — podpis autorski pod logotypami */
.kolofon{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px clamp(24px,4vw,56px);
  font-family:var(--grot);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1.6;
  color:var(--dach);
}
.kolofon p{margin:0}

.logotypy__belka{
  display:block;
  flex:1 1 320px;
  min-width:280px;
  max-width:900px;
  height:auto;
}

@media print{
  .naglowek{height:auto;min-height:0}
  .naglowek__welon{display:none}
}