@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,300..700&display=swap');

/* ── Ultracomputation ───────────────────────────────────────────────
   One screen. The mark, the name, the way in, and where to write.
   Everything else lives in the calculator. */

:root{
  --ink:      #060504;
  --white:    #f2efe8;
  --grey:     #8b8377;   /* warm neutral, biased toward the accent */
  --grey-dim: #57514a;
  --gold:     #d2a93f;
  --gold-hi:  #f2d89a;
  --gold-deep:#5e4713;
  --hair-soft:rgba(210,169,63,.10);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --pad: 26px;
  --ease: cubic-bezier(.16,.84,.34,1);
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  min-height: 100svh;
  background: var(--ink);
  color: var(--white);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* faint film so the black is a material, not a void */
body::after{
  content:"";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(210,169,63,.055), transparent 62%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.65), transparent 55%);
  mix-blend-mode: screen;
  opacity: .9;
}

a{ color: inherit; text-decoration: none; }
a:focus-visible{ outline: 1px solid var(--gold); outline-offset: 4px; }

/* ── drawing sheet ───────────────────────────────────────────────── */

.sheet{
  position: fixed; inset: var(--pad); z-index: 40; pointer-events: none;
  border: 1px solid var(--hair-soft);
}
.tick{ position: absolute; width: 11px; height: 11px; }
.tick::before,.tick::after{ content:""; position:absolute; background: var(--gold); opacity:.5; }
.tick::before{ width: 11px; height: 1px; }
.tick::after{ width: 1px; height: 11px; }
.tl{ top:-1px; left:-1px; } .tr{ top:-1px; right:-1px; }
.bl{ bottom:-1px; left:-1px; } .br{ bottom:-1px; right:-1px; }
.tr::before,.br::before{ right:0; } .tr::after,.br::after{ right:0; }
.bl::before,.br::before{ bottom:0; } .bl::after,.br::after{ bottom:0; }

.rail{
  position: fixed; z-index: 41; pointer-events: none;
  font-family: var(--display); font-size: 9.5px; font-weight: 500;
  letter-spacing: .22em; color: var(--grey-dim);
  top: 50%;
}
.rail-l{ left: 8px;  transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.rail-r{ right: 8px; transform: translateY(-50%); writing-mode: vertical-rl; }

/* ── boot ────────────────────────────────────────────────────────── */

.boot{
  position: fixed; inset: 0; z-index: 90;
  background: var(--ink);
  display: grid; place-content: center; gap: 14px; justify-items: center;
  transition: opacity .7s var(--ease), visibility .7s;
}
.boot.done{ opacity: 0; visibility: hidden; }
.boot-bar{ width: min(38vw, 260px); height: 1px; background: var(--hair-soft); overflow: hidden; }
.boot-bar i{ display:block; height:100%; width:0; background: var(--gold); }
.boot-txt{
  font-size: 9.5px; font-weight: 500; letter-spacing: .38em;
  color: var(--grey-dim); padding-left: .38em;
}

/* ── the one screen ──────────────────────────────────────────────── */

.gate{
  position: relative; min-height: 100svh;
  display: grid; place-items: center; overflow: hidden;
  padding: calc(var(--pad) + 30px) 5vw;
}
.gate::before{
  content:""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(46% 20% at 50% 78%, rgba(210,169,63,.13), transparent 68%),
    radial-gradient(90% 60% at 50% 100%, rgba(210,169,63,.05), transparent 70%);
}
#shell-canvas{ position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; }
.gate-veil{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(54% 46% at 50% 48%,
    rgba(6,5,4,.94), rgba(6,5,4,.80) 52%, rgba(6,5,4,0) 84%);
}
.gate-copy{
  position: relative; z-index: 3; text-align: center;
  display: grid; justify-items: center;
  gap: clamp(18px, 2.6vw, 30px);
}
.gate-mark{ color: var(--gold); opacity: .92; line-height: 0; }

.wordmark{
  margin: 0;
  font-size: clamp(14px, 5.5vw, 70px);
  font-weight: 300;
  font-variation-settings: 'wdth' 115;
  letter-spacing: .14em;
  white-space: nowrap;
  text-transform: uppercase;
  line-height: 1;
  color: var(--white);
}
.wordmark .ch{
  display: inline-block;
  opacity: 0; transform: translateY(.34em);
  filter: blur(6px);
}
.wordmark.lit .ch{ animation: chIn .9s var(--ease) forwards; }
@keyframes chIn{ to{ opacity:1; transform:none; filter:blur(0); } }

.tagline{
  margin: 0;
  font-weight: 400;
  font-size: clamp(10px, 1.5vw, 12.5px);
  letter-spacing: .30em; text-transform: uppercase;
  color: var(--grey);
}

.cta{
  margin-top: clamp(4px, 1.6vw, 18px);
  font-size: clamp(11px, 1.3vw, 13px); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-hi);
  border: 1px solid rgba(210,169,63,.34);
  padding: 13px 26px;
  transition: color .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.cta:hover{ color: var(--ink); background: var(--gold); border-color: var(--gold); }

.mails{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px clamp(18px, 3vw, 34px);
  font-size: clamp(11px, 1.3vw, 13px); font-weight: 400;
  letter-spacing: .08em; color: var(--grey-dim);
}
.mails a{ transition: color .4s var(--ease); }
.mails a:hover{ color: var(--gold-hi); }

@media (max-width: 900px){
  :root{ --pad: 14px; }
  .rail{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .wordmark .ch{ opacity: 1; transform: none; filter: none; }
}