:root{
  --bg:#120e0b;
  --bg-soft:#1a1410;
  --card:#1c1611;
  --line: rgba(243,237,227,0.10);
  --line-strong: rgba(243,237,227,0.22);
  --text:#f3ede3;
  --text-dim:#a99c8c;
  --text-faint:#6f6255;
  --gold:#c99a4b;
  --gold-soft:#8a6c3e;
  --ember:#c2401f;
  --ember-glow: rgba(194,64,31,0.35);
  --max: 1360px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
::selection{ background:var(--ember); color:var(--bg); }

h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:450;
  line-height:1.05;
  letter-spacing:-0.01em;
}

.label{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gold);
}

.wrap{ max-width:var(--max); margin:0 auto; padding:0 48px; width:100%; }
main{ flex:1; }

a{ color:inherit; text-decoration:none; }
img{ display:block; width:100%; height:100%; object-fit:cover; }
button{ font-family:inherit; }

/* ---------- BREADCRUMB ---------- */
.crumbs{
  padding:150px 0 0;
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.06em;
  color:var(--text-faint);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.crumbs a{ color:var(--text-dim); transition:color .2s ease; }
.crumbs a:hover{ color:var(--gold); }
.crumbs .sep{ opacity:.5; }
.crumbs .current{ color:var(--gold); }

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:24px 0;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(18,14,11,0.92);
  backdrop-filter: blur(10px);
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{
  font-family:'Fraunces', serif;
  font-size:22px;
  letter-spacing:0.04em;
  font-weight:450;
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.logo .dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--ember);
  box-shadow:0 0 14px 3px var(--ember-glow);
  animation:flicker 3.2s ease-in-out infinite;
}
@keyframes flicker{
  0%,100%{ opacity:1; transform:scale(1); }
  45%{ opacity:.55; transform:scale(0.85); }
  60%{ opacity:1; transform:scale(1.05); }
}
.navlinks{ display:flex; gap:30px; flex-wrap:wrap; justify-content:flex-end; }
.navlinks a{
  font-size:12.5px; letter-spacing:0.04em; color:var(--text-dim);
  position:relative; padding-bottom:4px; white-space:nowrap;
  transition:color .25s ease;
  font-family:'JetBrains Mono', monospace;
  text-transform:uppercase;
}
.navlinks a:hover, .navlinks a.active{ color:var(--text); }
.navlinks a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .3s ease;
}
.navlinks a:hover::after, .navlinks a.active::after{ width:100%; }

.burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px; z-index:210;
}
.burger span{ width:22px; height:2px; background:var(--text); display:block; transition:all .25s ease; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:860px){
  .navlinks{
    position:fixed; top:0; right:0; height:100vh; width:min(78vw, 320px);
    background:var(--bg-soft); border-left:1px solid var(--line);
    flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:26px;
    transform:translateX(100%); transition:transform .35s cubic-bezier(.16,1,.3,1);
  }
  .navlinks.open{ transform:translateX(0); }
  .navlinks a{ font-size:15px; }
  .burger{ display:flex; }
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  background:var(--text); color:var(--bg);
  padding:16px 34px; display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  transition: background .25s ease, transform .25s ease;
}
.btn-primary:hover{ background:var(--gold); transform:translateY(-2px); }
.btn-ghost{
  font-family:'JetBrains Mono', monospace;
  font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--text-dim);
  display:inline-flex; align-items:center; gap:10px;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:4px;
  transition:color .25s ease, border-color .25s ease;
}
.btn-ghost:hover{ color:var(--text); border-color:var(--gold); }

/* ---------- HOME HERO ---------- */
.hero{
  position:relative;
  min-height:78vh;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:150px; padding-bottom:50px;
}
.hero-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: radial-gradient(circle at 20% 20%, rgba(194,64,31,0.10), transparent 45%),
                     radial-gradient(circle at 85% 75%, rgba(201,154,75,0.08), transparent 40%);
}
.hero .wrap{ position:relative; }
.eyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:26px; }
.eyebrow .line{ width:44px; height:1px; background:var(--gold-soft); }
.hero h1{ font-size:clamp(40px, 6.5vw, 90px); font-weight:450; max-width:18ch; }
.hero-sub{
  margin-top:28px; max-width:600px; line-height:1.5;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:600;
  font-size:clamp(20px, 2.4vw, 27px);
  color:var(--text);
}
.hero-sub.placeholder{ font-weight:450; color:var(--text-faint); }

