:root {
  --bg: #0b0b10;
  --panel: #14141b;
  --text: #f5f0e8;
  --muted: #aaa6b0;
  --accent: #d6ad62;
  --accent-light: #f2d18f;
  --line: rgba(255,255,255,.12);
  --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; }
.shell { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.hero { position: relative; min-height: 560px; display: grid; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 72% 40%, rgba(124,80,170,.22), transparent 34%), linear-gradient(145deg, #0b0b10 25%, #17131d 100%); }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(to right, transparent, black); }
.hero__glow { position: absolute; width: 360px; height: 360px; right: 9%; top: 18%; border: 1px solid rgba(214,173,98,.25); border-radius: 50%; box-shadow: 0 0 90px rgba(214,173,98,.12), inset 0 0 90px rgba(214,173,98,.08); }
.hero__glow::before, .hero__glow::after { content:"✦"; position:absolute; color:var(--accent); text-shadow:0 0 20px var(--accent); }
.hero__glow::before { font-size:64px; left:50%; top:50%; transform:translate(-50%,-50%); }
.hero__glow::after { font-size:22px; right:16%; top:18%; }
.hero__content { position: relative; z-index: 1; padding: 42px 0 54px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: .02em; }
.brand__mark { color: var(--accent); font-size: 23px; }
.eyebrow { color: var(--accent-light); font-size: 12px; font-weight: 750; letter-spacing: .2em; margin: 70px 0 18px; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin-bottom: 24px; max-width: 740px; font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(52px, 8vw, 94px); line-height: .91; letter-spacing: -.045em; }
.hero h1 em { color: var(--accent-light); font-weight: 400; }
.intro { max-width: 570px; color: #c9c5cc; font-size: 18px; line-height: 1.65; }
.scroll-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; color: var(--text); text-decoration: none; font-weight: 650; }
.scroll-link span { color: var(--accent); }
.gallery-section { padding: 88px 0 100px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:34px; }
.section-heading .eyebrow { margin:0 0 12px; }
.section-heading h2 { font: 400 clamp(36px,5vw,58px)/1 Georgia,serif; letter-spacing:-.03em; margin:0; }
.count { color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:9px 13px; font-size:13px; }
.collage { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; grid-auto-flow:dense; }
.photo-card { position:relative; min-height:380px; border-radius:var(--radius); overflow:hidden; background:var(--panel); text-decoration:none; isolation:isolate; }
.photo-card--wide { grid-column:span 2; }
.photo-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .5s ease; }
.photo-card__shade { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.78),transparent 45%); opacity:.75; }
.photo-card__action { position:absolute; left:22px; right:22px; bottom:20px; display:flex; justify-content:space-between; align-items:center; font-weight:650; transform:translateY(4px); transition:.25s ease; }
.photo-card__action b { color:var(--accent-light); font-size:20px; }
.photo-card:hover img { transform:scale(1.035); }
.photo-card:hover .photo-card__action { transform:none; }
.empty-state { text-align:center; padding:90px 24px; border:1px dashed rgba(214,173,98,.35); border-radius:var(--radius); background:linear-gradient(145deg,rgba(214,173,98,.05),rgba(255,255,255,.015)); }
.empty-state__icon { color:var(--accent); font-size:44px; margin-bottom:18px; }
.empty-state h3 { font:400 34px/1.15 Georgia,serif; margin-bottom:12px; }
.empty-state p { color:var(--muted); max-width:520px; margin:0 auto; line-height:1.65; }
.gallery-loader { min-height:110px; display:flex; align-items:center; justify-content:center; gap:10px; color:var(--muted); font-size:13px; }
.gallery-loader__spark { color:var(--accent); animation:mm-pulse 1.35s ease-in-out infinite; }
@keyframes mm-pulse { 50% { opacity:.3; transform:scale(.75); } }
.footer { padding:28px 0 40px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:13px; }
.footer span:first-child { color:var(--text); font-weight:700; }

