/* Landing page only. Shared colours, fonts and buttons live in theme.css. */

header.top{padding-block:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
header.top .mark{font-family:var(--display);font-size:1.6rem;letter-spacing:.04em}
nav{display:flex;gap:20px;flex-wrap:wrap;font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
nav a{color:var(--dim);text-decoration:none}nav a:hover{color:var(--blood-hi)}
nav{align-items:center}
@media(min-width:760px){header.top nav{flex:1;margin-left:28px}}
@media(max-width:759px){header.top nav{flex-basis:100%}}
nav a.nav-btn{margin-left:0}
nav a[href="play/"].nav-btn{margin-left:auto}
nav a.nav-btn{color:#f1eff4;padding:10px 18px;font-size:.78rem;transition:background .15s,transform .15s}
nav a.nav-btn:hover{color:#fff;background:#654090;transform:translateY(-1px)}
nav a.nav-btn:active{transform:none}

.hero{padding-block:64px 120px;position:relative;background:
  radial-gradient(ellipse at 70% 0%,color-mix(in srgb,var(--blood) 55%,transparent),transparent 60%),var(--bg2);
  clip-path:polygon(0 0,100% 0,100% 88%,94% 96%,88% 90%,80% 99%,71% 91%,63% 97%,55% 89%,46% 100%,38% 92%,29% 98%,20% 90%,11% 97%,5% 91%,0 98%)}
.hero h1{font-size:clamp(4.2rem,17vw,11rem);letter-spacing:.01em;margin:18px 0 6px}
.hero h1 span{color:var(--blood-hi);display:inline-block;transform:skewX(-6deg)}
.hero .tag{font-style:italic;font-size:1.35rem;max-width:34ch;color:var(--fg)}
.hero .meta{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}

section{padding-block:72px}
section h2{font-size:clamp(2.4rem,7vw,4rem);margin:10px 0 22px}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:36px}
.cols>*{min-width:0}
p{margin:0 0 1em;max-width:62ch}
.dropcap::first-letter{font-family:var(--display);font-size:4.4rem;float:left;line-height:.8;padding:6px 10px 0 0;color:var(--blood-hi)}

.tenets{counter-reset:t;list-style:none;margin:0;padding:0;display:grid;gap:0}
.tenets li{padding:22px 0 22px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:8px 28px}
.tenets li:last-child{border-bottom:1px solid var(--line)}
.tenets h3{font-size:1.9rem;color:var(--blood-hi)}
.tenets p{margin:0}
@media(max-width:560px){.tenets li{grid-template-columns:1fr}}

.dark{background:var(--bg2);clip-path:polygon(0 4%,7% 0,15% 5%,26% 0,38% 4%,50% 0,61% 5%,73% 1%,86% 5%,100% 0,100% 96%,92% 100%,80% 95%,67% 100%,54% 96%,41% 100%,28% 95%,14% 100%,0 96%);padding-block:110px}
.plague{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:28px;margin-top:30px}
.plague div{border-left:2px solid var(--blood);padding-left:16px}
.plague b{font-family:var(--display);font-weight:400;font-size:1.7rem;display:block;color:var(--fg)}
.plague span{color:var(--dim);font-size:.98rem;line-height:1.5;display:block}

.status{width:100%;border-collapse:collapse;font-size:1rem}
.status th,.status td{text-align:left;padding:14px 12px 14px 0;border-top:1px solid var(--line);vertical-align:top}
.status th{font-family:var(--label);letter-spacing:.1em;font-weight:400;white-space:nowrap}
.pill{font-family:var(--label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;background:var(--bg2);color:var(--candle);box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap}
.pill.live{color:var(--blood-hi);box-shadow:inset 0 0 0 1px var(--blood)}
.scroll-x{overflow-x:auto}

blockquote{margin:36px 0 0;padding:0 0 0 22px;border-left:3px solid var(--blood);font-style:italic;font-size:1.3rem;max-width:44ch}
blockquote cite{display:block;font-style:normal;font-family:var(--label);letter-spacing:.14em;font-size:.78rem;color:var(--dim);margin-top:10px;text-transform:uppercase}

form{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
input[type=email]{flex:1 1 260px;min-width:0;background:var(--bg2);color:var(--fg);border:0;box-shadow:inset 0 -2px 0 var(--line);font:inherit;padding:14px 12px}
input[type=email]:focus{outline:none;box-shadow:inset 0 -2px 0 var(--blood-hi)}
#note{margin-top:14px;color:var(--dim);font-style:italic;min-height:1.6em}

footer{padding-block:60px 40px;color:var(--dim);font-size:.9rem}
footer .mark{font-family:var(--display);font-size:2rem;color:var(--fg)}
.theme{background:none;border:0;color:var(--dim);font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;font-size:.75rem;cursor:pointer;padding:0}
@media(prefers-reduced-motion:no-preference){.hero h1 span{animation:flick 7s infinite steps(1)}@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.55}94%{opacity:1}96%{opacity:.7}97%{opacity:1}}}



/* Logo */
.mark{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.mark img{display:block}
.hero .wrap{position:relative}
.hero-mark{position:absolute;right:max(16px,env(safe-area-inset-right,0px));top:96px;width:clamp(150px,26vw,300px);height:auto;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--blood-hi) 40%,transparent));pointer-events:none}
@media(max-width:700px){.hero-mark{display:none}}

/* Tidy-up: rules grid, join band */
#join{padding-block:56px;background:var(--bg2);position:relative}
#join .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px 56px;align-items:center}
#join h2{margin:6px 0 12px;font-size:clamp(2rem,5vw,3rem)}
#join p{margin:0}
#join form{margin-top:0}
#join #note{grid-column:1/-1;margin-top:0}
@media(max-width:820px){#join .wrap{grid-template-columns:minmax(0,1fr)}}
#lands{padding-top:0}
#rules{padding-top:96px}
.hero{padding-bottom:96px}

/* Art */
.art{margin:0}
.art img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.art.wide{max-width:900px;margin:44px auto 0}

/* Phones */
@media (max-width:640px){
  header.top{padding-block:12px 4px}
  header.top nav{gap:0 16px;align-items:center}
  header.top nav a:not(.nav-btn){padding:12px 0}
  header.top nav a.nav-btn{flex:1 1 calc(50% - 8px);text-align:center;margin-left:0!important;padding:14px 12px;font-size:.74rem}
  .hero{padding-block:36px 90px}
  .hero .tag{font-size:1.2rem}
  section{padding-block:52px}
  #join{padding-block:40px}
  .rgrid,.cols{gap:28px}
  footer .note a{display:inline-block;padding:12px 6px}
  footer .theme{padding:14px 0}
  input[type=email]{font-size:16px}
}
@media (pointer:coarse){footer .note a{display:inline-block;padding:12px 6px}footer .theme{padding:14px 0}}