:root{
  --background:#0a0a0a;
  --graphite:#141414;
  --bone:#eae4d8;
  --silver:#b3aea4;
  --blood:#7a2230;
  --border:rgba(234,228,216,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--background);color:var(--bone);
  font-family:"Jost",sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.grain::after{position:fixed}

.hairline{height:1px;width:100%;opacity:.25;background:linear-gradient(to right,transparent,var(--silver),transparent)}

.serif{font-family:"Cormorant Garamond",serif}
.display{font-family:"UnifrakturMaguntia",serif;font-weight:400}
.silver{color:var(--silver)}
.blood{color:var(--blood)}
.blood-c{color:var(--blood)}
.faint{color:rgba(179,174,164,.5)}
.eyebrow{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.42em}
.center{text-align:center}

.reveal{opacity:0;transform:translateY(24px);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}
.max-md{max-width:28rem}

.ico{width:1.75rem;height:1.75rem}
.ico-sm{width:1rem;height:1rem}
.ico-md{width:1.25rem;height:1.25rem}
.ico-lg{width:1.5rem;height:1.5rem}

.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:6rem 1.5rem}
.avatar{position:relative;width:10rem;height:10rem;margin:0 auto}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar-ring{position:absolute;inset:-.75rem;border:1px solid var(--border);border-radius:50%}
.h1{font-size:clamp(2.75rem,10vw,4.5rem);line-height:1.05}
.h1-sub{display:block;margin-top:.5rem;font-size:clamp(1.75rem,7vw,3rem)}
.lead{font-size:1.125rem;line-height:1.75;color:var(--silver)}

.btn{display:inline-flex;align-items:center;gap:.75rem;border:1px solid rgba(234,228,216,.7);
  padding:1rem 2rem;font-size:.65rem;text-transform:uppercase;letter-spacing:.42em;
  transition:background-color .5s,border-color .5s}
.btn:hover{border-color:var(--blood);background:var(--blood)}

.sec{padding:7rem 1.5rem}
.graphite{background:var(--graphite)}
.wrap-4{max-width:56rem;margin:0 auto}
.wrap-5{max-width:64rem;margin:0 auto}
.h2{margin-top:1.5rem;font-size:clamp(1.75rem,5vw,2.25rem)}
.body-copy{margin-top:2rem;max-width:42rem}
.body-copy.sm{max-width:36rem;margin-top:1.5rem}
.center-copy{max-width:28rem;margin:1.5rem auto 0}

.grid-spec{margin-top:4rem;display:grid;gap:1px;background:var(--border);border:1px solid var(--border)}
@media(min-width:640px){.grid-spec{grid-template-columns:1fr 1fr}}
.grid-spec .reveal{height:100%}
.spec{height:100%;background:var(--background);padding:2rem}
.spec h3{margin-top:1.5rem;font-size:.875rem;font-weight:400;text-transform:uppercase;letter-spacing:.25em}
.spec p{margin-top:.75rem;font-size:1rem;color:var(--silver)}

.gallery{margin-top:4rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(min-width:768px){.gallery{grid-template-columns:repeat(3,1fr)}}
.frame{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--graphite);aspect-ratio:1/1}
.frame.tall{aspect-ratio:3/4}
.frame-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.75rem;transition:transform .9s ease-out;z-index:2}
.frame:hover .frame-in{transform:scale(1.05)}
.frame-soon{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:1.5rem;color:var(--silver)}
.frame-lbl{font-size:.6rem;text-transform:uppercase;letter-spacing:.42em;color:rgba(179,174,164,.5)}
.frame-bar{position:absolute;bottom:0;left:0;height:1px;width:0;background:var(--blood);transition:width .7s;z-index:2}
.frame:hover .frame-bar{width:100%}

.grid-2{margin-top:3.5rem;display:grid;gap:1rem}
@media(min-width:640px){.grid-2{grid-template-columns:1fr 1fr}}
.quote{height:100%;border:1px solid var(--border);padding:2.5rem;text-align:center}
.soon{font-size:1.5rem;font-style:italic;color:var(--silver);position:relative;z-index:2}
.quote .eyebrow{margin-top:1rem;position:relative;z-index:2}

.ig{margin-top:3rem;display:flex;flex-direction:column;align-items:center;gap:1rem;
  border:1px solid var(--border);padding:2.5rem;transition:border-color .5s}
.ig:hover{border-color:var(--blood)}
@media(min-width:640px){.ig{flex-direction:row;justify-content:space-between}}
.ig-l{display:flex;align-items:center;gap:1rem}
.ig-h{font-size:1.25rem}

footer{padding:4rem 1.5rem}
.foot{max-width:56rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:2rem}
@media(min-width:640px){.foot{flex-direction:row;justify-content:space-between}}
.foot-h{font-size:1.25rem}
.foot-social{display:flex;align-items:center;gap:1.5rem;color:var(--silver)}
.foot-social a{transition:color .3s}
.foot-social a:hover{color:var(--bone)}

.fab{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;display:flex;width:3.5rem;height:3.5rem;
  align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(234,228,216,.4);
  background:rgba(10,10,10,.9);backdrop-filter:blur(6px);transition:background-color .5s,border-color .5s}
.fab:hover{border-color:var(--blood);background:var(--blood)}