/* Junkyard Joust — connect.junkyardjoust.com
   Layout follows the JJ-CONNECT mockup: textured steel band with the badge
   straddling its lower edge, a thin display headline, a white entry sheet,
   and the submit block sitting just below it.
   One stylesheet for the portal + the thanks/confirm/admin pages. */

@font-face{
  font-family:"Oswald";
  font-style:normal;
  font-weight:200 700;
  font-display:swap;
  src:url("/static/fonts/oswald-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,
    U+FEFF,U+FFFD;
}

:root{
  /* sampled from the mockup + logo: plum body, steel band, badge red */
  --plum:#2d1d25;
  --plum-deep:#241720;
  --band:#505153;
  --paper:#ffffff;
  --ink:#1b1216;
  --ink-soft:#5e5257;
  --ink-dim:#8b7f85;
  --hair:#dcd4d8;
  --joust-red:#ad2333;
  --joust-red-deep:#8d1b28;
  --on-plum:#f5eef1;
  --on-plum-soft:rgba(245,238,241,.64);
  --on-plum-dim:rgba(245,238,241,.38);

  --font-display:"Oswald","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --font-body:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --band-h:66px;
  --logo-w:120px;
  --logo-half:calc(var(--logo-w) * .49);
  --sheet-w:543px;
}

@media (min-width:481px){:root{--band-h:76px;--logo-w:156px}}
@media (min-width:768px){:root{--band-h:92px;--logo-w:180px}}
@media (min-width:1024px){:root{--band-h:104px;--logo-w:196px}}
/* short landscape phones: give the fold back to the form */
@media (max-height:520px) and (orientation:landscape){
  :root{--band-h:44px;--logo-w:96px}
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--plum);          /* canvas is plum too: no seam where the body ends */
  min-height:100%;
}
html,body{margin:0;padding:0}

body{
  position:relative;
  min-height:100svh;
  background:var(--plum);
  color:var(--on-plum);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* The top light is a viewport-fixed overlay ABOVE everything (see body::after).
   Painting it as a background instead put it inside the body box, so it stopped
   dead where the content ended and left a hard contour across the empty page.
   As one fixed layer over both content and background there is no boundary to
   see, and the band, badge and sheet all sit under the same light. */

a{color:var(--joust-red);text-underline-offset:.18em}
:focus-visible{outline:2px solid #e8b4bd;outline-offset:2px}

/* ------------------------------------------------------------ steel band -- */
.band{
  position:relative;
  height:var(--band-h);
  background:
    linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.5) 70%, rgba(0,0,0,.62)),
    url("/static/img/jj-texture.webp") center 38%/cover no-repeat,
    var(--band);
  box-shadow:0 1px 0 rgba(0,0,0,.45) inset, 0 1px 0 rgba(0,0,0,.4);
}
.band-logo{
  position:absolute;
  left:50%;
  bottom:0;
  width:var(--logo-w);
  height:auto;
  transform:translate(-50%,50%);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
  z-index:2;
}

/* --------------------------------------------------------------- portal --- */
.portal{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:
    calc(var(--logo-half) + clamp(12px, 2.6vh, 26px))
    clamp(16px, 4vw, 24px)
    clamp(20px, 4vh, 40px);
  text-align:center;
}

.portal h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(25px, 4.9vw, 46px);
  line-height:1.08;
  letter-spacing:.004em;
  color:var(--on-plum);
  text-wrap:balance;
}
.portal .sub{
  margin:clamp(10px,1.6vw,14px) auto 0;
  max-width:44ch;
  font-size:clamp(13.5px, 1.5vw, 15.5px);
  line-height:1.6;
  color:var(--on-plum-soft);
  text-wrap:pretty;
}

/* ----------------------------------------------------------- entry sheet -- */
.portal-form{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}
.sheet{
  width:min(var(--sheet-w), 100%);
  margin-top:clamp(18px, 3vw, 28px);
  padding:clamp(20px, 4.2vw, 30px) clamp(18px, 4vw, 30px);
  background:var(--paper);
  color:var(--ink);
  border-radius:2px;
  box-shadow:
    0 30px 60px -26px rgba(0,0,0,.75),
    0 1px 0 rgba(255,255,255,.5) inset;
  text-align:left;
}

.field{margin-bottom:14px;position:relative}
.row2{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr}}

label{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:7px;
}

