/* =========================
   GALLERY — HERO TRIPTYCH
   ========================= */
.gallery-hero{
  background:
    radial-gradient(900px 380px at 75% 0%, rgba(255,184,77,.08), transparent 65%),
    radial-gradient(700px 320px at 15% 100%, rgba(207,103,70,.10), transparent 70%);
}
.gallery-hero__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
  align-items: center;
}
.gallery-hero__title{
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
  margin: 0 0 10px;
}
.gallery-hero__lead{ margin: 0 0 8px; color: #efece6; }

.gallery-hero__triptych{
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
}
.gh-card{
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl);
  padding: 10px;
  box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.gh-card--raised{ transform: translateY(-6px); }
.gh-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.gh-card img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border: 1px solid rgba(255,255,255,.06);
}
.gh-card figcaption{
  margin-top: 8px; color: var(--clr-muted); font-size: .92rem;
}

@media (max-width: 980px){
  .gallery-hero__grid{ grid-template-columns: 1fr; }
  .gallery-hero__triptych{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .gallery-hero__triptych{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 2 — MACRO DIPTYCH
   ========================= */
.macro__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
  align-items: start;
}
.macro__media{
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.macro-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.macro-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.macro-card img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.macro-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 980px){
  .macro__grid{ grid-template-columns: 1fr; }
  .macro__media{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 3 — PLATING BELT
   ========================= */
.plating-belt{
  background:
    radial-gradient(700px 300px at 15% 100%, rgba(255,184,77,.08), transparent 65%);
}
.belt{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 320px);
  gap: 12px;
  overflow-x: auto;
  padding: 12px clamp(12px, 4vw, 24px) 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.belt:active{ cursor: grabbing; }
.belt::-webkit-scrollbar{ height: 8px; }
.belt::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 999px; }

.belt__card{
  scroll-snap-align: start;
  background: #1a1a1a; border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding: 10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.belt__card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,184,77,.35);
  box-shadow: 0 16px 28px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18);
}
.belt__card img{
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px); border: 1px solid rgba(255,255,255,.06);
}
.belt__card figcaption{ margin-top: 8px; color: var(--clr-muted); font-size: .92rem; }

@media (max-width: 640px){
  .belt{ grid-auto-columns: minmax(220px, 280px); }
}
/* =========================
   SECTION 4 — STUDIO MASONRY
   ========================= */
.studio-masonry{
  background:
    radial-gradient(720px 320px at 15% 100%, rgba(255,184,77,.06), transparent 65%);
}
.masonry{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap: 12px;
  justify-content: center;
  padding: 0 12px;
}
.masonry__item{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.masonry__item:hover{
  transform: translateY(-3px);
  border-color: rgba(255,184,77,.35);
  box-shadow: 0 16px 28px rgba(0,0,0,.28), 0 4px 10px rgba(0,0,0,.18);
}
.masonry__item img{
  width: 100%; max-width: 350px;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border: 1px solid rgba(255,255,255,.06);
}
.masonry__item figcaption{
  margin-top: 8px; color: var(--clr-muted); font-size: .92rem;
}

/* =========================
   SECTION 5 — NIGHT REFLECTIONS
   ========================= */
.reflections__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap: 12px;
  justify-content: center;
  padding: 0 12px;
}
.reflect-card{
  position: relative; overflow: hidden;
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  isolation: isolate; /* чтобы псевдоэлементы не вылезали */
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.reflect-card::after{
  content:""; position:absolute; inset:10px;
  border-radius: calc(var(--radius-2xl) - 8px);
  pointer-events: none; mix-blend-mode: screen; opacity: .0;
  transition: opacity .25s ease;
}
.reflect-card--warm::after{
  background: radial-gradient(40% 40% at 70% 30%, rgba(255,184,77,.25), transparent 70%);
}
.reflect-card--cool::after{
  background: radial-gradient(40% 40% at 30% 70%, rgba(207,103,70,.22), transparent 70%);
}
.reflect-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.reflect-card:hover::after{ opacity: 1; }

.reflect-card img{
  width: 100%; max-width: 350px;
  aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border: 1px solid rgba(255,255,255,.06);
  transition: filter .25s ease, transform .25s ease;
}
.reflect-card:hover img{ filter: saturate(1.06) contrast(1.05); transform: scale(1.01); }
.reflect-card figcaption{ margin-top: 8px; color: var(--clr-muted); font-size: .92rem; }

/* =========================
   SECTION 6 — BAR MACRO
   ========================= */
.bar-macro__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.bar-tags{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bar-tag{
  padding: 6px 10px; border-radius: 999px; font-size: .85rem;
  background: rgba(255,184,77,.12); border: 1px solid rgba(255,184,77,.25);
  color: #f5f2ec;
}

.bar-macro__media{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap: 12px; justify-content: start;
}
.macro-shot{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.macro-shot:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.macro-shot img{
  width: 100%; max-width: 350px;
  aspect-ratio: 4/3; object-fit: cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border: 1px solid rgba(255,255,255,.06);
}
.macro-shot figcaption{ margin-top: 8px; color: var(--clr-muted); font-size: .92rem; }

@media (max-width: 980px){
  .bar-macro__grid{ grid-template-columns: 1fr; }
}
/* =========================
   SECTION 7 — DETAIL QUILT
   ========================= */
.detail-quilt{
  background:
    radial-gradient(720px 320px at 85% 0%, rgba(255,184,77,.06), transparent 65%);
}
.quilt{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap: 12px;
  justify-content: center;
  padding: 0 12px;
}
.quilt__item{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.quilt__item--raised{ transform: translateY(-6px); }
.quilt__item:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.quilt__item img{
  width:100%; max-width:350px;
  aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border:1px solid rgba(255,255,255,.06);
}
.quilt__item figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

/* =========================
   SECTION 8 — KILN FLAME
   ========================= */
.kiln__grid{
  display:grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
}
.kiln__media{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap:12px; justify-content:start;
}
.kiln-card{
  position:relative; overflow:hidden;
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  isolation:isolate;
}
.kiln-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.kiln-card::after{
  content:""; position:absolute; inset:10px; border-radius: calc(var(--radius-2xl) - 8px);
  pointer-events:none; opacity:.0; transition: opacity .28s ease; mix-blend-mode: screen;
}
.kiln-card--glow::after{
  background: radial-gradient(40% 40% at 70% 30%, rgba(255,184,77,.28), transparent 70%);
}
.kiln-card--cool::after{
  background: radial-gradient(40% 40% at 30% 70%, rgba(207,103,70,.22), transparent 70%);
}
.kiln-card:hover::after{ opacity:1; }
.kiln-card img{
  width:100%; max-width:350px;
  aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border:1px solid rgba(255,255,255,.06);
}
.kiln-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 980px){
  .kiln__grid{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 9 — SHADOW LINES
   ========================= */
.shadow-strip{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap:12px; justify-content:center; padding: 0 12px;
  align-items:end;
}
.shadow-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.shadow-card--up{ transform: translateY(-8px); }
.shadow-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.shadow-card img{
  width:100%; max-width:350px;
  aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px);
  border:1px solid rgba(255,255,255,.06);
  transition: filter .25s ease, transform .25s ease;
}
.shadow-card:hover img{ filter:saturate(1.06) contrast(1.05); transform: scale(1.01); }
.shadow-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }
/* =========================
   SECTION 10 — KITCHEN GESTURES
   ========================= */
.kitchen-gestures{
  background:
    radial-gradient(720px 320px at 12% 0%, rgba(255,184,77,.06), transparent 65%);
}
.kitchen__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
  align-items: start;
}
.kitchen__media{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap: 12px; justify-content: start;
}
.kg-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.kg-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.kg-card img{
  width:100%; max-width:350px;
  aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.kg-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 980px){
  .kitchen__grid{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 11 (NEW) — PLATES CHESS
   ========================= */
.plates-chess{
  background:
    radial-gradient(720px 340px at 15% 100%, rgba(255,184,77,.06), transparent 60%);
}
.chess{
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 350px));
  gap: 12px;
  justify-content: center;
  padding: 0 12px;
}
.chess__item{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, filter .22s ease;
}
.chess__item--lg{ grid-column: span 2; grid-row: span 2; }
.chess__item:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); filter: saturate(1.04); }
.chess__item img{
  width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.chess__item figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 980px){
  .chess{ grid-template-columns: repeat(auto-fit, minmax(220px, 350px)); }
  .chess__item--lg{ grid-column: auto; grid-row: auto; }
}

/* =========================
   SECTION 12 (NEW) — GLASS & LIGHTS
   ========================= */
.glass__head{ display: grid; gap: 10px; }
.glass__grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap:12px; justify-content:center; padding: 0 12px;
}
.glass-card{
  position: relative; overflow: hidden;
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.glass-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }

