:root {
  --parchment:      #F5E6C8;
  --parchment-mid:  #EDD9A8;
  --parchment-dark: #D9C080;
  --cream:          #FAF2E0;
  --brown-light:    #A07850;
  --brown:          #8B5E3C;
  --brown-dark:     #6B3E20;
  --brown-deeper:   #4A2610;
  --green:          #2D5A27;
  --green-mid:      #3D7230;
  --green-light:    #527A42;
  --burgundy:       #6B1F1F;
  --burgundy-mid:   #8B3030;
  --gold:           #C9A030;
  --gold-light:     #D4B050;
  --gold-pale:      #E8D090;
  --blue-dark:      #1F3A5A;
  --blue-mid:       #2A5080;
  --orange:         #9A4A10;
  --orange-light:   #B86020;
  --text:           #2C1808;
  --text-mid:       #4A2E18;
  --text-soft:      #7A5A3A;
  --shadow:         rgba(44,24,8,.35);
  --shadow-strong:  rgba(44,24,8,.55);
  --overlay:        rgba(20,10,4,.75);
  --red-master:     #9B1515;
  --red-master-dark:#6B0F0F;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body{
  font-family:'Lato',sans-serif;
  overflow-x:hidden;
  background:
    linear-gradient(rgba(245,230,200,0.72),rgba(245,230,200,0.72)),
    url('assets/noticeboard-wood.png') top left / auto repeat;
  image-rendering:pixelated;
  color:var(--text);
  min-height:100vh;
}

/* ── HERO ─────────────────────────────────────── */
.hero{
  background:url('assets/noticeboard-stone.png') center center / cover no-repeat;
  padding:2rem 1.5rem;
  min-height:340px;
  text-align:center;
  position:relative;
  z-index:1;
  overflow:hidden;
  border-bottom:6px solid var(--gold);
  box-shadow:0 6px 0 var(--brown-dark),0 10px 30px rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(8,6,4,0.48),rgba(8,6,4,0.48)),
    repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,255,255,.015) 3px,rgba(255,255,255,.015) 4px),
    repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(255,255,255,.015) 3px,rgba(255,255,255,.015) 4px);
  pointer-events:none;
}
.hero h1{
  font-family:'Press Start 2P',monospace;
  color:var(--gold-light);
  font-size:clamp(.9rem,2.8vw,1.7rem);
  line-height:1.7;
  text-shadow:3px 3px 0 #3A1808,5px 5px 10px rgba(0,0,0,.5);
  margin-bottom:.3rem;
  letter-spacing:.05em;
}
.hero-sub{
  font-family:'VT323',monospace;
  color:var(--gold-light);
  font-size:clamp(.8rem,1.8vw,1rem);
  letter-spacing:.1em;
  margin-bottom:.9rem;
  opacity:.75;
}
.hero-tagline{
  font-family:'VT323',monospace;
  color:var(--gold-pale);
  font-size:clamp(1.4rem,4vw,2rem);
  letter-spacing:.06em;
  margin-bottom:1.6rem;
}
.hero-divider{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  color:var(--gold);
  font-family:'Crimson Text',Georgia,serif;
  font-size:1.25rem;
  font-style:italic;
  opacity:.8;
  margin-top:.5rem;
  margin-bottom:1rem;
}
.hero-divider::before,.hero-divider::after{
  content:'';flex:1;max-width:200px;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}

/* ── HERO TORCH ROW ───────────────────────────── */
.hero-torch-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2rem;
  position:relative;
  z-index:1;
  width:100%;
}
.hero-text{flex:1;min-width:0;}
.hero-torch{position:relative;flex-shrink:0;}
.torch-img{
  width:48px;
  height:96px;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  position:relative;
  z-index:1;
}
.torch-glow{
  position:absolute;
  left:50%;
  top:0;
  border-radius:50%;
  pointer-events:none;
}
.torch-glow--outer{
  width:200px;
  height:200px;
  background:radial-gradient(ellipse,rgba(255,140,20,0.18) 0%,rgba(220,90,10,0.10) 35%,rgba(180,60,5,0.05) 60%,transparent 80%);
  transform:translate(-50%,-49%);
  animation:torch-outer 480ms steps(1,end) infinite alternate;
}
.torch-glow--inner{
  width:80px;
  height:80px;
  background:radial-gradient(ellipse,rgba(255,220,80,0.70) 0%,rgba(255,150,20,0.45) 25%,rgba(255,100,10,0.20) 55%,transparent 80%);
  transform:translate(-50%,-34.5%);
  animation:torch-inner 480ms steps(1,end) infinite alternate;
}
@keyframes torch-outer{
  from{transform:translate(-50%,-49%) scale(0.95);opacity:0.9;}
  to  {transform:translate(-50%,-49%) scale(1.08);opacity:1;}
}
@keyframes torch-inner{
  from{transform:translate(-50%,-34.5%) scale(0.92);opacity:0.85;}
  to  {transform:translate(-50%,-34.5%) scale(1.12);opacity:1;}
}

