/* TKO Tarot shared styles. Linked by every page. */
/* Public Pixel (CC0) is the brand face, self-hosted so there is no Google
   Fonts dependency. It is used for the whole site, not just the wordmark: it
   is markedly more readable at body sizes than a square 8x8 face, having
   narrower glyphs and true lowercase. */
@font-face{
  font-family:"Public Pixel";
  src:url("/static/fonts/PublicPixel.ttf") format("truetype");
  font-display:swap;
  font-weight:normal;
}

:root{
  --black:#000000; --navy:#25316C; --peri:#9BAFD4;
  --red:#D4392E; --red-deep:#8F2B22; --mint:#7BBDA7; --yellow:#F5E956;
  --px:4px;
}
*{box-sizing:border-box}
html{background:var(--black)}
body{
  margin:0; background:var(--black); color:var(--mint);
  font-family:"Public Pixel",ui-monospace,"Courier New",monospace;
  font-size:13px; line-height:1.95; -webkit-font-smoothing:none;
  image-rendering:pixelated;
  padding:0 16px;
  overflow-x:hidden;
}
img{max-width:100%; image-rendering:pixelated}

/* scanlines */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:99;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 4px);
  mix-blend-mode:multiply;
}

.wrap{max-width:900px; margin:0 auto; padding-block:48px 64px}

header{text-align:center}
.logo{width:100%; max-width:720px; height:auto; margin:0 auto 8px}

/* Wordmark set to the lockup's metrics: Public Pixel, tracking 10, condensed
   to 60% horizontally and 96% vertically. The horizontal squeeze is what makes
   it read taller and heavier than a square pixel face.
   The scaling is a transform rather than font-stretch because neither Public
   Pixel nor Press Start 2P is a variable font. The wrapper clips rather than
   the page, so the wide pre-transform layout box never causes a scrollbar. */
.wordmark{
  width:100%; display:flex; justify-content:center; overflow:hidden;
  margin:2px 0 0;
}
.wordmark span{
  display:inline-block; white-space:nowrap;
  font-family:"Public Pixel",ui-monospace,monospace;
  color:var(--mint);
  font-size:clamp(17px, 5.4vw, 47px);
  line-height:1.25;
  letter-spacing:.01em;
  text-transform:uppercase;
  transform:scaleX(.60) scaleY(.96);
  transform-origin:center top;
}

.slogan{
  color:var(--peri); font-size:12px; line-height:2.2;
  text-align:center; margin:24px auto 0; max-width:620px;
  text-transform:uppercase; letter-spacing:.5px;
}
.slogan b{color:var(--yellow); font-weight:normal}

/* pixel panel: stepped corners via layered box-shadows, no border-radius */
.panel{
  margin:48px auto 0; max-width:660px;
  background:#070707;
  padding:28px 24px;
  box-shadow:
    0 calc(var(--px)*-1) 0 0 var(--navy),
    0 var(--px) 0 0 var(--navy),
    calc(var(--px)*-1) 0 0 0 var(--navy),
    var(--px) 0 0 0 var(--navy);
}
.panel h2{
  color:var(--peri); font-size:14px; margin:0 0 20px; line-height:1.8;
  text-transform:uppercase;
}
.panel p{margin:0 0 18px; font-size:12px; line-height:2.2; color:var(--mint)}
.panel p:last-child{margin-bottom:0}

