/* The Hot Mess Line :: v0.14
   Good machinery. Human surface. Controlled imperfection, not grunge cosplay. */

:root{
  --ground:#141110;
  --ground-2:#1C1816;
  --paper:#F3EDE4;
  --paper-2:#E6DCCD;
  --dim:#B9AFA3;
  --line:#3C332E;
  --hot:#FF5A2E;
  --hot-dark:#C63B19;
  --spot:#9FB4A8;
  --ink:#171210;
  --pad:22px;
  --measure:42rem;
}

*{box-sizing:border-box}
html{background:var(--ground);color:var(--paper);-webkit-text-size-adjust:100%;overflow-x:hidden}
img,svg,input,textarea,select{max-width:100%}
body{
  margin:0;overflow-x:hidden;
  font:400 1.05rem/1.55 'DM Sans',Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 7%,rgba(255,90,46,.045),transparent 18rem),
    radial-gradient(circle at 83% 27%,rgba(159,180,168,.025),transparent 22rem),
    var(--ground);
  color:var(--paper);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.025;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.62' numOctaves='3' seed='31'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:var(--paper);text-decoration-color:var(--hot);text-decoration-thickness:1.5px;text-underline-offset:.16em}
a:hover{color:var(--hot)}
::selection{background:var(--hot);color:var(--ground)}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--hot);color:var(--ground);padding:8px 12px;z-index:999}
.skip:focus{left:8px}