input[type=text],input[type=email]{
  width:100%;
  min-height:46px;
  padding:12px 13px;
  font-family:var(--font-body);
  font-size:16px;              /* 16px keeps iOS from zooming the page on focus */
  color:var(--ink);
  background:#fdfdfd;
  border:1px solid var(--hair);
  border-radius:2px;
  transition:border-color .15s, box-shadow .15s, background .15s;
  appearance:none;
}
input::placeholder{color:#b3a8ad}
input:hover{border-color:#c8bcc1}
input:focus{
  outline:none;
  background:#fff;
  border-color:var(--joust-red);
  box-shadow:0 0 0 3px rgba(173,35,51,.14);
}
input[aria-invalid=true]{border-color:#b02631;background:#fffafa}

.submit{
  display:block;
  width:min(268px, 100%);
  margin:clamp(16px, 3vw, 26px) auto 0;
  padding:15px 24px;
  background:var(--paper);
  color:var(--plum-deep);
  border:0;
  border-radius:2px;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(18px, 2vw, 23px);
  letter-spacing:.03em;
  line-height:1.2;
  cursor:pointer;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.7);
  transition:background .15s, transform .06s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.submit:hover{background:#f7f2f4}
.submit:active{transform:translateY(1px)}
.submit[disabled]{opacity:.65;cursor:progress}

.fine{
  margin:clamp(12px,1.8vw,16px) auto 0;
  max-width:64ch;
  font-size:11.5px;
  line-height:1.65;
  color:rgba(245,238,241,.55);   /* readable at 11.5px, still quiet */
  text-align:center;
}
.fine a{color:var(--on-plum-soft)}

/* honeypot: invisible to people, visible to bots */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.err{color:#a01f2c;font-size:12px;margin:6px 0 0}
.alert{
  display:none;
  margin:0 0 16px;
  padding:11px 13px;
  border-radius:2px;
  font-size:13.5px;
  line-height:1.5;
  border:1px solid #e6c3c8;
  background:#fdf3f4;
  color:#7c1a26;
}
.alert.show{display:block}
.alert.good{border-color:#cfe3c8;background:#f3f8f1;color:#2f5c28}

/* Light from above: one viewport-fixed layer over the background AND the content,
   so the wash lifts the band, badge and sheet together and there is no edge where
   the body's content box ends. Radii are generous and the stops are staged, so the
   falloff is long and smooth instead of showing a contour. */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
  background:radial-gradient(1600px 950px at 50% -12%,
    rgba(255,255,255,.105) 0%,
    rgba(255,255,255,.065) 30%,
    rgba(255,255,255,.03) 58%,
    rgba(255,255,255,0) 80%);
}

footer{
  position:relative;
  z-index:1;
  padding:0 clamp(16px,4vw,24px) clamp(22px,4vh,34px);
  color:rgba(245,238,241,.46);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
footer .wrap{
  max-width:var(--sheet-w);
  margin:0 auto;
  display:flex;
  justify-content:center;
  gap:8px 18px;
  flex-wrap:wrap;
}
footer a{color:var(--on-plum-soft);text-decoration:none}
footer a:hover{color:var(--on-plum)}

.wrap{position:relative;z-index:1;width:100%;max-width:var(--sheet-w);margin:0 auto}

/* --------------------------------------------- thanks / confirm / admin ---- */
.simple{
  max-width:640px;
  margin:clamp(6vh,10vh,14vh) auto 0;
  padding:0 clamp(16px,4vw,24px) 12vh;
}
.simple h1{
  margin:0;
  font-family:var(--font-display);
  font-weight:300;
  font-size:clamp(32px, 6vw, 54px);
  line-height:1.04;
  letter-spacing:.004em;
  color:var(--on-plum);
  text-wrap:balance;
}
.simple h1 .thin{
  display:block;
  margin-top:10px;
  font-size:.34em;
  font-weight:300;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-plum-soft);
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  font-size:10.5px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--on-plum-dim);
}
.kicker::before{content:"";width:22px;height:1px;background:var(--joust-red);display:inline-block}
.lede{font-size:clamp(15px,1.6vw,16.5px);line-height:1.6;color:rgba(245,238,241,.8);margin:0 0 20px}
.lede strong{color:var(--on-plum)}

.card{
  margin-top:clamp(20px,3vw,28px);
  padding:clamp(18px,3vw,26px);
  background:linear-gradient(165deg, #2b1e26, #211720);
  border:1px solid rgba(255,255,255,.09);
  border-radius:2px;
  box-shadow:0 24px 50px -28px rgba(0,0,0,.8);
}
.card h2{
  margin:0 0 6px;
  font-family:var(--font-display);
  font-weight:400;
  font-size:13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--joust-red);
}
.card p.sub{margin:0 0 18px;font-size:13.5px;color:var(--on-plum-soft)}
.simple a.btn{
  display:inline-block;
  margin-top:18px;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--on-plum-soft);
  text-decoration:none;
  border-bottom:1px solid var(--joust-red);
  padding-bottom:2px;
}
.simple a.btn:hover{color:var(--on-plum)}

/* ----------------------------------------------------------------- admin --- */
.admin{max-width:1200px;margin:0 auto;padding:clamp(22px,4vw,34px) clamp(14px,3vw,24px) 70px}
.admin h1{font-family:var(--font-display);font-weight:300;letter-spacing:.01em}
.statbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 22px}
.stat{
  border:1px solid rgba(255,255,255,.09);
  border-radius:2px;
  padding:10px 14px;
  background:#261a22;
  min-width:112px;
}
.stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1.1;color:var(--on-plum)}
.stat span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--on-plum-dim)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.07);vertical-align:top}
th{
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-plum-dim);
  border-bottom-color:rgba(255,255,255,.14);
  position:sticky;
  top:0;
  background:var(--plum);
  white-space:nowrap;
}
tr:hover td{background:rgba(255,255,255,.03)}
.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:99px;
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.16);
  color:var(--on-plum-dim);
  white-space:nowrap;
}
.pill.ok{border-color:#3f5a33;color:#a8ce93;background:rgba(127,176,105,.1)}
.pill.pend{border-color:#6a4a2a;color:#e0a06a;background:rgba(224,160,106,.1)}
.pill.bad{border-color:#6d2c30;color:#e8909a;background:rgba(232,144,154,.1)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.toolbar a{color:var(--on-plum-soft);text-decoration:none;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.toolbar a:hover{color:var(--on-plum)}
.empty{color:var(--on-plum-soft);padding:26px 0}
.admin form.inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.admin input[type=email]{
  min-height:40px;
  max-width:280px;
  background:#1c1218;
  color:var(--on-plum);
  border-color:rgba(255,255,255,.14);
}
.admin button.small{
  width:auto;
  margin:0;
  padding:10px 16px;
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--paper);
  color:var(--ink);
  box-shadow:none;
}

/* --------------------------------------------------------------- motion ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}