:root{--ink:#4A0F1A;--brick:#8C3412;--mustard:#F3B842;--paper:#F3EEE2;--night:#1E0F08;--muted:#6B4A33}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,'Noto Sans Armenian',Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
.serif{font-family:'Playfair Display','Noto Serif Armenian',Georgia,serif}
a{color:var(--ink);text-underline-offset:6px}
a:hover{color:var(--brick)}
p{margin:0}
:focus-visible{outline:2px solid var(--mustard);outline-offset:3px}

.gate{position:fixed;inset:0;z-index:20;background:var(--night);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:24px;text-align:center;transition:opacity .9s ease}
.gate.hide{opacity:0;pointer-events:none}
.gate img{width:150px;height:150px;border-radius:50%;box-shadow:0 0 0 6px #2A1508,0 0 50px rgba(243,184,66,.35);animation:spin 1.8s linear infinite}
.gate .line{font-family:'Playfair Display','Noto Serif Armenian',Georgia,serif;font-style:italic;font-size:26px;color:var(--paper)}
.gate button{min-height:48px;padding:0 8px;border:0;background:transparent;color:var(--mustard);font:500 15px Inter,'Noto Sans Armenian',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:8px;cursor:pointer}
.gate .note{font-size:12px;letter-spacing:.06em;color:#A8957E}

.pill{position:fixed;top:16px;z-index:25;min-width:44px;min-height:44px;padding:0 14px;border:1px solid rgba(36,17,9,.45);border-radius:22px;background:rgba(243,238,226,.78);color:var(--ink);font:12px Inter,'Noto Sans Armenian',Arial,sans-serif;letter-spacing:.08em;cursor:pointer;display:flex;align-items:center;text-decoration:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lang{left:16px}
.sound{right:16px;display:none}
.sound.show{display:flex}

.photo{position:relative;overflow:hidden}
.photo img{display:block;width:100%;object-fit:cover;object-position:var(--mpos,50% 50%);animation:glow 6s ease-in-out infinite alternate}
.photo .light{position:absolute;inset:-12%;pointer-events:none;mix-blend-mode:screen;animation:drift 7s ease-in-out infinite alternate,breathe 4.5s ease-in-out infinite alternate}
.photo::after{content:"";position:absolute;inset:-12%;pointer-events:none;mix-blend-mode:multiply;background:radial-gradient(ellipse 45% 55% at 75% 70%,rgba(70,28,6,.35) 0%,rgba(70,28,6,0) 70%);animation:drift2 9s ease-in-out infinite alternate}
.dim img{animation:none}
.dim::after{display:none}
.dim .lamp{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(ellipse 30% 38% at 62% 26%,rgba(255,186,100,.9) 0%,rgba(255,186,100,0) 70%);animation:flick 2.6s ease-in-out infinite alternate}
.hero .photo img{height:122vw;max-height:600px}
.feature .photo img{height:77vw;max-height:370px}

.copy{padding:26px 24px 44px;display:flex;flex-direction:column;gap:12px}
.copy .big{font-size:28px;line-height:1.2}
.copy .small{font-size:14px;letter-spacing:.03em;line-height:1.5}
.bar{display:inline-block;height:.85em;background:currentColor;vertical-align:-.08em}
.hero .copy{gap:18px;padding-top:30px}
.hero .copy a{align-self:flex-start;font-size:14px;letter-spacing:.06em}

.manifesto{padding:56px 24px 64px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;border-top:1px solid #E2D6C3}
.manifesto h1{margin:0;font-weight:400;font-size:36px;line-height:1.15;max-width:900px}
.manifesto h1 i,.invite h2 i{color:var(--brick)}
.manifesto p{font-style:italic;font-size:17px;line-height:1.6;color:#4A3426;max-width:600px}

.record{position:relative;height:560px;overflow:hidden;background:var(--night)}
.record .vinyl{position:absolute;left:0;bottom:0;width:100%;height:320px;object-fit:cover;object-position:74% 50%;animation:glow 6s ease-in-out infinite alternate}
.record .vfade{position:absolute;left:0;bottom:240px;width:100%;height:80px;background:linear-gradient(var(--night),rgba(30,15,8,0))}
.record .rcopy{position:absolute;left:24px;top:52px;right:24px;display:flex;flex-direction:column;gap:16px}
.record .rh{font-size:44px;line-height:1.05;color:var(--paper)}
.record .rh i{color:var(--mustard)}
.record .rp{font-style:italic;font-size:17px;line-height:1.6;color:#D9C9B2}

.invite{padding:64px 24px 40px;display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center;border-top:1px solid #E2D6C3}
.invite h2{margin:0;font-weight:400;font-size:32px;line-height:1.15}
.invite .with{font-size:13px;line-height:2;letter-spacing:.03em;color:#4A3426}
.invite form{display:flex;flex-direction:column;gap:24px;width:100%;max-width:620px}
.invite label{display:flex;flex-direction:column;gap:8px;text-align:left;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.invite input[type=email]{min-height:48px;padding:0 2px;border:0;border-bottom:1px solid var(--ink);background:transparent;color:var(--ink);font:19px 'Playfair Display','Noto Serif Armenian',Georgia,serif;border-radius:0}
.invite button{align-self:center;min-height:48px;padding:0 4px;border:0;background:transparent;color:var(--brick);font:14px Inter,'Noto Sans Armenian',Arial,sans-serif;letter-spacing:.06em;text-decoration:underline;text-underline-offset:6px;cursor:pointer}
.invite .hp{position:absolute;left:-9999px}
.msg{font-style:italic;font-size:19px;color:#4A3426;display:none}
footer{margin-top:56px;width:100%;display:flex;flex-direction:column;gap:8px;font-size:12px;letter-spacing:.06em;color:var(--muted)}
footer a{color:var(--muted)}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .gate img{width:190px;height:190px;box-shadow:0 0 0 8px #2A1508,0 0 70px rgba(243,184,66,.35)}
  .gate .line{font-size:30px}
  .pill{top:24px}.lang{left:24px}.sound{right:24px}
  .hero,.feature{position:relative;height:56.25vw;max-height:100vh;min-height:520px;overflow:hidden}
  .hero .photo,.feature .photo{position:absolute;inset:0}
  .hero .photo img,.feature .photo img{height:100%;max-height:none;object-position:100% 50%}
  .copy{position:absolute;left:var(--x,5.5%);top:var(--y,auto);bottom:var(--b,auto);padding:0;gap:18px;max-width:520px;color:var(--ink)}
  .copy .big{font-size:clamp(34px,3.2vw,52px);line-height:1.15}
  .copy .small{font-size:15px}
  .hero .copy{padding:0}
  .hero .copy .big{font-size:clamp(26px,2.1vw,34px);line-height:1.25}
  .feature.light-text .copy{color:var(--paper)}
  .manifesto{padding:150px 8%;gap:30px}
  .manifesto h1{font-size:clamp(44px,4.2vw,64px);line-height:1.12}
  .manifesto p{font-size:21px}
  .record{height:52.8vw;max-height:100vh;min-height:520px}
  .record .vinyl{height:100%;object-position:100% 60%}
  .record .vfade{display:none}
  .record .rcopy{left:5.5%;right:auto;top:50%;transform:translateY(-50%);width:30%;min-width:300px;gap:24px}
  .record .rh{font-size:clamp(48px,4.4vw,68px)}
  .record .rp{font-size:21px}
  .invite{padding:150px 8% 70px;gap:34px}
  .invite h2{font-size:clamp(40px,3.6vw,56px)}
  .invite .with{font-size:14px}
  .invite form{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:28px}
  .invite label{flex:1 1 280px}
  .invite input[type=email]{font-size:20px}
  footer{margin-top:110px;flex-direction:row;flex-wrap:wrap;justify-content:space-between}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%{transform:translate(-36px,-8px)}50%{transform:translate(10px,10px)}100%{transform:translate(38px,-4px)}}
@keyframes drift2{0%{transform:translate(30px,6px)}100%{transform:translate(-30px,-8px)}}
@keyframes breathe{0%{opacity:.3}100%{opacity:.85}}
@keyframes glow{0%{filter:brightness(.95) saturate(1)}100%{filter:brightness(1.06) saturate(1.06)}}
@keyframes flick{0%{opacity:.14}100%{opacity:.32}}
@media (prefers-reduced-motion:reduce){
  .gate img,.photo .light,.photo img,.photo::after,.dim .lamp,.record .vinyl{animation:none}
  .photo .light{opacity:.5}
}