@font-face{font-family:"Cormorant";src:url(assets/fonts/cormorant-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JBMono";src:url(assets/fonts/jbmono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --bg:#050506; --fg:#f2efe8; --muted:#a9a6ae; --accent:#d9c08a; --accent-rgb:217,192,138;
  --focus:#ffffff; --serif:"Cormorant","Cormorant Garamond",Georgia,serif;
  --mono:"JBMono","DejaVu Sans Mono",ui-monospace,monospace;
  --seal:clamp(140px,min(max(50vmin,min(72vw,40svh)),calc(100svh - 27rem)),460px); --h1:clamp(2.6rem,min(10.5vw,12svh),7.6rem);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg)}
body{font-family:var(--mono);overflow:hidden;-webkit-font-smoothing:antialiased;min-height:100svh}
::selection{background:rgba(var(--accent-rgb),.35);color:#fff}

#field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* giant ghost words: philosophy at the edge of perception */
.ghost{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  font-family:var(--serif);color:var(--fg);opacity:.028;line-height:.9}
.ghost span{position:absolute;white-space:nowrap;font-size:clamp(5rem,18vw,16rem);letter-spacing:-.02em}
.ghost span:nth-child(1){top:4%;left:-10%}
.ghost span:nth-child(2){top:40%;left:-30%;font-size:clamp(4rem,13vw,12rem)}
.ghost span:nth-child(3){bottom:2%;left:-5%}

/* the seam of the seal, across the whole world */
.seam{position:fixed;left:0;right:0;top:50%;height:1px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.22) 30%,rgba(var(--accent-rgb),.22) 70%,transparent)}

main{position:relative;z-index:2;min-height:100svh;display:grid;place-content:center;justify-items:center;
  padding:3.5rem 1.25rem 5.5rem;text-align:center;transition:transform 1.6s cubic-bezier(.7,0,.2,1)}
.kicker{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin:0 0 1.2rem}
.dia{color:var(--accent)}

.seal{margin:0;width:var(--seal);aspect-ratio:1;position:relative;cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
.seal img,.seal video{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;
  mix-blend-mode:lighten;opacity:.94;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 70%);
          mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 70%)}
.seal video{position:absolute;inset:0}
.seal::after{content:"";position:absolute;inset:-14%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.16),transparent 62%)}

h1{font-family:var(--serif);font-weight:400;margin:.4rem 0 0;line-height:1;
  font-size:var(--h1);letter-spacing:.01em;position:relative;
  background:linear-gradient(100deg,var(--fg) 0%,var(--fg) 38%,rgb(var(--accent-rgb)) 50%,var(--fg) 62%,var(--fg) 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
h1 .ch{display:inline-block;min-width:.25em}
/* as above, so below: the title has its reflection */
h1::after{content:attr(data-mirror);position:absolute;left:0;right:0;top:100%;transform:scaleY(-1);
  color:var(--fg);opacity:.13;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 70%);mask-image:linear-gradient(to top,#000,transparent 70%)}
.sub{margin:calc(var(--h1)*.62) 0 0;font-size:.78rem;letter-spacing:.18em;color:var(--muted);text-transform:uppercase}
.no-js .sub{display:none}

.sublim{position:fixed;z-index:3;margin:0;pointer-events:none;font-family:var(--serif);
  font-size:clamp(1rem,3.2vw,2.2rem);letter-spacing:.3em;text-transform:uppercase;color:var(--fg);opacity:0;white-space:nowrap}
.sublim.on{opacity:.55}
.sublim.off{opacity:0;transition:opacity .9s ease}

.toast{position:fixed;z-index:5;left:50%;top:1.4rem;transform:translateX(-50%);margin:0;max-width:min(92vw,40rem);
  font-size:.8rem;letter-spacing:.12em;color:var(--fg);text-align:center;padding:.7rem 1rem;
  background:rgba(5,5,6,.82);border:1px solid rgba(var(--accent-rgb),.45);border-radius:2px;opacity:0;
  transition:opacity .5s ease}
.toast.show{opacity:1}

footer{position:fixed;z-index:4;left:0;right:0;bottom:0;display:flex;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));font-size:.7rem;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.meta{flex:1;text-align:center}
.found{min-width:7rem;text-align:right;color:rgb(var(--accent-rgb))}
.ctl{font:inherit;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);background:rgba(5,5,6,.6);
  border:1px solid rgba(242,239,232,.35);padding:.55rem .8rem;border-radius:2px;cursor:pointer;min-height:44px}
.ctl:hover{border-color:rgb(var(--accent-rgb))}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

dialog{background:#0b0b0d;color:var(--fg);border:1px solid rgba(var(--accent-rgb),.5);max-width:min(92vw,36rem);
  padding:2rem 1.6rem;text-align:center}
dialog::backdrop{background:rgba(0,0,0,.75)}
blockquote{font-family:var(--serif);font-size:1.45rem;line-height:1.35;margin:0 0 1rem;color:rgb(var(--accent-rgb))}
.tr{font-family:var(--serif);font-size:1.15rem;line-height:1.4;color:var(--fg);margin:0 0 1.5rem}

/* easter-egg states */
html.flipped main{transform:rotate(180deg)}
html.trismegiste{--accent:#f0cf7a;--accent-rgb:240,207,122}
html.trismegiste h1{animation:sheen 2.4s linear infinite}
html.trismegiste .ghost{opacity:.05}
@keyframes sheen{to{background-position:-200% 0}}

h1{animation:sheen 9s linear infinite}
.ghost span:nth-child(1){animation:drift 70s linear infinite alternate}
.ghost span:nth-child(2){animation:drift 95s linear infinite alternate-reverse}
.ghost span:nth-child(3){animation:drift 80s linear infinite alternate}
.seal img{animation:breathe 7s ease-in-out infinite}
@keyframes drift{to{transform:translateX(22vw)}}
@keyframes breathe{50%{transform:scale(1.025)}}

@media (max-width:540px){
  footer{font-size:.62rem;gap:.5rem}
  .meta{display:none}
  main{padding-top:3.5rem}
}
@media (max-height:520px) and (orientation:landscape){
  :root{--seal:min(46svh,220px);--h1:clamp(1.8rem,11svh,3.4rem)}
  main{padding:1rem 1.25rem 3.8rem}
  .kicker{margin-bottom:.4rem}
  .sub{display:none}
  footer{padding-top:.4rem;padding-bottom:calc(.5rem + env(safe-area-inset-bottom))}
}