.detail-page { min-height:100vh; background:radial-gradient(circle at 10% 0,rgba(101,68,131,.16),transparent 30%),var(--bg); }
.detail-header { height:86px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.back-link { color:var(--muted); text-decoration:none; font-size:14px; }
.detail-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(320px,.65fr); gap:54px; align-items:center; padding-top:54px; padding-bottom:70px; }
.detail-photo { min-height:620px; display:grid; place-items:center; background:#050507; border-radius:var(--radius); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); }
.detail-photo img { display:block; width:100%; height:100%; max-height:74vh; object-fit:contain; }
.detail-panel .eyebrow { margin:0 0 16px; }
.detail-panel h1 { font:400 clamp(42px,5vw,66px)/.98 Georgia,serif; letter-spacing:-.04em; margin-bottom:22px; }
.detail-copy { color:var(--muted); line-height:1.65; margin-bottom:30px; }
.button { width:100%; min-height:54px; border-radius:12px; padding:14px 20px; margin-top:12px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; font:650 15px/1 Inter,system-ui,sans-serif; text-decoration:none; cursor:pointer; }
.button--primary { color:#16120b; background:linear-gradient(135deg,var(--accent-light),var(--accent)); }
.button--secondary { color:var(--text); background:transparent; border-color:var(--line); }
.qr-panel { margin-top:18px; padding:22px; text-align:center; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.035); }
.qr-panel[hidden] { display:none; }
#qrcode { width:214px; min-height:214px; margin:0 auto 15px; padding:12px; border-radius:10px; background:white; }
#qrcode img, #qrcode canvas { width:190px; height:190px; }
.qr-panel strong, .qr-panel span { display:block; }
.qr-panel span { color:var(--muted); font-size:13px; margin-top:5px; }
.not-found { min-height:calc(100vh - 86px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.not-found h1 { font:400 clamp(40px,6vw,70px)/1 Georgia,serif; max-width:720px; }
.not-found p { color:var(--muted); }
.not-found .button { width:auto; padding-inline:28px; }

@media (max-width: 860px) {
  .hero { min-height:620px; }
  .hero__glow { right:-180px; top:25%; }
  .collage { grid-template-columns:repeat(2,1fr); }
  .detail-layout { grid-template-columns:1fr; gap:34px; }
  .detail-photo { min-height:420px; }
  .detail-panel { max-width:620px; width:100%; margin-inline:auto; }
}
@media (max-width: 560px) {
  .shell { width:min(100% - 26px,1180px); }
  .hero { min-height:570px; }
  .hero__content { padding-top:28px; }
  .eyebrow { margin-top:58px; }
  .hero h1 { font-size:52px; }
  .intro { font-size:16px; }
  .gallery-section { padding:64px 0 72px; }
  .section-heading { align-items:start; gap:16px; }
  .count { white-space:nowrap; }
  .collage { grid-template-columns:1fr; }
  .photo-card, .photo-card--wide { grid-column:span 1; min-height:420px; }
  .footer { flex-direction:column; gap:10px; }
  .detail-header { height:72px; }
  .detail-header .brand { font-size:0; }
  .detail-header .brand__mark { font-size:23px; }
  .detail-layout { padding-top:26px; }
  .detail-photo { min-height:340px; border-radius:16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}

.test-page { min-height:100vh; background:radial-gradient(circle at 50% 10%,rgba(118,75,146,.2),transparent 34%),var(--bg); }
.test-shell { width:min(620px,calc(100% - 28px)); margin:0 auto; padding:70px 0; }
.test-card { padding:clamp(28px,6vw,52px); border:1px solid var(--line); border-radius:24px; background:rgba(20,20,27,.92); box-shadow:0 28px 90px rgba(0,0,0,.35); }
.test-card .eyebrow { margin:0 0 14px; }
.test-card h1 { font:400 clamp(40px,8vw,62px)/1 Georgia,serif; letter-spacing:-.04em; margin-bottom:18px; }
.test-card > p { color:var(--muted); line-height:1.65; }
.test-form { margin-top:28px; }
.test-form > label:not(.photo-picker) { display:block; margin-bottom:9px; font-size:13px; font-weight:700; }
.test-form input[type="password"] { width:100%; min-height:52px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:#0d0d12; font:inherit; outline:none; }
.test-form input[type="password"]:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(214,173,98,.12); }
.form-error { margin:22px 0 0; padding:13px 15px; border:1px solid rgba(255,113,113,.35); border-radius:10px; color:#ffc2c2; background:rgba(166,42,42,.13); font-size:14px; }
.photo-picker { min-height:300px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px dashed rgba(214,173,98,.48); border-radius:18px; background:rgba(214,173,98,.04); cursor:pointer; overflow:hidden; text-align:center; }
.photo-picker__icon { color:var(--accent); font-size:42px; line-height:1; }
.photo-picker > span:last-of-type { color:var(--muted); font-size:13px; }
.photo-picker img { width:100%; max-height:420px; object-fit:contain; margin-top:12px; border-radius:12px; }
.photo-picker:has(img:not([hidden])) .photo-picker__icon { display:none; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.button:disabled { opacity:.45; cursor:not-allowed; }
.logout-form { text-align:center; margin-top:20px; }
.logout-form button { border:0; color:var(--muted); background:transparent; text-decoration:underline; cursor:pointer; }