:root{
  --ink:#05080d;
  --deep:#0a1520;
  --gold:#c9a96a;
  --gold-soft:#e6d3a6;
  --mist:rgba(230,221,200,.62);
  --line:rgba(201,169,106,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(ellipse at 50% 120%,#0f2433 0%,var(--deep) 38%,var(--ink) 78%);
  color:var(--gold-soft);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
canvas#sea{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65) 100%)}

/* Header */
header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:28px clamp(20px,5vw,64px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold-soft)}
.brand svg{width:26px;height:26px}
.brand span{font-family:Cinzel,'Cormorant Garamond',Georgia,serif;font-weight:400;font-size:16px;letter-spacing:.3em;text-transform:uppercase}
nav{display:flex;gap:clamp(18px,3vw,40px)}
nav a{color:var(--mist);text-decoration:none;font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  position:relative;padding:6px 0;transition:color .4s}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .5s ease}
nav a:hover,nav a.active{color:var(--gold-soft)}
nav a:hover::after,nav a.active::after{width:100%}

/* Hero */
main{position:relative;z-index:5;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 20px 110px}
.emblem{width:clamp(92px,12.5vw,138px);height:auto;margin-bottom:46px;filter:drop-shadow(0 0 28px rgba(201,169,106,.25))}
.emblem .plate{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 3.2s ease forwards}
.emblem .plate:nth-child(2){animation-delay:.25s}
.emblem .plate:nth-child(3){animation-delay:.5s}
.emblem .plate:nth-child(4){animation-delay:.7s}
.emblem .plate:nth-child(5){animation-delay:.9s}
.emblem .plate:nth-child(6){animation-delay:1.1s}
.emblem .plate:nth-child(7){animation-delay:1.3s}
.emblem .plate:nth-child(8){animation-delay:1.5s}
.emblem .core{fill:var(--gold);opacity:0;animation:fade 1.6s ease 2.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:.9}}
@keyframes rise{from{opacity:0;transform:translateY(18px);letter-spacing:.5em}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

h1.wordmark{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,40px);font-weight:400;
  opacity:0;animation:rise 2s cubic-bezier(.2,.7,.2,1) 1s forwards}
h1.wordmark span{font-family:Cinzel,'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(26px,5.6vw,66px);line-height:1.08;letter-spacing:.17em;text-transform:uppercase;
  background:linear-gradient(180deg,#f3e6c4 0%,#c9a96a 55%,#8a6d3b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
h1.wordmark span:last-child{opacity:.82}
.scute{flex:0 0 auto;width:clamp(21px,3.1vw,36px);height:auto;overflow:visible}
.scute .hex{fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linejoin:round;
  stroke-dasharray:220;stroke-dashoffset:220;animation:draw 2.4s ease 1.4s forwards}
.scute .pip{fill:var(--gold);opacity:0;animation:fade 1.4s ease 3s forwards}
.rule{width:1px;height:64px;margin:38px auto;background:linear-gradient(var(--gold),transparent);opacity:0;animation:up 1.4s ease 2s forwards}
.tag{font-size:11px;letter-spacing:.52em;text-transform:uppercase;color:var(--mist);opacity:0;animation:up 1.4s ease 2.3s forwards}
.sub{max-width:520px;margin:26px auto 0;font-size:13.5px;line-height:1.9;letter-spacing:.04em;
  color:rgba(230,221,200,.46);opacity:0;animation:up 1.4s ease 2.7s forwards}
.sub a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,169,106,.35);
  padding-bottom:1px;transition:border-color .4s,color .4s}
.sub a:hover{color:var(--gold-soft);border-color:var(--gold)}

/* Footer strip */
footer{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:24px clamp(20px,5vw,64px);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(230,221,200,.38)}
footer a{color:inherit;text-decoration:none;transition:color .4s}
footer a:hover{color:var(--gold-soft)}

/* Contact */
.contact{max-width:980px;width:100%}
.contact .eyebrow{font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:22px;opacity:0;animation:up 1.2s ease .3s forwards}
.contact h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;font-size:clamp(38px,6vw,76px);line-height:1.05;
  color:var(--gold-soft);opacity:0;animation:up 1.4s ease .5s forwards}
.contact h2 em{color:var(--gold)}
.cards{margin-top:64px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  opacity:0;animation:up 1.4s ease .9s forwards}
.card{padding:40px 28px;text-align:left;border-right:1px solid var(--line);transition:background .6s}
.card:last-child{border-right:0}
.card:hover{background:rgba(201,169,106,.04)}
.card small{display:block;font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.card p,.card a{font-family:'Cormorant Garamond',Georgia,serif;font-size:21px;line-height:1.45;color:var(--gold-soft);text-decoration:none}
.card a{border-bottom:1px solid transparent;transition:border-color .4s}
.card a:hover{border-color:var(--gold)}
.card .meta{display:block;margin-top:12px;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.12em;color:var(--mist)}

@media (max-width:760px){
  header{padding:22px 18px}
  h1.wordmark{flex-direction:column;gap:14px}
  h1.wordmark span{font-size:clamp(30px,9.2vw,44px);letter-spacing:.2em}
  .scute{width:26px}
  .brand span{font-size:15px;letter-spacing:.24em}
  nav a{font-size:10px;letter-spacing:.24em}
  .cards{grid-template-columns:1fr}
  .card{border-right:0;border-bottom:1px solid var(--line);text-align:center}
  .card:last-child{border-bottom:0}
  footer{position:relative;flex-direction:column;gap:10px;padding:20px 16px 26px}
  main{padding-bottom:40px}
  .contact-page main{padding-top:110px}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important}}