:root{
  --bg:#211a14;
  --bg-2:#2c231a;
  --ink:#fbf4e8;
  --muted:#bdae99;
  --gold-1:#6b4f1d;
  --gold-2:#d9b166;
  --gold-3:#f6e5bb;
  --gold-4:#a87b2e;
  --card-back:#141210;
  --frame:clamp(20px,2.1vw,30px);
  --radius:4px;
}
@media (max-width:640px){ :root{ --frame:17px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 50% -6%, #4a3a27 0%, transparent 62%),
    radial-gradient(900px 600px at 85% 30%, #352a1e 0%, transparent 60%),
    linear-gradient(180deg,#2a211a 0%, #1d1711 100%);
  background-attachment:fixed;
  background-color:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:300;
  overflow-x:hidden;
  min-height:100svh;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 180px 40px rgba(26,19,13,.42);}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;text-align:center;padding:clamp(56px,10vw,120px) 20px clamp(28px,5vw,56px);max-width:900px;margin:0 auto}
.kicker{
  font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold-2);
  margin-bottom:22px;font-weight:400;
}
h1{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-weight:400;
  font-size:clamp(34px,6.4vw,70px);
  line-height:1.08;
  margin:0 0 20px;
  letter-spacing:.005em;
}
h1 em{
  font-style:italic;
  background:linear-gradient(100deg,var(--gold-4) 0%,var(--gold-3) 42%,var(--gold-2) 62%,var(--gold-4) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{
  color:var(--muted);font-size:clamp(14px,1.6vw,16.5px);line-height:1.65;
  max-width:46ch;margin:0 auto;
}
.rule{display:flex;align-items:center;justify-content:center;gap:16px;margin:clamp(30px,5vw,48px) auto 0;max-width:420px}
.rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(217,177,102,.55),transparent)}
.rule i{font-style:normal;color:var(--gold-2);font-size:11px;opacity:.85}

/* ---------- gallery ---------- */
.gallery{
  position:relative;z-index:2;
  max-width:1480px;margin:0 auto;
  padding:clamp(24px,4vw,48px) clamp(16px,4vw,40px) clamp(48px,8vw,96px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(26px,3.6vw,52px);
  perspective:2200px;
}
@media (min-width:900px){ .gallery{grid-template-columns:repeat(4,1fr)} }
@media (min-width:620px) and (max-width:899px){ .gallery{grid-template-columns:repeat(2,1fr)} }

.card{
  position:relative;
  aspect-ratio:3/4;
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.2,.75,.25,1);
  cursor:pointer;
  border:0;padding:0;background:none;
  font:inherit;color:inherit;text-align:inherit;
  display:block;width:100%;
  -webkit-tap-highlight-color:transparent;
}
.card:focus-visible{outline:2px solid var(--gold-2);outline-offset:14px}
.card.is-flipped{transform:rotateY(180deg)}

.face{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius);
  overflow:hidden;
}
.face--back{transform:rotateY(180deg)}

/* premium frame */
.frame{
  padding:var(--frame);
  background:
    linear-gradient(145deg,
      #3a2a10 0%,
      #a87b2e 14%,
      #f6e5bb 27%,
      #d9b166 38%,
      #7d5a21 52%,
      #c99f54 66%,
      #f3e0b2 79%,
      #8a6526 92%,
      #4a3514 100%);
  box-shadow:
    0 2px 2px rgba(40,28,14,.32),
    0 22px 40px -20px rgba(30,21,12,.55),
    0 48px 72px -44px rgba(30,21,12,.5),
    inset 0 0 0 1px rgba(255,248,226,.45),
    inset 0 0 0 7px rgba(120,88,38,.42),
    inset 0 0 0 8px rgba(248,234,197,.45);
}
.frame::after{ /* inner bevel / mat */
  content:"";position:absolute;
  inset:calc(var(--frame) - 9px);
  border-radius:2px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,243,214,.55),
    inset 0 0 0 9px #efe3cc,
    inset 0 0 0 10px rgba(150,115,56,.35),
    inset 0 0 14px 6px rgba(60,42,22,.18);
}
.frame::before{ /* light sweep across the gilding */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 32%,rgba(255,255,255,.4) 46%,rgba(255,255,255,.08) 52%,transparent 64%);
  opacity:.5;
  transition:opacity .6s ease;
}
.card:hover .frame::before{opacity:.85}

