*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;color:#d4af37;font-family:'Cinzel',serif;position:relative;overflow-x:hidden}

/* FAINT MOVING GEAR NETWORK BACKGROUND */
/* parchment overlay layer */
body::after{
content:"";
position:fixed;
inset:0;
pointer-events:none;
background:radial-gradient(circle at 30% 20%,rgba(255,240,200,0.05),transparent 60%),
radial-gradient(circle at 70% 80%,rgba(255,220,150,0.05),transparent 60%);
mix-blend-mode:soft-light;
z-index:0;
}

body::before{
content:"⚙ ⚙ ⚙ ⚙ ⚙";
position:fixed;
top:10%;
left:-10%;
font-size:120px;
letter-spacing:120px;
color:#8b6f2a;
opacity:0.05;
animation:gearDrift 120s linear infinite;
pointer-events:none;
white-space:nowrap;
}

@keyframes gearDrift{
from{transform:translateX(0)}
to{transform:translateX(40%)}
}
header{height:20vh;display:flex;align-items:center;justify-content:center;background:#111;border-bottom:2px solid #8b6f2a;position:relative;overflow:hidden}

/* animated brass gear mechanism behind title */
header::before, header::after{
content:"⚙";
position:absolute;
color:#8b6f2a;
opacity:0.15;
text-shadow:0 0 10px rgba(184,134,11,0.6);
}

header::before{
font-size:140px;
left:20%;
animation:gearSpin 30s linear infinite;
}

header::after{
font-size:110px;
right:20%;
animation:gearSpinReverse 26s linear infinite;
}

/* subtle brass glow background */
header::marker{}
/* HEADER TITLE STYLING */
header h1{
font-family:'UnifrakturCook', serif;
font-size:2.8rem;
letter-spacing:2px;
color:#d4af37;
text-align:center;
text-shadow:
0 0 6px rgba(184,134,11,0.9),
0 0 14px rgba(184,134,11,0.6),
0 0 22px rgba(184,134,11,0.3);
position:relative;
z-index:2;
padding:8px 20px;
}


/* LASER ENGRAVING SWEEP EFFECT */
header h1{
overflow:hidden;
}

header h1::after{
content:"";
position:absolute;
top:0;
left:-150%;
width:150%;
height:100%;
pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,215,120,0.9),transparent);
filter:blur(6px);
animation:engraveSweep 2.2s ease-out 1;
}

@keyframes engraveSweep{
0%{transform:translateX(0)}
100%{transform:translateX(220%)}
}
nav{
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:16px;
background:#000;
padding:12px 0;
width:100%;
}

nav button{
padding:10px 20px;
background:#111;
border:1px solid #8b6f2a;
color:#d4af37;
cursor:pointer;
position:relative;
transition:all .3s ease;
}