/* ---------- MARQUEE PHOTO STRIP ---------- */
.marquee-section{ padding:10px 0 90px; overflow:hidden; }
.marquee-track{
  display:flex; gap:18px;
  width:max-content;
  animation:marquee-scroll 46s linear infinite;
}
.marquee-section:hover .marquee-track{ animation-play-state:paused; }
.marquee-item{
  width:340px; height:440px; flex-shrink:0;
  position:relative; overflow:hidden;
  border:1px solid var(--line);
}
.marquee-item:nth-child(3n+2){ margin-top:34px; }
.marquee-item:nth-child(3n){ margin-top:-18px; }
.marquee-item img{ transition:transform .6s ease; }
.marquee-item:hover img{ transform:scale(1.05); }
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}
@media (max-width:720px){
  .marquee-item{ width:220px; height:290px; }
}

/* ---------- NAV BUTTON GRID (3 big buttons on home) ---------- */
.nav-buttons{ padding:20px 0 130px; }
.nav-buttons-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;
}
.nav-tile{
  position:relative; overflow:hidden;
  border:1px solid var(--line-strong);
  padding:46px 32px; min-height:230px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
  background:var(--bg-soft);
}
.nav-tile:hover{ border-color:var(--gold); transform:translateY(-4px); background:var(--card); }
.nav-tile .tile-icon{ width:34px; height:34px; color:var(--gold); margin-bottom:20px; }
.nav-tile h3{ font-size:26px; margin-bottom:10px; }
.nav-tile p{ font-size:13.5px; color:var(--text-dim); font-weight:300; line-height:1.6; }
.nav-tile .tile-arrow{
  position:absolute; top:32px; right:32px;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-dim);
  transition: all .3s ease;
}
.nav-tile:hover .tile-arrow{ background:var(--gold); border-color:var(--gold); color:var(--bg); transform:rotate(45deg); }
.nav-tile .tile-arrow svg{ width:14px; height:14px; }

@media (max-width:860px){
  .nav-buttons-grid{ grid-template-columns:1fr; }
}

/* ---------- PAGE HEADER (for inner pages) ---------- */
.page-head{ padding:30px 0 60px; }
.page-head h1{ font-size:clamp(36px, 5vw, 62px); margin-top:14px; }
.page-head .desc{ margin-top:20px; max-width:560px; color:var(--text-dim); font-size:15.5px; line-height:1.7; font-weight:300; }

/* ---------- FOLDER GRID (Виды спорта, subfolders) ---------- */
.folder-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px;
  padding-bottom:130px;
}
.folder-card{
  position:relative; overflow:hidden;
  border:1px solid var(--line-strong);
  background:var(--bg-soft);
  padding:34px 26px; min-height:190px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
}
.folder-card:hover{ border-color:var(--gold); transform:translateY(-4px); background:var(--card); }
.folder-card.disabled{ opacity:.5; cursor:default; }
.folder-card.disabled:hover{ transform:none; border-color:var(--line-strong); background:var(--bg-soft); }
.folder-card .folder-icon{ width:30px; height:30px; color:var(--gold); margin-bottom:22px; }
.folder-card h3{ font-size:21px; margin-bottom:6px; }
.folder-card .folder-meta{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:0.06em;
  color:var(--text-faint); text-transform:uppercase;
}
.folder-card.disabled .folder-meta{ color:var(--ember); }

/* folder-card with a cover photo instead of icon */
.folder-card.has-cover{
  padding:0; min-height:280px; border-color:var(--line);
}
.folder-card.has-cover img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.folder-card.has-cover:hover img{ transform:scale(1.05); }
.folder-card.has-cover::before{
  content:'';
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(18,14,11,0.05) 0%, rgba(18,14,11,0.55) 65%, rgba(18,14,11,0.88) 100%);
}
.folder-card.has-cover:hover{ border-color:var(--gold); }
.folder-card.has-cover .cover-content{
  position:relative; z-index:2;
  padding:26px; margin-top:auto;
  display:flex; flex-direction:column; justify-content:flex-end; height:100%;
}
.folder-card.has-cover h3{ font-size:23px; margin-bottom:6px; color:var(--text); }
.folder-card.has-cover .folder-meta{ color:var(--gold); }