.frame img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  position:relative;
  filter:saturate(1.02) contrast(1.01) brightness(1.03);
}
.frame .inner{position:absolute;inset:var(--frame);overflow:hidden;background:#efe3cc}

/* back side */
.face--back .frame{background:
  linear-gradient(145deg,#3a2a10 0%,#a87b2e 14%,#f6e5bb 27%,#d9b166 38%,#7d5a21 52%,#c99f54 66%,#f3e0b2 79%,#8a6526 92%,#4a3514 100%);}
.back-inner{
  position:absolute;inset:var(--frame);
  background:
    radial-gradient(130% 110% at 50% 0%, #fbf3e2 0%, #efe2c9 72%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  padding:clamp(16px,4.5%,30px);
  text-align:center;
}
.back-inner .num{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(26px,5vw,38px);
  line-height:1;
  color:#a87b2e;
}
.back-inner .divider{width:46px;height:1px;background:linear-gradient(90deg,transparent,rgba(168,123,46,.75),transparent)}
.back-inner .ttl{
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:clamp(17px,2.4vw,23px);
  font-style:italic;color:#4a3317;line-height:1.25;margin:0;
}
.back-inner .txt{
  font-size:clamp(12.5px,1.45vw,14.5px);
  line-height:1.72;color:#5c4a33;margin:0;
  max-width:34ch;
  overflow:auto;
  -ms-overflow-style:none;scrollbar-width:none;
}
.back-inner .txt::-webkit-scrollbar{display:none}

/* slot = card + plaque, so the plaque never rotates with the frame */
.slot{position:relative;padding-bottom:30px}
.plate{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  z-index:3;
  font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:#a2927a;
  white-space:nowrap;
  opacity:.75;transition:opacity .4s ease,color .4s ease;
  pointer-events:none;
}
.slot:hover .plate{opacity:1;color:var(--gold-2)}

/* ---------- footer ---------- */
.foot{position:relative;z-index:2;text-align:center;padding:0 20px 64px;color:#8a7c67;font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.foot .rule{margin-bottom:26px}

/* entrance */
.slot{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.25,1)}
.slot.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .slot,.card{transition:none!important}
  .slot{opacity:1;transform:none}
}


/* ---------- тач-устройства ---------- */
.tap-badge{display:none}
@media (hover:none){
  .tap-badge{
    display:flex;align-items:center;justify-content:center;gap:6px;
    position:absolute;z-index:2;
    left:50%;bottom:calc(var(--frame) + 10px);transform:translateX(-50%);
    padding:7px 14px;border-radius:999px;
    background:rgba(28,20,12,.62);
    -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border:1px solid rgba(248,234,197,.28);
    color:#f6e8cd;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    white-space:nowrap;pointer-events:none;
  }
  .card.is-flipped .tap-badge{opacity:0}
}

/* ---------- мобильная вёрстка ---------- */
@media (max-width:620px){
  .gallery{gap:34px;padding-left:16px;padding-right:16px}
  .slot{padding-bottom:26px}
  .hero{padding-top:clamp(44px,13vw,72px)}
  h1{font-size:clamp(31px,8.6vw,44px)}
  .lead{font-size:15px;max-width:30ch}
  .back-inner .txt{font-size:14px;line-height:1.7;max-width:30ch}
  .back-inner .ttl{font-size:21px}
  .back-inner .num{font-size:32px}
  .plate{font-size:10px;letter-spacing:.26em}
}
@media (max-width:360px){
  .gallery{padding-left:12px;padding-right:12px}
  h1{font-size:29px}
}