@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root { --ink:#f2edda; --muted:#969b8d; --sea:#071310; --panel:#10231d; --line:#385044; --gold:#d9b66c; --gold-dark:#8b6b32; --coral:#c94f3e; }
* { box-sizing:border-box; }
html { background:var(--sea); color:var(--ink); font-family:'DM Sans',sans-serif; scroll-behavior:smooth; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 78% 12%, #1d4035 0, transparent 32rem),radial-gradient(circle at 8% 54%,#142b25 0,transparent 36rem),var(--sea); position:relative; }
.map-atmosphere { position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.16; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cg fill='none' stroke='%23c6aa6c' stroke-opacity='.22'%3E%3Cpath d='M-20 74Q60 28 130 72t210-8M-30 230q80-56 162-7t210-13'/%3E%3Ccircle cx='238' cy='104' r='42'/%3E%3Ccircle cx='238' cy='104' r='27'/%3E%3Cpath d='m238 45 7 52 44 7-44 7-7 52-7-52-44-7 44-7zM42 270q30-54 72-12t72-18'/%3E%3C/g%3E%3C/svg%3E"); }
.topbar,main { position:relative; }
a { color:inherit; }
.topbar { height:92px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(22px,5vw,76px); border-bottom:1px solid rgba(217,182,108,.22); position:sticky; top:0; z-index:20; background:linear-gradient(90deg,rgba(5,16,13,.96),rgba(12,29,24,.9),rgba(5,16,13,.96)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 9px 30px #0005; }
.topbar:after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:repeating-linear-gradient(90deg,var(--gold-dark) 0 2px,transparent 2px 9px); opacity:.48; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; font-size:11px; font-weight:600; line-height:1.15; letter-spacing:.14em; }
.brand-logo { width:62px; height:58px; object-fit:contain; filter:drop-shadow(0 3px 8px #000a); }
.header-actions,.user-chip { display:flex; align-items:center; gap:15px; }
.user-chip { color:#ccd6cf; font-size:14px; }.user-chip img { width:32px; height:32px; border-radius:50%; }
.button { border:0; border-radius:5px; padding:12px 18px; font:600 13px 'DM Sans'; text-decoration:none; cursor:pointer; display:inline-flex; align-items:center; gap:9px; }
.button-discord { background:#5865f2; color:white; }.button-primary { background:var(--coral); color:white; justify-content:center; width:100%; font-size:14px; padding:15px; }
.button:disabled { opacity:.55; cursor:wait; }.text-link { background:none; border:0; color:#aebbb2; font:500 13px inherit; cursor:pointer; }
main { overflow:hidden; }
.hero { padding:clamp(76px,11vw,150px) clamp(24px,8vw,130px) clamp(70px,9vw,120px); position:relative; }
.hero:before { content:''; position:absolute; left:clamp(24px,8vw,130px); top:105px; width:110px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); transform:translateY(-30px); }
.hero:after { content:'⚓'; position:absolute; font-size:410px; line-height:1; color:rgba(217,182,108,.035); left:700px; top:15px; transform:rotate(12deg); }
.compass-rose { position:absolute; left:min(78vw,850px); top:105px; width:210px; height:210px; border:1px solid rgba(217,182,108,.2); border-radius:50%; display:grid; place-items:center; color:rgba(217,182,108,.28); transform:rotate(8deg); }
.compass-rose:before,.compass-rose:after { content:''; position:absolute; background:currentColor; }.compass-rose:before { width:1px;height:255px; }.compass-rose:after { height:1px;width:255px; }.compass-rose i { position:absolute; inset:18px; border:1px dashed currentColor; border-radius:50%; }.compass-rose b { font-size:92px;font-weight:400;line-height:1; }.compass-rose span { position:absolute;top:-26px;font:600 11px 'DM Sans';letter-spacing:.2em; }
.guild-crest { position:absolute; z-index:1; right:clamp(24px,6vw,96px); left:auto; top:32px; width:330px; height:305px; object-fit:contain; opacity:.88; filter:drop-shadow(0 18px 30px #0009); transform:rotate(1deg); }
.eyebrow { color:var(--gold); font-size:11px; font-weight:600; letter-spacing:.24em; margin:0 0 23px; }
h1 { font:700 clamp(58px,9vw,116px)/.88 'Playfair Display',serif; letter-spacing:-.055em; margin:0; max-width:800px; text-shadow:0 5px 25px #0008; }
h1 em { color:var(--gold); font-weight:700; }.intro { color:#a8b4ac; max-width:490px; font-size:17px; line-height:1.7; margin:35px 0 27px; }
.hero-meta { display:flex; align-items:center; gap:16px; color:#7e8c83; text-transform:uppercase; letter-spacing:.13em; font-size:10px; }.hero-meta b { color:#cdd7d0; }.hero-meta i { width:3px;height:3px;border-radius:50%;background:var(--gold); }
.notice { margin:0 auto 55px; max-width:min(1100px,calc(100% - 48px)); border:1px solid #34564b; background:#152b24; padding:14px 18px; border-radius:5px; color:#b9c9bf; font-size:13px; }.notice-warn { border-color:#6d5130; }.notice a { color:var(--gold); }
.gallery-shell { max-width:1500px; margin:0 auto; padding:0 clamp(16px,4vw,60px) 120px; }
.gallery { display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,2vw,28px); align-items:start; }
.date-divider { grid-column:1/-1; display:flex; align-items:center; gap:14px; margin:42px 0 8px; color:var(--gold); font:700 17px 'Playfair Display',serif; text-transform:capitalize; text-shadow:0 2px 10px #000; }.date-divider:first-child { margin-top:0; }.date-divider i { height:5px; flex:1; opacity:.62; background:linear-gradient(var(--gold-dark),var(--gold-dark)) center/100% 1px no-repeat,repeating-linear-gradient(45deg,transparent 0 6px,var(--gold-dark) 7px 8px,transparent 9px 14px); }.date-divider b { font-size:8px;color:var(--gold-dark); }
.photo-card { grid-column:span 4; margin:0; position:relative; background:var(--panel); overflow:hidden; aspect-ratio:var(--ratio); border:1px solid rgba(217,182,108,.13); border-radius:2px; box-shadow:0 15px 40px #0004; }
.photo-card:after { content:''; position:absolute; inset:7px; border:1px solid rgba(239,218,169,.12); pointer-events:none; z-index:2; }
.photo-card:nth-of-type(5n+2),.photo-card:nth-of-type(5n+5) { grid-column:span 5; }.photo-card:nth-of-type(5n+3) { grid-column:span 3; }
.photo-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease,filter .4s; }.photo-card:hover img { transform:scale(1.025); filter:brightness(.78); }
.photo-card figcaption { position:absolute; inset:auto 0 0; padding:50px 18px 16px; background:linear-gradient(transparent,rgba(3,10,8,.82)); opacity:0; transform:translateY(8px); transition:.3s; display:flex; justify-content:space-between; gap:15px; align-items:end; }.photo-card:hover figcaption { opacity:1; transform:none; }.photo-card strong { font:700 17px 'Playfair Display',serif; }.photo-card figcaption span { color:#b7c2ba;font-size:11px;white-space:nowrap; }
.loader { height:100px; display:flex; justify-content:center; align-items:center; gap:7px; }.loader span { width:5px;height:5px;background:var(--gold);border-radius:50%;animation:blink 1s infinite alternate;}.loader span:nth-child(2){animation-delay:.2s}.loader span:nth-child(3){animation-delay:.4s}@keyframes blink{to{opacity:.15;transform:translateY(-4px)}}
.empty { text-align:center; color:var(--muted); padding:90px 20px; }.empty span { font-size:42px;color:var(--gold);}.empty h2 { color:var(--ink);font:700 26px 'Playfair Display';margin:16px 0 8px;}.empty p{margin:0;}
.upload-fab { position:fixed; right:28px; bottom:28px; z-index:5; border:1px solid #e7b36b; background:linear-gradient(#d06048,#a93c31); color:#fff8e7; border-radius:4px; padding:14px 20px 14px 15px; font:600 13px inherit; box-shadow:inset 0 0 0 2px #6d261f,0 14px 35px #02070699; cursor:pointer; clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); }.upload-fab span { font-size:19px;margin-right:7px;vertical-align:-1px; }
dialog { width:min(620px,calc(100% - 28px)); border:1px solid #345047; border-radius:8px; background:#10211c;color:var(--ink);padding:0;box-shadow:0 30px 100px #000c;}dialog::backdrop{background:#030806d9;backdrop-filter:blur(4px)}
.modal-head { display:flex;justify-content:space-between;align-items:start;padding:26px 28px 19px;border-bottom:1px solid var(--line)}.modal-head .eyebrow{margin-bottom:6px}.modal-head h2{font:700 29px 'Playfair Display';margin:0}.icon-button{border:0;background:none;color:#98a69d;font-size:30px;cursor:pointer}
#upload-form{padding:25px 28px 28px}.dropzone{border:1px dashed #3a5a50;background:#0d1c18;min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}.dropzone input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop-icon{font-size:31px;color:var(--gold);margin-bottom:8px}.dropzone b{font-size:14px}.dropzone small{color:var(--muted);margin-top:7px}.dropzone img{display:none;position:absolute;width:100%;height:100%;object-fit:contain;background:#0b1714}.dropzone img.visible{display:block}.form-grid{display:grid;grid-template-columns:1fr 2fr;gap:16px;margin:20px 0}.form-grid label span{display:block;color:#aab7ae;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px}.form-grid input{width:100%;background:#0a1713;border:1px solid #30483f;color:var(--ink);padding:12px;border-radius:3px;font:13px inherit;color-scheme:dark}.form-error{min-height:18px;color:#ff8e80;font-size:12px;margin:0 0 8px}
@media(max-width:760px){.topbar{height:76px}.brand-logo{width:51px;height:48px}.header-actions .text-link,.user-chip{display:none}.hero{padding-top:75px}.hero:after,.compass-rose,.guild-crest{display:none}.intro{font-size:15px}.gallery{gap:11px}.photo-card,.photo-card:nth-of-type(n){grid-column:span 6}.date-divider{margin-top:28px}.form-grid{grid-template-columns:1fr}.photo-card figcaption{opacity:1;transform:none;padding:35px 10px 9px}.photo-card figcaption span{display:none}}
@media(max-width:430px){.button-discord{font-size:0;padding:10px 13px}.button-discord span{font-size:18px}.photo-card,.photo-card:nth-of-type(n){grid-column:1/-1}.hero{padding-left:20px;padding-right:20px}h1{font-size:58px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}