/* steampunk glow + steam hover */
nav button::after{content:"";position:absolute;left:50%;top:-8px;width:0;height:0;background:radial-gradient(circle,rgba(212,175,55,.6),rgba(212,175,55,0));opacity:0;transform:translateX(-50%);transition:all .4s ease}
nav button:hover{background:#8b6f2a;color:#000;box-shadow:0 0 12px #b8860b, inset 0 0 10px rgba(0,0,0,.6)}
nav button:hover::after{width:60px;height:20px;opacity:.6;filter:blur(6px)}
nav button:hover{background:#8b6f2a;color:#000}
.slideshow{height:15vh;position:relative;overflow:hidden;width:80%;margin:0 auto;border:2px solid #8b6f2a;box-shadow:0 0 25px rgba(184,134,11,0.25), inset 0 0 40px rgba(184,134,11,0.15);border-radius:6px}
.slideshow img{width:100%;height:100%;object-fit:cover;opacity:1;transition:opacity .8s ease}

/* STEAM DRIFT OVER SLIDESHOW */
.slideshow::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle at 50% 30%,rgba(255,255,255,0.08),rgba(255,255,255,0));
filter:blur(25px);
animation:steamSlide 12s ease-in-out infinite;
pointer-events:none;
}

@keyframes steamSlide{
0%{transform:translateX(-10%) translateY(5%);opacity:.2}
50%{transform:translateX(10%) translateY(-5%);opacity:.35}
100%{transform:translateX(-10%) translateY(5%);opacity:.2}
}
.arrow{position:absolute;top:50%;transform:translateY(-50%);background:#000;color:#d4af37;border:none;padding:10px;cursor:pointer}
.arrow.left{left:10px}.arrow.right{right:10px}
main{min-height:45vh;max-height:60vh;overflow-y:auto;padding:40px;background:linear-gradient(#1a1a1a,#0e0e0e);width:80%;margin:25px auto;border:2px solid #8b6f2a;box-shadow:0 0 25px rgba(184,134,11,0.25), inset 0 0 40px rgba(184,134,11,0.15);border-radius:6px;position:relative}

/* engraved metal plate texture merged into main background */
/* adds subtle machined metal pattern without conflicting pseudo elements */
main{
min-height:45vh;max-height:60vh;overflow-y:auto;padding:40px;
background:
repeating-linear-gradient(45deg,rgba(255,255,255,0.02),rgba(255,255,255,0.02) 2px,transparent 2px,transparent 6px),
linear-gradient(#1a1a1a,#0e0e0e);
width:80%;margin:25px auto;border:2px solid #8b6f2a;
box-shadow:0 0 25px rgba(184,134,11,0.25), inset 0 0 40px rgba(184,134,11,0.15);
border-radius:6px;position:relative
}

/* STEAMPUNK SCROLLBAR */
main::-webkit-scrollbar{width:12px}
main::-webkit-scrollbar-track{background:#0a0a0a;border-left:1px solid #8b6f2a}
main::-webkit-scrollbar-thumb{background:linear-gradient(#b8860b,#8b6f2a);border:1px solid #3a2a05;border-radius:6px;box-shadow:0 0 6px rgba(184,134,11,0.6)}
main::-webkit-scrollbar-thumb:hover{background:linear-gradient(#d4af37,#b8860b)}

/* Firefox */
main{scrollbar-width:thin;scrollbar-color:#b8860b #0a0a0a}

/* brass gear corner ornament (kept separate so both effects show) */
main::after{
content:"⚙";
position:absolute;
font-size:26px;
color:#b8860b;
top:-14px;
left:-14px;
text-shadow:0 0 8px rgba(184,134,11,.8);
animation:gearSpin 12s linear infinite;
}

main::marker{}

@keyframes gearSpin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}

/* subtle vignette glow */
main::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
box-shadow:inset 0 0 120px rgba(0,0,0,0.85);
border-radius:6px
}

/* responsive layout */
@media (max-width:900px){
.slideshow{width:95%}
main{width:95%;padding:25px}
}
footer{height:10vh;display:flex;justify-content:center;align-items:center;background:#000}

/* STEAMPUNK LOADING GEARS */
.loader-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
display:flex;
align-items:center;
justify-content:center;
z-index:9998;
}

.gear-system{
position:relative;
width:160px;
height:120px;
display:flex;
align-items:center;
justify-content:center;
}

.gear{
position:absolute;
font-size:60px;
color:#b8860b;
text-shadow:0 0 15px rgba(184,134,11,.9);
}

.gear1{left:0;animation:gearSpin 2s linear infinite}
.gear2{left:45px;top:30px;font-size:48px;animation:gearSpinReverse 1.6s linear infinite}
.gear3{left:90px;animation:gearSpin 2.4s linear infinite}

@keyframes gearSpinReverse{
from{transform:rotate(360deg)}
to{transform:rotate(0deg)}
}

/* steam effect */
.steam{
position:absolute;
width:140px;
height:60px;
top:-40px;
left:10px;
background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.25),rgba(255,255,255,0));
filter:blur(12px);
animation:steamRise 3s ease-in-out infinite;
opacity:.6;
}

@keyframes steamRise{
0%{transform:translateY(10px) scale(.8);opacity:.2}
50%{transform:translateY(-10px) scale(1);opacity:.5}
100%{transform:translateY(-25px) scale(1.1);opacity:0}
}
footer a{color:#8b6f2a;margin:0 10px;text-decoration:none}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}
.gallery-grid img{width:100%;border:1px solid #8b6f2a}
form{max-width:500px;display:flex;flex-direction:column}
form input,form textarea{margin:10px 0;padding:10px;background:#000;border:1px solid #8b6f2a;color:#d4af37}
form button{padding:10px;background:#8b6f2a;border:none;cursor:pointer}

/* HOME PAGE TYPOGRAPHY */
.home-content{
text-align:center;
max-width:850px;
margin:0 auto;
font-family:'Cinzel', serif;
line-height:1.8;
font-size:1.1rem;
}

.engraved-heading{
display:inline-block;
padding:8px 22px;
background:linear-gradient(#3a2a05,#1a1202);
border:2px solid #b8860b;
border-radius:6px;
position:relative;
box-shadow:0 0 10px rgba(184,134,11,.6),
           inset 0 0 10px rgba(0,0,0,.8);
}

.engraved-heading::before,
.engraved-subheading::before{
content:"⚙";
margin-right:10px;
color:#b8860b;
display:inline-block;
animation:gearSpin 8s linear infinite;
}

/* brass screw heads on plaques - render 4 real corners */
.engraved-heading::after,
.engraved-subheading::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 0 0,#d4af37 40%,#8b6f2a 60%,#3a2a05 61%) 0 0/10px 10px no-repeat,
radial-gradient(circle at 100% 0,#d4af37 40%,#8b6f2a 60%,#3a2a05 61%) 100% 0/10px 10px no-repeat,
radial-gradient(circle at 0 100%,#d4af37 40%,#8b6f2a 60%,#3a2a05 61%) 0 100%/10px 10px no-repeat,
radial-gradient(circle at 100% 100%,#d4af37 40%,#8b6f2a 60%,#3a2a05 61%) 100% 100%/10px 10px no-repeat;
}


.engraved-subheading{
display:inline-block;
padding:6px 18px;
background:linear-gradient(#2f2104,#140d02);
border:1px solid #b8860b;
border-radius:6px;
position:relative;
}

.intro-text,.closing-text{
margin-bottom:20px;
}

.tagline{
font-size:1.2rem;
margin-top:25px;
text-shadow:0 0 8px #b8860b;
}

/* brass divider line */
.brass-divider{
width:60%;
height:2px;
margin:20px auto;
background:linear-gradient(90deg,transparent,#b8860b,transparent);
box-shadow:0 0 8px rgba(184,134,11,.6);
}

/* steampunk list styling */
.steampunk-list{
list-style:none;
padding:0;
margin:10px auto 20px auto;
max-width:500px;
text-align:left;
}

.steampunk-list li{
padding:6px 0;
border-bottom:1px solid rgba(184,134,11,.25);
display:flex;
align-items:center;
gap:10px;
justify-content:flex-start;
}

.steampunk-list li::before{
content:"⚙";
color:#b8860b;
animation:gearSpin 10s linear infinite;
}