:root{
  --ink:#fffaf2;
  --ink-soft:rgba(255,250,242,.82);
  --line:rgba(255,250,242,.45);
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --sans:"Jost","Futura","Century Gothic","Helvetica Neue",Arial,sans-serif;
  --pad:clamp(20px,3.2vw,52px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  min-height:100svh;
  display:flex;flex-direction:column;
  color:var(--ink);
  font-family:var(--sans);font-weight:300;
  background:#3b2f25;
  overflow-x:hidden;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0);
}
a{color:inherit;text-decoration:none}

/* Background */
.bg{
  position:fixed;inset:-3%;z-index:-2;
  background:url("assets/hero.jpg") center 55%/cover no-repeat;
  transform:translate3d(var(--mx,0),var(--my,0),0);
  transition:transform 1.8s cubic-bezier(.2,.7,.2,1);
  opacity:0;
}
body.loaded .bg{opacity:1;transition:transform 1.8s cubic-bezier(.2,.7,.2,1),opacity 1s ease}
.shade{
  position:fixed;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(30,22,15,.38) 0%,rgba(30,22,15,0) 22%),
    radial-gradient(ellipse 60% 38% at 50% 48%,rgba(35,25,17,.32),rgba(35,25,17,0) 70%),
    linear-gradient(0deg,rgba(30,22,15,.62) 0%,rgba(30,22,15,0) 26%);
}

/* Header */
.top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
  padding:var(--pad) var(--pad) 0;
}
.logo{display:inline-flex;flex-direction:column;line-height:1}
.logo-mark{font-family:var(--sans);font-weight:300;font-size:clamp(40px,4.6vw,72px);letter-spacing:.02em}
.logo-sub{font-size:clamp(9px,.85vw,13px);letter-spacing:.42em;text-transform:uppercase;margin-top:.5em;color:var(--ink-soft)}
.nav{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1.5em;
  font-size:clamp(11px,.85vw,13px);letter-spacing:.2em;text-transform:uppercase;
  padding-top:clamp(10px,1.4vw,24px);
}
.nav i{font-style:normal;opacity:.7}
.nav a{border-bottom:1px solid transparent;transition:border-color .3s}
.nav a:hover,.nav a:focus-visible{border-color:var(--ink)}

/* Hero */
.hero{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6vh var(--pad);
}
.title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(46px,8.6vw,150px);
  letter-spacing:.12em;line-height:1;text-transform:uppercase;
  margin-right:-.12em; /* optically recentre tracked text */
  text-shadow:0 2px 30px rgba(30,20,10,.25);
}
.rule{display:block;width:min(470px,62vw);height:1px;background:var(--line);margin:clamp(14px,1.6vw,24px) 0}
.tagline{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(17px,1.65vw,26px);letter-spacing:.06em;
  color:var(--ink);text-shadow:0 1px 14px rgba(30,20,10,.35);
}

/* Footer */
.foot{padding:0 var(--pad) calc(var(--pad)*.7)}
.foot-row{display:flex;align-items:center;gap:clamp(14px,2vw,28px)}
.cta{
  display:inline-flex;align-items:center;gap:.9em;white-space:nowrap;
  font-size:clamp(12px,.9vw,14px);letter-spacing:.2em;text-transform:uppercase;
  padding:.6em 0;
}
.cta svg{width:22px;height:11px;transition:transform .35s}
.cta:hover svg,.cta:focus-visible svg{transform:translateX(6px)}
.foot-line{flex:1;height:1px;background:var(--line)}
.legal{
  display:flex;flex-wrap:wrap;margin-top:12px;
  font-size:clamp(10px,.72vw,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
}
.legal span:not(:last-child)::after{content:"|";margin:0 .9em;opacity:.7}

a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}

/* Load sequence (JS adds .loaded) */
.reveal{opacity:0;transition:opacity 1.2s ease}
body.loaded .reveal{opacity:1}
body.loaded .title{transition-delay:.25s}
body.loaded .rule{transition-delay:.55s}
body.loaded .tagline{transition-delay:.7s}
body.loaded .foot{transition-delay:.9s}
.rule.reveal{transform:scaleX(0);transition:opacity 1.2s ease,transform 1.2s ease}
body.loaded .rule.reveal{transform:scaleX(1)}

/* Tablet */
@media (max-width:900px){
  .top{flex-direction:column;align-items:center;text-align:center}
  .nav{justify-content:center;padding-top:6px;gap:.5em 1em}
  .bg{background-position:58% 55%}
}
/* Mobile */
@media (max-width:600px){
  .nav i{display:none}
  .nav{gap:.6em 1.3em;font-size:10.5px}
  .title{letter-spacing:.08em;margin-right:-.08em;line-height:1.05}
  .legal{flex-direction:column;gap:4px;margin-top:14px}
  .legal span::after{display:none}
  .bg{background-position:52% 60%}
}
/* Short landscape phones */
@media (max-height:480px) and (orientation:landscape){
  .hero{padding:2vh var(--pad)}
  .legal{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bg,.reveal{transition:none!important}
}