/* ============================================================
   THE BADGE — flourishes for badge.html ONLY.
   Loaded after site.css. Every selector is prefixed .bdg-
   so nothing here can leak onto any other page.
   Two new materials: LAMINATE (the card) and CORK (the board).
   ============================================================ */

/* ── the laminated card ───────────────────────────────────── */
.bdg-lam{ max-width:560px; margin:0 auto }

.bdg-badge{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fdf7e8,#e6d5b4);
  color:#1b1410;
  border-radius:11px;
  transform:rotate(-1.1deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 7px rgba(255,255,255,.12),
    0 0 0 8px rgba(0,0,0,.42),
    0 24px 48px rgba(0,0,0,.66),
    0 0 34px rgba(255,45,149,.16);
}
/* the gloss streak. It is 1994 laminate. It has one job. */
.bdg-badge::after{
  content:''; position:absolute; inset:0; pointer-events:none; border-radius:11px;
  background:linear-gradient(114deg,
    transparent 0 36%,
    rgba(255,255,255,.34) 43%,
    rgba(255,255,255,.05) 51%,
    transparent 58%);
}
.bdg-punch{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:52px; height:10px; border-radius:6px; z-index:3;
  background:#0b0410;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.28);
}

.bdg-badge-hd{
  padding:28px 18px 14px; text-align:center;
  background:linear-gradient(180deg,#26081a,#140515);
  border-bottom:3px solid #8a1330;
}
.bdg-org{
  font-family:'Bungee',sans-serif; font-size:.56rem; letter-spacing:.13em;
  line-height:1.65; margin:0; color:#ffe6f3;
  text-shadow:0 0 9px rgba(255,45,149,.85);
}
.bdg-acr{
  font-family:'Bungee',sans-serif; font-size:clamp(1.25rem,6vw,1.75rem);
  letter-spacing:.16em; margin:8px 0 0; color:#fff;
  text-shadow:0 0 7px #ff2d95, 0 0 22px rgba(255,45,149,.7);
}
.bdg-motto{
  font-family:'Courier Prime',monospace; font-style:italic; font-size:.62rem;
  letter-spacing:.08em; color:#c8a6bb; margin:7px 0 0;
}

.bdg-badge-bd{
  position:relative; z-index:2;
  display:grid; grid-template-columns:106px 1fr; gap:16px; padding:16px 18px 6px;
}
.bdg-photo{
  aspect-ratio:3/4; border:2px solid #1b1410; border-radius:1px;
  background:repeating-linear-gradient(45deg,#cdbc9e 0 7px,#c2b092 7px 14px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:5px; padding:8px;
}
.bdg-photo b{
  font-family:'Bungee',sans-serif; font-weight:400; font-size:.46rem;
  letter-spacing:.11em; color:#4c3f30; line-height:1.6;
}
.bdg-photo i{ font-size:.62rem; font-style:italic; color:#6a5a48; line-height:1.35 }

/* the field list on the card reuses .fields; only the box changes */
.bdg-badge-bd .fields{ padding:0; align-content:start }

.bdg-badge-ft{
  position:relative; z-index:2;
  border-top:2px dashed #b9a98f; margin-top:10px; padding:14px 18px 16px;
  display:grid; gap:14px; grid-template-columns:1fr 1fr;
}
.bdg-sig{
  font-family:'Caveat',cursive; font-size:1.28rem; line-height:1.1; color:#2b4bd4;
  border-bottom:1px solid #1b1410; padding-bottom:3px; white-space:nowrap; overflow:hidden;
}
.bdg-siglbl{
  font-family:'Bungee',sans-serif; font-size:.44rem; letter-spacing:.12em;
  color:#6a5a48; margin:5px 0 0; text-transform:uppercase;
}
.bdg-cap{
  font-size:.68rem; color:var(--carbon); text-align:center;
  margin:20px auto 0; max-width:48ch; line-height:1.7;
}

/* ── the corkboard ────────────────────────────────────────── */
.bdg-board{
  max-width:720px; margin:0 auto;
  padding:clamp(24px,5vw,40px) clamp(16px,4vw,34px);
  border-radius:3px;
  background-color:#6b4d2c;
  background-image:
    radial-gradient(rgba(0,0,0,.22) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.5px),
    radial-gradient(rgba(0,0,0,.13) 1px, transparent 2px);
  background-size:9px 9px, 13px 13px, 21px 21px;
  background-position:0 0, 4px 6px, 9px 3px;
  box-shadow:
    inset 0 0 70px rgba(0,0,0,.55),
    0 0 0 9px #3a2612,
    0 0 0 11px rgba(0,0,0,.55),
    0 24px 52px rgba(0,0,0,.68);
}

.bdg-node{
  position:relative;
  max-width:440px; margin:0 auto;
  background:linear-gradient(180deg,#fffaec,#f3e6cb);
  color:#1b1410; border-radius:2px;
  padding:15px 17px 14px;
  font-size:.82rem; line-height:1.55;
  box-shadow:0 12px 22px rgba(0,0,0,.48), 0 1px 0 rgba(255,255,255,.6) inset;
}
.bdg-node.a{ transform:rotate(-1.3deg) }
.bdg-node.b{ transform:rotate(1.5deg) }
.bdg-node.c{ transform:rotate(-.6deg) }
.bdg-node p{ margin:0; color:#2a2018 }
.bdg-node p + p{ margin-top:8px }
.bdg-lbl{
  font-family:'Bungee',sans-serif; font-size:.46rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8a1330; margin:0 0 6px !important;
}
.bdg-tack{
  position:absolute; top:-8px; left:50%; margin-left:-8px;
  width:16px; height:16px; border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ffa3a3, #8a1330 70%);
  box-shadow:0 3px 7px rgba(0,0,0,.6);
}
.bdg-tack.g{ background:radial-gradient(circle at 34% 28%, #c8ffbf, #1d6b2a 70%) }
.bdg-tack.y{ background:radial-gradient(circle at 34% 28%, #ffe1a3, #a56b12 70%) }

/* the string. Straight, taut, slightly off-true. */
.bdg-thread{
  width:2px; height:clamp(26px,4.6vw,42px); margin:0 auto;
  background:linear-gradient(180deg, rgba(196,24,44,.30), #e0304c 26%, #ff5a72 52%, #e0304c 76%, rgba(196,24,44,.30));
  box-shadow:0 0 9px rgba(224,48,76,.6);
}
.bdg-thread.t1{ transform:rotate(6deg) }
.bdg-thread.t2{ transform:rotate(-7deg) }
.bdg-thread.t3{ transform:rotate(3deg) }
.bdg-thread.t4{ transform:rotate(-4deg) }

.bdg-final{
  max-width:500px;
  background:linear-gradient(180deg,#fff8dd,#f6e7bb);
  border:3px double #8a1330;
  text-align:center;
}
.bdg-node.bdg-final{ transform:rotate(-.4deg) }
.bdg-concl{
  font-family:'Bungee',sans-serif; font-weight:400;
  font-size:clamp(.92rem,3.6vw,1.28rem); letter-spacing:.05em; line-height:1.4;
  color:#8a1330; margin:8px 0 0 !important;
}
.bdg-boardnote{
  font-family:'Caveat',cursive; font-size:1.24rem; line-height:1.4;
  color:var(--ballpoint); text-align:center; max-width:44ch;
  margin:22px auto 0; background:rgba(242,228,203,.92);
  padding:12px 18px; border-radius:2px; transform:rotate(.8deg);
  box-shadow:0 10px 20px rgba(0,0,0,.45);
}

/* ── the sworn oath block ─────────────────────────────────── */
.bdg-oath{
  max-width:640px; margin:0 auto; padding:20px 24px;
  border:2px dashed rgba(255,178,77,.5); border-radius:3px;
  background:rgba(30,20,4,.35); text-align:center;
}
.bdg-oath p{
  font-family:'Caveat',cursive; font-size:1.34rem; line-height:1.5;
  color:#ffdda8; margin:0;
}
.bdg-oath .bdg-oathlbl{
  font-family:'Bungee',sans-serif; font-size:.52rem; letter-spacing:.2em;
  color:var(--tallow); margin:0 0 12px; text-transform:uppercase;
}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:560px){
  .bdg-badge{ transform:none }
  .bdg-badge-bd{ grid-template-columns:1fr }
  .bdg-photo{ max-width:150px; margin:0 auto }
  .bdg-badge-ft{ grid-template-columns:1fr }
  .bdg-sig{ font-size:1.12rem }
  .bdg-node.a,.bdg-node.b,.bdg-node.c,
  .bdg-node.bdg-final,
  .bdg-boardnote{ transform:none }
}

@media (prefers-reduced-motion:reduce){
  .bdg-badge,.bdg-node,.bdg-thread,.bdg-boardnote{
    animation:none !important; transition:none !important;
  }
}