/* Project Hoof — recruitment quiz page. Lives on /join/. */

.join-page { background: #0a1326; }

.join-main {
  position: relative; z-index: 2;
  padding: clamp(72px, 9vw, 130px) 16px 96px;
  min-height: calc(100vh - 80px);
  display: flex; align-items: flex-start; justify-content: center;
}

.join-shell {
  width: 100%; max-width: 760px;
}

.join-header {
  text-align: center; margin-bottom: clamp(20px, 3vw, 32px);
  color: #e8e2d2;
}
.join-header .kicker {
  display: inline-block;
  font-family: 'IM Fell English SC', serif;
  font-size: .82rem; letter-spacing: .22em;
  color: #c9a24a; padding: 4px 14px;
  border-top: 1px solid rgba(201,162,74,.35);
  border-bottom: 1px solid rgba(201,162,74,.35);
}
.join-title {
  margin: 16px 0 8px;
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.05;
  color: #f1ead4;
  text-shadow: 0 4px 18px rgba(0,0,0,.6);
}
.join-title em {
  font-style: italic;
  color: #f2cc6a;
  font-family: 'Cinzel Decorative', serif;
}
.join-subtitle {
  font-family: 'Spectral', serif;
  font-style: italic; color: #b3a98b;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  margin: 0 auto; max-width: 540px;
}

/* ============= Parchment card ============= */
.join-parchment {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,230,170,.08), transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(120,80,30,.12), transparent 60%),
    linear-gradient(180deg, #f0e3bd 0%, #e7d4a0 100%);
  color: #2a1f0d;
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow:
    0 30px 80px -20px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,162,74,.35),
    inset 0 0 60px rgba(140, 95, 30, .12);
  font-family: 'EB Garamond', 'Spectral', serif;
  overflow: hidden;
}
.join-parchment::before {
  /* Burnt-edge vignette inside the parchment */
  content: ''; position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(60,30,5,.18) 100%);
  border-radius: inherit;
}

/* Progress strip — golden vein along the top of the parchment */
.join-progress {
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px; background: rgba(60,30,5,.12);
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}
.join-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #c9a24a 0%, #f2cc6a 50%, #c9a24a 100%);
  width: 20%;
  transition: width .45s cubic-bezier(.4,.2,.2,1);
  box-shadow: 0 0 12px rgba(242,204,106,.6);
}
.join-progress-label {
  font-family: 'IM Fell English SC', serif;
  font-size: .78rem; letter-spacing: .18em;
  color: #6e5320; text-align: right;
  margin: 4px 0 22px;
  text-transform: uppercase;
}

/* ============= Step layout ============= */
.join-step { border: 0; padding: 0; margin: 0; }
.join-step-kicker {
  display: inline-block;
  font-family: 'IM Fell English SC', serif;
  font-size: .82rem; letter-spacing: .22em;
  color: #8a5d1a; margin-bottom: 6px;
}
.join-step-title {
  margin: 0 0 8px;
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.15;
  color: #2a1f0d;
}
.join-step-lead {
  margin: 0 0 26px;
  font-style: italic; color: #5b4622;
  font-size: 1.05rem; line-height: 1.5;
  max-width: 56ch;
}

/* ============= Fields ============= */
.join-field { display: block; margin-bottom: 18px; }
.join-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-bottom: 18px;
}
.join-row .join-field { margin-bottom: 0; }
@media (max-width: 540px) { .join-row { grid-template-columns: 1fr; } }

.join-label {
  display: block;
  font-family: 'IM Fell English SC', serif;
  font-size: .92rem; letter-spacing: .12em;
  color: #5b4622; margin-bottom: 6px;
}