/* ================= header ================= */
.head{position:sticky;top:0;z-index:20;background:rgba(20,17,16,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.head .band{background:transparent;color:#FFF9F5;padding:0 4px;overflow:hidden}
.head .band p{
  max-width:44rem;margin:-2px auto 0;padding:12px calc(var(--pad) + 2px) 11px;
  font:800 .8rem/1.55 'Syne',sans-serif;letter-spacing:.085em;text-transform:uppercase;
  background:var(--hot);color:#FFF9F5;
  transform:rotate(-.22deg);transform-origin:center;
  clip-path:polygon(.4% 4%,99.5% 0,100% 91%,68% 100%,31% 95%,0 100%);
}
.head .band span{font-weight:800}
.head .band i{font-style:normal;opacity:.6;margin:0 .35em}
.head .band a{color:#FFF9F5;text-decoration-color:rgba(255,249,245,.55);text-decoration-thickness:1.5px;text-underline-offset:.2em}
.head .band a:hover{color:#FFF9F5;text-decoration-color:#FFF9F5}

.bar{max-width:42rem;margin:0 auto;padding:11px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:14px}
.mark{
  position:relative;display:inline-flex;align-items:baseline;gap:.04em;
  font:800 1.02rem/1 'Syne',sans-serif;letter-spacing:.01em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
}
.mark b{color:var(--hot);font-weight:800;transform:rotate(-2deg);display:inline-block}
.mark::after{content:"";position:absolute;left:23%;right:23%;bottom:-6px;height:2px;background:var(--hot);transform:rotate(-3deg);opacity:.7}
.mark:hover{color:var(--paper)}

.nav{position:relative}
.nav>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;font:800 .74rem/1 'Syne',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:6px 2px}
.nav>summary::-webkit-details-marker{display:none}
.nav>summary i{display:block;width:22px;height:2px;background:var(--paper);position:relative;transform:rotate(-1deg)}
.nav>summary i::before,.nav>summary i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--paper)}
.nav>summary i::before{top:-7px;transform:rotate(2deg)}.nav>summary i::after{top:7px;transform:rotate(-2deg)}
.nav[open]>summary i{background:transparent}.nav[open]>summary i::before{top:0;transform:rotate(45deg);background:var(--hot)}.nav[open]>summary i::after{top:0;transform:rotate(-45deg);background:var(--hot)}
.nav ul{position:absolute;right:0;top:calc(100% + 11px);z-index:30;min-width:16.3rem;margin:0;padding:8px;list-style:none;background:var(--ground-2);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.5);transform:rotate(.25deg)}
.nav li a{display:block;padding:11px 12px;text-decoration:none;font:700 .92rem/1.2 'Syne',sans-serif;letter-spacing:.02em;color:var(--paper)}
.nav li a small{display:block;font:400 .82rem/1.3 'DM Sans',Arial,sans-serif;color:var(--dim);margin-top:3px}
.nav li a:hover{background:var(--ground);color:var(--hot)}.nav li a[aria-current]{color:var(--hot)}
.nav li.sep{height:1px;background:var(--line);margin:6px 4px;transform:rotate(-.8deg)}

/* ================= page ================= */
.page{max-width:42rem;margin:0 auto;padding:0 var(--pad) 46px}
section{position:relative;padding:40px 0 8px}
section+section::before{content:"";position:absolute;left:-3px;right:2px;top:0;height:1px;background:var(--line);transform:rotate(-.28deg)}
section:first-of-type{padding-top:30px}
.rule{height:1px;background:var(--line);margin:26px 0;transform:rotate(-.3deg)}

/* ================= type ================= */
.wordmark{font:800 clamp(2.4rem,11vw,4.4rem)/.94 'Syne',sans-serif;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 18px;overflow-wrap:break-word}
.wordmark b{display:block;color:var(--hot);font-weight:800;transform:rotate(-1deg);transform-origin:left center;margin-left:-.02em;text-shadow:1px 0 0 rgba(255,90,46,.2)}
h1.plain,h2{font:800 clamp(1.55rem,6.4vw,2.3rem)/1.06 'Syne',sans-serif;letter-spacing:-.015em;margin:0 0 14px}
h1.plain .num,h2 .num{color:var(--hot);display:inline-block;transform:rotate(-1.2deg)}
h3{font:700 1rem/1.3 'Syne',sans-serif;letter-spacing:.03em;margin:24px 0 8px;text-transform:uppercase;color:var(--dim)}
.kick{font:800 .74rem/1.4 'Syne',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--hot);margin:0 0 12px}
p{margin:0 0 1em}.lead{font-size:1.22rem;line-height:1.4}.dim{color:var(--dim)}.hot{color:var(--hot)}.spot{color:var(--spot)}
em,i{font-style:italic}
.pitch{margin:2px 0 22px}.pitch p{margin:0;font:500 clamp(1.5rem,6.6vw,2.2rem)/1.15 'DM Sans',Arial,sans-serif}.pitch p+p{color:var(--hot);margin-top:6px}
.hero-topline{display:flex;align-items:center;gap:8px}.hero-topline .kick{margin-right:auto}

/* ================= physical artifacts ================= */
.scrap{position:relative;display:inline-block;background:var(--paper);color:var(--ink);box-shadow:5px 7px 0 rgba(0,0,0,.22);clip-path:polygon(1.5% 3%,96.8% 0,100% 94%,72% 98%,45% 95%,18% 100%,0 94%)}
.call-somebody{float:right;width:min(15.5rem,46%);min-height:104px;margin:-8px 2px 18px 22px;padding:18px 17px 18px 86px;transform:rotate(2.4deg);display:flex;align-items:center}
.call-somebody img{position:absolute;left:11px;top:17px;width:72px;height:72px;transform:rotate(-6deg)}
.call-somebody strong{display:block;font:800 1.28rem/.92 'Syne',sans-serif;letter-spacing:.02em}.call-somebody small{display:block;font:.92rem/1.25 'DM Sans',Arial,sans-serif;margin-top:5px}
.tiny-rule{padding:13px 15px;margin:22px 0 12px;transform:rotate(-1deg);font-size:.97rem}.tiny-rule strong{font:800 .78rem 'Syne',sans-serif;letter-spacing:.12em;margin-right:.35em}
.next-thing{margin:24px 0 18px;padding:15px 18px;transform:rotate(1deg)}.next-thing span,.next-thing strong{display:block;font-family:'Syne',sans-serif;font-weight:800}.next-thing span{font-size:.75rem;letter-spacing:.15em;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--hot-dark)}.next-thing strong{font-size:1.3rem;margin-top:4px}
@media(max-width:560px){.call-somebody{float:none;width:88%;min-height:112px;margin:0 0 26px 6%;padding:20px 22px 20px 104px;transform:rotate(1.5deg)}.call-somebody img{left:15px;top:18px;width:82px;height:82px}.call-somebody strong{font-size:1.48rem;line-height:.9}}

