/* Shared public-page shell: ONE page-introduction system for Menu, Photo Lab, Events and Gallery.
   Loaded by menu.php, photo-lab.php, events.php and gallery.php (never by Home, Admin or Operator). Namespace: pc-*.
   Source of truth = the accepted Events / Gallery introduction (measured, not invented):
     eyebrow  600 12px TB Inter, .18em, uppercase, #ff6b76
     title    italic 900 clamp(44px, 6vw, 96px) / .95 TB Exo 2, uppercase, -.02em, white, red under-shadow
     rule     64 x 3 px, #ff1025 with a tight red glow
     subtitle 400 clamp(15px, 1.3vw, 17px) / 1.55 TB Inter, #c9c1c3, max 640px
     wrap     min(100% - 64px, 1320px)  (min(100% - 32px, 1320px) below 900px) - the Events compact-grid width, now shared by all four pages
   The Events (ev-*) and Gallery (gl-*) classes keep their own rules; the values above are kept identical by the shell test
   (storage/cache/final-design-consistency/...). If a value changes, change it here AND in events-stage2.css / gallery.css. */
:root {
  --pc-display: "TB Exo 2", "Exo 2", "Inter", sans-serif;
  --pc-ui: "TB Inter", "Inter", "Segoe UI", Arial, sans-serif;
  --pc-wrap: min(100% - 64px, 1320px);
  --pc-title: clamp(44px, 6vw, 96px);
  --pc-red: #ff1025;
  --pc-line: rgba(255, 40, 55, 0.3);
  --pc-line-strong: rgba(255, 70, 85, 0.72);
  --pc-surface: rgba(10, 4, 6, 0.94);
  --pc-text2: #c9c1c3;
}

@media (max-width: 900px) {
  :root { --pc-wrap: min(100% - 32px, 1320px); }
}

.pc-wrap { width: var(--pc-wrap); margin-inline: auto; }

.pc-hero { padding: clamp(28px, 4.4vw, 64px) 0 clamp(20px, 2.4vw, 32px); }
.pc-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.pc-hero__text { min-width: 0; }

.pc-eyebrow {
  margin: 0;
  font: 600 12px var(--pc-ui);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff6b76;
}

.pc-title {
  margin: 8px 0 0;
  padding-right: 0.1em;
  font: italic 900 var(--pc-title) / 0.95 var(--pc-display);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 0 rgba(90, 0, 12, 0.85), 0 0 24px rgba(255, 16, 37, 0.28);
  background: none;
  -webkit-text-fill-color: currentColor;
  filter: none;
}

.pc-rule {
  width: 64px;
  height: 3px;
  margin: 16px 0;
  border-radius: 3px;
  background: var(--pc-red);
  box-shadow: 0 0 10px var(--pc-red), 0 0 22px rgba(255, 16, 37, 0.55);
}

.pc-sub {
  margin: 0;
  max-width: 640px;
  font: 400 clamp(15px, 1.3vw, 17px) / 1.55 var(--pc-ui);
  color: var(--pc-text2);
}

.pc-sub strong { font-weight: 600; color: #fff; }

/* the handwritten slogan stays (Marck Script is the one intentional script face); it is decoration, so it yields on phones */
.pc-slogan {
  flex: 0 0 auto;
  margin: 0 8px 6px 0;
  font-family: "Marck Script", cursive;
  font-size: clamp(22px, 1.9vw, 30px);
  line-height: 1.12;
  text-align: right;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 10px rgba(255, 16, 37, 0.55), 0 2px 10px rgba(0, 0, 0, 0.6);
  transform: rotate(-4deg);
  transform-origin: right bottom;
  pointer-events: none;
}

@media (max-width: 700px) {
  .pc-slogan { display: none; }
  .pc-hero__row { display: block; }
}