.join-field input[type="text"],
.join-field input[type="number"],
.join-field textarea {
  width: 100%;
  background: rgba(255,250,235,.6);
  border: 1px solid rgba(90,60,20,.28);
  border-radius: 6px;
  padding: 11px 14px;
  font-family: 'EB Garamond', serif;
  font-size: 1.08rem; color: #2a1f0d;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.join-field input::placeholder,
.join-field textarea::placeholder { color: #a08a5e; opacity: .8; }
.join-field input:focus,
.join-field textarea:focus {
  outline: 0;
  border-color: #c9a24a;
  background: rgba(255,253,242,.85);
  box-shadow: 0 0 0 3px rgba(201,162,74,.25);
}
.join-field textarea { resize: vertical; min-height: 78px; }

.join-hint {
  display: block; margin-top: 4px;
  font-size: .85rem; font-style: italic; color: #8a7448;
}

/* ============= Pills (radio/checkbox) ============= */
.join-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.join-pills-stack { flex-direction: column; gap: 8px; }
.join-pills-wrap { gap: 8px; }
.join-pill {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 1px solid rgba(90,60,20,.32);
  border-radius: 999px;
  background: rgba(255,250,235,.5);
  color: #3a2c12;
  font-family: 'EB Garamond', serif;
  font-size: 1rem;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.join-pills-stack .join-pill { border-radius: 8px; justify-content: flex-start; padding: 11px 16px; }
.join-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.join-pill:hover { border-color: #c9a24a; background: rgba(255,253,242,.7); }
.join-pill:has(input:checked) {
  background: linear-gradient(180deg, #f2cc6a, #c9a24a);
  border-color: #8a5d1a;
  color: #2a1f0d;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.4);
}
.join-pill:focus-within {
  box-shadow: 0 0 0 3px rgba(201,162,74,.35);
}

/* ============= Actions row ============= */
.join-actions {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid rgba(90,60,20,.18);
  gap: 12px;
}
.join-actions .btn { min-width: 110px; }
.join-actions .btn-ghost {
  background: transparent;
  color: #5b4622;
  border: 1px solid rgba(90,60,20,.32);
}
.join-actions .btn-ghost:hover { background: rgba(90,60,20,.08); }
.join-actions .btn-ghost[disabled] { opacity: .35; cursor: not-allowed; }

/* Primary button on parchment — gold pill */
.join-actions .btn-primary {
  background: linear-gradient(180deg, #f2cc6a, #c9a24a);
  color: #2a1f0d;
  border: 1px solid #8a5d1a;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 11px 22px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .12s, box-shadow .12s;
}
.join-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.5);
}
.join-actions .btn-primary[disabled] { opacity: .55; cursor: wait; }

/* ============= Error banner ============= */
.join-error {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(180, 40, 40, .12);
  border: 1px solid rgba(180, 40, 40, .35);
  color: #6a1818;
  font-style: italic;
}

/* ============= Honeypot — completely hidden but technically focusable for bots ============= */
.join-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ============= Done state ============= */
.join-done { text-align: center; padding: 14px 0 6px; }
.join-done-seal {
  display: flex; justify-content: center;
  margin-bottom: 14px;
  animation: seal-drop .5s cubic-bezier(.3,1.2,.4,1);
}
@keyframes seal-drop {
  from { transform: scale(.4) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.join-done-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: #2a1f0d; margin: 0 0 10px;
}
.join-done-body {
  font-style: italic; color: #5b4622;
  font-size: 1.08rem; max-width: 48ch; margin: 0 auto 26px;
}
.join-done-ctas {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.join-done-ctas .btn-ghost {
  background: transparent; color: #5b4622;
  border: 1px solid rgba(90,60,20,.32);
  padding: 10px 18px; border-radius: 999px;
  font-family: 'Cinzel', serif; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  font-size: .92rem;
  text-decoration: none;
}
.join-done-ctas .btn-ghost:hover { background: rgba(90,60,20,.08); }

/* ============= Flow selector (step 0) ============= */
.join-flow { text-align: center; }
.join-flow .join-step-title { margin-top: 6px; }
.join-flow-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 18px; margin-top: 22px;
}
@media (max-width: 640px) { .join-flow-grid { grid-template-columns: 1fr; } }

.join-flow-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  padding: 24px 22px;
  background: rgba(255,250,235,.55);
  border: 1px solid rgba(90,60,20,.32);
  border-radius: 12px;
  color: #2a1f0d;
  font-family: 'EB Garamond', serif;
  cursor: pointer;
  text-align: center;
  transition: all .18s;
}
.join-flow-card:hover {
  border-color: #8a5d1a;
  background: rgba(255,253,242,.85);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.join-flow-rune { color: #8a5d1a; }
.join-flow-card:hover .join-flow-rune { color: #c9a24a; }
.join-flow-title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.2;
  margin-top: 4px;
}
.join-flow-sub {
  font-style: italic; font-size: .95rem;
  color: #5b4622;
  line-height: 1.4;
  max-width: 28ch;
}

/* ============= Sign step (parchment + pick-up seal) ============= */
.join-sign .join-step-lead { margin-bottom: 18px; }

/* Heading row: title on the left, the pick-up seal on the right. */
.join-sign-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.join-sign-headline { flex: 1 1 auto; min-width: 0; }
.join-sign-headline .join-step-kicker { display: inline-block; margin-bottom: 4px; }
.join-sign-headline .join-step-title { margin: 0; }
@media (max-width: 480px) {
  .join-sign-header { flex-wrap: wrap; }
}

/* The drawable parchment — reuses the same source PNG and quill cursor
   as the main-page contract, so the feel is identical. */
.join-parchment-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1028 / 768;
  padding: clamp(2.6rem, 5.5vw, 4.4rem) clamp(2.6rem, 5.5vw, 4.4rem) clamp(3.6rem, 7vw, 5.2rem);
  color: #2c1d0a;
  background: url('/items/parchment.png?v=44') center/100% 100% no-repeat;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.35));
  cursor: url('/items/quill.svg?v=44') 4 36, text;
  overflow: visible;
}
#join-contract-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  touch-action: none;
  z-index: 1;
  cursor: url('/items/quill.svg?v=44') 4 36, crosshair;
}
.join-contract-body {
  position: relative; z-index: 0;
  pointer-events: none;
  font-family: 'EB Garamond', serif;
  color: #2a1d09;
  line-height: 1.55;
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  text-align: center;
}
.join-contract-title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  color: #2a1d09;
  margin: 0 0 .8em;
  letter-spacing: .04em;
}
.join-contract-title em {
  font-style: italic;
  color: #6e4e1a;
}
.join-contract-body p { margin: 0 0 .7em; }
.join-contract-pact {
  font-family: 'IM Fell English SC', serif;
  font-style: normal !important;
  letter-spacing: .06em;
  color: #6e4e1a;
  font-size: 1em;
  margin-top: 1em !important;
}
.join-contract-signature {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 1.4em;
  gap: 4px;
}
.join-contract-sig-label {
  font-family: 'IM Fell English SC', serif;
  font-size: .78em;
  letter-spacing: .14em;
  color: #8a5d1a;
}
.join-contract-sig-line {
  display: flex; align-items: center; gap: 8px;
  width: 70%;
}
.join-contract-sig-rule {
  flex: 1; height: 1px;
  border-top: 1.5px dashed #8a5d1a;
}
.join-contract-sig-x {
  font-family: 'Pirata One', serif;
  color: #8a5d1a;
  font-size: 1.6em;
  line-height: 1;
}
.join-contract-clear {
  position: absolute;
  right: 18px; bottom: 14px;
  z-index: 2;
  font-family: 'IM Fell English SC', serif;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #8a5d1a;
  background: rgba(255,250,235,.55);
  border: 1px solid rgba(90,60,20,.3);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .15s;
}
.join-contract-clear:hover { background: rgba(255,253,242,.9); color: #6a3f0e; }

/* Seal stand — lives in the heading row, gets picked up on click. */
.join-seal-stand {
  position: relative;
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: .35rem;
  z-index: 5;
  /* Nudge it slightly down and left so it sits beside the title rather than
     hard against the right edge. */
  transform: translate(-72px, 32px);
}
.join-seal-button {
  appearance: none; border: 0; background: transparent;
  cursor: grab;
  padding: 6px;
  border-radius: 50%;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition: transform .15s ease, filter .15s ease;
}
.join-seal-button:hover {
  transform: translateY(-2px) rotate(-8deg);
  filter: drop-shadow(0 10px 18px rgba(244,200,75,.5));
}
.join-seal-button[aria-pressed="true"] {
  opacity: .25; cursor: grabbing;
}
.join-seal-svg { display: block; }

.join-seal-hint {
  font: 600 9px/1.3 'Manrope', system-ui, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(140, 95, 30, .8);
  text-align: center;
  max-width: 96px;
}
.join-seal-hint.is-sealed { color: #4a8a3a; }

/* Floating seal — clone follows the cursor while the user is "holding" it. */
.join-seal-floating {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 9999;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(244,200,75,.45));
  transition: filter .15s ease;
  transform-origin: 50% 50%;
  width: 68px; height: 68px;
}
body.join-seal-held { cursor: none; }
body.join-seal-held .join-parchment-card,
body.join-seal-held #join-contract-canvas { cursor: crosshair; }

/* ============= Largest-march slider ============= */
.join-march {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}
.join-march input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #c9a24a 0%, #f2cc6a 50%, #c9a24a 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.join-march input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7e6a4, #c9a24a);
  border: 2px solid #6e4e1a;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: grab;
}
.join-march input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7e6a4, #c9a24a);
  border: 2px solid #6e4e1a;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  cursor: grab;
}
.join-march input[type="number"] {
  width: 100%;
  text-align: right;
  font-family: 'Russo One', sans-serif;
  font-size: 1.05rem;
  color: #2a1f0d;
}
.join-march-scale {
  display: grid;
  grid-template-columns: 0fr 1fr 1fr 0fr;
  justify-content: space-between;
  gap: 0;
  margin-top: 6px;
  padding-right: 144px;     /* visually align with the range track */
  font-family: 'IM Fell English SC', serif;
  font-size: .78rem;
  letter-spacing: .12em;
  color: #8a7448;
}
.join-march-scale span { white-space: nowrap; }
.join-march-scale span:first-child { text-align: left;  justify-self: start; }
.join-march-scale span:last-child  { text-align: right; justify-self: end;   }
.join-march-scale span:nth-child(2),
.join-march-scale span:nth-child(3) { text-align: center; justify-self: center; }

/* ============= Reduced motion ============= */
@media (prefers-reduced-motion: reduce) {
  .join-progress-fill { transition: none; }
  .join-done-seal { animation: none; }
  body.join-seal-armed .join-contract::after { animation: none; }
}