/* ================= pre-open ================= */
.preopen{position:relative;margin:26px 0 14px;padding:16px 18px 15px;border-left:3px solid var(--hot);background:var(--ground-2);transform:rotate(-.08deg)}
.preopen>p{font-size:.98rem;color:var(--dim);margin:0}
.preopen>p+p{margin-top:11px}
.preopen strong{color:var(--paper)}
.build-help{padding-top:11px;border-top:1px solid var(--line)}
.build-help a{font-weight:700}

/* ================= doors ================= */
.doors{display:grid;gap:13px;margin:28px 0 6px}@media(min-width:620px){.doors{grid-template-columns:1fr 1fr}.doors .wide{grid-column:1/-1}}
.door{position:relative;display:block;padding:22px 18px 17px;text-decoration:none;background:var(--ground-2);border:1px solid var(--line)}
.door:nth-child(1){transform:rotate(-.35deg)}.door:nth-child(2){transform:rotate(.45deg)}.door.wide{transform:rotate(-.12deg)}
.door .tape{position:absolute;right:12px;top:-9px;background:var(--paper-2);color:var(--ink);padding:4px 7px;font:800 .56rem/1 'Syne',sans-serif;letter-spacing:.08em;transform:rotate(2deg);opacity:.92}
.door b{display:block;font:800 1.14rem/1.15 'Syne',sans-serif;letter-spacing:-.01em;color:var(--paper)}.door small{display:block;font:400 .98rem/1.4 'DM Sans',Arial,sans-serif;color:var(--dim);margin-top:7px}.door:hover{border-color:var(--hot);color:var(--paper)}.door:hover b{color:var(--hot)}
.calm-door{border-color:#4D4641;background:#181513}

/* ================= the mess cards ================= */
.mess{list-style:none;margin:24px 0 10px;padding:0;display:grid;gap:10px}@media(min-width:620px){.mess{grid-template-columns:1fr 1fr}}
.mess li{padding:16px 16px 15px;background:var(--ground-2);border-left:3px solid var(--hot);font-size:1.06rem;line-height:1.4;box-shadow:2px 3px 0 rgba(0,0,0,.11)}
.mess li:nth-child(3n+1){transform:rotate(-.28deg)}.mess li:nth-child(3n+2){transform:rotate(.32deg)}.mess li:nth-child(3n){transform:rotate(-.12deg)}
.mess li.quiet{border-left-color:var(--spot);color:var(--dim)}.mess li.weird{background:var(--paper);color:var(--ink);border-left:0;clip-path:polygon(1% 0,100% 3%,98.5% 97%,3% 100%);transform:rotate(.7deg)}

/* ================= steps ================= */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}.steps li{position:relative;padding:13px 0 13px 54px;font-size:1.12rem;line-height:1.4;counter-increment:s;border-top:1px solid var(--line)}.steps li:first-child{border-top:0}.steps li::before{content:counter(s);position:absolute;left:0;top:10px;width:38px;height:38px;display:grid;place-items:center;font:800 1rem 'Syne',sans-serif;color:var(--ground);background:var(--hot);border-radius:48% 52% 45% 55%/56% 44% 54% 46%;transform:rotate(-4deg)}.steps li:nth-child(even)::before{transform:rotate(5deg);border-radius:56% 44% 52% 48%/42% 58% 45% 55%}

