@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Inter:wght@300;400&display=swap');

:root{
  --stone:#a89988;
  --stone-dark:#706256;
  --ink:#302923;
  --bronze:#9b7650;
  --cream:#e7ded1;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:#887a6b;color:var(--ink);font-family:Inter,Arial,sans-serif;font-weight:300}

.threshold{
  position:relative;width:100%;height:100vh;min-height:620px;
  overflow:hidden;
  background:
    linear-gradient(115deg,rgba(214,202,187,.72),rgba(119,104,90,.35) 45%,rgba(54,44,36,.8)),
    #9a8c7c;
}
.texture{
  position:absolute;inset:0;opacity:.22;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0,rgba(255,255,255,.08) 1px,transparent 1px,transparent 5px),
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.18),transparent 30%),
    radial-gradient(circle at 80% 70%,rgba(40,30,22,.18),transparent 35%);
  mix-blend-mode:soft-light;
}
.image-fragments{position:absolute;inset:0;overflow:hidden;opacity:.27;filter:sepia(.18) saturate(.65)}
.fragment{
  position:absolute;background-image:url('assets/kyren-reference.jpg');
  background-size:cover;background-position:center;
  border:1px solid rgba(239,228,211,.32);
  box-shadow:0 20px 70px rgba(31,24,18,.18);
  transition:transform 8s ease;
}
.f1{width:48vw;height:35vh;left:-7vw;top:-4vh;background-position:left top;transform:rotate(-3deg)}
.f2{width:42vw;height:28vh;right:-5vw;top:17vh;background-position:center;transform:rotate(2deg)}
.f3{width:55vw;height:32vh;right:-12vw;bottom:-7vh;background-position:right bottom;transform:rotate(-2deg)}
.threshold:hover .f1{transform:rotate(-3deg) translate3d(15px,8px,0) scale(1.03)}
.threshold:hover .f2{transform:rotate(2deg) translate3d(-12px,10px,0) scale(1.04)}
.threshold:hover .f3{transform:rotate(-2deg) translate3d(-18px,-10px,0) scale(1.03)}

.brand{position:absolute;z-index:5;right:4.8vw;top:34px;text-align:center;color:#e7ded1}
.mark{width:120px}
.symbol{
  display:block;margin:auto auto 7px;width:31px;height:31px;
  border:1px solid var(--bronze);color:transparent;
  clip-path:polygon(50% 0,65% 22%,78% 10%,100% 28%,100% 78%,50% 100%,0 78%,0 28%,22% 10%,35% 22%);
}
.name{display:block;font:400 20px/1 "Cormorant Garamond",Georgia,serif;letter-spacing:.32em;padding-left:.32em}
.sub{display:block;margin-top:6px;font-size:6px;letter-spacing:.3em;padding-left:.3em}

.message{
  position:absolute;z-index:4;left:11vw;top:50%;transform:translateY(-50%);
  max-width:780px;
}
.eyebrow{font-size:8px;letter-spacing:.38em;color:#e7ded1;margin:0 0 24px}
.line{display:block;width:42px;height:1px;background:var(--bronze);margin-bottom:30px}
h1{
  margin:0;color:#f0e8dc;
  font:400 clamp(64px,9vw,128px)/.78 "Cormorant Garamond",Georgia,serif;
  letter-spacing:-.045em;text-shadow:0 10px 30px rgba(35,26,19,.15)
}
h1 em{color:#d5b48d;font-style:italic}
.quiet{
  margin:38px 0 0 4px;color:#e3d8ca;
  font:300 clamp(19px,2.1vw,27px)/1.3 "Cormorant Garamond",Georgia,serif;
  letter-spacing:.01em
}
.enter{
  position:absolute;z-index:5;left:11vw;bottom:9vh;
  display:flex;align-items:center;gap:20px;color:#efe6d9;text-decoration:none;
  font-size:7px;letter-spacing:.32em;border-bottom:1px solid rgba(231,222,209,.45);
  padding:0 0 12px
}
.enter i{font-style:normal;font-size:18px;color:#c8a57d;transition:transform .4s ease}
.enter:hover i{transform:translateX(7px)}
.edge-note{
  position:absolute;z-index:5;right:5vw;bottom:8vh;
  color:#e2d6c7;font-size:6px;letter-spacing:.3em;writing-mode:vertical-rl;
  opacity:.7
}
@media(max-width:700px){
  .brand{top:22px;right:6vw}.mark{width:96px}.name{font-size:17px}
  .message{left:8vw;right:7vw}.message h1{font-size:clamp(58px,17vw,88px)}
  .f1{width:70vw}.f2{width:62vw}.f3{width:78vw}
  .enter{left:8vw;bottom:7vh}.edge-note{display:none}
}

.symbol-img{width:42px;height:62px;object-fit:contain;display:block;margin:0 auto 8px;filter:brightness(0) saturate(100%)}