:root{
  --bg:#100e0d;
  --ink:#e6ddd0;
  --mute:#7c756b;
  --hair:rgba(230,221,208,.16);
  --acc:#e4c49a;
  --err:#c98980;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Hoefler Text",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font:16px/1.5 var(--serif)}
body{color-scheme:dark}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(228,196,154,.07), transparent 55%),
    radial-gradient(900px 600px at 50% 120%, rgba(0,0,0,.45), transparent 50%);
}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
button,select,input{
  font:12px/1.2 var(--mono);
  letter-spacing:.04em;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--hair);
  border-radius:0;
  padding:9px 14px;
}
button{cursor:pointer}
button:hover{border-color:var(--acc);color:var(--acc)}
button.primary{border-color:rgba(228,196,154,.45);color:var(--acc)}
input{width:7.5em}
.ghost{border-color:transparent;padding:9px 8px;color:var(--mute)}
.ghost:hover{border-color:transparent;color:var(--acc)}
.top{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 28px 0;
}
.mark{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:400;letter-spacing:.38em;text-transform:uppercase;
}
.mark img{width:22px;height:22px;display:block;flex:none}
.top-r{display:flex;align-items:center;gap:14px}
.pill{
  font:11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);border:1px solid var(--hair);padding:5px 9px;
}
.acct{font:11px/1 var(--mono);color:var(--mute)}
.stage{
  position:relative;z-index:1;
  min-height:calc(100vh - 88px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 24px 80px;text-align:center;
}
.wordmark{width:min(92vw,760px);margin:0 auto 28px}
.wordmark img{display:block;width:100%;height:auto}
.seal{width:min(52vw,420px);color:rgba(230,221,208,.38);margin-bottom:36px}
.seal svg{display:block;width:100%;height:auto}
.lede{
  max-width:22em;margin:0 auto 28px;
  font-size:22px;font-weight:400;font-style:italic;line-height:1.35;
  color:var(--ink);
}
.mint{
  font:italic 42px/1 var(--serif);
  letter-spacing:.02em;
  border:0;padding:8px 4px;background:none;
  color:var(--ink);
  box-shadow:0 1px 0 var(--hair);
}
.mint:hover{color:var(--acc);border:0;box-shadow:0 1px 0 var(--acc)}
.err{color:var(--err);font:13px/1.4 var(--mono);min-height:1.2em;margin:16px 0 0}
.foot{
  position:relative;z-index:1;
  padding:0 28px 24px;
  font:11px/1.5 var(--mono);letter-spacing:.06em;
  color:var(--mute);
}
.foot code{font:inherit;color:var(--ink)}
.token{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,0.85fr);
  gap:36px;align-items:start;
  padding:28px 28px 72px;max-width:1180px;margin:0 auto;
}
.frame{
  margin:0;background:#0b0a09;
  border:1px solid var(--hair);
  aspect-ratio:1;
}
.art{width:100%;height:100%;border:0;display:block;background:#0b0a09}
.rail h2{
  margin:0 0 8px;
  font:11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:400;
}
.rail section{margin:0 0 28px;padding:0}
.note{margin:0 0 10px;color:var(--mute);font-size:15px;font-style:italic}
.mono{font:12px/1.5 var(--mono);word-break:break-all;color:var(--ink)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 0}
.hold{
  display:flex;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--hair);
  font:13px/1.3 var(--mono);
}
.muted{color:var(--mute);font-style:italic}
@media(max-width:860px){
  .token{grid-template-columns:1fr;padding:18px 18px 64px;gap:24px}
  .top{padding:18px 18px 0}
  .mint{font-size:34px}
  .lede{font-size:19px}
}

.banner{
  position:relative;z-index:3;
  margin:0;padding:9px 28px;
  font:11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  text-align:center;
  color:var(--acc);
  border-bottom:1px solid var(--hair);
  background:rgba(228,196,154,.07);
}

.submit{
  position:relative;z-index:1;
  max-width:1080px;margin:0 auto;
  padding:28px 28px 96px;
}
.submit-lede{margin:12px 0 8px;text-align:left;max-width:28em}
.submit .note{max-width:40em}
.submit .note code{font:12px var(--mono);color:var(--ink)}
.lbl{
  display:block;margin:22px 0 8px;
  font:11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);
}
textarea, .fields input[type="text"], .fields input[type="email"]{
  width:100%;max-width:100%;
  font:13px/1.45 var(--mono);
  color:var(--ink);background:#0b0a09;
  border:1px solid var(--hair);border-radius:0;
  padding:12px 14px;
}
#script{min-height:220px;resize:vertical}
.fields input{width:100%;max-width:28em}
.check{
  display:flex;align-items:flex-start;gap:10px;
  margin:22px 0 8px;font-size:16px;font-style:italic;color:var(--ink);
}
.check input{width:auto;margin-top:4px;accent-color:var(--acc)}
.grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;margin:22px 0 8px;
}
.grid figure{margin:0}
.grid iframe{
  width:100%;aspect-ratio:1;border:1px solid var(--hair);
  background:#0b0a09;display:block;
}
.grid figcaption{margin-top:6px;font-size:11px;color:var(--mute)}
.nav{font:11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media(max-width:860px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .submit{padding:18px 18px 72px}
}

.piece{
  margin:6px 0 0;
  font:italic 22px/1.2 var(--serif);
  letter-spacing:.04em;
  font-weight:400;
  text-transform:none;
}