/* SmartCluster — VARIANT 6: Photographic narrative (cinematic) */

/* ============ RESET ============ */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0;
  font-family:'Source Serif Pro','Georgia',serif;
  font-weight:400;
  font-size:17px;
  line-height:1.7;
  color:#f5f5f4;
  background:#0a0a0a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; border:0; background:none; color:inherit; padding:0; }
ul { list-style:none; margin:0; padding:0; }
h1,h2,h3,h4 { margin:0; font-weight:400; }
blockquote { margin:0; }
figcaption { margin:0; }
em { font-style:italic; }

/* ============ VARIABLES ============ */
:root {
  --bg-dark: #0a0a0a;
  --bg-cream: #faf5ee;
  --text-white: #ffffff;
  --text-muted: #a1a1aa;
  --text-dim: #71717a;
  --text-ink: #18181b;
  --accent: #d4a574;
  --grad-dark: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.3) 40%, rgba(10,10,10,0.9) 100%);
  --grad-soft: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.2) 50%, rgba(10,10,10,0.7) 100%);
  --grad-overlay: linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.45) 50%, rgba(10,10,10,0.75) 100%);
  --serif: 'Source Serif Pro','Georgia',serif;
  --display: 'Playfair Display','Georgia',serif;
  --ui: 'Inter', system-ui, sans-serif;
}

/* ============ TYPE HELPERS ============ */
.ph-kicker {
  font-family:var(--ui);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
}
.ph-kicker.dim { color:var(--text-muted); }
.dropcap {
  font-family:var(--display);
  font-style:italic;
  font-weight:900;
  float:left;
  font-size:5.4em;
  line-height:0.85;
  padding:0.08em 0.12em 0 0;
  color:var(--accent);
}

