/* Join as a bright punch-slip programme. Manila stock, iron ink. */
:root{
  --paper:#d9cb9e;
  --well:#cfc19a;
  --ink:#161814;
  --navy:#1e3a5f;
  --scarlet:#c41e3a;
  --terra:#b2533e;
  --dim:#7b8070;
  --font:"Courier New", Courier, "Lucida Console", monospace;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16px;line-height:1.5}
body{padding:28px 16px 96px;
  background-image:
    radial-gradient(circle at 8px 10px, var(--navy) 2.2px, transparent 2.4px),
    radial-gradient(circle at 24px 10px, var(--navy) 2.2px, transparent 2.4px);
  background-size: 32px 22px, 32px 22px;
  background-repeat: repeat-x, repeat-x;
  background-position: 12px 0, 12px 0}
button,input,select{font:inherit;border-radius:0;appearance:none}
button{color:var(--paper);background:var(--navy);border:2px solid var(--navy);
  letter-spacing:.12em;text-transform:uppercase;padding:.6rem .9rem;cursor:pointer}
button:active{background:var(--ink)}
a{color:var(--navy)}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:.02em}

.site-mark{margin:0 0 6px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-size:10px}
.site-mark a{color:inherit;text-decoration:none}
.site-mark a:hover,.site-mark a:focus-visible{text-decoration:underline}

.presents{margin:0 0 28px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);font-size:10px}

.mast{max-width:42rem;margin:0 auto 1.6rem;display:flex;gap:1.1rem;align-items:flex-start}
#jackPet{width:96px;height:96px;flex:none;image-rendering:pixelated;image-rendering:crisp-edges;
  background:var(--well);border:2px solid var(--navy)}
#jackForm{margin:0 0 8px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mast h1{font-size:clamp(2rem,6vw,3.2rem);letter-spacing:.18em}
.lede{margin:.7rem 0 0;max-width:36rem}

.eyebrow{margin:0 0 8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra)}
section{max-width:52rem;margin:0 auto 2.4rem}
section h2{margin:0 0 1rem;font-size:1.35rem}

.doors{display:flex;flex-wrap:wrap;gap:8px}
.hero-doors{max-width:52rem;margin:0 auto 2.4rem}
.door{display:inline-block;padding:.5rem .75rem .4rem;border:2px solid var(--navy);
  background:var(--paper);color:var(--navy);text-decoration:none;letter-spacing:.12em;
  text-transform:uppercase;font-size:11px;min-width:7rem}
.door b{display:block;font-size:8px;letter-spacing:.16em;color:var(--terra);font-weight:400}
.door.primary{background:var(--navy);color:var(--paper);border-color:var(--navy)}
.door.primary b{color:#e8b4a8}
.door:hover{background:var(--scarlet);border-color:var(--scarlet);color:var(--paper)}
.door:hover b{color:var(--paper)}

.slips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.slip{padding:1.35rem 1.05rem 1.1rem;border:1.5px solid var(--navy);background:
    repeating-linear-gradient(90deg, transparent 0 10px, transparent 10px),
    var(--well);
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);position:relative}
.slip:before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;
  background:linear-gradient(135deg,transparent 49%,var(--navy) 50%)}
.slip:after{content:"";position:absolute;top:7px;left:22px;right:10px;height:8px;
  background:radial-gradient(circle, var(--paper) 2.1px, transparent 2.3px);
  background-size:12px 8px}
.beat-label{margin:0 0 8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.slip h3{margin:0 0 8px;font-size:1.1rem}
.slip p{margin:0}
.mode{margin-top:12px !important;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}

.form-slip{max-width:34rem;margin:0 auto}
.join form{display:flex;flex-direction:column;gap:6px;margin-top:1rem}
.join label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--navy);margin-top:8px}
.join input,.join select{background:var(--paper);border:1.5px solid var(--navy);color:var(--ink);
  padding:.55rem .65rem}
.join input:focus,.join select:focus{outline:2px solid var(--terra);outline-offset:1px}
.form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.status{margin:.8rem 0 0;font-size:13px;color:var(--dim)}
.brief-hold{margin:0 0 .4rem;font-size:13px}
.brief-note{margin:0 0 1rem;font-size:12px;color:var(--dim);white-space:pre-wrap}

#dock{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;justify-content:center;
  gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--well);border-top:2px solid var(--navy);font-size:11px;letter-spacing:.14em}
#dock a{color:var(--navy);text-decoration:none;text-transform:uppercase}
#dock a[aria-current="page"]{color:var(--terra)}

@media(max-width:700px){
  .mast{flex-direction:column;align-items:center;text-align:center}
  .slips{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important}
}