:root{
  --ink:#070706;
  --ink-soft:#0c0c0b;
  --gold:#b99a64;
  --gold-2:#d8c197;
  --gold-dim:#7e6846;
  --cream:#efe4ca;
  --line:rgba(194,161,102,.46);
  --line-soft:rgba(194,161,102,.19);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--cream);font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;overflow:hidden}
button,a{font:inherit}
button{color:inherit}

.landing{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 31%,rgba(104,84,49,.08) 0%,rgba(7,7,6,0) 42%),
    linear-gradient(180deg,#0a0a09 0%,#050505 100%);
}

.world-layer{
  position:absolute;
  z-index:-6;
  inset:0;
  background-image:url("assets/world.jpg");
  background-repeat:no-repeat;
  background-position:center 42%;
  background-size:cover;
  opacity:.22;
  filter:saturate(.45) sepia(.18) contrast(1.18) brightness(.63);
  transform:scale(1.035);
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.world-vignette{
  position:absolute;
  z-index:-5;
  inset:0;
  background:
    linear-gradient(90deg,#070706 0%,rgba(7,7,6,.82) 17%,rgba(7,7,6,.22) 46%,rgba(7,7,6,.55) 72%,#070706 100%),
    radial-gradient(ellipse at 50% 45%,rgba(0,0,0,.02) 15%,rgba(0,0,0,.58) 70%,rgba(0,0,0,.89) 100%),
    linear-gradient(180deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.06) 46%,rgba(0,0,0,.78) 100%);
}

.stone-layer{
  position:absolute;
  z-index:-3;
  top:58px;
  bottom:0;
  width:min(24vw,400px);
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:.72;
  filter:brightness(.78) contrast(1.15) saturate(.65);
  pointer-events:none;
  transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .4s ease;
  will-change:transform;
}
.stone-left{left:0;background-image:linear-gradient(90deg,rgba(7,7,6,0) 75%,#070706 100%),url("assets/pillar-left.jpg");background-blend-mode:normal}
.stone-right{right:0;background-image:linear-gradient(270deg,rgba(7,7,6,0) 75%,#070706 100%),url("assets/pillar-right.jpg");background-blend-mode:normal}

.ambient-glow{
  position:absolute;
  z-index:-2;
  left:50%;top:39%;
  width:min(70vw,980px);height:min(62vw,760px);
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(184,148,86,.065) 0%,rgba(184,148,86,.018) 42%,transparent 73%);
  pointer-events:none;
}

.grain{
  position:absolute;
  z-index:20;
  inset:-40%;
  pointer-events:none;
  opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  animation:grainShift .36s steps(2) infinite;
}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(0,0)}}

.site-header{
  position:absolute;
  z-index:10;
  top:0;left:0;right:0;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(24px,5vw,82px);
}

.mini-brand{
  display:inline-flex;
  align-items:center;
  gap:15px;
  color:var(--gold-2);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:clamp(11px,.9vw,15px);
  white-space:nowrap;
  text-shadow:0 1px 18px rgba(0,0,0,.7);
}
.mini-brand img{width:37px;height:37px;object-fit:contain;filter:drop-shadow(0 4px 9px rgba(0,0,0,.5))}

.nav{display:flex;align-items:center;gap:clamp(22px,4vw,64px)}
.nav a,.nav-button{
  position:relative;
  border:0;
  background:transparent;
  padding:9px 1px;
  color:var(--gold-2);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:clamp(10px,.78vw,13px);
  cursor:pointer;
  opacity:.84;
  transition:opacity .25s ease,color .25s ease;
}
.nav a::after,.nav-button::after{
  content:"";
  position:absolute;
  left:0;right:.28em;bottom:1px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .25s ease;
}
.nav a:hover,.nav-button:hover,.nav a.active{opacity:1;color:#ead7ab}
.nav a:hover::after,.nav-button:hover::after,.nav a.active::after{transform:scaleX(1)}

.header-rule{
  position:absolute;
  z-index:9;
  top:63px;left:0;right:0;
  height:1px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.header-rule span{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.header-rule i{width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg);background:#080807}

.hero{
  position:relative;
  z-index:3;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:92px 24px 105px;
}
.hero-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:min(92vw,760px);
  transform:translateY(-1.5vh);
}

.hero-emblem{
  width:clamp(130px,14vw,235px);
  height:auto;
  object-fit:contain;
  margin-bottom:12px;
  filter:drop-shadow(0 20px 24px rgba(0,0,0,.58)) drop-shadow(0 0 26px rgba(190,155,94,.06));
  animation:emblemIn 1.2s cubic-bezier(.18,.77,.22,1) both;
}
@keyframes emblemIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

.wordmark{animation:fadeUp 1s .15s both cubic-bezier(.18,.77,.22,1)}
.wordmark h1{
  margin:0;
  color:#ddc79a;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-size:clamp(47px,6vw,92px);
  line-height:.94;
  text-shadow:0 3px 20px rgba(0,0,0,.7),0 0 1px #d2bb8c;
}
.studio-line{margin-top:7px;display:grid;grid-template-columns:minmax(34px,100px) auto minmax(34px,100px);align-items:center;gap:16px}
.studio-line span{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.studio-line strong{
  color:#d4bc8e;
  text-transform:uppercase;
  letter-spacing:.48em;
  font-weight:400;
  font-size:clamp(18px,2vw,31px);
  padding-left:.48em;
}

.kicker,.coming{
  margin:0;
  text-transform:uppercase;
  color:#d3bd91;
  letter-spacing:.48em;
  padding-left:.48em;
  font-size:clamp(10px,1vw,15px);
  line-height:1.5;
  animation:fadeUp 1s .3s both cubic-bezier(.18,.77,.22,1);
}
.kicker{margin-top:35px}
.ornament{width:min(230px,44vw);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin:22px auto 23px;animation:fadeUp 1s .38s both}
.ornament span{height:1px;background:linear-gradient(90deg,transparent,var(--gold-dim))}
.ornament span:last-child{background:linear-gradient(90deg,var(--gold-dim),transparent)}
.ornament i{width:9px;height:9px;border:1px solid var(--gold);transform:rotate(45deg)}
.coming{animation-delay:.44s}

.contact-cta{
  margin-top:29px;
  min-width:204px;
  height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  border:1px solid rgba(196,161,100,.67);
  background:linear-gradient(180deg,rgba(45,37,25,.17),rgba(5,5,5,.4));
  color:#d8c297;
  text-transform:uppercase;
  letter-spacing:.30em;
  padding:0 22px 0 29px;
  cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018),0 12px 30px rgba(0,0,0,.18);
  transition:background .28s ease,border-color .28s ease,color .28s ease,transform .28s ease,box-shadow .28s ease;
  animation:fadeUp 1s .52s both cubic-bezier(.18,.77,.22,1);
}
.contact-cta span{font-size:12px}
.contact-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.35;transition:transform .25s ease}
.contact-cta:hover{background:rgba(185,154,100,.11);border-color:#d7b878;color:#ecd7ab;transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 0 22px rgba(190,155,94,.04)}
.contact-cta:hover svg{transform:translateX(3px)}

@keyframes fadeUp{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}

.site-footer{
  position:absolute;
  z-index:8;
  left:50%;bottom:22px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:14px;
  width:min(600px,70vw);
}
.footer-rule{display:grid;grid-template-columns:1fr auto 1fr;gap:11px;align-items:center;width:100%}
.footer-rule span{height:1px;background:linear-gradient(90deg,transparent,var(--line))}
.footer-rule span:last-child{background:linear-gradient(90deg,var(--line),transparent)}
.footer-rule i{width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)}
.site-footer a{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  padding:0 22px;
  background:#070706;
  color:#bda476;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.38em;
  padding-left:calc(22px + .38em);
  font-size:clamp(8px,.7vw,11px);
  white-space:nowrap;
}

.contact-modal{
  width:min(92vw,490px);
  border:1px solid rgba(192,157,96,.47);
  padding:0;
  background:rgba(8,8,7,.96);
  color:var(--cream);
  box-shadow:0 40px 100px rgba(0,0,0,.72),inset 0 0 60px rgba(185,154,100,.025);
}
.contact-modal::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}
.contact-modal[open]{animation:modalIn .24s ease-out both}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.modal-frame{position:relative;padding:47px 46px 44px;text-align:center}
.modal-frame::before{content:"";position:absolute;inset:9px;border:1px solid rgba(185,154,100,.13);pointer-events:none}
.modal-close{position:absolute;right:19px;top:13px;border:0;background:transparent;color:#9f8b66;font-size:27px;line-height:1;cursor:pointer;font-family:Arial,sans-serif;transition:color .2s ease,transform .2s ease}
.modal-close:hover{color:#e4cf9f;transform:rotate(4deg)}
.modal-emblem{width:73px;height:auto;object-fit:contain;margin-bottom:12px}
.modal-eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.32em;padding-left:.32em;color:#9f895f;font-size:10px}
.modal-frame h2{margin:0 0 24px;text-transform:uppercase;letter-spacing:.13em;font-size:28px;font-weight:400;color:#dac397}
.email-link{display:block;color:#e2cfaa;text-decoration:none;font-family:Georgia,serif;font-size:clamp(15px,3.5vw,19px);margin-bottom:22px}
.email-link:hover{color:#f1dfb9}
.copy-button{height:42px;padding:0 20px;border:1px solid rgba(185,154,100,.45);background:transparent;color:#bda476;text-transform:uppercase;letter-spacing:.22em;font-size:10px;cursor:pointer;transition:.2s ease}
.copy-button:hover{background:rgba(185,154,100,.08);color:#e5cf9e;border-color:#c6a464}

@media (max-width:900px){
  .stone-layer{width:30vw;opacity:.58}
  .world-layer{background-position:61% 45%;opacity:.20}
  .hero-inner{transform:translateY(-1vh)}
  .mini-brand span{display:none}
  .site-header{padding:0 22px}
}

@media (max-width:640px){
  .stone-layer{width:38vw;opacity:.38;top:54px}
  .stone-left{left:-9vw}.stone-right{right:-9vw}
  .world-layer{background-position:68% 45%;opacity:.17;transform:scale(1.08)}
  .site-header{height:58px}
  .header-rule{top:57px}
  .mini-brand img{width:32px;height:32px}
  .nav{gap:20px}
  .nav a,.nav-button{font-size:9px;letter-spacing:.22em}
  .hero{padding:82px 18px 95px}
  .hero-emblem{width:142px;margin-bottom:9px}
  .wordmark h1{font-size:clamp(41px,14vw,66px)}
  .studio-line{gap:9px;margin-top:6px;grid-template-columns:minmax(25px,54px) auto minmax(25px,54px)}
  .studio-line strong{font-size:17px;letter-spacing:.38em;padding-left:.38em}
  .kicker,.coming{letter-spacing:.31em;padding-left:.31em;font-size:9px}
  .kicker{margin-top:27px}
  .ornament{margin:18px auto}
  .contact-cta{height:48px;min-width:190px;margin-top:25px}
  .site-footer{bottom:17px;width:82vw}
  .site-footer a{font-size:7.5px;letter-spacing:.27em;padding-left:calc(16px + .27em);padding-right:16px}
}

@media (max-height:690px) and (min-width:641px){
  .hero-emblem{width:120px}
  .wordmark h1{font-size:54px}
  .studio-line strong{font-size:20px}
  .kicker{margin-top:20px}
  .ornament{margin:14px auto}
  .contact-cta{margin-top:18px;height:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  .grain{animation:none}
}