/* ── CONTROLS ─────────────────────────────────── */
.controls{
  max-width:1200px;
  margin:2rem auto 0;
  padding:0 1.5rem;
  position:relative;z-index:2;
}
.search-wrap{
  position:relative;
  margin-bottom:1.2rem;
}
.search-wrap .search-icon{
  position:absolute;left:1rem;top:50%;transform:translateY(-50%);
  color:var(--brown);font-size:1rem;pointer-events:none;
}
#search{
  width:100%;
  padding:.8rem 1rem .8rem 2.8rem;
  font-family:'VT323',monospace;
  font-size:1.25rem;
  color:var(--text);
  background:var(--cream);
  border:3px solid var(--brown);
  outline:none;
  box-shadow:3px 3px 0 var(--brown-dark),inset 0 0 0 1px var(--gold);
  transition:box-shadow .15s;
}
#search::placeholder{color:var(--text-soft);font-family:'VT323',monospace;}
#search:focus{box-shadow:3px 3px 0 var(--brown-dark),inset 0 0 0 1px var(--gold),0 0 0 3px rgba(201,160,48,.3);}

.filters{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-bottom:1rem;
}
.filter-btn{
  font-family:'VT323',monospace;
  font-size:1.15rem;
  padding:.4rem 1rem;
  cursor:pointer;
  border:2px solid var(--brown);
  background:var(--parchment-mid);
  color:var(--text-mid);
  box-shadow:2px 2px 0 var(--brown-dark);
  transition:all .1s;
  letter-spacing:.04em;
  display:inline-flex;align-items:center;
}
.filter-btn:hover{background:var(--parchment-dark);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--brown-dark);}
.filter-btn.active{
  background:var(--brown-dark);
  color:var(--gold-pale);
  border-color:var(--gold);
  box-shadow:2px 2px 0 #2a1004;
}

.job-count{
  font-family:'VT323',monospace;
  font-size:1.2rem;
  color:var(--text-soft);
  letter-spacing:.04em;
}
.job-count span{color:var(--brown-dark);font-size:1.4rem;}

/* ── CONTROLS BAR ─────────────────────────────── */
.controls-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.5rem;
}

/* ── SORT DROPDOWN ────────────────────────────── */
.sort-dropdown{position:relative;}
.sort-trigger{
  font-family:'VT323',monospace;
  font-size:1.15rem;
  padding:.4rem 1rem;
  cursor:pointer;
  border:2px solid var(--brown);
  background:var(--parchment-mid);
  color:var(--text-mid);
  box-shadow:2px 2px 0 var(--brown-dark);
  transition:all .1s;
  letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:.5rem;
}
.sort-trigger:hover{background:var(--parchment-dark);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--brown-dark);}
.sort-trigger.is-active{
  background:var(--brown-dark);
  color:var(--gold-pale);
  border-color:var(--gold);
  box-shadow:2px 2px 0 #2a1004;
}
.sort-trigger.is-active:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #2a1004;}
.sort-dropdown.is-open .sort-trigger,
.sort-dropdown.is-open .sort-trigger.is-active,
.sort-dropdown.is-open .sort-trigger:hover{
  background:var(--cream);
  color:var(--text-mid);
  border:2px solid var(--brown);
  box-shadow:inset 0 0 0 1px var(--brown);
  transform:none;
}
.sort-trigger-prefix{opacity:.7;}
.sort-chevron{
  display:inline-block;
  width:7px;height:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .15s;
  flex-shrink:0;
  margin-bottom:3px;
}
.sort-dropdown.is-open .sort-chevron{transform:rotate(-135deg);margin-bottom:-1px;}
.sort-options{
  display:none;
  position:absolute;
  top:calc(100% + 2px);
  right:0;
  background:var(--cream);
  border:3px solid var(--brown);
  box-shadow:4px 4px 0 var(--brown-dark);
  list-style:none;
  min-width:100%;
  z-index:100;
}
.sort-dropdown.is-open .sort-options{display:block;}
.sort-option{
  font-family:'VT323',monospace;
  font-size:1.15rem;
  padding:.4rem 1rem .4rem 2rem;
  cursor:pointer;
  color:var(--text-mid);
  letter-spacing:.04em;
  position:relative;
  outline:none;
  white-space:nowrap;
}
.sort-option:hover,.sort-option:focus{background:var(--parchment-mid);}
.sort-option[aria-selected="true"]{background:var(--parchment);color:var(--text);}
.sort-option[aria-selected="true"]::before{
  content:'✓';
  position:absolute;
  left:.6rem;
}

