/* ===== Luxe Black/Gold Theme (drop-in for styles.css) ===== */
:root{
  /* Palette */
  --bg:#0a0b0d;          /* main background (deep black) */
  --bg2:#0e1014;         /* secondary background */
  --ink:#e8eaee;         /* primary text (soft white) */
  --muted:#9aa4b2;       /* muted text */
  --accent:#d7b46a;      /* gold accent */
  --card:#0f1218;        /* card background */
  --card-b:#222731;      /* card border */
  --shadow:0 14px 36px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(215,180,106,.08), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}
a{color:var(--accent);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:16px}

/* ===== Header: glassy black with gold hairline ===== */
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(8,10,14,.65);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(215,180,106,.22);
}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:14px}
.logo-title{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,#3a3f49,#111414);
  border:1px solid #2a2f3a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.nav-links{display:flex;gap:16px;font-weight:600}
.nav-links a{color:#cfd6e2}
.nav-links a:hover{color:var(--accent)}
.brand{font-weight:700; letter-spacing:.3px}

/* ===== Hero: muted image, luxe overlay, subtle gold accent ===== */
.hero{
  height:min(56vh,560px); min-height:360px; position:relative;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.5));
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:url('images/hero.jpg') center/cover no-repeat;
  filter:brightness(.22) saturate(.35) contrast(.95);
  opacity:.55;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.2)),
    radial-gradient(80% 60% at 50% 0%, rgba(215,180,106,.10), rgba(0,0,0,0) 70%);
}
.hero .overlay{
  position:relative; z-index:1; text-align:center;
  padding:22px 30px; border-radius:16px;
  background:rgba(12,14,18,.55);
  border:1px solid rgba(215,180,106,.22);
  box-shadow:var(--shadow);
}
.hero h1{
  margin:0 0 8px; font-weight:800; letter-spacing:.4px;
  font-family: Georgia, 'Times New Roman', serif; /* классика без внешних шрифтов */
  font-size:clamp(30px,4.2vw,48px);
  color:#f3f4f6;
}
.hero h1::after{ /* тонкий «золотой» мазок под заголовком */
  content:""; display:block; height:6px; margin:10px auto 0;
  width:min(54vw,460px);
  background:
    linear-gradient(90deg, rgba(215,180,106,.0), rgba(215,180,106,.9), rgba(215,180,106,.0));
  border-radius:999px;
}
.hero p{margin:0; color:#c8cfda; font-size:clamp(14px,1.6vw,18px)}
.hero-buttons{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.cta{
  padding:10px 14px; border-radius:999px;
  background:var(--accent); color:#0b0c0e; font-weight:800; border:none; cursor:pointer;
  box-shadow:0 6px 20px rgba(215,180,106,.25);
}
.cta:hover{filter:saturate(1.05)}
.chip{
  background:#161a22; color:#c7ceda; padding:6px 10px; border-radius:999px;
  border:1px solid #2a2f3a;
}
.chip.active{background:var(--accent); color:#0b0c0e; border-color:transparent}

/* ===== Gallery ===== */
.gallery-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:24px}
.chipbar{display:flex;flex-wrap:wrap;gap:8px}

.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{
  background:var(--card);
  border:1px solid var(--card-b);
  border-radius:18px; overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:rgba(215,180,106,.45);
  box-shadow:0 22px 48px rgba(0,0,0,.6);
}
.thumb{aspect-ratio:4/3; width:100%; object-fit:cover; display:block; filter:saturate(.92)}
.meta{padding:12px 14px}
.title{
  font-weight:800; letter-spacing:.3px; color:#f1f2f5;
  font-family: Georgia, 'Times New Roman', serif;
}
.muted{color:#bcc5d2}

/* Story toggle on card */
.thumb-wrap{cursor:zoom-in}
.story{margin-top:10px}
.story>summary{
  list-style:none; cursor:pointer; font-weight:700; color:var(--accent);
}
.story>summary::-webkit-details-marker{display:none}
.story>summary::after{content:"  +"; color:#a5adba}
.story[open]>summary::after{content:"  –"}
.meta .desc p{margin:6px 0 8px; color:#aeb7c6}
.meta .desc p:last-child{margin-bottom:0}

/* ===== Lightbox ===== */
.lightbox{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.86); z-index:50;
}
.lightbox.open{display:grid}
.lightbox figure{max-width:92vw; max-height:86vh; margin:0}
.lightbox img{max-width:100%; max-height:80vh; border-radius:12px; display:block}
.lightbox figcaption{margin-top:12px; text-align:center}
.lb-title{
  font-weight:800; color:#0b0c0e; background:linear-gradient(180deg,#d7b46a,#c7a462);
  display:inline-block; padding:6px 12px; border-radius:12px;
  box-shadow:0 6px 18px rgba(215,180,106,.35);
}
.lb-desc p{margin:6px 0 8px; color:#e2e4e8}
.lb-desc p:last-child{margin-bottom:0}
.lb-close,.lb-prev,.lb-next{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(18,20,26,.8); border:1px solid rgba(215,180,106,.35);
  color:#f1f2f5; border-radius:12px; padding:10px 12px; cursor:pointer;
}
.lb-close{top:24px; right:24px; transform:none}
.lb-prev{left:24px}
.lb-next{right:24px}

/* ===== Footer ===== */
footer{
  margin-top:42px; border-top:1px solid rgba(215,180,106,.22);
  padding:24px 0 60px; color:#aeb7c6; text-align:center;
}

/* ===== Desktop tweaks ===== */
@media (min-width:900px){
  .main-wrap{padding:0 16px}
}
/* === Luxe Edge Hero (override) === */
.hero{
  position: relative;
  height: min(56vh, 560px);
  min-height: 360px;
  display: grid;
  align-content: end;                 /* текст у нижней кромки */
  padding: clamp(28px, 8vw, 120px) 0; /* вертикальные поля, без боковых */
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.4)); /* тёмный скрим */
}
.hero::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:url('images/hero.jpg') center/cover no-repeat;
  filter:brightness(.22) saturate(.35) contrast(.95);
  opacity:.55;
}
.hero::after{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)),
    radial-gradient(60% 40% at 0% 100%, rgba(215,180,106,.12), rgba(0,0,0,0) 70%); /* лёгкий «золотой» отблеск слева снизу */
}