/* ============ HEADER (semi-transparent, fixed) ============ */
.ph-head {
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  padding:18px 32px;
  background:linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0) 100%);
  transition:background 0.4s ease, padding 0.3s ease;
}
.ph-head.scrolled {
  background:rgba(10,10,10,0.85);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  padding:12px 32px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.ph-head-inner {
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.ph-logo { display:flex; flex-direction:column; line-height:1; gap:4px; }
.ph-mark {
  font-family:var(--ui);
  font-weight:600;
  font-size:18px;
  letter-spacing:0.18em;
  color:#fff;
}
.ph-logo-sub {
  font-family:var(--display);
  font-style:italic;
  font-size:12px;
  color:var(--text-muted);
  letter-spacing:0.02em;
}
.ph-nav {
  display:flex;
  gap:28px;
}
.ph-nav a {
  font-family:var(--ui);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  opacity:0.85;
  transition:opacity 0.2s;
  position:relative;
  padding:4px 0;
}
.ph-nav a:hover { opacity:1; }
.ph-nav a::after {
  content:'';
  position:absolute;
  left:0; right:0; bottom:-2px;
  height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.3s;
}
.ph-nav a:hover::after { transform:scaleX(1); }
.ph-right { display:flex; align-items:center; gap:18px; }

/* Switcher */
.switcher {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.switcher-label {
  font-family:var(--ui);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-right:2px;
}
.switcher-btn {
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  color:#fff;
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  transition:background 0.2s, color 0.2s;
}
.switcher-btn:hover { background:rgba(255,255,255,0.14); }
.switcher-btn.active { background:var(--accent); color:#18181b; }

/* ============ VERTICAL TOC PROGRESS (left bottom) ============ */
.ph-toc {
  position:fixed;
  left:32px;
  bottom:32px;
  z-index:45;
  display:flex;
  align-items:flex-end;
  gap:14px;
  opacity:0;
  transform:translateY(20px);
  transition:opacity 0.5s ease, transform 0.5s ease;
  pointer-events:none;
}
.ph-toc.visible {
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.toc-track {
  width:2px;
  height:160px;
  background:rgba(255,255,255,0.15);
  position:relative;
}
.toc-fill {
  position:absolute;
  left:0; top:0;
  width:100%;
  background:var(--accent);
  height:0%;
  transition:height 0.15s linear;
}
.toc-list {
  display:flex;
  flex-direction:column;
  gap:6px;
  font-family:var(--ui);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.toc-list li {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-dim);
  cursor:pointer;
  transition:color 0.3s;
  padding:1px 0;
}
.toc-list li:hover { color:#fff; }
.toc-list li.active { color:var(--accent); }
.toc-list li.active .toc-num { color:var(--accent); }
.toc-num { font-weight:600; opacity:0.6; }
.toc-lbl { font-weight:500; }

/* ============ FIGCAPTION (editorial) ============ */
.ph-cap {
  position:absolute;
  bottom:24px;
  left:32px;
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:13px;
  color:rgba(255,255,255,0.78);
  letter-spacing:0.02em;
  z-index:3;
  max-width:520px;
}
.ph-cap.right { left:auto; right:32px; text-align:right; }

/* ============ 01 · HERO — 100vh FULL PHOTO ============ */
.ph-hero {
  position:relative;
  height:100vh;
  min-height:600px;
  overflow:hidden;
  background:#000;
}
.ph-hero-photo {
  position:absolute;
  inset:0;
  z-index:1;
  will-change:transform;
}
.ph-hero-photo img {
  width:100%;
  height:115%;
  object-fit:cover;
  object-position:center;
  filter:saturate(0.9) contrast(1.05);
}
.ph-hero-grad {
  position:absolute;
  inset:0;
  z-index:2;
  background:var(--grad-dark);
}
.ph-hero-inner {
  position:absolute;
  left:0; right:0;
  bottom:0;
  z-index:3;
  padding:0 64px 110px;
  max-width:1400px;
  margin:0 auto;
  width:100%;
}
.ph-hero-title {
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(56px, 9vw, 144px);
  line-height:0.96;
  letter-spacing:-0.025em;
  color:#fff;
  margin:18px 0 28px;
  text-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.ph-hero-title em {
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.ph-line { display:block; }
.ph-hero-deck {
  font-family:var(--serif);
  font-size:clamp(17px, 1.6vw, 22px);
  line-height:1.55;
  color:rgba(255,255,255,0.9);
  max-width:680px;
  margin:0;
  font-weight:400;
}
.ph-scroll-cue {
  position:absolute;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,0.7);
  font-family:var(--ui);
  font-size:10px;
  letter-spacing:0.28em;
  text-transform:uppercase;
}
.cue-line {
  width:1px;
  height:36px;
  background:linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%);
  animation:cueDrop 2.2s ease-in-out infinite;
  transform-origin:top;
}
@keyframes cueDrop {
  0%   { transform:scaleY(0); opacity:0; }
  30%  { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(1) translateY(20px); opacity:0; }
}

/* ============ 02 · INTRO ============ */
.ph-intro {
  background:#0a0a0a;
  padding:200px 64px 200px;
  position:relative;
}
.ph-intro-inner {
  max-width:1100px;
  margin:0 auto;
  text-align:left;
}
.ph-intro-lead {
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 4vw, 56px);
  line-height:1.25;
  color:#f5f5f4;
  margin:36px 0 0;
  letter-spacing:-0.01em;
}
.ph-intro-lead em {
  font-style:italic;
  font-weight:700;
  color:var(--accent);
}
.ph-intro-lead .hl {
  color:#fff;
  font-style:normal;
  font-family:var(--display);
  font-weight:700;
}
.ph-intro-meta {
  margin-top:80px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-top:1px solid rgba(255,255,255,0.12);
  padding-top:18px;
  font-family:var(--ui);
  font-size:11px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--text-muted);
}

/* ============ 03 · STATS — PHOTO BACKDROPS ============ */
.ph-stats {
  position:relative;
  background:#0a0a0a;
}
.ph-stat-row {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
}
.ph-stat {
  position:relative;
  height:60vh;
  min-height:380px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.06);
  margin:-1px 0 0 -1px;
}
.ph-stat-bg {
  position:absolute;
  inset:0;
  will-change:transform;
}
.ph-stat-bg img {
  width:100%;
  height:120%;
  object-fit:cover;
  filter:saturate(0.85) brightness(0.7);
  transform:scale(1.08);
  transition:transform 1.4s ease;
}
.ph-stat:hover .ph-stat-bg img { transform:scale(1); }
.ph-stat-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.75) 100%);
  z-index:2;
}
.ph-stat-text {
  position:absolute;
  left:0; right:0;
  bottom:0;
  padding:60px 56px;
  z-index:3;
  color:#fff;
}
.ph-stat-big {
  font-family:var(--display);
  font-weight:900;
  font-style:italic;
  font-size:clamp(80px, 12vw, 180px);
  line-height:1;
  color:#fff;
  display:block;
  margin-bottom:18px;
}
.ph-stat-big sup {
  font-size:0.4em;
  color:var(--accent);
  vertical-align:super;
  font-weight:700;
  margin-left:6px;
}
.ph-stat-lbl {
  font-family:var(--ui);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  line-height:1.6;
}