/* ── GRID ─────────────────────────────────────── */
.job-grid{
  max-width:1200px;
  margin:0 auto;
  padding:0 1.5rem 4rem;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.4rem;
  position:relative;z-index:1;
}
.no-results{
  grid-column:1/-1;
  text-align:center;
  font-family:'VT323',monospace;
  font-size:1.6rem;
  color:var(--text-soft);
  padding:4rem 0;
}

/* ── JOB CARD ─────────────────────────────────── */
.job-card{
  min-width:0;
  background:var(--cream);
  border:3px solid var(--brown);
  box-shadow:4px 4px 0 var(--brown-dark),inset 0 0 0 1px var(--gold);
  cursor:pointer;
  transition:transform .12s,box-shadow .12s;
  position:relative;
  display:flex;flex-direction:column;
}
.job-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--brown-dark),inset 0 0 0 1px var(--gold);
}
.card-header{
  background:var(--parchment-mid);
  padding:1rem 1rem .8rem;
  border-bottom:2px solid var(--parchment-dark);
  display:flex;align-items:flex-start;gap:.8rem;
}
.card-emoji{
  font-size:2rem;
  line-height:1;
  flex-shrink:0;
  margin-top:.15rem;
}
.card-title-block{flex:1;min-width:0;}
.card-title{
  font-family:'VT323',monospace;
  font-size:1.35rem;
  color:var(--text);
  line-height:1.2;
  margin-bottom:.3rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-employer{
  font-family:'VT323',monospace;
  font-size:.82rem;
  color:var(--text-soft);
  font-style:italic;
  font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.card-body{padding:.75rem 1rem 1rem;}
.card-meta{
  display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;
  margin-bottom:.65rem;
}
.badge{
  font-family:'VT323',monospace;
  font-size:1rem;
  padding:.15rem .55rem;
  border:2px solid;
  letter-spacing:.04em;
  line-height:1.2;
}

/* Category badges (Figma spec) */
.badge-cat-arcane      {background:#E8EDF5;color:#1F3A5A;border-color:#2A5080;}
.badge-cat-craft       {background:#EDF5E8;color:#2D5A27;border-color:#2D5A27;}
.badge-cat-combat      {background:#F5E8E8;color:#6B1F1F;border-color:#6B1F1F;}
.badge-cat-crown       {background:#FBF3DC;color:#7A5800;border-color:#C9A030;}
.badge-cat-investigation{background:#F5EEE8;color:#9A4A10;border-color:#B86020;}
.badge-cat-shadow      {background:#F0EBF5;color:#4A1F6B;border-color:#7A3FAA;}
.badge-cat-sundry      {background:#F5F0E8;color:#6B4A00;border-color:#A07020;}
.badge-cat-exploration {background:#E8F0F5;color:#1A4A5A;border-color:#2A7090;}

/* Card category — plain text variant (no badge box) */
.card-cat{
  font-family:'VT323',monospace;
  font-size:1.15rem;
  letter-spacing:.04em;
  line-height:1.2;
  background:none;
  border:none;
  padding:0;
  display:flex;align-items:center;gap:.7rem;
}

/* Type badges (modal only) */
.badge-guild     {background:#EDF5E8;color:var(--green);border-color:var(--green);}
.badge-freelance {background:#F5E8E8;color:var(--burgundy);border-color:var(--burgundy);}
.badge-royal     {background:#FBF3DC;color:#7A5800;border-color:var(--gold);}
.badge-pledge    {background:#E8EDF5;color:var(--blue-dark);border-color:var(--blue-mid);}
.badge-seasonal  {background:#F5EEE8;color:var(--orange);border-color:var(--orange-light);}

/* Level badges (modal only) */
.badge-apprentice{background:#F0E8D8;color:#6B4A2A;border-color:var(--brown-light);}
.badge-journeyman{background:#E8EAF0;color:#3A4A6A;border-color:#4A5A80;}
.badge-master    {background:#FCF3E0;color:#8A5A00;border-color:var(--gold-light);}

.card-location{
  font-family:'VT323',monospace;
  font-size:1.15rem;
  letter-spacing:.04em;
  color:#7a5800;
  display:flex;align-items:center;gap:.7rem;
}
.card-location i{color:var(--brown-light);}

.card-salary{
  font-family:'VT323',monospace;
  font-size:1.3rem;
  color:var(--green);
  font-weight:bold;
}
.card-desc{
  font-family:'VT323',monospace;
  font-size:.88rem;
  font-style:italic;
  line-height:1.6;
  color:var(--text-mid);
  margin-bottom:.7rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-perks{
  display:grid;grid-template-columns:1fr;gap:.3rem;
  margin-bottom:.8rem;
}
.perk{
  font-family:'VT323',monospace;
  font-size:.75rem;
  background:var(--parchment);
  padding:.15rem .45rem;
  color:var(--text-soft);
  display:flex;align-items:center;gap:.25rem;
  min-width:0;
}
.perk i{color:var(--gold);font-size:.7rem;flex-shrink:0;}
.perk-text{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

.card-footer{
  margin-top:auto;
  padding:.6rem 1rem .7rem;
  min-height:5rem;
  border-top:2px solid var(--parchment-dark);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  background:var(--parchment);
}
.card-exp{font-size:.78rem;line-height:1.5;color:var(--text-soft);}
.card-exp i{color:var(--brown-light);margin-right:.3rem;}
.card-cta{
  font-family:'VT323',monospace;
  font-size:1.05rem;
  color:var(--cream);
  background:var(--brown-dark);
  border:2px solid var(--brown-deeper);
  box-shadow:2px 2px 0 var(--brown-deeper);
  padding:.2rem .7rem;
  letter-spacing:.04em;
  white-space:nowrap;
  flex-shrink:0;
  transition:transform .1s,box-shadow .1s;
}
.job-card:hover .card-cta{
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--brown-deeper);
}

/* ── APPLIED SEAL ─────────────────────────────── */
.card-applied-seal{
  position:absolute;
  top:6px;right:6px;
  width:54px;height:54px;
  transform:rotate(-12deg);
  z-index:2;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(3px 3px 0 var(--brown-deeper));
}
.card-applied-seal svg{display:block;width:100%;height:100%;}
.job-card:nth-child(even) .card-applied-seal{transform:rotate(8deg);}

/* ── LEVEL BANNER ─────────────────────────────── */
.card-level-banner{
  font-family:'Press Start 2P',monospace;
  font-size:.5rem;
  padding:.35rem .75rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;
  letter-spacing:.05em;
  border-bottom:2px solid rgba(0,0,0,.25);
}
.card-level-banner--apprentice{background:var(--green);color:#B8DCA8;}
.card-level-banner--journeyman{background:#5C4610;color:var(--gold-pale);}
.card-level-banner--master{background:var(--red-master-dark);color:#F0A8A8;}
.level-banner-label{flex:1;text-align:center;letter-spacing:.08em;}
.level-banner-pips{letter-spacing:.2em;opacity:.85;flex-shrink:0;}

/* ── MODAL ────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;
  background:var(--overlay);
  z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{
  background:var(--cream);
  border:4px solid var(--brown);
  box-shadow:8px 8px 0 var(--brown-deeper),inset 0 0 0 2px var(--gold);
  max-width:700px;width:100%;
  max-height:90vh;overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
  transform:translateY(20px) scale(.97);
  transition:transform .2s;
}
.modal-overlay.open .modal{transform:translateY(0) scale(1);}

.modal-sticky{
  position:sticky;top:0;z-index:2;
}
.modal-header{
  background:#5b3218;
  padding:1.2rem 3.5rem 1.2rem 1.4rem;
  border-bottom:3px solid var(--gold);
}
.modal-header-top{
  display:flex;align-items:center;gap:1rem;
  margin-bottom:.4rem;
}
.modal-emoji{font-size:2.5rem;line-height:1;}
.modal-title{
  font-family:'VT323',monospace;
  font-size:1.8rem;
  color:var(--gold-pale);
  line-height:1.2;
}
.modal-employer{
  font-family:'VT323',monospace;
  font-size:.88rem;
  color:var(--parchment-mid);
  font-style:italic;
  font-weight:700;
}
.modal-close{
  position:absolute;top:.75rem;right:.75rem;
  width:2.2rem;height:2.2rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--brown-deeper);
  border:2px solid var(--gold);
  box-shadow:2px 2px 0 #1a0a02;
  font-family:'Press Start 2P',monospace;
  font-size:.8rem;
  line-height:1;
  color:var(--gold-light);
  cursor:pointer;
  transition:all .1s;
  z-index:3;
}
.modal-close:hover{background:var(--gold);color:var(--brown-deeper);box-shadow:none;transform:translate(1px,1px);}

.modal-body{padding:1.4rem;flex:1;overflow-y:auto;}
.modal-footer{flex-shrink:0;padding:0 1.4rem 1.4rem;background:var(--cream);}
.modal-footer.has-scroll{border-top:2px solid var(--parchment-dark);}

/* ── APPLICATION DRAWER ──────────────────────────── */
.app-drawer{
  position:absolute;left:0;right:0;
  background:var(--cream);
  border-top:3px solid var(--gold);
  box-shadow:0 -6px 16px rgba(0,0,0,.22);
  padding:1rem 1.4rem 1.1rem;
  display:flex;flex-direction:column;justify-content:center;
  gap:.75rem;
  transform:translateY(100%);
  transition:transform .4s cubic-bezier(.32,.72,0,1),visibility 0s;
  will-change:transform;
  visibility:hidden;pointer-events:none;
  z-index:15;
  overflow:visible;
}
.app-drawer.open{
  transform:translateY(0);
  visibility:visible;pointer-events:all;
}
.app-drawer-handle{
  width:2.5rem;height:.25rem;
  background:var(--gold);
  margin:0 auto;
  flex-shrink:0;
}
.app-drawer-eyebrow{
  font-family:'Press Start 2P',monospace;
  font-size:.45rem;
  color:var(--brown-dark);
  letter-spacing:.07em;
  text-transform:uppercase;
  text-align:center;
}
.app-drawer-heading{
  font-family:'VT323',monospace;
  font-size:1.35rem;
  color:var(--text);
  line-height:1.3;
  text-align:center;
}
.app-drawer-flavour{
  font-family:'VT323',monospace;
  font-size:.88rem;
  font-style:italic;
  color:var(--text-mid);
  line-height:1.55;
  text-align:center;
}
.app-drawer-sig-label{
  font-family:'Lato',sans-serif;
  font-style:italic;
  font-size:.6rem;
  color:var(--text-soft);
  text-align:center;
}
.app-drawer-sig-wrap{position:relative;}
.app-drawer-sig-wrap::after{
  content:'';
  position:absolute;
  bottom:20px;left:8px;right:8px;
  height:0;
  border-top:1px dashed var(--gold);
  opacity:.6;
  pointer-events:none;
}
.app-drawer-sig-x{
  position:absolute;
  bottom:22px;left:6px;
  font-family:'VT323',monospace;
  font-size:.9rem;
  color:var(--brown);
  pointer-events:none;
}
.app-drawer-canvas{
  display:block;
  width:100%;
  height:80px;
  background:var(--cream);
  border:2px solid var(--brown);
  touch-action:none;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='14' y='2' width='2' height='20' fill='%23C9A030'/%3E%3Cpolygon points='14,22 16,22 15,28' fill='%234A2610'/%3E%3Cpolygon points='14,4 6,8 14,12' fill='%23E8D090' opacity='0.9'/%3E%3Cpolygon points='14,10 7,14 14,17' fill='%23D4B050' opacity='0.8'/%3E%3Cpolygon points='16,4 24,8 16,12' fill='%23E8D090' opacity='0.9'/%3E%3Cpolygon points='16,10 23,14 16,17' fill='%23D4B050' opacity='0.8'/%3E%3Ccircle cx='15' cy='29' r='1.5' fill='%232C1808' opacity='0.6'/%3E%3C/svg%3E") 15 28, crosshair;
}
.app-drawer-clear{
  font-family:'Press Start 2P',monospace;
  font-size:.5rem;
  color:var(--brown);
  background:transparent;
  border:2px solid var(--brown);
  padding:.35rem .75rem;
  cursor:pointer;
  letter-spacing:.06em;
  box-shadow:2px 2px 0 var(--brown-dark);
  align-self:flex-end;
  transition:transform .1s,box-shadow .1s,background .1s;
}
.app-drawer-clear:hover{
  background:var(--parchment-mid);
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--brown-dark);
}
.sig-actions{
  display:flex;
  gap:.5rem;
  align-self:flex-end;
}
/* Footer row when drawer is open */
.modal-footer.drawer-open{
  display:flex;flex-direction:row;gap:.75rem;align-items:stretch;
  padding-top:1.4rem;
}
.modal-footer.drawer-open .modal-apply-btn{
  width:auto;flex:1;margin-top:0;
}
/* Close-drawer button — hidden until drawer is open */
.modal-close-drawer{
  display:none;
  font-family:'Press Start 2P',monospace;
  font-size:.6rem;
  color:var(--text-mid);
  background:var(--parchment-mid);
  border:2px solid var(--brown);
  padding:.85rem .8rem;
  box-shadow:2px 2px 0 var(--brown-dark);
  cursor:pointer;
  letter-spacing:.04em;
  flex-shrink:0;
  transition:transform .1s,box-shadow .1s,background .1s;
}
.modal-close-drawer:hover{
  background:var(--parchment-dark);
  transform:translate(-1px,-1px);
  box-shadow:3px 3px 0 var(--brown-dark);
}
.modal-footer.drawer-open .modal-close-drawer{display:block;}
/* Primary button — inert-send state (drawer open, no sig yet) */
.modal-apply-btn.drawer-inert{
  background:var(--text-soft);
  border-color:var(--brown-light);
  color:var(--parchment-mid);
  cursor:not-allowed;
  box-shadow:2px 2px 0 var(--brown-deeper);
}
.modal-apply-btn.drawer-inert:hover{
  transform:none;
  box-shadow:2px 2px 0 var(--brown-deeper);
  background:var(--text-soft);
}
/* Footer z-index: stays above the absolutely-positioned drawer (z-15) */
.modal > .modal-footer{position:relative;z-index:20;}

/* ── MODAL SEND SEQUENCE ─────────────────────── */
.modal-seal{
  position:absolute;
  top:1.5rem;right:1.2rem;
  width:72px;height:72px;
  opacity:0;
  transform:scale(0) rotate(-25deg);
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .05s;
  pointer-events:none;
  z-index:30;
  filter:drop-shadow(3px 3px 0 var(--red-master-dark));
}
.modal-seal.is-stamped{
  opacity:1;
  transform:scale(1) rotate(-12deg);
}
.modal-seal svg{display:block;width:100%;height:100%;}

.modal-meta{
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;
}
.modal-salary{
  font-family:'VT323',monospace;
  font-size:1.15rem;
  color:var(--green);
  letter-spacing:.04em;
  display:flex;align-items:center;gap:.7rem;
}
.modal-location{
  font-family:'VT323',monospace;
  font-size:1.15rem;
  letter-spacing:.04em;
  color:#7a5800;
  display:flex;align-items:center;gap:.7rem;
}
.modal-salary i,
.card-cat i,
.card-location i,
.modal-location i{
  width:1em;text-align:center;flex-shrink:0;
}
.modal-location i{color:var(--brown-light);}

.section-label{
  font-family:'Press Start 2P',monospace;
  font-size:.55rem;
  color:var(--brown);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:.6rem;
  margin-top:2rem;
  display:flex;align-items:center;gap:.6rem;
}
.section-label::after{content:'';flex:1;height:0;border-top:2px dashed var(--parchment-dark);}

.modal-desc{
  font-family:'VT323',monospace;
  font-size:.93rem;
  font-style:italic;
  line-height:1.75;
  color:var(--text-mid);
}

.benefits-list{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
}
.benefits-list li{
  font-family:'VT323',monospace;
  font-size:.88rem;
  color:var(--text-mid);
  display:flex;align-items:flex-start;gap:.5rem;
  padding:.4rem .6rem;
  background:var(--parchment);
}
.benefits-list li i{color:var(--gold);flex-shrink:0;margin-top:.1rem;}

.modal-exp-row{
  display:flex;align-items:center;gap:.6rem;
  padding:.8rem;
  background:var(--parchment-mid);
  margin-top:.5rem;
}
.modal-exp-row i{color:var(--brown);font-size:1rem;}
.modal-exp-row span{font-family:'VT323',monospace;font-size:.88rem;color:var(--text-mid);font-weight:700;}

.modal-apply-btn{
  display:block;
  width:100%;
  margin-top:1.4rem;
  padding:.85rem;
  font-family:'Press Start 2P',monospace;
  font-size:.7rem;
  color:var(--cream);
  background:var(--green);
  border:3px solid var(--green-mid);
  box-shadow:4px 4px 0 var(--brown-deeper);
  cursor:pointer;
  letter-spacing:.06em;
  transition:transform .1s,box-shadow .1s;
  text-align:center;
}
.modal-apply-btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--brown-deeper);
  background:var(--green-mid);
}
.modal-posted{
  text-align:center;
  font-size:.8rem;
  color:var(--text-soft);
  font-style:italic;
  margin-top:.8rem;
}

/* ── MODAL LEVEL BANNER ─────────────────────────── */
.modal-level-banner{
  font-family:'Press Start 2P',monospace;
  font-size:.5rem;
  padding:.38rem .75rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:.5rem;
  letter-spacing:.05em;
  border-bottom:2px solid rgba(0,0,0,.25);
}
.modal-level-banner--apprentice{background:var(--green);color:#B8DCA8;}
.modal-level-banner--journeyman{background:#5C4610;color:var(--gold-pale);}
.modal-level-banner--master    {background:var(--red-master-dark);color:#F0A8A8;}
.modal-level-label{flex:1;text-align:center;letter-spacing:.08em;}
.modal-pip-group{display:inline-flex;gap:.1rem;flex-shrink:0;}

@keyframes pip-flicker{
  0%,100%{opacity:1;}
  30%    {opacity:.25;}
  50%    {opacity:1;}
  70%    {opacity:.5;}
}
.modal-pip-group:first-child .modal-pip--filled:nth-child(1),
.modal-pip-group:last-child  .modal-pip--filled:nth-child(1){animation:pip-flicker 1.7s ease-in-out infinite;animation-delay:0s;}
.modal-pip-group:first-child .modal-pip--filled:nth-child(2),
.modal-pip-group:last-child  .modal-pip--filled:nth-child(2){animation:pip-flicker 1.7s ease-in-out infinite;animation-delay:.35s;}
.modal-pip-group:first-child .modal-pip--filled:nth-child(3),
.modal-pip-group:last-child  .modal-pip--filled:nth-child(3){animation:pip-flicker 1.7s ease-in-out infinite;animation-delay:.7s;}

/* Modal level glow */
.modal.modal--apprentice{
  box-shadow:
    8px 8px 0 var(--brown-deeper),
    inset 0 0 0 2px var(--gold),
    0 0 18px 4px rgba(45,90,39,.55),
    0 0 40px 8px rgba(45,90,39,.25);
}
.modal.modal--journeyman{
  box-shadow:
    8px 8px 0 var(--brown-deeper),
    inset 0 0 0 2px var(--gold),
    0 0 18px 4px rgba(154,117,16,.6),
    0 0 40px 8px rgba(154,117,16,.28);
}
.modal.modal--master{
  box-shadow:
    8px 8px 0 var(--brown-deeper),
    inset 0 0 0 2px var(--gold),
    0 0 18px 4px rgba(155,21,21,.65),
    0 0 44px 10px rgba(155,21,21,.28);
}

/* ── FOOTER ───────────────────────────────────── */
footer{
  background:var(--brown-deeper);
  border-top:4px solid var(--gold);
  box-shadow:0 -3px 0 var(--brown-dark);
  padding:1.5rem;
  text-align:center;
  position:relative;z-index:1;
}
footer p{
  font-family:'VT323',monospace;
  font-size:1.1rem;
  color:var(--parchment-mid);
  letter-spacing:.06em;
  opacity:.7;
}
footer p span{color:var(--gold-light);}

/* ── CONTRACT POPUP ───────────────────────────── */
.contract-overlay{
  position:fixed;inset:0;
  background:var(--overlay);
  z-index:1100;
  display:none;
  align-items:center;justify-content:center;
  padding:1rem;
}
.contract-overlay.is-open{display:flex;}

.contract{
  width:460px;
  max-width:100%;
  max-height:90vh;
  overflow-y:auto;
  background:var(--cream);
  border:3px solid var(--brown);
  box-shadow:4px 4px 0 var(--brown-dark);
  display:flex;flex-direction:column;
  position:relative;
  transition:transform .5s cubic-bezier(.4,0,.2,1),opacity .4s ease;
}
.contract.is-whooshing{transform:translateY(-120vh);opacity:0;}

.contract-seal{
  position:absolute;
  bottom:70px;right:24px;
  width:64px;height:64px;
  opacity:0;
  transform:scale(0) rotate(-15deg);
  transition:opacity .35s .05s,transform .4s .05s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
  z-index:10;
}
.contract-seal.is-stamped{opacity:1;transform:scale(1) rotate(-12deg);}

.contract-header{
  background:#5B3218;
  border-bottom:2px solid var(--gold);
  padding:1rem 1.5rem .8rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
  flex-shrink:0;
}
.contract-icon{font-size:1.75rem;line-height:1;flex-shrink:0;margin-top:.1rem;}
.contract-title-block{display:flex;flex-direction:column;gap:.25rem;flex:1;padding-top:.1rem;}
.contract-eyebrow{
  font-family:'Press Start 2P',monospace;
  font-size:.44rem;
  color:var(--gold-pale);
  letter-spacing:.08em;
}
.contract-title{
  font-family:'VT323',monospace;
  font-size:1.35rem;
  color:var(--gold-pale);
  line-height:1.1;
}
.contract-subtitle{
  font-family:'Lato',sans-serif;
  font-style:italic;
  font-weight:700;
  font-size:.75rem;
  color:var(--parchment-mid);
}
.contract-close{
  width:1.4rem;height:1.4rem;
  background:var(--brown-dark);
  border:2px solid var(--brown);
  color:var(--gold-pale);
  font-family:'Press Start 2P',monospace;font-size:.5rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:all .1s;
}
.contract-close:hover{background:var(--gold);color:var(--brown-deeper);}

.contract-body{
  padding:.75rem 1rem 1rem;
  display:flex;flex-direction:column;gap:1rem;
}

.contract-section-row{
  display:flex;align-items:center;gap:.6rem;width:100%;
}
.contract-section-label{
  font-family:'Press Start 2P',monospace;
  font-size:.44rem;
  color:var(--brown);
  white-space:nowrap;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.contract-dashed-line{
  flex:1;height:0;
  border-top:1px dashed var(--gold);
}

.contract-intro{
  font-family:'VT323',monospace;
  font-size:.88rem;
  color:var(--text-mid);
  line-height:1.6;
}
.contract-intro strong{color:var(--text);}

.contract-clauses{list-style:none;display:flex;flex-direction:column;gap:.3rem;}
.contract-clause{
  background:var(--parchment);
  padding:.375rem .55rem;
  display:flex;align-items:flex-start;gap:.4rem;
}
.contract-clause-bullet{
  color:var(--gold);font-size:.65rem;
  flex-shrink:0;line-height:1.6;
}
.contract-clause-text{
  font-family:'VT323',monospace;
  font-size:.82rem;
  color:var(--text-soft);
  line-height:1.5;
}
.contract-clause-text strong{color:var(--text-mid);font-weight:700;}
.contract-clause-text em{color:var(--text-mid);font-style:normal;}

.contract-sig-section{display:flex;flex-direction:column;gap:.5rem;}
.contract-sig-instruction{
  font-family:'VT323',monospace;
  font-size:.82rem;
  color:var(--text-soft);
}
.contract-sig-wrap{
  position:relative;
  border:2px solid var(--brown);
  background:var(--cream);
}
.contract-sig-wrap canvas{
  display:block;width:100%;height:80px;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Crect x='14' y='2' width='2' height='20' fill='%23C9A030'/%3E%3Cpolygon points='14,22 16,22 15,28' fill='%234A2610'/%3E%3Cpolygon points='14,4 6,8 14,12' fill='%23E8D090' opacity='0.9'/%3E%3Cpolygon points='14,10 7,14 14,17' fill='%23D4B050' opacity='0.8'/%3E%3Cpolygon points='16,4 24,8 16,12' fill='%23E8D090' opacity='0.9'/%3E%3Cpolygon points='16,10 23,14 16,17' fill='%23D4B050' opacity='0.8'/%3E%3Ccircle cx='15' cy='29' r='1.5' fill='%232C1808' opacity='0.6'/%3E%3C/svg%3E") 15 28,crosshair;
}
.contract-sig-wrap::after{
  content:'';
  position:absolute;
  bottom:18px;left:10px;right:10px;
  height:0;
  border-top:1px dashed var(--gold);
  opacity:.6;
  pointer-events:none;
}
.contract-sig-x{
  position:absolute;
  bottom:20px;left:10px;
  font-family:'VT323',monospace;
  font-size:1rem;
  color:var(--brown);
  line-height:1;
  pointer-events:none;
}
.contract-clear-btn{
  align-self:flex-end;
  font-family:'Press Start 2P',monospace;font-size:.44rem;
  color:var(--text-soft);
  background:none;
  border:1px solid var(--parchment-dark);
  padding:.25rem .5rem;
  cursor:pointer;
  letter-spacing:.04em;
  transition:border-color .1s,color .1s;
}
.contract-clear-btn:hover{border-color:var(--brown);color:var(--text-mid);}

.contract-send-btn{
  background:var(--brown-deeper);
  border:2px solid var(--text);
  box-shadow:2px 2px 0 var(--text);
  color:var(--cream);
  font-family:'VT323',monospace;
  font-size:1.05rem;
  letter-spacing:.04em;
  padding:.3rem .75rem;
  height:2rem;
  cursor:pointer;
  width:100%;
  text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .1s,box-shadow .1s;
}
.contract-send-btn.is-visible{opacity:1;pointer-events:all;}
.contract-send-btn:hover{background:var(--brown-dark);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--text);}

.modal-apply-btn.is-applied{
  background:var(--text-soft);
  border-color:var(--brown-light);
  box-shadow:2px 2px 0 var(--brown-deeper);
  color:var(--parchment-mid);
  cursor:default;
  pointer-events:none;
  transform:none;
}

/* ── SCROLLBAR ────────────────────────────────── */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--parchment-mid);}
::-webkit-scrollbar-thumb{background:var(--brown);border:2px solid var(--parchment-mid);}
::-webkit-scrollbar-thumb:hover{background:var(--brown-dark);}

@media(max-width:767px){
  .hero{min-height:260px;}
  .hero-torch{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
  }
  .hero-torch-row .hero-torch:first-child{left:0;}
  .hero-torch-row .hero-torch:last-child{right:0;}
  .hero-divider{font-size:1rem;width:72%;margin-left:auto;margin-right:auto;}
  .hero-tagline{font-size:clamp(1.1rem,4vw,2rem);}
}
@media(max-width:600px){
  .hero h1{font-size:1rem;}
  .controls{padding:0 .75rem;}
  .job-grid{grid-template-columns:1fr;padding:0 .75rem 4rem;}
  .benefits-list{grid-template-columns:1fr;}
}