/* Контент шапки — в потоке, без коробки */
.hero .overlay{
  position: relative; z-index: 1;
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 0 16px;
  text-align: left;
  background: none; border: 0; box-shadow: none; /* убрали стекло и рамки */
}

.hero h1{
  margin: 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 800;
  letter-spacing: .3px;
  line-height: 1.05;
  font-size: clamp(32px, 6vw, 60px);
  color: #f3f4f6;
}
.hero h1::after{ /* тонкий «золотой» штрих слева */
  content: "";
  display: block;
  width: 96px; height: 6px;
  margin-top: 12px;
  background: linear-gradient(90deg, rgba(215,180,106,.0), rgba(215,180,106,.9), rgba(215,180,106,.0));
  border-radius: 999px;
}

.hero p{
  margin: 14px 0 0;
  color: #c9d0db;
  font-size: clamp(14px, 1.6vw, 18px);
  max-width: 60ch;
}

.hero-buttons{
  margin-top: 18px;
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 640px){
  .hero{ align-content: end; padding: 52px 0; }
  .hero .overlay{ text-align: left; padding: 0 14px; }
  .hero h1::after{ width: 72px; height: 5px; }
}
#previous { margin-top: 28px; }
/* --- Lightbox: academic style & true centering (fixed) --- */

/* по умолчанию скрыт */
.lightbox{
  display: none;                 /* было: grid — из-за этого открывался сразу */
  place-items: center;
  background: rgba(0,0,0,.86);
}

/* показываем только когда есть .open */
.lightbox.open{ display: grid; }

/* Центрируем картину */
.lightbox figure{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  max-width: 92vw; max-height: 86vh; margin: 0;
}
.lightbox img{
  max-width: min(92vw, 1400px);
  max-height: 80vh;
  display: block; margin: 0 auto;
}

/* Подпись поверх снизу — белое на чёрном */
.lightbox figcaption{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 12px;
  max-width: min(92vw, 1000px);
  padding: 8px 12px; border-radius: 8px;
  background: rgba(0,0,0,.72);
  color: #f1f2f5;
  text-align: center; line-height: 1.35;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
}