/* ================= call examples ================= */
.call{position:relative;margin:22px 0;padding:17px 18px 16px;background:var(--ground-2);border:1px solid var(--line);transform:rotate(-.2deg)}.call:nth-of-type(even){transform:rotate(.3deg)}.call h3{margin:0 0 9px;color:var(--hot)}.call q{display:block;font-style:italic;font-size:1.18rem;line-height:1.35;quotes:none}.call q::before{content:"\201C"}.call q::after{content:"\201D"}.call .ans{margin:11px 0 0;color:var(--spot);font-size:1.08rem;line-height:1.4}.odd-call{border-color:var(--paper-2)}.odd-call::after{content:"SPOON?";position:absolute;right:10px;top:-11px;background:var(--paper);color:var(--ink);padding:4px 7px;font:800 .62rem 'Syne',sans-serif;letter-spacing:.1em;transform:rotate(4deg)}

/* ================= spotter ================= */
.spotter-figure{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;margin:18px 0 22px;padding:18px;background:var(--ground-2);border:1px solid var(--line);transform:rotate(-.25deg)}.spotter-figure img{width:150px}.spotter-figure p{margin:0}.spotter-figure strong{color:var(--spot)}
.scene{position:relative;margin:24px 0;padding:25px 18px 17px;border-left:3px solid var(--spot);background:#171817}.scene-label{position:absolute;left:12px;top:-11px;margin:0;background:var(--spot);color:var(--ink);padding:4px 7px;font:800 .58rem 'Syne',sans-serif;letter-spacing:.11em;transform:rotate(-1deg)}.scene q{display:block;font-size:1.2rem;font-style:italic;quotes:none}.scene q::before{content:"\201C"}.scene q::after{content:"\201D"}.scene p:last-child{color:var(--spot);margin:11px 0 0}
@media(max-width:520px){.spotter-figure{grid-template-columns:1fr}.spotter-figure img{width:170px;margin:0 auto}}

/* ================= notes and lists ================= */
.note{margin:20px 0;padding:17px 18px;border:1px solid var(--line);background:var(--ground-2);font-size:1rem;line-height:1.5}.note p{margin:0}.note p+p{margin-top:9px}.note strong{color:var(--hot)}
.emergency-note{border:2px solid var(--paper-2);background:#171311;transform:none}.scope-page{max-width:40rem}
.does{list-style:none;margin:0 0 1em;padding:0;display:grid;gap:6px}.does li{padding-left:1.1em;text-indent:-1.1em}.does li::before{content:"✶";color:var(--hot);margin-right:.5em;font-size:.82em}

/* ================= forms ================= */
form{margin:16px 0 6px}.f{display:grid;gap:14px;margin:0 0 14px}.f.two{grid-template-columns:1fr 1fr}@media(max-width:540px){.f.two{grid-template-columns:1fr}}
label{display:block;font:700 .78rem/1.4 'Syne',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 6px}label small{text-transform:none;letter-spacing:0;font-weight:400;opacity:.8}
input,textarea,select{width:100%;font:400 1rem/1.4 'DM Sans',Arial,sans-serif;color:var(--paper);background:#120f0e;border:1.5px solid var(--line);padding:12px 13px;border-radius:0}input:focus,textarea:focus,select:focus{border-color:var(--hot);outline:none}textarea{min-height:104px;resize:vertical}select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.btn{display:inline-block;font:800 1rem/1 'Syne',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--ground);background:var(--hot);border:0;padding:15px 20px;cursor:pointer;text-decoration:none;clip-path:polygon(1% 2%,99% 0,100% 96%,3% 100%);transform:rotate(-.25deg)}.btn:hover{background:var(--paper);color:var(--ground)}.btn.quiet{background:transparent;color:var(--paper);border:1.5px solid var(--paper);clip-path:none}.btn.quiet:hover{border-color:var(--hot);color:var(--hot);background:transparent}.fine{font-size:.9rem;line-height:1.5;color:var(--dim);margin:12px 0 0}.hp{position:absolute;left:-9999px}.ticks{display:grid;gap:8px}.tick{display:flex;gap:10px;align-items:flex-start;font:400 1rem/1.4 'DM Sans',Arial,sans-serif;text-transform:none;letter-spacing:0;color:var(--paper);cursor:pointer}.tick input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--hot);flex:0 0 auto}

/* ================= calendar ================= */
.calendar-wrap{position:relative;margin:18px 0 10px}.calendar-scribble{position:absolute;right:-20px;top:-24px;color:var(--hot);font:700 1rem 'DM Sans',Arial,sans-serif;font-style:italic;transform:rotate(7deg)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal a,.cal span{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);font:700 .95rem 'Syne',sans-serif;color:var(--dim);position:relative;text-decoration:none}
.cal a{color:var(--paper);cursor:pointer}
.cal a:hover,.cal a:focus-visible{border-color:var(--hot);background:var(--hot);color:var(--ground)}
.cal span.lit{border-color:var(--hot);color:var(--paper);background:var(--ground-2)}
.cal span.lit::after{content:"";position:absolute;bottom:6px;width:6px;height:6px;border-radius:50%;background:var(--hot)}
.legend{font-size:.9rem;color:var(--dim)}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hot);margin:0 6px 1px 0;font-style:normal}

/* ================= the why ================= */
.why{margin:20px 0 6px}
.why p{font-size:1.12rem;line-height:1.5}
.why .big{
  font:500 clamp(1.32rem,5.6vw,1.85rem)/1.22 'DM Sans',Arial,sans-serif;margin:0 0 .5em;
}
.why .big em{color:var(--hot);font-style:italic}
.gap-list{list-style:none;margin:18px 0;padding:0;display:grid;gap:9px}
.gap-list li{
  padding:11px 14px;background:var(--ground-2);border-left:3px solid var(--line);
  font-size:1.02rem;line-height:1.4;color:var(--dim);transform:rotate(-.14deg);
}
.gap-list li:nth-child(2){transform:rotate(.2deg)}
.gap-list li:nth-child(3){transform:rotate(-.24deg)}
.gap-list li b{color:var(--paper);font-weight:600}

/* ================= foot ================= */
footer{border-top:1px solid var(--line);padding:30px 0 0;color:var(--dim);font-size:.92rem}footer .parent{font:800 1rem/1.3 'Syne',sans-serif;letter-spacing:.01em;color:var(--paper);margin:0 0 10px}footer p{margin:0 0 9px}

@media(max-width:400px){:root{--pad:18px}.head .band p{font-size:.73rem;letter-spacing:.07em}.wordmark{font-size:2.55rem}.nav ul{min-width:min(16rem,calc(100vw - 36px))}}
/* Reduced motion is about movement, not about static geometry. The fractional
   rotations are the design, so they stay; animations and transitions go. */
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* the permission line: the most important sentence on the home page */
.lead.permit{border-left:3px solid var(--hot);padding-left:16px;margin:26px 0}
.lead.permit em{color:var(--hot);font-style:italic}

/* ================= v0.10 launch readiness ================= */
.sponsor-split{border-top:2px solid var(--hot)}
.sponsor-split strong{color:var(--hot)}
.readiness{position:relative}
.ready-list{list-style:none;margin:22px 0 10px;padding:0;display:grid;gap:8px}
.ready-list li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:12px 14px;background:var(--ground-2);border-left:2px solid var(--line);transform:rotate(-.08deg)}
.ready-list li:nth-child(even){transform:rotate(.08deg)}
.ready-list li>span{font:800 1.25rem/1 'Syne',sans-serif;color:var(--hot);padding-top:1px}
.ready-list b{display:block;font:800 .93rem/1.25 'Syne',sans-serif;color:var(--paper)}
.ready-list small{display:block;margin-top:4px;font:400 .95rem/1.4 'DM Sans',Arial,sans-serif;color:var(--dim)}