/* ——————————————————————————————————————————
   /about — nadlinia, historia, rzemiosło, sala.
   Spójna z home i /menu: krem, ramka 2 px, twardy cień.
   Galeria ma własny arkusz: css/gallery.css (stos odbitek, przeglądarka, modal).
   —————————————————————————————————————————— */

.aboutpage {
  --rule: rgba(46, 33, 6, 0.22);
}

/* ——————————————————————————————————————————
   1. Nadlinia
   —————————————————————————————————————————— */

.opener {
  padding-block: calc(var(--space-6) + 40px) var(--space-6);
  border-bottom: 2px solid var(--ink);
}

/* Nagłówek na całą szerokość, zamknięty dwiema liniami, z „pieczątką"
   adresową po prawej. */
.opener__title {
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-block: var(--space-3);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.opener h1 { font-size: clamp(2.6rem, 7.5vw, 5.2rem); }
.opener__stamp {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: right;
}

/* Trzy równe pola: Buzz, Monika, tekst. Równa szerokość jest tu treścią —
   prowadzą kawiarnię we dwoje. */
.opener__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.opener__fig { margin: 0; }
.opener__fig img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: var(--border);
}
.opener__cap {
  display: flex;
  gap: 10px;
  align-items: baseline;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.opener__no { color: var(--amber); font-weight: 500; flex: none; }
.opener__cap b { color: var(--ink); font-weight: 500; }

.opener__lead { font-size: var(--step-1); line-height: 1.45; }

/* Trzy fakty w monie — ten sam rejestr co ceny na /menu. */
.factlist {
  margin: var(--space-4) 0 0;
  display: grid;
  gap: 0;
  border-top: 2px solid var(--ink);
  max-width: 42ch;
}
.factlist > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
}
.factlist dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.factlist dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.98rem;
  text-align: right;
}

/* ——————————————————————————————————————————
   2. Historia
   —————————————————————————————————————————— */

.story .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: var(--space-5);
  align-items: start;
}
.story h2 { margin-bottom: var(--space-3); }
.story__body p { max-width: 58ch; }

/* Z boku stoi sam cytat, w ramce i z twardym cieniem jak reszta paneli.
   Jedzie z czytelnikiem, bo kolumna tekstu jest wyższa. */
.story__quote {
  position: sticky;
  top: 110px;
  margin: 0;
  background: var(--cream-hi);
  border: var(--border);
  box-shadow: 10px 10px 0 var(--amber);
  padding: var(--space-3);
}
.story__quote p {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-1);
  line-height: 1.16;
  letter-spacing: -0.015em;
}
.story__quote p + p { margin-top: var(--space-2); }
/* „Keep It Real" zostaje w kolorze tekstu — wyróżnia je cienki amberowy
   podkład pod linią pisma, nie zmiana koloru liter. */
.story__quote b {
  background: linear-gradient(to top, rgba(246, 179, 31, 0.55) 0.2em, transparent 0.2em);
}
.story__aside img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: var(--border);
  box-shadow: 10px 10px 0 var(--amber);
}
.story__aside figcaption {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ——————————————————————————————————————————
   3. Rzemiosło — ciemny pas cięty skosem
   Ten sam mechanizm co `.specials` na home: clip-path + ujemny margines,
   żeby skos zjadał sąsiadów, a nie zostawiał paska tła.
   —————————————————————————————————————————— */

.craft {
  --slant: clamp(26px, 4vw, 60px);
  clip-path: polygon(0 var(--slant), 100% 0, 100% calc(100% - var(--slant)), 0 100%);
  margin-block: calc(var(--slant) * -1);
  padding-block: calc(var(--space-6) + var(--slant));
  position: relative;
  z-index: 2;
}
.craft h2 { margin-bottom: var(--space-4); max-width: 18ch; }

.craft__duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}
.craft__duo p { max-width: 48ch; }
/* „battle stations" to cytat z Buzza, nie kursywa dla ozdoby — wyróżniamy. */
.craft__duo i { color: var(--amber); font-style: normal; font-weight: 700; }

.craft__numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 237, 203, 0.28);
}
.craft__numbers dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 237, 203, 0.6);
  margin-bottom: 8px;
}
.craft__numbers dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--step-2);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber);
}

/* ——————————————————————————————————————————
   5. Sala
   —————————————————————————————————————————— */

.room { border-top: 2px solid var(--ink); }
.room h2 { margin-bottom: var(--space-3); }
.room p { max-width: 54ch; }
.room__list {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.room__list li {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  border: var(--border);
  background: var(--cream-hi);
}
.room__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

/* ——————————————————————————————————————————
   6. Wąsko
   —————————————————————————————————————————— */

@media (max-width: 900px) {
  .story .wrap { grid-template-columns: minmax(0, 1fr); }
  .craft__duo,
  .craft__numbers { grid-template-columns: minmax(0, 1fr); }
  .story__quote { position: static; max-width: 460px; }

  /* Dwa portrety obok siebie, tekst pod nimi na całą szerokość. */
  .opener__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opener__text { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  /* Pasek jest wyspą leżącą NA treści — bez tego zapasu przykryłby nadlinię. */
  .opener { padding-top: calc(var(--space-5) + 82px); }
}

@media (max-width: 560px) {
  .opener__grid { grid-template-columns: minmax(0, 1fr); }
  .opener__stamp { text-align: left; }
}