/* ---------- GALLERY (photo grid within a folder) ---------- */
/* Masonry: колонки, каждая карточка сохраняет РЕАЛЬНЫЕ пропорции фото, без обрезки */
.gallery{ columns:3 260px; column-gap:20px; padding-bottom:130px; }
.g-item{
  break-inside:avoid; -webkit-column-break-inside:avoid;
  margin-bottom:20px; position:relative; overflow:hidden; border:1px solid var(--line);
}
.g-item img{
  width:100%; height:auto !important; object-fit:initial;
  display:block; cursor:zoom-in;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.g-item:hover img{ transform:scale(1.04); }

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,7,5,0.94);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .3s ease;
}
.lightbox.open{ opacity:1; visibility:visible; }
.lightbox-figure{
  position:relative; max-width:90vw; max-height:86vh;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; transform:scale(.97); transition:opacity .3s ease, transform .3s ease;
}
.lightbox.open .lightbox-figure{ opacity:1; transform:scale(1); }
.lightbox-figure img{
  display:block; width:auto; height:auto;
  max-width:90vw; max-height:78vh;
  object-fit:contain;
  border:1px solid var(--line-strong);
}
.lightbox-caption{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.06em;
  color:var(--text-dim); text-align:center;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:fixed; z-index:101;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,14,11,0.55);
  backdrop-filter:blur(4px);
  border:1px solid var(--line-strong);
  color:var(--text); cursor:pointer;
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
  background:var(--gold); border-color:var(--gold); color:var(--bg);
}
.lightbox-close{ top:24px; right:24px; }
.lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:24px; top:50%; transform:translateY(-50%); }
.lightbox-close svg, .lightbox-prev svg, .lightbox-next svg{ width:18px; height:18px; }
body.lightbox-lock{ overflow:hidden; }

@media (max-width:640px){
  .lightbox-close{ top:14px; right:14px; width:40px; height:40px; }
  .lightbox-prev{ left:8px; width:40px; height:40px; }
  .lightbox-next{ right:8px; width:40px; height:40px; }
  .lightbox-figure img{ max-width:94vw; max-height:70vh; }
}

.g-download{
  position:absolute; top:16px; right:16px; z-index:3;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,14,11,0.62);
  backdrop-filter:blur(4px);
  border:1px solid var(--line-strong);
  color:var(--text);
  opacity:0; transform:translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}
.g-item:hover .g-download, .g-download:focus-visible{ opacity:1; transform:translateY(0); }
.g-download:hover{ background:var(--gold); border-color:var(--gold); color:var(--bg); }
.g-download svg{ width:16px; height:16px; }
@media (hover:none){ .g-download{ opacity:.85; transform:none; } }

.gallery-toolbar{
  display:flex; align-items:center; justify-content:flex-end;
  margin-bottom:34px;
}
.download-all-btn{
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  padding:12px 24px;
  border:1px solid var(--gold-soft);
  color:var(--gold);
  cursor:pointer; background:transparent;
  display:flex; align-items:center; gap:10px;
  transition: all .25s ease;
  white-space:nowrap;
}
.download-all-btn:hover{ background:var(--gold); color:var(--bg); }
.download-all-btn:disabled{ opacity:.55; cursor:default; background:transparent; color:var(--gold); }
.download-all-btn svg{ width:14px; height:14px; flex-shrink:0; }

@media (max-width:860px){
  .gallery{ columns:2 180px; column-gap:14px; }
  .g-item{ margin-bottom:14px; }
}

/* ---------- EMPTY STATE ---------- */
.empty-state{
  padding:70px 20px; text-align:center;
  border:1px dashed var(--line-strong);
  margin-bottom:130px;
}
.empty-state .empty-icon{ width:38px; height:38px; color:var(--gold-soft); margin:0 auto 22px; }
.empty-state h3{ font-size:24px; margin-bottom:10px; }
.empty-state p{ color:var(--text-dim); font-size:14.5px; max-width:400px; margin:0 auto; font-weight:300; line-height:1.6; }