/* ============ SECTION HEAD ============ */
.ph-section-head {
  max-width:1300px;
  margin:0 auto;
  padding:160px 64px 80px;
  text-align:left;
}
.ph-h2 {
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(48px, 7vw, 104px);
  line-height:0.98;
  letter-spacing:-0.025em;
  color:#f5f5f4;
  margin:14px 0 28px;
}
.ph-h2 em {
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.ph-h2.light { color:#fff; }
.ph-h3 {
  font-family:var(--display);
  font-style:italic;
  font-weight:700;
  font-size:clamp(28px, 3.6vw, 44px);
  line-height:1.15;
  color:#fff;
  margin-bottom:14px;
  letter-spacing:-0.01em;
}
.ph-deck {
  font-family:var(--serif);
  font-size:20px;
  line-height:1.65;
  color:var(--text-muted);
  max-width:720px;
  margin:0;
}

/* ============ 04 · PRACOVNÉ SKUPINY ============ */
.ph-groups {
  background:#0a0a0a;
  padding-bottom:120px;
}
.ph-groups-grid {
  max-width:1300px;
  margin:0 auto;
  padding:0 64px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:48px 60px;
}
.ph-grp {
  display:grid;
  grid-template-columns:96px 1fr;
  gap:28px;
  align-items:flex-start;
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,0.08);
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.ph-grp.in-view { opacity:1; transform:translateY(0); }
.ph-grp-thumb {
  width:96px;
  height:96px;
  overflow:hidden;
  position:relative;
  border-radius:2px;
  filter:saturate(0.7);
  transition:filter 0.5s ease;
}
.ph-grp-thumb img {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.05);
  transition:transform 0.8s ease;
}
.ph-grp:hover .ph-grp-thumb { filter:saturate(1); }
.ph-grp:hover .ph-grp-thumb img { transform:scale(1); }
.ph-grp-num {
  font-family:var(--ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.22em;
  color:var(--accent);
  display:block;
  margin-bottom:8px;
}
.ph-grp-name {
  font-family:var(--display);
  font-style:italic;
  font-weight:700;
  font-size:24px;
  line-height:1.2;
  color:#f5f5f4;
  margin-bottom:8px;
  letter-spacing:-0.005em;
}
.ph-grp-sub {
  font-family:var(--serif);
  font-size:15px;
  line-height:1.55;
  color:var(--text-muted);
  margin:0;
}

/* ============ 05 · STICKY NARRATIVE ============ */
.ph-sticky {
  position:relative;
  background:#0a0a0a;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}
.ph-sticky-photo {
  position:relative;
  height:100vh;
  position:sticky;
  top:0;
  overflow:hidden;
}
.ph-sticky-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(0.85) contrast(1.05);
}
.ph-sticky-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.3) 100%);
}
.ph-sticky-text {
  padding:140px 64px 140px;
}
.ph-sticky-block {
  max-width:560px;
  margin-bottom:120px;
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}
.ph-sticky-block.in-view {
  opacity:1;
  transform:translateY(0);
}
.ph-sticky-block .ph-kicker {
  font-family:var(--display);
  font-style:italic;
  font-weight:700;
  font-size:48px;
  letter-spacing:0;
  text-transform:none;
  color:var(--accent);
  display:block;
  line-height:1;
  margin-bottom:14px;
}
.ph-sticky-block p {
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  color:var(--text-muted);
  margin:0;
}
.ph-sticky-quote {
  max-width:560px;
  margin:80px 0 0;
  padding:32px 0 0;
  border-top:1px solid rgba(255,255,255,0.15);
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(24px, 2.6vw, 34px);
  line-height:1.35;
  color:#fff;
}
.ph-sticky-quote cite {
  display:block;
  margin-top:18px;
  font-family:var(--ui);
  font-style:normal;
  font-weight:500;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ============ 06 · KONFERENCIE — CAROUSEL ============ */
.ph-conf {
  background:#0a0a0a;
  padding-bottom:0;
}
.ph-conf-head {
  max-width:1300px;
  margin:0 auto;
  padding:140px 64px 60px;
}
.ph-carousel {
  position:relative;
  width:100%;
  height:88vh;
  min-height:560px;
  overflow:hidden;
  background:#000;
}
.ph-slides {
  position:relative;
  width:100%;
  height:100%;
}
.ph-slide {
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
  pointer-events:none;
}
.ph-slide.active {
  opacity:1;
  pointer-events:auto;
}
.ph-slide img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(0.9) contrast(1.05);
  transform:scale(1);
  transition:transform 8s ease-out;
}
.ph-slide.active img {
  transform:scale(1.06);
}
.ph-slide-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.2) 50%, rgba(10,10,10,0.85) 100%);
}
.ph-slide-text {
  position:absolute;
  left:64px;
  bottom:80px;
  right:64px;
  max-width:900px;
  color:#fff;
}
.ph-slide-yr {
  font-family:var(--ui);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
  margin-bottom:18px;
}
.ph-slide-title {
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(40px, 6vw, 88px);
  line-height:0.98;
  letter-spacing:-0.025em;
  color:#fff;
  margin-bottom:16px;
}
.ph-slide-meta {
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:18px;
  color:rgba(255,255,255,0.85);
  margin:0;
}
.ph-car-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:56px;
  height:56px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.25);
  color:#fff;
  font-size:24px;
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.25s, transform 0.25s;
  backdrop-filter:blur(8px);
}
.ph-car-btn:hover {
  background:var(--accent);
  color:#18181b;
  transform:translateY(-50%) scale(1.06);
  border-color:var(--accent);
}
.ph-car-btn.prev { left:32px; }
.ph-car-btn.next { right:32px; }
.ph-car-dots {
  position:absolute;
  bottom:32px;
  left:50%;
  transform:translateX(-50%);
  z-index:5;
  display:flex;
  gap:10px;
}
.ph-dot {
  width:32px;
  height:2px;
  background:rgba(255,255,255,0.3);
  cursor:pointer;
  transition:background 0.3s;
}
.ph-dot:hover { background:rgba(255,255,255,0.6); }
.ph-dot.active { background:var(--accent); }
.ph-car-count {
  position:absolute;
  top:32px;
  right:32px;
  z-index:5;
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  color:rgba(255,255,255,0.9);
}
.ph-car-count .sl { color:rgba(255,255,255,0.4); margin:0 6px; }