ul.roster{list-style:none; padding:0; margin:0}
ul.roster li{
  font-size:12px; line-height:2.4; color:var(--peri);
  padding-left:22px; position:relative;
}
ul.roster li::before{
  content:"\25A0"; position:absolute; left:0; color:var(--red); font-size:9px;
}
ul.roster li span{color:#4d5e7a}

.cta{text-align:center; margin-top:44px}
a.btn{
  display:inline-block; text-decoration:none;
  font-family:inherit; font-size:13px; line-height:1;
  color:#fff; background:var(--red);
  padding:18px 26px; text-transform:uppercase;
  box-shadow:
    0 var(--px) 0 0 var(--red-deep),
    0 calc(var(--px)*2) 0 0 #000;
  transition:transform .04s steps(1), box-shadow .04s steps(1);
}
a.btn:hover{background:#e5433a}
a.btn:active{
  transform:translateY(var(--px));
  box-shadow:0 0 0 0 var(--red-deep), 0 var(--px) 0 0 #000;
}
.cta small{display:block; margin-top:20px; font-size:11px; color:#4d5e7a; line-height:2.2}

/* ---- form ---- */
form{margin-top:26px}
label{
  display:block; font-size:11px; color:var(--peri);
  text-transform:uppercase; letter-spacing:1px; margin:18px 0 8px;
}
input,select,textarea{
  width:100%; font-family:inherit; font-size:12px; line-height:1.8;
  color:var(--mint); background:#000; padding:12px;
  border:0; outline:0; -webkit-appearance:none; appearance:none;
  box-shadow:
    0 -2px 0 0 var(--navy), 0 2px 0 0 var(--navy),
    -2px 0 0 0 var(--navy), 2px 0 0 0 var(--navy);
}
input:focus,select:focus,textarea:focus{
  color:#fff;
  box-shadow:
    0 -2px 0 0 var(--peri), 0 2px 0 0 var(--peri),
    -2px 0 0 0 var(--peri), 2px 0 0 0 var(--peri);
}
textarea{resize:vertical; min-height:96px}
select{cursor:pointer}
option{background:#000; color:var(--mint)}

/* honeypot: off-screen, never announced, real people never fill it */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.proof{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:30px 0 4px; font-size:10px; text-transform:uppercase;
  letter-spacing:1px; color:#4d5e7a;
}
.proof-label{color:var(--peri)}
/* ---- bot check animation ----
   The proof of work takes anywhere from a moment to a couple of seconds
   depending on the device, which is exactly the kind of unexplained wait that
   makes people abandon a form. So it gets something to watch, and a name for
   what it is doing. */
.ring{
  position:relative; flex:0 0 auto; width:132px; height:56px;
  background:#000; overflow:hidden;
  box-shadow:
    0 -2px 0 0 var(--navy), 0 2px 0 0 var(--navy),
    -2px 0 0 0 var(--navy), 2px 0 0 0 var(--navy);
}
.ropes{
  position:absolute; left:0; right:0; top:9px; height:22px;
  background:
    linear-gradient(to bottom,
      var(--peri) 0 2px, transparent 2px 10px,
      var(--peri) 10px 12px, transparent 12px 20px,
      var(--peri) 20px 22px);
  opacity:.5;
}
.ring .head{
  position:absolute; right:22px; bottom:2px;
  height:44px; width:25px; image-rendering:pixelated;
}
.ring .glove{
  position:absolute; left:-44px; bottom:16px;
  height:22px; width:40px; image-rendering:pixelated;
}
.ring .stars,.ring .ko{
  position:absolute; opacity:0; pointer-events:none;
  color:var(--yellow); font-size:9px; line-height:1;
}
.ring .stars{right:14px; top:6px}
.ring .stars i{position:absolute; left:-12px; top:8px; font-style:normal}
.ring .stars b{position:absolute; left:10px; top:11px; font-weight:normal}
.ring .ko{
  right:30px; top:16px; font-size:15px; color:var(--red);
}

/* looping while the proof is being computed */
.proof.busy .glove{animation:jab 1s steps(6) infinite}
.proof.busy .head{animation:rock 1s steps(6) infinite}
.proof.busy .stars{animation:pop 1s steps(2) infinite}

/* settled state once it clears */
.proof.done .glove{left:14px; bottom:16px}
.proof.done .ko{opacity:1; animation:blink 1s steps(1) infinite}
.proof.done .head{transform:translate(6px,2px) rotate(6deg)}

@keyframes jab{
  0%   {left:-44px}
  55%  {left:44px}
  70%  {left:40px}
  100% {left:-44px}
}
@keyframes rock{
  0%,54%  {transform:translate(0,0)}
  58%     {transform:translate(7px,1px) rotate(7deg)}
  72%     {transform:translate(3px,0) rotate(3deg)}
  100%    {transform:translate(0,0)}
}
@keyframes pop{
  0%,54%  {opacity:0}
  58%,74% {opacity:1}
  80%,100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .proof.busy .glove,.proof.busy .head,.proof.busy .stars,
  .proof.done .ko{animation:none}
  .proof.busy .glove{left:14px}
}

.meter{
  flex:1 1 120px; min-width:120px; height:12px; background:#000;
  box-shadow:
    0 -2px 0 0 var(--navy), 0 2px 0 0 var(--navy),
    -2px 0 0 0 var(--navy), 2px 0 0 0 var(--navy);
}
.meter-fill{
  height:100%; width:0; background:var(--mint);
  transition:width .1s steps(4);
}
.proof.done .meter-fill{background:var(--yellow)}
.proof.done .proof-state{color:var(--yellow)}

button.btn{
  display:block; width:100%; margin-top:28px; cursor:pointer;
  font-family:inherit; font-size:13px; line-height:1; border:0;
  color:#fff; background:var(--red); padding:18px 26px; text-transform:uppercase;
  box-shadow:0 var(--px) 0 0 var(--red-deep), 0 calc(var(--px)*2) 0 0 #000;
  transition:transform .04s steps(1), box-shadow .04s steps(1);
}
button.btn:hover:not(:disabled){background:#e5433a}
button.btn:active:not(:disabled){
  transform:translateY(var(--px));
  box-shadow:0 0 0 0 var(--red-deep), 0 var(--px) 0 0 #000;
}
button.btn:disabled{background:#3a3a3a; box-shadow:0 var(--px) 0 0 #1a1a1a; cursor:wait}

.formnote{
  margin:18px 0 0 !important; font-size:11px !important; line-height:2 !important;
  min-height:18px; color:var(--peri) !important;
}
.formnote.err{color:var(--red) !important}
.formnote.ok{color:var(--yellow) !important}

footer{
  margin-top:64px; text-align:center;
  font-size:11px; color:#39424f; line-height:2.2;
}
footer .blink{color:var(--yellow); animation:blink 1.2s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

@media (max-width:560px){
  /* Wordmark set to the lockup's metrics: Public Pixel, tracking 10, condensed
   to 60% horizontally and 96% vertically. The horizontal squeeze is what makes
   it read taller and heavier than a square pixel face.
   The scaling is a transform rather than font-stretch because neither Public
   Pixel nor Press Start 2P is a variable font. The wrapper clips rather than
   the page, so the wide pre-transform layout box never causes a scrollbar. */
.wordmark{
  width:100%; display:flex; justify-content:center; overflow:hidden;
  margin:2px 0 0;
}
.wordmark span{
  display:inline-block; white-space:nowrap;
  font-family:"Public Pixel",ui-monospace,monospace;
  color:var(--mint);
  font-size:clamp(17px, 5.4vw, 47px);
  line-height:1.25;
  letter-spacing:.01em;
  text-transform:uppercase;
  transform:scaleX(.60) scaleY(.96);
  transform-origin:center top;
}

.slogan{font-size:9px}
  .panel{padding:22px 16px}
  .panel h2{font-size:12px}
  .panel p, ul.roster li{font-size:11px}
  a.btn{font-size:11px; padding:16px 18px}
}

/* ---- events ---- */
.backlink{
  display:inline-block; margin-bottom:28px; font-size:11px;
  color:var(--peri); text-decoration:none; text-transform:uppercase;
}
.backlink:hover{color:var(--mint)}

.pagehead{text-align:center; margin-bottom:8px}
.pagehead img{width:100%; max-width:420px; height:auto}
.pagehead h1{
  color:var(--mint); font-size:clamp(15px,4vw,26px); margin:14px 0 6px;
  text-transform:uppercase; letter-spacing:.04em; line-height:1.4;
}
.pagehead p{color:#4d5e7a; font-size:11px; margin:0; line-height:2}

.event{
  margin:36px auto 0; max-width:660px; background:#070707; padding:26px 24px;
  box-shadow:
    0 -4px 0 0 var(--navy), 0 4px 0 0 var(--navy),
    -4px 0 0 0 var(--navy), 4px 0 0 0 var(--navy);
}
.event.past{opacity:.55}

.datechip{
  display:inline-block; background:var(--red); color:#fff;
  font-size:11px; padding:9px 12px; text-transform:uppercase;
  letter-spacing:.04em; line-height:1;
  box-shadow:0 3px 0 0 var(--red-deep);
}
.event.past .datechip{background:#3a3a3a; box-shadow:0 3px 0 0 #1a1a1a}

.event h2{
  color:var(--peri); font-size:clamp(13px,3.2vw,17px); line-height:1.6;
  margin:20px 0 4px; text-transform:uppercase;
}
.event .venue{color:var(--mint); font-size:12px; margin:0 0 18px; line-height:2}
.event .venue a{color:var(--mint)}
.event p{color:var(--mint); font-size:12px; line-height:2.2; margin:0 0 16px}
.event p:last-child{margin-bottom:0}

dl.facts{margin:0 0 20px; padding:0; font-size:11px; line-height:2.1}
dl.facts div{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:4px}
dl.facts dt{color:#4d5e7a; min-width:96px; text-transform:uppercase; margin:0}
dl.facts dd{color:var(--mint); margin:0; flex:1 1 200px}

a.maplink{
  display:inline-block; margin-top:4px; color:var(--peri);
  font-size:11px; text-decoration:none; border-bottom:2px solid var(--navy);
}
a.maplink:hover{color:var(--yellow); border-bottom-color:var(--yellow)}

/* next-event teaser on the home page */
.teaser{
  display:block; margin-top:20px; padding:18px 20px; text-decoration:none;
  background:#050505;
  box-shadow:0 -2px 0 0 var(--navy), 0 2px 0 0 var(--navy),
             -2px 0 0 0 var(--navy), 2px 0 0 0 var(--navy);
}
.teaser:hover{box-shadow:0 -2px 0 0 var(--mint), 0 2px 0 0 var(--mint),
             -2px 0 0 0 var(--mint), 2px 0 0 0 var(--mint)}
.teaser .when{color:var(--red); font-size:10px; text-transform:uppercase; letter-spacing:.05em}
.teaser .what{color:var(--peri); font-size:12px; line-height:1.9; margin-top:8px; display:block}
.teaser .where{color:#4d5e7a; font-size:10px; margin-top:6px; display:block}

@media (max-width:560px){
  .event{padding:20px 16px}
  .event .venue, .event p{font-size:11px}
  dl.facts dt{min-width:0; flex:0 0 100%}
}