.glass-card img{
  width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); /* клиновой срез по умолчанию */
  transition: clip-path .28s ease, filter .25s ease, transform .25s ease;
}
.glass-card--angle-b img{ clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%); }
.glass-card:hover img{ filter:saturate(1.06) contrast(1.05); transform: scale(1.01); }

.glass-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 560px){
  .glass-card img{ clip-path: none; }
}
/* =========================
   SECTION 13 — TEXTURE PAIRS (WARM/COOL)
   ========================= */
.tp__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
  align-items: start;
}
.tp__media{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap: 12px; justify-content: start;
}
.tp-card{
  position: relative; overflow: hidden; isolation: isolate;
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.tp-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.tp-card::after{
  content:""; position:absolute; inset:10px;
  border-radius: calc(var(--radius-2xl) - 8px);
  pointer-events:none; opacity:.0; transition: opacity .28s ease; mix-blend-mode: screen;
}
.tp-card--warm::after{
  background: radial-gradient(45% 45% at 70% 30%, rgba(255,184,77,.28), transparent 70%);
}
.tp-card--cool::after{
  background: radial-gradient(45% 45% at 30% 70%, rgba(207,103,70,.22), transparent 70%);
}
.tp-card:hover::after{ opacity:1; }
.tp-card img{
  width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.tp-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 980px){
  .tp__grid{ grid-template-columns: 1fr; }
}

/* =========================
   SECTION 14 — CLOSING NOTES (OFFSET DIPTYCH)
   ========================= */
.closing__grid{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 5vw, 36px);
  align-items: start;
}
.closing__media{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 350px));
  gap: 12px; justify-content: start; align-items: end;
}
.closing-card{
  background:#1a1a1a; border:1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-2xl); padding:10px; box-shadow: var(--shadow-soft);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.closing-card--offset{ transform: translateY(-8px); }
.closing-card:hover{ transform: translateY(-3px); border-color: rgba(255,184,77,.35); }
.closing-card img{
  width:100%; max-width:350px; aspect-ratio:4/3; object-fit:cover;
  border-radius: calc(var(--radius-2xl) - 8px); border:1px solid rgba(255,255,255,.06);
}
.closing-card figcaption{ margin-top:8px; color:var(--clr-muted); font-size:.92rem; }

@media (max-width: 980px){
  .closing__grid{ grid-template-columns: 1fr; }
  .closing-card--offset{ transform: none; }
}