/* ============ 07 · PROJEKTY — full-bleed photo + overlay ============ */
.ph-proj {
  background:#0a0a0a;
  padding-bottom:120px;
}
.ph-proj-head {
  max-width:1300px;
  margin:0 auto;
  padding:160px 64px 80px;
}
.ph-proj-item {
  position:relative;
  height:80vh;
  min-height:520px;
  overflow:hidden;
  margin-bottom:0;
}
.ph-proj-img {
  position:absolute;
  inset:0;
  will-change:transform;
}
.ph-proj-img img {
  width:100%;
  height:115%;
  object-fit:cover;
  filter:saturate(0.85) contrast(1.05) brightness(0.85);
}
.ph-proj-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.2) 40%, rgba(10,10,10,0.85) 100%);
  z-index:2;
}
.ph-proj-text {
  position:absolute;
  left:0; right:0;
  bottom:80px;
  padding:0 64px;
  max-width:1300px;
  margin:0 auto;
  z-index:3;
  color:#fff;
}
.ph-proj-tag {
  font-family:var(--ui);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-block;
  margin-bottom:18px;
}
.ph-proj-title {
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(36px, 5vw, 72px);
  line-height:0.98;
  letter-spacing:-0.02em;
  color:#fff;
  max-width:900px;
}
.ph-proj-body {
  max-width:780px;
  padding:80px 64px 100px;
  margin:0 auto 40px;
}
.ph-proj-body p {
  font-family:var(--serif);
  font-size:19px;
  line-height:1.7;
  color:var(--text-muted);
  margin:0 0 24px;
}
.ph-proj-body .dropcap {
  color:var(--accent);
}
.ph-link {
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
  border-bottom:1px solid var(--accent);
  padding-bottom:3px;
  display:inline-block;
  transition:color 0.2s, border-color 0.2s;
}
.ph-link:hover { color:#fff; border-color:#fff; }
.ph-link.muted { color:var(--text-dim); border-color:var(--text-dim); cursor:default; }

/* ============ 08 · PULL QUOTE NAD FOTKOU ============ */
.ph-quote-big {
  position:relative;
  height:100vh;
  min-height:600px;
  overflow:hidden;
}
.ph-quote-photo {
  position:absolute;
  inset:0;
  will-change:transform;
}
.ph-quote-photo img {
  width:100%;
  height:115%;
  object-fit:cover;
  filter:saturate(0.8) contrast(1.05);
}
.ph-quote-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.65) 100%);
}
.ph-quote-inner {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 64px;
  text-align:center;
  z-index:3;
  max-width:1100px;
  margin:0 auto;
}
.ph-quote-mark {
  font-family:var(--display);
  font-style:italic;
  font-size:200px;
  line-height:0.6;
  color:var(--accent);
  margin-bottom:20px;
  opacity:0.5;
}
.ph-quote-text {
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(32px, 4.5vw, 64px);
  line-height:1.25;
  color:#fff;
  letter-spacing:-0.015em;
  text-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.ph-quote-cite {
  display:block;
  margin-top:48px;
  font-style:normal;
}
.ph-quote-cite span {
  display:block;
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:#fff;
}
.ph-quote-cite .role {
  margin-top:8px;
  color:var(--accent);
  font-weight:400;
  letter-spacing:0.18em;
}

/* ============ 09 · GALLERY / MEMBERS ============ */
.ph-gallery {
  background:var(--bg-cream);
  color:var(--text-ink);
  padding-bottom:120px;
}
.ph-gallery .ph-section-head {
  padding-top:160px;
}
.ph-gallery .ph-h2 { color:var(--text-ink); }
.ph-gallery .ph-h2 em { color:#8b6f47; }
.ph-gallery .ph-deck { color:#52525b; }
.ph-gallery .ph-kicker.dim { color:#8b6f47; }

.ph-masonry {
  max-width:1400px;
  margin:0 auto;
  padding:0 64px 100px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:200px;
  gap:18px;
}
.ph-mtile {
  position:relative;
  overflow:hidden;
  border-radius:2px;
  margin:0;
  cursor:pointer;
  background:#1a1a1a;
}
.ph-mtile img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(0.85);
  transform:scale(1);
  transition:transform 1.2s ease, filter 0.6s ease;
}
.ph-mtile:hover img {
  transform:scale(1.05);
  filter:saturate(1);
}
.ph-mtile figcaption {
  position:absolute;
  left:0; right:0;
  bottom:0;
  padding:18px 20px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
  color:#fff;
}
.ph-mtile figcaption span {
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:15px;
  letter-spacing:0.01em;
}
.ph-mtile.t1 { grid-column:span 2; grid-row:span 2; }
.ph-mtile.t2 { grid-column:span 1; grid-row:span 1; }
.ph-mtile.t3 { grid-column:span 1; grid-row:span 1; }
.ph-mtile.t4 { grid-column:span 1; grid-row:span 2; }
.ph-mtile.t5 { grid-column:span 1; grid-row:span 1; }
.ph-mtile.t6 { grid-column:span 1; grid-row:span 1; }
.ph-mtile.t7 { grid-column:span 2; grid-row:span 1; }
.ph-mtile.t8 { grid-column:span 2; grid-row:span 1; }

.ph-members-list {
  max-width:1300px;
  margin:0 auto;
  padding:0 64px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:48px;
}
.mem-col {
  border-top:1px solid rgba(0,0,0,0.15);
  padding-top:24px;
}
.mem-head {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:18px;
}
.mem-h {
  font-family:var(--display);
  font-style:italic;
  font-weight:700;
  font-size:28px;
  color:var(--text-ink);
}
.mem-h em { font-style:italic; color:#8b6f47; }
.mem-num {
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  color:#8b6f47;
}
.mem-col ul li {
  font-family:var(--serif);
  font-size:16px;
  line-height:1.9;
  color:#3f3f46;
  border-bottom:1px dotted rgba(0,0,0,0.15);
  padding:2px 0;
}
.mem-col ul li:last-child { border-bottom:0; }

/* ============ 10 · FINAL CTA ============ */
.ph-cta {
  position:relative;
  height:100vh;
  min-height:600px;
  overflow:hidden;
}
.ph-cta-photo {
  position:absolute;
  inset:0;
  will-change:transform;
}
.ph-cta-photo img {
  width:100%;
  height:115%;
  object-fit:cover;
  filter:saturate(0.85) contrast(1.05) brightness(0.7);
}
.ph-cta-grad {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.8) 100%);
}
.ph-cta-inner {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:60px 64px;
  text-align:center;
  z-index:3;
  max-width:1000px;
  margin:0 auto;
}
.ph-cta-title {
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(56px, 9vw, 144px);
  line-height:0.96;
  letter-spacing:-0.025em;
  color:#fff;
  margin:20px 0 28px;
  text-shadow:0 4px 30px rgba(0,0,0,0.4);
}
.ph-cta-title em { font-style:italic; font-weight:400; color:var(--accent); }
.ph-cta-deck {
  font-family:var(--serif);
  font-size:clamp(17px, 1.6vw, 22px);
  line-height:1.55;
  color:rgba(255,255,255,0.9);
  margin:0 0 40px;
  max-width:680px;
}
.ph-cta-actions {
  display:flex;
  gap:24px;
  align-items:center;
}
.ph-btn {
  font-family:var(--ui);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  padding:18px 32px;
  border-radius:0;
  transition:all 0.3s;
  display:inline-block;
}
.ph-btn.ghost {
  color:#fff;
  border:1px solid rgba(255,255,255,0.4);
  background:transparent;
}
.ph-btn.ghost:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:#18181b;
}
.ph-btn.link {
  color:rgba(255,255,255,0.7);
  border-bottom:1px solid rgba(255,255,255,0.3);
  padding:8px 0;
  border-radius:0;
}
.ph-btn.link:hover { color:#fff; border-color:#fff; }

/* ============ FOOTER ============ */
.ph-foot {
  background:#000;
  padding:100px 64px 40px;
}
.ph-foot-inner {
  max-width:1400px;
  margin:0 auto;
}
.ph-foot-grid {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:48px;
  padding-bottom:60px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.ph-foot-col {
  display:flex;
  flex-direction:column;
  gap:8px;
}
.ph-foot-col h4 {
  font-family:var(--ui);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.ph-foot-mark {
  font-family:var(--ui);
  font-weight:600;
  font-size:24px;
  letter-spacing:0.18em;
  color:#fff;
}
.ph-foot-tag {
  font-family:var(--display);
  font-style:italic;
  font-size:18px;
  color:var(--text-muted);
  margin-bottom:10px;
}
.ph-foot-col p {
  font-family:var(--serif);
  font-size:15px;
  line-height:1.6;
  color:var(--text-muted);
  margin:0;
  max-width:380px;
}
.ph-foot-col a,
.ph-foot-col span {
  font-family:var(--serif);
  font-size:15px;
  color:var(--text-muted);
  transition:color 0.2s;
}
.ph-foot-col a:hover { color:#fff; }
.ph-foot-base {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:32px;
  font-family:var(--ui);
  font-size:11px;
  letter-spacing:0.14em;
  color:var(--text-dim);
}

/* ============ RESPONSIVE — Mobile (768px) ============ */
@media (max-width: 768px) {
  body { font-size:16px; }

  /* Header */
  .ph-head { padding:14px 18px; }
  .ph-head.scrolled { padding:10px 18px; }
  .ph-head-inner { gap:8px; flex-wrap:wrap; }
  .ph-logo-sub { display:none; }
  .ph-nav { display:none; }
  .switcher { padding:5px 8px; gap:4px; }
  .switcher-label { font-size:9px; }
  .switcher-btn { width:20px; height:20px; font-size:10px; }

  /* TOC hidden on mobile */
  .ph-toc { display:none; }

  /* Hero — shorter */
  .ph-hero { height:70vh; min-height:480px; }
  .ph-hero-inner { padding:0 22px 60px; }
  .ph-hero-title { font-size:clamp(40px, 11vw, 64px); margin:14px 0 18px; }
  .ph-hero-deck { font-size:15px; }
  .ph-scroll-cue { bottom:18px; }
  .ph-cap { left:22px; right:22px; bottom:14px; font-size:11px; }

  /* Intro */
  .ph-intro { padding:90px 22px 100px; }
  .ph-intro-lead { font-size:clamp(22px, 6vw, 30px); margin-top:24px; }
  .ph-intro-meta { flex-direction:column; gap:6px; margin-top:50px; padding-top:14px; }

  /* Stats — 1 column on mobile */
  .ph-stat-row { grid-template-columns:1fr; }
  .ph-stat { height:55vh; min-height:340px; }
  .ph-stat-text { padding:34px 24px; }
  .ph-stat-big { font-size:clamp(64px, 18vw, 96px); }
  .ph-stat-lbl { font-size:11px; }
  /* Parallax disabled */
  .ph-stat-bg { transform:none !important; }
  .ph-stat-bg img { height:100%; transform:scale(1); }

  /* Section heads */
  .ph-section-head { padding:80px 22px 40px; }
  .ph-h2 { font-size:clamp(34px, 9vw, 52px); margin:10px 0 16px; }
  .ph-h3 { font-size:24px; }
  .ph-deck { font-size:16px; }

  /* Groups */
  .ph-groups { padding-bottom:60px; }
  .ph-groups-grid {
    padding:0 22px;
    grid-template-columns:1fr;
    gap:24px;
  }
  .ph-grp { grid-template-columns:64px 1fr; gap:18px; padding:18px 0; }
  .ph-grp-thumb { width:64px; height:64px; }
  .ph-grp-name { font-size:19px; }
  .ph-grp-sub { font-size:14px; }

  /* Sticky narrative — becomes normal scroll on mobile */
  .ph-sticky { grid-template-columns:1fr; }
  .ph-sticky-photo {
    position:relative;
    height:55vh;
    min-height:340px;
  }
  .ph-sticky-text { padding:60px 22px 80px; }
  .ph-sticky-block { margin-bottom:48px; }
  .ph-sticky-block .ph-kicker { font-size:36px; }
  .ph-sticky-block p { font-size:16px; }
  .ph-sticky-quote { font-size:20px; margin-top:48px; padding-top:24px; }
  .ph-cap.right { right:22px; bottom:14px; font-size:11px; max-width:80%; }

  /* Carousel */
  .ph-conf-head { padding:80px 22px 30px; }
  .ph-carousel { height:75vh; min-height:520px; }
  .ph-slide-text { left:22px; right:22px; bottom:80px; }
  .ph-slide-title { font-size:clamp(32px, 9vw, 44px); }
  .ph-slide-meta { font-size:15px; }
  .ph-slide-yr { font-size:10px; margin-bottom:12px; }
  .ph-car-btn { width:44px; height:44px; font-size:20px; }
  .ph-car-btn.prev { left:14px; }
  .ph-car-btn.next { right:14px; }
  .ph-car-count { top:18px; right:18px; font-size:11px; }
  .ph-car-dots { bottom:18px; }
  .ph-dot { width:24px; }

  /* Projekty */
  .ph-proj { padding-bottom:60px; }
  .ph-proj-head { padding:80px 22px 30px; }
  .ph-proj-item { height:55vh; min-height:380px; }
  .ph-proj-img { transform:none !important; }
  .ph-proj-img img { height:100%; }
  .ph-proj-text { padding:0 22px; bottom:50px; }
  .ph-proj-title { font-size:clamp(28px, 8vw, 40px); }
  .ph-proj-body { padding:48px 22px 60px; }
  .ph-proj-body p { font-size:16px; }

  /* Quote big */
  .ph-quote-big { height:80vh; min-height:520px; }
  .ph-quote-photo { transform:none !important; }
  .ph-quote-photo img { height:100%; }
  .ph-quote-inner { padding:40px 22px; }
  .ph-quote-mark { font-size:120px; margin-bottom:0; }
  .ph-quote-text { font-size:clamp(22px, 6vw, 32px); }
  .ph-quote-cite { margin-top:32px; }

  /* Gallery */
  .ph-gallery { padding-bottom:60px; }
  .ph-gallery .ph-section-head { padding-top:80px; }
  .ph-masonry {
    padding:0 22px 60px;
    grid-template-columns:repeat(2, 1fr);
    grid-auto-rows:140px;
    gap:10px;
  }
  .ph-mtile.t1 { grid-column:span 2; grid-row:span 2; }
  .ph-mtile.t4 { grid-column:span 1; grid-row:span 2; }
  .ph-mtile.t7, .ph-mtile.t8 { grid-column:span 2; grid-row:span 1; }
  .ph-mtile figcaption { padding:12px 14px; }
  .ph-mtile figcaption span { font-size:13px; }
  .ph-members-list {
    padding:0 22px;
    grid-template-columns:repeat(2, 1fr);
    gap:32px 24px;
  }
  .mem-h { font-size:20px; }
  .mem-col ul li { font-size:14px; line-height:1.8; }

  /* CTA */
  .ph-cta { height:75vh; min-height:480px; }
  .ph-cta-photo { transform:none !important; }
  .ph-cta-photo img { height:100%; }
  .ph-cta-inner { padding:40px 22px; }
  .ph-cta-title { font-size:clamp(40px, 11vw, 60px); margin:14px 0 20px; }
  .ph-cta-deck { font-size:15px; margin:0 0 28px; }
  .ph-cta-actions { flex-direction:column; gap:14px; }
  .ph-btn { padding:14px 26px; font-size:11px; width:100%; text-align:center; }
  .ph-btn.link { padding:8px 0; width:auto; }

  /* Footer */
  .ph-foot { padding:60px 22px 30px; }
  .ph-foot-grid {
    grid-template-columns:1fr;
    gap:36px;
    padding-bottom:36px;
  }
  .ph-foot-base {
    flex-direction:column;
    gap:10px;
    text-align:center;
    padding-top:22px;
  }

  /* Disable hover-only scale animations on touch */
  .ph-stat-bg img { transform:scale(1); transition:none; }
  .ph-slide.active img { transform:scale(1); }
}

@media (max-width: 480px) {
  .ph-hero-title { font-size:clamp(36px, 12vw, 52px); }
  .ph-h2 { font-size:clamp(30px, 10vw, 44px); }
  .ph-members-list { grid-template-columns:1fr; }
}

/* ============ Reveal animation defaults ============ */
.reveal {
  opacity:0;
  transform:translateY(36px);
  transition:opacity 0.9s ease, transform 0.9s ease;
}
.reveal.in-view {
  opacity:1;
  transform:translateY(0);
}
.reveal-img {
  overflow:hidden;
}
.reveal-img img {
  transform:scale(1.1);
  transition:transform 1.4s ease;
}
.reveal-img.in-view img {
  transform:scale(1);
}

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