/* Заголовок — умеренная насыщенность, без золота */
.lb-title{ font-weight: 600; color: #f1f2f5; background: none; padding: 0; border-radius: 0; box-shadow: none; }

/* Текст описания спокойнее */
.lb-desc p{ color:#d4d8de; }

/* Кнопки без золота */
.lb-close, .lb-prev, .lb-next{
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  color: #e9edf2;
}
/* === HERO tuning === */
:root{
  /* Подкрути цифры и сделай hard-reload (Cmd/Ctrl+Shift+R) */
  --hero-img-opacity: .70;      /* 0–1, прозрачность фото */
  --hero-brightness: .40;       /* 1 = без изменений; меньше — темнее */
  --hero-saturate:   .65;       /* насыщенность 0–1.2 */
  --hero-contrast:   .98;       /* контраст 0.8–1.2 */
  --hero-top-scrim:  0;       /* плотность верхнего затемнения (0–1) */
}

/* фото hero */
.hero::before{
  opacity: var(--hero-img-opacity) !important;
  filter:
    brightness(var(--hero-brightness))
    saturate(var(--hero-saturate))
    contrast(var(--hero-contrast)) !important;
}

/* затемняющая вуаль сверху */
.hero::after{
  background:
    linear-gradient(180deg, rgba(0 0 0 / var(--hero-top-scrim)), rgba(0 0 0 / 0)),
    radial-gradient(60% 40% at 0% 100%, rgba(215 180 106 / .10), rgba(0 0 0 / 0) 70%) !important;
}
/* === Позиция заголовка === */
:root{
  --hero-pad-top: 1vh;   /* расстояние сверху */
  --hero-pad-bottom: 18vh; /* меньше — ниже; больше — выше */
}
.hero{
  padding-top: var(--hero-pad-top) !important;
  padding-bottom: var(--hero-pad-bottom) !important;
}
/* === CTA: neutral outline === */
.cta{
  background: transparent !important;
  color: #f3f4f6 !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: none !important;
}
.cta:hover{ background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.42) !important; }

/* ==== Section header: title + (optional) paragraph + filters on the right ==== */
.gallery-header{
  display: grid;
  grid-template-columns: 1fr auto;   /* слева текст, справа фильтры */
  align-items: end;
  column-gap: 16px;
  row-gap: 8px;
  margin-top: 24px;
  margin-bottom: 14px;               /* фиксированная «воздушность» до карточек */
}

.gallery-header > h2{ margin: 0; }

.gallery-header > .chipbar{
  justify-self: end;
  align-self: end;
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* абзац всегда во второй строке под заголовком, на всю ширину */
.gallery-header > p,
.gallery-header > .section-lead{
  grid-column: 1 / -1;
  margin: 6px 0 0;
  color: var(--muted);
}

/* мобильная адаптация: фильтры уходят под заголовок/абзац и не липнут к карточкам */
@media (max-width: 720px){
  .gallery-header{ grid-template-columns: 1fr; }
  .gallery-header > .chipbar{ justify-self: start; margin-top: 6px; }
}


/* Монограмма вместо квадрата */
.logo{
  width:34px;height:34px;border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#111418,#0a0c0f);
  border:1px solid rgba(215,180,106,.35);   /* тонкая «золотая» каёмка */
  color:#d7b46a;                            /* цвет инициалов */
  font:700 14px/1 Georgia, "Times New Roman", serif;
  letter-spacing:.5px;
}
.logo::after{ content:"OP"; }               /* поменяй буквы при желании */

/* === About: portrait + text === */
#about .about-block{
  display:grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: 18px 22px;
  align-items:start;
  margin-top: 10px;              /* отступ после заголовка */
}

.about-figure{ margin:0; position:relative; }
.about-figure img{
  display:block; width:100%; height:auto; object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);   /* деликатная окантовка */
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.about-note{ margin-top:6px; color:var(--muted); font-size:.95rem; text-align:center; }

#about .about-text p{ margin: 0 0 12px; }

/* мобильная адаптация */
@media (max-width: 800px){
  #about .about-block{
    grid-template-columns: 1fr;
  }
  .about-figure{ order: -1; } /* фото выше текста; удалите строку, если хотите наоборот */
}
/* Motto under H1 */
.hero .motto{
  margin: 10px 0 0;
  color: #e9edf2;
  font-weight: 400;
  letter-spacing: .3px;
  font-size: clamp(12px, 2vw, 18px);
}
.hero .motto{
  width: fit-content;              /* сжимается под текст, но может переноситься */
  max-width: min(90vw, 720px);     /* ограничим ширину для переносов */
  margin: 10px auto 0;             /* горизонтально по центру */
  text-align: center;              /* центрируем внутри */
}

/* Лучше захватывается жест и не выделяется картинка при свайпе */
.lightbox{ touch-action: none; }
.lightbox img{
  user-select: none;
  -webkit-user-drag: none;
}
/* кнопки лайтбокса поверх подписи и картинки */
.lb-close, .lb-prev, .lb-next { z-index: 2; }