/* ---------- ABOUT ---------- */
.about-section{ padding-bottom:130px; }
.about-grid{ display:grid; grid-template-columns: 0.85fr 1.15fr; gap:90px; align-items:center; }
.about-photo{ height:600px; position:relative; border:1px solid var(--line); }
.about-photo .frame{ position:absolute; inset:-18px; border:1px solid var(--gold-soft); pointer-events:none; }
.about-text p{ font-size:17.5px; line-height:1.8; font-weight:300; color:var(--text-dim); margin-bottom:22px; }
.about-text p:first-of-type{ color:var(--text); font-size:22px; font-family:'Fraunces', serif; font-weight:450; line-height:1.5; }
.about-text .emoji-line{ font-size:22px; }
@media (max-width:900px){
  .about-grid{ grid-template-columns:1fr; gap:40px; }
  .about-photo{ height:400px; }
}

/* ---------- PRICING ---------- */
.pricing-section{ padding-bottom:130px; }
.price-table{ border:1px solid var(--line); }
.price-row{
  display:grid; grid-template-columns: 1fr auto; gap:20px;
  align-items:center; padding:30px 34px; border-bottom:1px solid var(--line);
}
.price-row:last-child{ border-bottom:none; }
.price-row.highlight{ background:var(--bg-soft); }
.price-row .tier-name{ font-size:20px; font-family:'Fraunces', serif; margin-bottom:6px; }
.price-row .tier-desc{ font-size:13.5px; color:var(--text-dim); font-weight:300; }
.price-row .tier-price{ font-family:'Fraunces', serif; font-size:32px; text-align:right; white-space:nowrap; }
.price-row .tier-price span{ font-size:13px; color:var(--text-faint); font-family:'JetBrains Mono', monospace; display:block; text-align:right; margin-top:4px; }
.price-note{
  margin-top:34px; padding:22px 26px; border:1px solid var(--line-strong);
  font-size:14px; color:var(--text-dim); font-weight:300; line-height:1.6;
  display:flex; align-items:flex-start; gap:14px;
}
.price-note svg{ width:18px; height:18px; color:var(--gold); flex-shrink:0; margin-top:2px; }
@media (max-width:640px){
  .price-row{ grid-template-columns:1fr; gap:14px; }
  .price-row .tier-price{ text-align:left; }
  .price-row .tier-price span{ text-align:left; }
}

/* ---------- CONTACTS ---------- */
.contacts-section{ padding-bottom:150px; }
.contact-card{
  border:1px solid var(--line-strong);
  padding:60px 50px; max-width:640px;
  background:var(--bg-soft);
}
.contact-card .label{ margin-bottom:20px; display:block; }
.contact-email{
  font-family:'Fraunces', serif; font-size:clamp(26px, 4vw, 40px);
  color:var(--text); word-break:break-word;
  border-bottom:1px solid var(--line-strong); padding-bottom:20px; margin-bottom:20px;
  display:inline-block; transition:color .25s ease, border-color .25s ease;
}
.contact-email:hover{ color:var(--gold); border-color:var(--gold); }
.contact-hours{ font-size:14.5px; color:var(--text-dim); font-weight:300; line-height:1.7; }
.contact-hours b{ color:var(--text); font-weight:500; }

/* ---------- FOOTER ---------- */
footer{ padding:56px 0 40px; border-top:1px solid var(--line); margin-top:auto; }
.footer-top{ display:flex; justify-content:space-between; align-items:center; padding-bottom:40px; flex-wrap:wrap; gap:24px; }
.footer-logo{ font-family:'Fraunces', serif; font-size:28px; }
.footer-nav{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-nav a{ font-size:12.5px; color:var(--text-dim); font-family:'JetBrains Mono', monospace; text-transform:uppercase; letter-spacing:.04em; }
.footer-nav a:hover{ color:var(--gold); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--line); font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:10px; }
.footer-bottom a{ color:var(--text-faint); }
.footer-bottom a:hover{ color:var(--gold); }

/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (max-width:720px){
  .wrap{ padding:0 24px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}