:root{
  --cream:#f9f7eb; --cream-alt:#ede4d3; --ink:#241a12;
  --rust:#ac410c; --orange:#e43e20; --orange-lt:#f5a659;
  --gold:#f0b034; --tan:#d8a37b; --steel:#21353e; --brown:#43331e;
  --body-c:#4b3a2c; --mut:#6d573f; --line:#a99271;
  --disp:"Space Grotesk",sans-serif; --body:"Work Sans",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:16px/1.7 var(--body);letter-spacing:.4px;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,.eyebrow{font-family:var(--disp);text-transform:uppercase;font-weight:700}
a{color:var(--rust)}
img{display:block;max-width:100%}

.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
.tread{height:26px;position:relative;z-index:3;background-color:var(--ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='30' viewBox='0 0 64 30'%3E%3Crect width='64' height='30' fill='%23241a12'/%3E%3Crect x='6' y='5' width='36' height='20' rx='4' fill='%23f0b034'/%3E%3Crect x='48' y='11' width='10' height='8' rx='3' fill='%23f0b034' opacity='.55'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-size:64px 30px}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
.wrap--wide{max-width:1200px}

header.hero{background:var(--steel);color:var(--cream);padding:52px 0 44px;position:relative;overflow:hidden}
header.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,#f9f7eb 1.4px,transparent 1.5px);background-size:16px 16px;opacity:.06}
.hero .eyebrow{color:var(--gold);font-size:12px;letter-spacing:3px;display:block;margin-bottom:14px}
.hero h1{font-size:clamp(28px,5vw,46px);line-height:1.05;letter-spacing:2px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p{max-width:640px;margin-top:16px;color:#cdd6da;font-size:16px}
.hero .back{display:inline-block;margin-bottom:16px;color:var(--gold);font-family:var(--disp);
  text-transform:uppercase;font-size:11px;letter-spacing:2px;text-decoration:none}

section{padding:48px 0}
.secnum{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:2.5px;
  color:var(--ink);display:flex;align-items:center;gap:16px;margin-bottom:20px}
.secnum b{font-size:44px;line-height:1;color:var(--rust);letter-spacing:0;font-weight:700}
h2{font-size:clamp(20px,3vw,26px);line-height:1.15;letter-spacing:1.5px;margin-bottom:6px}
h2 em{color:var(--rust);font-style:normal}

/* ---------- FORM ---------- */
.card{background:#fff;border:3px solid var(--ink);border-radius:0;padding:30px 28px;margin-bottom:36px;
  box-shadow:10px 10px 0 rgba(172,65,12,.9)}
.card > .secnum{margin-top:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:2px}
.field.full{grid-column:1 / -1}
.field label{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:11.5px;
  letter-spacing:1.3px;color:#57432e}
.field .opt{font-weight:400;color:#8a7458;text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{font:16px var(--body);padding:13px 14px;border:1.5px solid var(--line);
  border-radius:0;background:#fff;color:var(--ink);width:100%}
.field input::placeholder,.field textarea::placeholder{color:#8a7458;opacity:1}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--rust);
  box-shadow:0 0 0 3px rgba(172,65,12,.12)}
.field select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232a1f14' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--body-c)}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--rust)}
.hint{font-size:13.5px;color:var(--mut);margin-top:4px}

/* ---------- DROPZONE ---------- */
.drop{border:3px solid var(--rust);border-radius:0;background:#fbe8c8;padding:30px 20px;text-align:center;
  cursor:pointer;transition:.2s;box-shadow:4px 4px 0 rgba(172,65,12,.35)}
.drop:hover,.drop.over{background:var(--orange-lt);box-shadow:4px 4px 0 rgba(36,26,18,.5)}
.drop:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(36,26,18,.5)}
.drop__ic{width:46px;height:46px;color:var(--rust);margin:0 auto 10px;display:block}
.drop__big{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:15px;color:var(--ink)}
.drop__sub{font-size:13.5px;color:var(--mut);margin-top:6px}
.drop input{display:none}

.files{margin-top:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.file{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--ink);border-radius:0;overflow:hidden}
.file__thumb{width:100%;height:118px;object-fit:cover;background:var(--cream-alt);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:36px}
.file__body{flex:1 1 auto;min-width:0;padding:8px 10px 10px;box-sizing:border-box}
.file__name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file__meta{font-size:11px;color:var(--mut)}
.file__cap{width:100%;box-sizing:border-box;margin-top:6px;font:12.5px var(--body);padding:7px 9px;border:1.5px solid var(--line);
  border-radius:0;background:#fff;color:var(--ink)}
.file__cap:focus{outline:none;border-color:var(--rust);box-shadow:0 0 0 3px rgba(172,65,12,.12)}
.file__bar{height:5px;background:var(--cream-alt);border-radius:3px;overflow:hidden;margin-top:7px}
.file__bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.file.done .file__bar span{background:#6fae54}
.file__x{position:absolute;top:6px;right:6px;width:24px;height:24px;border:none;border-radius:50%;
  background:rgba(10,9,7,.55);color:#fff;font-size:14px;line-height:24px;text-align:center;cursor:pointer;padding:0}
.file__x:hover{background:var(--orange);color:#fff}

/* ---------- BUTTONS / STATES ---------- */
.btn{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:2px;
  padding:15px 30px;background:var(--rust);color:var(--cream);border:none;border-radius:0;cursor:pointer;
  box-shadow:5px 5px 0 var(--ink);transition:.15s}
.btn:hover{background:var(--ink);box-shadow:5px 5px 0 rgba(172,65,12,.9)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:default}
.btn--ghost{background:transparent;border:3px solid var(--ink);color:var(--ink);box-shadow:none}
.btn--ghost:hover{background:var(--ink);color:var(--cream);box-shadow:none}
.submit-row{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:8px}
.submit-row .btn{width:100%;font-size:16px;letter-spacing:3px;padding:22px 30px}
.overall{flex:1 1 220px;min-width:200px;display:none}
.overall.show{display:block}
.overall__bar{height:10px;background:var(--cream-alt);border-radius:5px;overflow:hidden}
.overall__bar span{display:block;height:100%;width:0;background:var(--gold);transition:width .2s}
.overall__txt{font-size:12.5px;color:var(--mut);margin-top:5px}
.msg{padding:14px 16px;border-radius:8px;margin-top:16px;font-size:14.5px;display:none}
.msg.show{display:block}
.msg--err{background:#fce3d6;border:1.5px solid var(--orange);color:#992f0a}

.done-screen{display:none;text-align:center;padding:20px 0}
.done-screen.show{display:block}
.done-screen .tick{width:76px;height:76px;border-radius:50%;background:#6fae54;color:#fff;font-size:44px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}

footer{background:var(--ink);color:#cdb9a0;padding:36px 0;text-align:center;font-size:13.5px;margin-top:10px}
footer .word{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--cream);font-size:17px}
footer a{color:var(--gold)}

/* ---------- DASHBOARD ---------- */
.gate{max-width:420px;margin:60px auto;background:#fff;border:1px solid #e2d6bd;border-radius:10px;padding:28px;text-align:center}
.gate input{font:16px var(--body);padding:12px;border:1.5px solid var(--line);border-radius:6px;width:100%;margin:14px 0}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:22px 0}
.toolbar select{font:14px var(--body);padding:9px 34px 9px 12px;border:1.5px solid var(--line);border-radius:6px;background:#fffdf7;
  appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232a1f14' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center}
.toolbar .count{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:11px;letter-spacing:1.5px;color:var(--mut)}
.toolbar .spacer{flex:1 1 auto}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:8px}
table.dash{border-collapse:collapse;width:100%;min-width:900px;font-size:13.5px;background:#fff}
table.dash th{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:10px;letter-spacing:1px;
  background:var(--ink);color:var(--cream);padding:11px 12px;text-align:left;white-space:nowrap;position:sticky;top:0}
table.dash td{padding:11px 12px;border-bottom:1px solid #eadfc8;vertical-align:top}
table.dash tr:hover td{background:#fff8ea}
.pill{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:9.5px;letter-spacing:.8px;
  padding:3px 9px;border-radius:2px;border:1.5px solid var(--ink);white-space:nowrap}
.media-list{display:flex;flex-direction:column;gap:9px;min-width:230px}
.media-item{display:flex;gap:9px;align-items:center;text-decoration:none;color:var(--ink)}
.mi-thumb{width:46px;height:46px;border-radius:5px;object-fit:cover;border:1px solid var(--line);
  background:var(--cream-alt);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--steel)}
.mi-txt{display:flex;flex-direction:column;min-width:0}
.mi-cap{font-size:12.5px;color:var(--ink);line-height:1.35}
.mi-cap i{color:#bcae93}
.mi-fn{font-size:11px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.media-item:hover .mi-cap{color:var(--rust)}
.dash-del{background:none;border:none;color:var(--tan);font-size:18px;cursor:pointer}
.dash-del:hover{color:var(--orange)}

@media(max-width:640px){
  .grid{grid-template-columns:1fr;gap:14px}
  .card{padding:20px 16px;margin-bottom:16px}
  section{padding:26px 0}
  .wrap{padding:0 16px}
  header.hero{padding:38px 0 32px}
  .hero h1{letter-spacing:1px}
  .group{padding:16px 14px 14px}
  .drop{padding:24px 12px}
  .drop__big{font-size:14px}
  .drop__sub{display:none}
  .drop__ic{width:40px;height:40px}
  .files{grid-template-columns:repeat(2,1fr);gap:9px}
  .file__thumb{height:96px}
  .submit-row .btn{padding:18px 20px;font-size:14.5px;letter-spacing:2px}
  .check{font-size:14px}
  .card{box-shadow:6px 6px 0 rgba(172,65,12,.9)}
  .secnum{gap:12px;margin-bottom:16px}
  .secnum b{font-size:34px}
}

/* ---- upload groups ---- */
.group .field{margin-bottom:20px}
.group{border:2px dashed var(--brown);border-radius:0;background:var(--cream);padding:24px 22px 22px;margin:0 0 24px}
.group__head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 18px}
.group__toggle{display:flex;align-items:center;gap:10px;background:none;border:none;padding:0;cursor:pointer;
  min-width:0;text-align:left}
.group__num{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;color:var(--rust);white-space:nowrap}
.group__title{display:none;font:600 13.5px var(--body);color:var(--body-c);letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.group__chev{color:var(--rust);font-size:14px;line-height:1;transition:transform .15s}
.group--collapsed .group__chev{transform:rotate(-90deg)}
.group--collapsed .group__body{display:none}
.group--collapsed .group__head{margin:0}
.group--collapsed .group__title{display:block}
.group__x{background:none;border:none;color:#9a6a4a;font:700 26px/1 var(--disp);cursor:pointer;padding:0 4px}
.group__x:hover{color:var(--orange)}
.group .drop{margin-top:12px;padding:22px 14px}
.group .drop__big{font-size:15px}
.btn--addgroup{background:transparent;border:3px solid var(--rust);color:var(--rust);width:100%;margin-top:4px;box-shadow:none}
.btn--addgroup:hover{background:var(--rust);color:#fff}

/* ---- dashboard groups ---- */
.grp{border:1px solid #e6dbc4;border-left:4px solid var(--gold);border-radius:8px;background:#fffdf6;padding:8px 10px;margin:0 0 8px}
.grp-head{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.grp-label{font-weight:700;font-size:13px;color:var(--brown)}
.grp-count{font-size:11px;color:var(--mut);background:var(--cream-alt);border-radius:10px;padding:2px 8px}
.grp-comment-btn{margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;cursor:pointer;font-size:13px;padding:2px 7px}
.grp-comment-btn:hover{border-color:var(--rust)}
.grp-comment{font-size:12px;color:var(--body-c);background:#fdf6e4;border-radius:6px;padding:5px 8px;margin:0 0 6px}
.file.err{border-color:#e43e20;background:#fdf0ec}

/* ---- how-to video popup ---- */
.btn--howto{margin-top:18px;background:var(--gold);border:3px solid var(--gold);color:var(--ink)}
.btn--howto:hover{background:var(--orange-lt);border-color:var(--orange-lt)}
.howto{position:fixed;inset:0;z-index:80;background:rgba(36,26,18,.82);display:flex;align-items:center;justify-content:center;padding:18px}
.howto[hidden]{display:none}
.howto__box{background:var(--cream);border-radius:14px;max-width:860px;width:100%;padding:14px 16px 16px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.howto__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}
.howto__title{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:14px;color:var(--rust)}
.howto__x{background:none;border:none;font:700 26px/1 var(--body);color:var(--brown);cursor:pointer;padding:0 4px}
.howto__x:hover{color:var(--orange)}
.howto video{width:100%;border-radius:8px;background:#000;display:block}
.howto__hint{font-size:12.5px;color:var(--mut);margin:10px 2px 0;text-align:center}